source: node_modules/recharts/lib/state/tooltipSlice.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: 8.8 KB
Line 
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.tooltipReducer = exports.setTooltipSettingsState = exports.setSyncInteraction = exports.setMouseOverAxisIndex = exports.setMouseClickAxisIndex = exports.setKeyboardInteraction = exports.setActiveMouseOverItemIndex = exports.setActiveClickItemIndex = exports.replaceTooltipEntrySettings = exports.removeTooltipEntrySettings = exports.noInteraction = exports.mouseLeaveItem = exports.mouseLeaveChart = exports.initialState = exports.addTooltipEntrySettings = void 0;
7var _toolkit = require("@reduxjs/toolkit");
8var _immer = require("immer");
9/**
10 * One Tooltip can display multiple TooltipPayloadEntries at a time.
11 */
12
13/**
14 * So what happens is that the tooltip payload is decided based on the available data, and the dataKey.
15 * The dataKey can either be defined on the graphical element (like Line, or Bar)
16 * or on the tooltip itself.
17 *
18 * The data can be defined in the chart element, or in the graphical item.
19 *
20 * So this type is all the settings, other than the data + dataKey complications.
21 */
22
23/**
24 * This is what Tooltip renders.
25 */
26
27/**
28 * null means no active index
29 * string means: whichever index from the chart data it is.
30 * Different charts have different requirements on data shapes,
31 * and are also responsible for providing a function that will accept this index
32 * and return data.
33 */
34
35/**
36 * Different items have different data shapes so the state has no opinion on what the data shape should be;
37 * the only requirement is that the chart also provides a searcher function
38 * that accepts the data, and a key, and returns whatever the payload in Tooltip should be.
39 */
40
41/**
42 * So this informs the "tooltip event type". Tooltip event type can be either "axis" or "item"
43 * and it is used for two things:
44 * 1. Sets the active area
45 * 2. Sets the background and cursor highlights
46 *
47 * Some charts only allow to have one type of tooltip event type, some allow both.
48 * Those charts that allow both will have one default, and the "shared" prop will be used to switch between them.
49 * Undefined means "use the chart default".
50 *
51 * Charts that only allow one tooltip event type, will ignore the shared prop.
52 */
53
54/**
55 * A generic state for user interaction with the chart.
56 * User interaction can come through multiple channels: mouse events, keyboard events, or hardcoded in props, or synchronised from other charts.
57 *
58 * Each of the interaction states is represented as TooltipInteractionState,
59 * and then the selectors and Tooltip will decide which of the interaction states to use.
60 */
61
62var noInteraction = exports.noInteraction = {
63 active: false,
64 index: null,
65 dataKey: undefined,
66 graphicalItemId: undefined,
67 coordinate: undefined
68};
69
70/**
71 * The tooltip interaction state stores:
72 *
73 * - Which graphical item is user interacting with at the moment,
74 * - which axis (or, which part of chart background) is user interacting with at the moment
75 * - The data that individual graphical items wish to be displayed in case the tooltip gets activated
76 */
77
78var initialState = exports.initialState = {
79 itemInteraction: {
80 click: noInteraction,
81 hover: noInteraction
82 },
83 axisInteraction: {
84 click: noInteraction,
85 hover: noInteraction
86 },
87 keyboardInteraction: noInteraction,
88 syncInteraction: {
89 active: false,
90 index: null,
91 dataKey: undefined,
92 label: undefined,
93 coordinate: undefined,
94 sourceViewBox: undefined,
95 graphicalItemId: undefined
96 },
97 tooltipItemPayloads: [],
98 settings: {
99 shared: undefined,
100 trigger: 'hover',
101 axisId: 0,
102 active: false,
103 defaultIndex: undefined
104 }
105};
106
107/**
108 * This is the event we get when user is interacting with a specific graphical item.
109 */
110
111/**
112 * Keyboard interaction payload has no graphical item ID,
113 * and no dataKey, because keyboard interaction is always
114 * with the whole chart, not with a specific graphical item.
115 */
116
117var tooltipSlice = (0, _toolkit.createSlice)({
118 name: 'tooltip',
119 initialState,
120 reducers: {
121 addTooltipEntrySettings: {
122 reducer(state, action) {
123 state.tooltipItemPayloads.push((0, _immer.castDraft)(action.payload));
124 },
125 prepare: (0, _toolkit.prepareAutoBatched)()
126 },
127 replaceTooltipEntrySettings: {
128 reducer(state, action) {
129 var {
130 prev,
131 next
132 } = action.payload;
133 var index = (0, _toolkit.current)(state).tooltipItemPayloads.indexOf((0, _immer.castDraft)(prev));
134 if (index > -1) {
135 state.tooltipItemPayloads[index] = (0, _immer.castDraft)(next);
136 }
137 },
138 prepare: (0, _toolkit.prepareAutoBatched)()
139 },
140 removeTooltipEntrySettings: {
141 reducer(state, action) {
142 var index = (0, _toolkit.current)(state).tooltipItemPayloads.indexOf((0, _immer.castDraft)(action.payload));
143 if (index > -1) {
144 state.tooltipItemPayloads.splice(index, 1);
145 }
146 },
147 prepare: (0, _toolkit.prepareAutoBatched)()
148 },
149 setTooltipSettingsState(state, action) {
150 state.settings = action.payload;
151 },
152 setActiveMouseOverItemIndex(state, action) {
153 state.syncInteraction.active = false;
154 state.keyboardInteraction.active = false;
155 state.itemInteraction.hover.active = true;
156 state.itemInteraction.hover.index = action.payload.activeIndex;
157 state.itemInteraction.hover.dataKey = action.payload.activeDataKey;
158 state.itemInteraction.hover.graphicalItemId = action.payload.activeGraphicalItemId;
159 state.itemInteraction.hover.coordinate = action.payload.activeCoordinate;
160 },
161 mouseLeaveChart(state) {
162 /*
163 * Clear only the active flags. Why?
164 * 1. Keep Coordinate to preserve animation - next time the Tooltip appears, we want to render it from
165 * the last place where it was when it disappeared.
166 * 2. We want to keep all the properties anyway just in case the tooltip has `active=true` prop
167 * and continues being visible even after the mouse has left the chart.
168 */
169 state.itemInteraction.hover.active = false;
170 state.axisInteraction.hover.active = false;
171 },
172 mouseLeaveItem(state) {
173 state.itemInteraction.hover.active = false;
174 },
175 setActiveClickItemIndex(state, action) {
176 state.syncInteraction.active = false;
177 state.itemInteraction.click.active = true;
178 state.keyboardInteraction.active = false;
179 state.itemInteraction.click.index = action.payload.activeIndex;
180 state.itemInteraction.click.dataKey = action.payload.activeDataKey;
181 state.itemInteraction.click.graphicalItemId = action.payload.activeGraphicalItemId;
182 state.itemInteraction.click.coordinate = action.payload.activeCoordinate;
183 },
184 setMouseOverAxisIndex(state, action) {
185 state.syncInteraction.active = false;
186 state.axisInteraction.hover.active = true;
187 state.keyboardInteraction.active = false;
188 state.axisInteraction.hover.index = action.payload.activeIndex;
189 state.axisInteraction.hover.dataKey = action.payload.activeDataKey;
190 state.axisInteraction.hover.coordinate = action.payload.activeCoordinate;
191 },
192 setMouseClickAxisIndex(state, action) {
193 state.syncInteraction.active = false;
194 state.keyboardInteraction.active = false;
195 state.axisInteraction.click.active = true;
196 state.axisInteraction.click.index = action.payload.activeIndex;
197 state.axisInteraction.click.dataKey = action.payload.activeDataKey;
198 state.axisInteraction.click.coordinate = action.payload.activeCoordinate;
199 },
200 setSyncInteraction(state, action) {
201 state.syncInteraction = action.payload;
202 },
203 setKeyboardInteraction(state, action) {
204 state.keyboardInteraction.active = action.payload.active;
205 state.keyboardInteraction.index = action.payload.activeIndex;
206 state.keyboardInteraction.coordinate = action.payload.activeCoordinate;
207 }
208 }
209});
210var {
211 addTooltipEntrySettings,
212 replaceTooltipEntrySettings,
213 removeTooltipEntrySettings,
214 setTooltipSettingsState,
215 setActiveMouseOverItemIndex,
216 mouseLeaveItem,
217 mouseLeaveChart,
218 setActiveClickItemIndex,
219 setMouseOverAxisIndex,
220 setMouseClickAxisIndex,
221 setSyncInteraction,
222 setKeyboardInteraction
223} = tooltipSlice.actions;
224exports.setKeyboardInteraction = setKeyboardInteraction;
225exports.setSyncInteraction = setSyncInteraction;
226exports.setMouseClickAxisIndex = setMouseClickAxisIndex;
227exports.setMouseOverAxisIndex = setMouseOverAxisIndex;
228exports.setActiveClickItemIndex = setActiveClickItemIndex;
229exports.mouseLeaveChart = mouseLeaveChart;
230exports.mouseLeaveItem = mouseLeaveItem;
231exports.setActiveMouseOverItemIndex = setActiveMouseOverItemIndex;
232exports.setTooltipSettingsState = setTooltipSettingsState;
233exports.removeTooltipEntrySettings = removeTooltipEntrySettings;
234exports.replaceTooltipEntrySettings = replaceTooltipEntrySettings;
235exports.addTooltipEntrySettings = addTooltipEntrySettings;
236var tooltipReducer = exports.tooltipReducer = tooltipSlice.reducer;
Note: See TracBrowser for help on using the repository browser.