source: node_modules/recharts/es6/hooks.js

Last change on this file was a762898, checked in by istevanoska <ilinastevanoska@…>, 5 months ago

Added visualizations

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