| 1 | "use strict";
|
|---|
| 2 |
|
|---|
| 3 | Object.defineProperty(exports, "__esModule", {
|
|---|
| 4 | value: true
|
|---|
| 5 | });
|
|---|
| 6 | exports.useYAxisDomain = exports.useYAxis = exports.useXAxisDomain = exports.useXAxis = exports.usePlotArea = exports.useOffset = exports.useIsTooltipActive = exports.useActiveTooltipLabel = exports.useActiveTooltipDataPoints = exports.useActiveTooltipCoordinate = void 0;
|
|---|
| 7 | var _cartesianAxisSlice = require("./state/cartesianAxisSlice");
|
|---|
| 8 | var _axisSelectors = require("./state/selectors/axisSelectors");
|
|---|
| 9 | var _hooks = require("./state/hooks");
|
|---|
| 10 | var _PanoramaContext = require("./context/PanoramaContext");
|
|---|
| 11 | var _tooltipSelectors = require("./state/selectors/tooltipSelectors");
|
|---|
| 12 | var _selectChartOffset = require("./state/selectors/selectChartOffset");
|
|---|
| 13 | var _selectPlotArea = require("./state/selectors/selectPlotArea");
|
|---|
| 14 | var useXAxis = xAxisId => {
|
|---|
| 15 | var isPanorama = (0, _PanoramaContext.useIsPanorama)();
|
|---|
| 16 | return (0, _hooks.useAppSelector)(state => (0, _axisSelectors.selectAxisWithScale)(state, 'xAxis', xAxisId, isPanorama));
|
|---|
| 17 | };
|
|---|
| 18 | exports.useXAxis = useXAxis;
|
|---|
| 19 | var useYAxis = yAxisId => {
|
|---|
| 20 | var isPanorama = (0, _PanoramaContext.useIsPanorama)();
|
|---|
| 21 | return (0, _hooks.useAppSelector)(state => (0, _axisSelectors.selectAxisWithScale)(state, 'yAxis', yAxisId, isPanorama));
|
|---|
| 22 | };
|
|---|
| 23 |
|
|---|
| 24 | /**
|
|---|
| 25 | * Returns the active tooltip label. The label is one of the values from the chart data,
|
|---|
| 26 | * and is used to display in the tooltip content.
|
|---|
| 27 | *
|
|---|
| 28 | * Returns undefined if there is no active user interaction or if used outside a chart context
|
|---|
| 29 | *
|
|---|
| 30 | * @returns ActiveLabel
|
|---|
| 31 | */
|
|---|
| 32 | exports.useYAxis = useYAxis;
|
|---|
| 33 | var useActiveTooltipLabel = () => {
|
|---|
| 34 | return (0, _hooks.useAppSelector)(_tooltipSelectors.selectActiveLabel);
|
|---|
| 35 | };
|
|---|
| 36 |
|
|---|
| 37 | /**
|
|---|
| 38 | * Returns the offset of the chart in pixels.
|
|---|
| 39 | *
|
|---|
| 40 | * Offset defines the blank space between the chart and the plot area.
|
|---|
| 41 | * This blank space is occupied by supporting elements like axes, legends, and brushes.
|
|---|
| 42 | *
|
|---|
| 43 | * The offset includes:
|
|---|
| 44 | *
|
|---|
| 45 | * - Margins
|
|---|
| 46 | * - Width and height of the axes
|
|---|
| 47 | * - Width and height of the legend
|
|---|
| 48 | * - Brush height
|
|---|
| 49 | *
|
|---|
| 50 | * If you are interested in the margin alone, use {@link useMargin} instead.
|
|---|
| 51 | *
|
|---|
| 52 | * The offset is independent of charts position on the page, meaning it does not change as the chart is scrolled or resized.
|
|---|
| 53 | *
|
|---|
| 54 | * It is also independent of the scale and zoom, meaning that as the user zooms in and out,
|
|---|
| 55 | * the numbers will not change as the chart gets visually larger or smaller.
|
|---|
| 56 | *
|
|---|
| 57 | * This hook must be used within a chart context (inside a `<LineChart>`, `<BarChart>`, etc.).
|
|---|
| 58 | * This hook returns `undefined` if used outside a chart context.
|
|---|
| 59 | *
|
|---|
| 60 | * @returns Offset of the chart in pixels, or undefined if used outside a chart context.
|
|---|
| 61 | */
|
|---|
| 62 | exports.useActiveTooltipLabel = useActiveTooltipLabel;
|
|---|
| 63 | var useOffset = () => {
|
|---|
| 64 | return (0, _hooks.useAppSelector)(_selectChartOffset.selectChartOffset);
|
|---|
| 65 | };
|
|---|
| 66 |
|
|---|
| 67 | /**
|
|---|
| 68 | * Plot area is the area where the actual chart data is rendered.
|
|---|
| 69 | * This means: bars, lines, scatter points, etc.
|
|---|
| 70 | *
|
|---|
| 71 | * The plot area is calculated based on the chart dimensions and the offset.
|
|---|
| 72 | *
|
|---|
| 73 | * Plot area `width` and `height` are the dimensions in pixels;
|
|---|
| 74 | * `x` and `y` are the coordinates of the top-left corner of the plot area relative to the chart container.
|
|---|
| 75 | *
|
|---|
| 76 | * They are also independent of the scale and zoom, meaning that as the user zooms in and out,
|
|---|
| 77 | * the plot area dimensions will not change as the chart gets visually larger or smaller.
|
|---|
| 78 | *
|
|---|
| 79 | * This hook must be used within a chart context (inside a `<LineChart>`, `<BarChart>`, etc.).
|
|---|
| 80 | * This hook returns `undefined` if used outside a chart context.
|
|---|
| 81 | *
|
|---|
| 82 | * @returns Plot area of the chart in pixels, or undefined if used outside a chart context.
|
|---|
| 83 | */
|
|---|
| 84 | exports.useOffset = useOffset;
|
|---|
| 85 | var usePlotArea = () => {
|
|---|
| 86 | return (0, _hooks.useAppSelector)(_selectPlotArea.selectPlotArea);
|
|---|
| 87 | };
|
|---|
| 88 |
|
|---|
| 89 | /**
|
|---|
| 90 | * Returns the currently active data points being displayed in the Tooltip.
|
|---|
| 91 | * Active means that it is currently visible; this hook will return `undefined` if there is no current interaction.
|
|---|
| 92 | *
|
|---|
| 93 | * This follows the `<Tooltip />` props, if the Tooltip element is present in the chart.
|
|---|
| 94 | * If there is no `<Tooltip />` then this hook will follow the default Tooltip props.
|
|---|
| 95 | *
|
|---|
| 96 | * Data point is whatever you pass as an input to the chart using the `data={}` prop.
|
|---|
| 97 | *
|
|---|
| 98 | * This returns an array because a chart can have multiple graphical items in it (multiple Lines for example)
|
|---|
| 99 | * and tooltip with `shared={true}` will display all items at the same time.
|
|---|
| 100 | *
|
|---|
| 101 | * Returns undefined when used outside a chart context.
|
|---|
| 102 | *
|
|---|
| 103 | * @returns Data points that are currently visible in a Tooltip
|
|---|
| 104 | */
|
|---|
| 105 | exports.usePlotArea = usePlotArea;
|
|---|
| 106 | var useActiveTooltipDataPoints = () => {
|
|---|
| 107 | return (0, _hooks.useAppSelector)(_tooltipSelectors.selectActiveTooltipDataPoints);
|
|---|
| 108 | };
|
|---|
| 109 |
|
|---|
| 110 | /**
|
|---|
| 111 | * Returns the calculated domain of an X-axis.
|
|---|
| 112 | *
|
|---|
| 113 | * The domain can be numerical: `[min, max]`, or categorical: `['a', 'b', 'c']`.
|
|---|
| 114 | *
|
|---|
| 115 | * The type of the domain is defined by the `type` prop of the XAxis.
|
|---|
| 116 | *
|
|---|
| 117 | * The values of the domain are calculated based on the data and the `dataKey` of the axis.
|
|---|
| 118 | *
|
|---|
| 119 | * If the chart has a Brush, the domain will be filtered to the brushed indexes if the hook is used outside a Brush context,
|
|---|
| 120 | * and the full domain will be returned if the hook is used inside a Brush context.
|
|---|
| 121 | *
|
|---|
| 122 | * @param xAxisId The `xAxisId` of the X-axis. Defaults to `0` if not provided.
|
|---|
| 123 | * @returns The domain of the X-axis, or `undefined` if it cannot be calculated or if used outside a chart context.
|
|---|
| 124 | */
|
|---|
| 125 | exports.useActiveTooltipDataPoints = useActiveTooltipDataPoints;
|
|---|
| 126 | var useXAxisDomain = exports.useXAxisDomain = function useXAxisDomain() {
|
|---|
| 127 | var xAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _cartesianAxisSlice.defaultAxisId;
|
|---|
| 128 | var isPanorama = (0, _PanoramaContext.useIsPanorama)();
|
|---|
| 129 | return (0, _hooks.useAppSelector)(state => (0, _axisSelectors.selectAxisDomain)(state, 'xAxis', xAxisId, isPanorama));
|
|---|
| 130 | };
|
|---|
| 131 |
|
|---|
| 132 | /**
|
|---|
| 133 | * Returns the calculated domain of a Y-axis.
|
|---|
| 134 | *
|
|---|
| 135 | * The domain can be numerical: `[min, max]`, or categorical: `['a', 'b', 'c']`.
|
|---|
| 136 | *
|
|---|
| 137 | * The type of the domain is defined by the `type` prop of the YAxis.
|
|---|
| 138 | *
|
|---|
| 139 | * The values of the domain are calculated based on the data and the `dataKey` of the axis.
|
|---|
| 140 | *
|
|---|
| 141 | * Does not interact with Brushes, as Y-axes do not support brushing.
|
|---|
| 142 | *
|
|---|
| 143 | * @param yAxisId The `yAxisId` of the Y-axis. Defaults to `0` if not provided.
|
|---|
| 144 | * @returns The domain of the Y-axis, or `undefined` if it cannot be calculated or if used outside a chart context.
|
|---|
| 145 | */
|
|---|
| 146 | var useYAxisDomain = exports.useYAxisDomain = function useYAxisDomain() {
|
|---|
| 147 | var yAxisId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _cartesianAxisSlice.defaultAxisId;
|
|---|
| 148 | var isPanorama = (0, _PanoramaContext.useIsPanorama)();
|
|---|
| 149 | return (0, _hooks.useAppSelector)(state => (0, _axisSelectors.selectAxisDomain)(state, 'yAxis', yAxisId, isPanorama));
|
|---|
| 150 | };
|
|---|
| 151 |
|
|---|
| 152 | /**
|
|---|
| 153 | * Returns true if the {@link Tooltip} is currently active (visible).
|
|---|
| 154 | *
|
|---|
| 155 | * Returns false if the Tooltip is not active or if used outside a chart context.
|
|---|
| 156 | *
|
|---|
| 157 | * Recharts only allows one Tooltip per chart, so this hook does not take any parameters.
|
|---|
| 158 | * Weird things may happen if you have multiple Tooltip components in the same chart so please don't do that.
|
|---|
| 159 | *
|
|---|
| 160 | * @returns {boolean} True if the Tooltip is active, false otherwise.
|
|---|
| 161 | * @since 3.7
|
|---|
| 162 | */
|
|---|
| 163 | var useIsTooltipActive = () => {
|
|---|
| 164 | var _useAppSelector;
|
|---|
| 165 | return (_useAppSelector = (0, _hooks.useAppSelector)(_tooltipSelectors.selectIsTooltipActive)) !== null && _useAppSelector !== void 0 ? _useAppSelector : false;
|
|---|
| 166 | };
|
|---|
| 167 |
|
|---|
| 168 | /**
|
|---|
| 169 | * Returns the Cartesian `x` + `y` coordinates of the active {@link Tooltip}.
|
|---|
| 170 | *
|
|---|
| 171 | * Returns undefined if there is no active user interaction or if used outside a chart context.
|
|---|
| 172 | *
|
|---|
| 173 | * Recharts only allows one Tooltip per chart, so this hook does not take any parameters.
|
|---|
| 174 | * Weird things may happen if you have multiple Tooltip components in the same chart so please don't do that.
|
|---|
| 175 | *
|
|---|
| 176 | * @returns {Coordinate | undefined} The coordinate of the active Tooltip, or undefined.
|
|---|
| 177 | * @since 3.7
|
|---|
| 178 | */
|
|---|
| 179 | exports.useIsTooltipActive = useIsTooltipActive;
|
|---|
| 180 | var useActiveTooltipCoordinate = () => {
|
|---|
| 181 | var coordinate = (0, _hooks.useAppSelector)(_tooltipSelectors.selectActiveTooltipCoordinate);
|
|---|
| 182 | if (coordinate == null) {
|
|---|
| 183 | return undefined;
|
|---|
| 184 | }
|
|---|
| 185 | return {
|
|---|
| 186 | x: coordinate.x,
|
|---|
| 187 | y: coordinate.y
|
|---|
| 188 | };
|
|---|
| 189 | };
|
|---|
| 190 | exports.useActiveTooltipCoordinate = useActiveTooltipCoordinate; |
|---|