| [a762898] | 1 | "use strict";
|
|---|
| 2 |
|
|---|
| 3 | Object.defineProperty(exports, "__esModule", {
|
|---|
| 4 | value: true
|
|---|
| 5 | });
|
|---|
| 6 | exports.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;
|
|---|
| 7 | var _toolkit = require("@reduxjs/toolkit");
|
|---|
| 8 | var _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 |
|
|---|
| 62 | var 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 |
|
|---|
| 78 | var 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 |
|
|---|
| 117 | var 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 | });
|
|---|
| 210 | var {
|
|---|
| 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;
|
|---|
| 224 | exports.setKeyboardInteraction = setKeyboardInteraction;
|
|---|
| 225 | exports.setSyncInteraction = setSyncInteraction;
|
|---|
| 226 | exports.setMouseClickAxisIndex = setMouseClickAxisIndex;
|
|---|
| 227 | exports.setMouseOverAxisIndex = setMouseOverAxisIndex;
|
|---|
| 228 | exports.setActiveClickItemIndex = setActiveClickItemIndex;
|
|---|
| 229 | exports.mouseLeaveChart = mouseLeaveChart;
|
|---|
| 230 | exports.mouseLeaveItem = mouseLeaveItem;
|
|---|
| 231 | exports.setActiveMouseOverItemIndex = setActiveMouseOverItemIndex;
|
|---|
| 232 | exports.setTooltipSettingsState = setTooltipSettingsState;
|
|---|
| 233 | exports.removeTooltipEntrySettings = removeTooltipEntrySettings;
|
|---|
| 234 | exports.replaceTooltipEntrySettings = replaceTooltipEntrySettings;
|
|---|
| 235 | exports.addTooltipEntrySettings = addTooltipEntrySettings;
|
|---|
| 236 | var tooltipReducer = exports.tooltipReducer = tooltipSlice.reducer; |
|---|