@elliemae/ds-dataviz 3.31.0-next.5 → 3.31.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/graphs/Chart/ChartContext.js +1 -21
- package/dist/cjs/graphs/Chart/ChartContext.js.map +2 -2
- package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js +1 -1
- package/dist/cjs/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map +2 -2
- package/dist/cjs/graphs/Chart/SingleStackedBar/index.js +1 -0
- package/dist/cjs/graphs/Chart/SingleStackedBar/index.js.map +2 -2
- package/dist/cjs/graphs/Chart/SingleStackedBar/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useChart.js +23 -9
- package/dist/cjs/graphs/Chart/config/useChart.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useGetters.js +65 -15
- package/dist/cjs/graphs/Chart/config/useGetters.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useKeyboardNavigation.js +36 -32
- package/dist/cjs/graphs/Chart/config/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/graphs/Chart/config/useScales.js +18 -11
- package/dist/cjs/graphs/Chart/config/useScales.js.map +3 -3
- package/dist/cjs/graphs/Chart/helpers/colorPallet.js.map +1 -1
- package/dist/cjs/graphs/Chart/helpers/index.js +4 -3
- package/dist/cjs/graphs/Chart/helpers/index.js.map +2 -2
- package/dist/cjs/graphs/Chart/helpers/useUniqueData.js +43 -30
- package/dist/cjs/graphs/Chart/helpers/useUniqueData.js.map +2 -2
- package/dist/cjs/graphs/Chart/helpers/useVirtualizedSeries.js +13 -14
- package/dist/cjs/graphs/Chart/helpers/useVirtualizedSeries.js.map +2 -2
- package/dist/cjs/graphs/Chart/index.js +1 -0
- package/dist/cjs/graphs/Chart/index.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/A11yRegion.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/Axis.js +3 -1
- package/dist/cjs/graphs/Chart/parts/Axis/Axis.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/AxisRight.js +5 -5
- package/dist/cjs/graphs/Chart/parts/Axis/AxisRight.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Axis/Tick.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Axis/Tick.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js +7 -27
- package/dist/cjs/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/ClipPaths.js +2 -2
- package/dist/cjs/graphs/Chart/parts/ClipPaths.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/FocusableRegion.js +14 -5
- package/dist/cjs/graphs/Chart/parts/FocusableRegion.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Legend/BottomLegend.js +5 -5
- package/dist/cjs/graphs/Chart/parts/Legend/BottomLegend.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Legend/LegendItem.js +3 -2
- package/dist/cjs/graphs/Chart/parts/Legend/LegendItem.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Legend/TopLegend.js +5 -5
- package/dist/cjs/graphs/Chart/parts/Legend/TopLegend.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scrapper/Scrapper.js +19 -24
- package/dist/cjs/graphs/Chart/parts/Scrapper/Scrapper.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scrapper/ScrapperLine.js +8 -7
- package/dist/cjs/graphs/Chart/parts/Scrapper/ScrapperLine.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapper.js +31 -3
- package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapper.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js +23 -37
- package/dist/cjs/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js +1 -1
- package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollBarX.js +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollBarX.js.map +1 -1
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollBarY.js +4 -4
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollBarY.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js +5 -5
- package/dist/cjs/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map +2 -2
- package/dist/cjs/graphs/Chart/parts/TrendHighlight.js +6 -5
- package/dist/cjs/graphs/Chart/parts/TrendHighlight.js.map +2 -2
- package/dist/cjs/graphs/Chart/react-desc-prop-types.js +1 -5
- package/dist/cjs/graphs/Chart/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/graphs/Chart/scales/index.js +6 -0
- package/dist/cjs/graphs/Chart/scales/index.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Area.js +12 -24
- package/dist/cjs/graphs/Chart/series/Area.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Bars.js +46 -31
- package/dist/cjs/graphs/Chart/series/Bars.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/HorizontalBars.js +12 -16
- package/dist/cjs/graphs/Chart/series/HorizontalBars.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js +20 -7
- package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Line.js +8 -8
- package/dist/cjs/graphs/Chart/series/Line.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Point.js +13 -3
- package/dist/cjs/graphs/Chart/series/Point.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Points.js +11 -10
- package/dist/cjs/graphs/Chart/series/Points.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/Rect.js +14 -16
- package/dist/cjs/graphs/Chart/series/Rect.js.map +2 -2
- package/dist/cjs/graphs/Chart/series/StackedBar.js +8 -9
- package/dist/cjs/graphs/Chart/series/StackedBar.js.map +2 -2
- package/dist/cjs/graphs/Chart/styles.js +2 -2
- package/dist/cjs/graphs/Chart/styles.js.map +2 -2
- package/dist/cjs/graphs/constants.js +2 -0
- package/dist/cjs/graphs/constants.js.map +2 -2
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/graphs/Chart/ChartContext.js +2 -22
- package/dist/esm/graphs/Chart/ChartContext.js.map +2 -2
- package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js +1 -1
- package/dist/esm/graphs/Chart/SingleStackedBar/SingleStackedBar.js.map +2 -2
- package/dist/esm/graphs/Chart/SingleStackedBar/index.js +1 -0
- package/dist/esm/graphs/Chart/SingleStackedBar/index.js.map +2 -2
- package/dist/esm/graphs/Chart/SingleStackedBar/react-desc-prop-types.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useChart.js +24 -10
- package/dist/esm/graphs/Chart/config/useChart.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useGetters.js +65 -15
- package/dist/esm/graphs/Chart/config/useGetters.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useKeyboardNavigation.js +36 -32
- package/dist/esm/graphs/Chart/config/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/graphs/Chart/config/useScales.js +18 -11
- package/dist/esm/graphs/Chart/config/useScales.js.map +3 -3
- package/dist/esm/graphs/Chart/helpers/colorPallet.js.map +1 -1
- package/dist/esm/graphs/Chart/helpers/index.js +4 -3
- package/dist/esm/graphs/Chart/helpers/index.js.map +2 -2
- package/dist/esm/graphs/Chart/helpers/useUniqueData.js +44 -31
- package/dist/esm/graphs/Chart/helpers/useUniqueData.js.map +2 -2
- package/dist/esm/graphs/Chart/helpers/useVirtualizedSeries.js +13 -14
- package/dist/esm/graphs/Chart/helpers/useVirtualizedSeries.js.map +2 -2
- package/dist/esm/graphs/Chart/index.js +1 -0
- package/dist/esm/graphs/Chart/index.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/A11yRegion.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/Axis.js +3 -1
- package/dist/esm/graphs/Chart/parts/Axis/Axis.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/AxisBottom.js +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/AxisBottom.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/AxisLeft.js +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/AxisLeft.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/AxisRight.js +5 -5
- package/dist/esm/graphs/Chart/parts/Axis/AxisRight.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Axis/Tick.js +1 -1
- package/dist/esm/graphs/Chart/parts/Axis/Tick.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/ChartContainer.js +7 -27
- package/dist/esm/graphs/Chart/parts/ChartContainer.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/ClipPaths.js +2 -2
- package/dist/esm/graphs/Chart/parts/ClipPaths.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/FocusableRegion.js +14 -5
- package/dist/esm/graphs/Chart/parts/FocusableRegion.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js +5 -5
- package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/LegendItem.js +3 -2
- package/dist/esm/graphs/Chart/parts/Legend/LegendItem.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Legend/TopLegend.js +5 -5
- package/dist/esm/graphs/Chart/parts/Legend/TopLegend.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scrapper/Scrapper.js +20 -25
- package/dist/esm/graphs/Chart/parts/Scrapper/Scrapper.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js +8 -7
- package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapper.js +32 -4
- package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapper.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js +24 -38
- package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/Controllers.js +1 -1
- package/dist/esm/graphs/Chart/parts/Scroller/Controllers.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollBarX.js +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollBarX.js.map +1 -1
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollBarY.js +4 -4
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollBarY.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js +5 -5
- package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map +2 -2
- package/dist/esm/graphs/Chart/parts/TrendHighlight.js +6 -5
- package/dist/esm/graphs/Chart/parts/TrendHighlight.js.map +2 -2
- package/dist/esm/graphs/Chart/react-desc-prop-types.js +1 -5
- package/dist/esm/graphs/Chart/react-desc-prop-types.js.map +2 -2
- package/dist/esm/graphs/Chart/scales/index.js +6 -0
- package/dist/esm/graphs/Chart/scales/index.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Area.js +12 -24
- package/dist/esm/graphs/Chart/series/Area.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Bars.js +46 -31
- package/dist/esm/graphs/Chart/series/Bars.js.map +2 -2
- package/dist/esm/graphs/Chart/series/HorizontalBars.js +12 -16
- package/dist/esm/graphs/Chart/series/HorizontalBars.js.map +2 -2
- package/dist/esm/graphs/Chart/series/HorizontalStackedBars.js +20 -7
- package/dist/esm/graphs/Chart/series/HorizontalStackedBars.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Line.js +8 -8
- package/dist/esm/graphs/Chart/series/Line.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Point.js +13 -3
- package/dist/esm/graphs/Chart/series/Point.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Points.js +11 -10
- package/dist/esm/graphs/Chart/series/Points.js.map +2 -2
- package/dist/esm/graphs/Chart/series/Rect.js +14 -16
- package/dist/esm/graphs/Chart/series/Rect.js.map +2 -2
- package/dist/esm/graphs/Chart/series/StackedBar.js +8 -9
- package/dist/esm/graphs/Chart/series/StackedBar.js.map +2 -2
- package/dist/esm/graphs/Chart/styles.js +2 -2
- package/dist/esm/graphs/Chart/styles.js.map +2 -2
- package/dist/esm/graphs/constants.js +2 -0
- package/dist/esm/graphs/constants.js.map +2 -2
- package/dist/esm/index.js +9 -2
- package/dist/esm/index.js.map +2 -2
- package/dist/types/graphs/Chart/ChartContext.d.ts +22 -20
- package/dist/types/graphs/Chart/SingleStackedBar/index.d.ts +1 -0
- package/dist/types/graphs/Chart/SingleStackedBar/react-desc-prop-types.d.ts +8 -14
- package/dist/types/graphs/Chart/config/useChart.d.ts +15 -13
- package/dist/types/graphs/Chart/config/useGetters.d.ts +8 -5
- package/dist/types/graphs/Chart/config/useScales.d.ts +5 -3
- package/dist/types/graphs/Chart/helpers/colorPallet.d.ts +18 -18
- package/dist/types/graphs/Chart/helpers/index.d.ts +8 -3
- package/dist/types/graphs/Chart/helpers/useUniqueData.d.ts +7 -2
- package/dist/types/graphs/Chart/index.d.ts +1 -0
- package/dist/types/graphs/Chart/parts/A11yRegion.d.ts +3 -0
- package/dist/types/graphs/Chart/parts/Axis/Axis.d.ts +3 -3
- package/dist/types/graphs/Chart/parts/Axis/Tick.d.ts +1 -1
- package/dist/types/graphs/Chart/parts/FocusableRegion.d.ts +13 -1
- package/dist/types/graphs/Chart/parts/Legend/LegendItem.d.ts +5 -3
- package/dist/types/graphs/Chart/parts/Scrapper/ScrapperLine.d.ts +8 -4
- package/dist/types/graphs/Chart/parts/Scrapper/VerticalScrapperLine.d.ts +27 -1
- package/dist/types/graphs/Chart/parts/TrendHighlight.d.ts +7 -3
- package/dist/types/graphs/Chart/react-desc-prop-types.d.ts +434 -408
- package/dist/types/graphs/Chart/scales/index.d.ts +2 -2
- package/dist/types/graphs/Chart/series/Area.d.ts +3 -3
- package/dist/types/graphs/Chart/series/Bars.d.ts +3 -3
- package/dist/types/graphs/Chart/series/Point.d.ts +17 -12
- package/dist/types/graphs/Chart/series/Points.d.ts +3 -3
- package/dist/types/graphs/Chart/series/Rect.d.ts +16 -12
- package/dist/types/graphs/Chart/series/StackedBar.d.ts +3 -3
- package/dist/types/graphs/Chart/styles.d.ts +3 -1
- package/dist/types/graphs/constants.d.ts +7 -7
- package/dist/types/index.d.ts +1 -1
- package/package.json +8 -8
|
@@ -66,10 +66,8 @@ const useKeyboardNavigation = () => {
|
|
|
66
66
|
setMovingPosition,
|
|
67
67
|
setContainerRatio,
|
|
68
68
|
currentDataWithNullValues,
|
|
69
|
-
props: {
|
|
69
|
+
props: { xScroll, yScroll }
|
|
70
70
|
} = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
71
|
-
const xScrollable = xAxis.advanced?.pointSpacing?.value > 1 || xScroll;
|
|
72
|
-
const yScrollable = yAxis.advanced?.pointSpacing?.value > 1 || yScroll;
|
|
73
71
|
const currentSerie = (0, import_react.useMemo)(
|
|
74
72
|
() => currentDataWithNullValues.find((d) => d.name === activePoint?.serie) ?? currentDataWithNullValues[0],
|
|
75
73
|
[activePoint?.serie, currentDataWithNullValues]
|
|
@@ -78,6 +76,14 @@ const useKeyboardNavigation = () => {
|
|
|
78
76
|
() => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),
|
|
79
77
|
[activePoint, currentSerie]
|
|
80
78
|
);
|
|
79
|
+
const listMap = (0, import_react.useMemo)(
|
|
80
|
+
() => currentSerie?.data.map((d) => {
|
|
81
|
+
if (typeof d.value === "object")
|
|
82
|
+
return JSON.stringify(d.value);
|
|
83
|
+
return d.value?.toString();
|
|
84
|
+
}) ?? [],
|
|
85
|
+
[currentSerie?.data]
|
|
86
|
+
);
|
|
81
87
|
const handleOnFocus = (0, import_react.useCallback)(
|
|
82
88
|
(e) => {
|
|
83
89
|
if (containerRef === e.target && activePoint === null) {
|
|
@@ -96,13 +102,9 @@ const useKeyboardNavigation = () => {
|
|
|
96
102
|
}, [setActivePoint, containerRef]);
|
|
97
103
|
const navigateSerie = (0, import_react.useCallback)(
|
|
98
104
|
(step) => {
|
|
99
|
-
const newValue = findInCircularList(
|
|
100
|
-
currentSerie?.data.map((d) => d.value?.toString()),
|
|
101
|
-
currentActiveItemIndex,
|
|
102
|
-
step
|
|
103
|
-
);
|
|
105
|
+
const newValue = findInCircularList(listMap, currentActiveItemIndex, step);
|
|
104
106
|
setActivePoint(currentSerie?.data[newValue]);
|
|
105
|
-
if (
|
|
107
|
+
if (xScroll) {
|
|
106
108
|
const xValue = getXScaleValue(currentSerie?.data[newValue]);
|
|
107
109
|
if (xValue === void 0)
|
|
108
110
|
return;
|
|
@@ -119,8 +121,7 @@ const useKeyboardNavigation = () => {
|
|
|
119
121
|
});
|
|
120
122
|
else if (xValue < xScrollbarPosition * containerRatio)
|
|
121
123
|
setXScrollbarPosition(xValue / containerRatio);
|
|
122
|
-
}
|
|
123
|
-
if (yScrollable) {
|
|
124
|
+
} else if (yScroll) {
|
|
124
125
|
const yValue = getYScaleValue(currentSerie?.data[newValue]);
|
|
125
126
|
if (yValue === void 0)
|
|
126
127
|
return;
|
|
@@ -140,11 +141,12 @@ const useKeyboardNavigation = () => {
|
|
|
140
141
|
}
|
|
141
142
|
},
|
|
142
143
|
[
|
|
143
|
-
|
|
144
|
+
listMap,
|
|
144
145
|
currentActiveItemIndex,
|
|
145
146
|
setActivePoint,
|
|
146
|
-
|
|
147
|
-
|
|
147
|
+
currentSerie?.data,
|
|
148
|
+
xScroll,
|
|
149
|
+
yScroll,
|
|
148
150
|
getXScaleValue,
|
|
149
151
|
innerWidth,
|
|
150
152
|
containerRatio,
|
|
@@ -174,22 +176,23 @@ const useKeyboardNavigation = () => {
|
|
|
174
176
|
e.preventDefault();
|
|
175
177
|
}
|
|
176
178
|
if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
|
|
177
|
-
if (yScale
|
|
179
|
+
if (yScale?.type === "BAND")
|
|
178
180
|
changeSerie(e.code === "ArrowLeft" ? -1 : 1);
|
|
179
181
|
else
|
|
180
182
|
navigateSerie(e.code === "ArrowLeft" ? -1 : 1);
|
|
181
183
|
}
|
|
182
184
|
if (["ArrowDown", "ArrowUp"].includes(e.code)) {
|
|
183
|
-
if (yScale
|
|
185
|
+
if (yScale?.type === "BAND")
|
|
184
186
|
navigateSerie(e.code === "ArrowDown" ? 1 : -1);
|
|
185
187
|
else
|
|
186
188
|
changeSerie(e.code === "ArrowDown" ? -1 : 1);
|
|
187
189
|
}
|
|
188
190
|
const { code } = e;
|
|
189
191
|
const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
|
|
190
|
-
|
|
192
|
+
const xScaledActivePoint = getXScaleValue(activePoint);
|
|
193
|
+
if (isShiftKey && !isZooming && xScale?.type !== "BAND" && xScaledActivePoint) {
|
|
191
194
|
setIsZooming(true);
|
|
192
|
-
setZoomStartingPosition(
|
|
195
|
+
setZoomStartingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);
|
|
193
196
|
}
|
|
194
197
|
},
|
|
195
198
|
[
|
|
@@ -201,32 +204,32 @@ const useKeyboardNavigation = () => {
|
|
|
201
204
|
navigateSerie,
|
|
202
205
|
setIsZooming,
|
|
203
206
|
setZoomStartingPosition,
|
|
204
|
-
xScale
|
|
207
|
+
xScale?.type,
|
|
205
208
|
xScrollbarPosition,
|
|
206
|
-
yScale
|
|
209
|
+
yScale?.type
|
|
207
210
|
]
|
|
208
211
|
);
|
|
209
212
|
const handleOnKeyUp = (0, import_react.useCallback)(
|
|
210
213
|
(e) => {
|
|
211
|
-
if (!
|
|
214
|
+
if (!activePoint)
|
|
215
|
+
return;
|
|
216
|
+
if (!isZooming && xScale?.type === "BAND")
|
|
212
217
|
return false;
|
|
213
218
|
const { shiftKey, code } = e;
|
|
214
219
|
const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
|
|
215
|
-
|
|
216
|
-
|
|
220
|
+
const xScaledActivePoint = getXScaleValue(activePoint);
|
|
221
|
+
if (shiftKey && ["ArrowRight", "ArrowLeft"].includes(code) && xScaledActivePoint) {
|
|
222
|
+
setMovingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);
|
|
217
223
|
}
|
|
218
|
-
if (isShiftKey) {
|
|
224
|
+
if (isShiftKey && xScaledActivePoint) {
|
|
219
225
|
setIsZooming(false);
|
|
220
226
|
setZoomStartingPosition(0);
|
|
221
227
|
setMovingPosition(0);
|
|
222
|
-
const endingPosition =
|
|
228
|
+
const endingPosition = xScaledActivePoint - xScrollbarPosition * containerRatio;
|
|
223
229
|
const isRightDirection = zoomStartingPosition < endingPosition;
|
|
224
|
-
const offsetActivePoint = findInCircularList(
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
isRightDirection ? 1 : -1
|
|
228
|
-
);
|
|
229
|
-
const correctEndingPosition = getXScaleValue(currentSerie?.data[offsetActivePoint]) - xScrollbarPosition * containerRatio;
|
|
230
|
+
const offsetActivePoint = findInCircularList(listMap, currentActiveItemIndex, isRightDirection ? 1 : -1);
|
|
231
|
+
const offSetXScaledActivePoint = getXScaleValue(currentSerie?.data[offsetActivePoint]);
|
|
232
|
+
const correctEndingPosition = offSetXScaledActivePoint ?? 0 - xScrollbarPosition * containerRatio;
|
|
230
233
|
const diff = Math.abs(zoomStartingPosition - correctEndingPosition);
|
|
231
234
|
if (diff <= 0)
|
|
232
235
|
return;
|
|
@@ -251,13 +254,14 @@ const useKeyboardNavigation = () => {
|
|
|
251
254
|
innerWidth,
|
|
252
255
|
isZooming,
|
|
253
256
|
lastScrollbarPosition,
|
|
257
|
+
listMap,
|
|
254
258
|
setActivePoint,
|
|
255
259
|
setContainerRatio,
|
|
256
260
|
setIsZooming,
|
|
257
261
|
setMovingPosition,
|
|
258
262
|
setXScrollbarPosition,
|
|
259
263
|
setZoomStartingPosition,
|
|
260
|
-
xScale
|
|
264
|
+
xScale?.type,
|
|
261
265
|
xScrollbarPosition,
|
|
262
266
|
zoomStartingPosition
|
|
263
267
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useKeyboardNavigation.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\n\nexport const findInCircularList = (\n list: string[],\n from: number,\n step = 1,\n criteria = (item: number) => item !== undefined,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (list[i] && criteria(i)) {\n return i;\n }\n }\n return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n const {\n activePoint,\n setActivePoint,\n containerRef,\n xScale,\n yScale,\n lastScrollbarPosition,\n setXScrollbarPosition,\n containerRatio,\n xScrollbarPosition,\n innerWidth,\n innerHeight,\n getXScaleValue,\n getYScaleValue,\n groups,\n isZooming,\n setIsZooming,\n zoomStartingPosition,\n setZoomStartingPosition,\n setMovingPosition,\n setContainerRatio,\n currentDataWithNullValues,\n props: {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAiD;AACjD,0BAA6B;AAEtB,MAAM,qBAAqB,CAChC,MACA,MACA,OAAO,GACP,WAAW,CAAC,SAAiB,SAAS,WAE3B;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK,CAAC,KAAK,SAAS,CAAC,GAAG;AAC1B,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\n\nexport const findInCircularList = (\n list: string[],\n from: number,\n step = 1,\n criteria = (item: number) => item !== undefined,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (list[i] && criteria(i)) {\n return i;\n }\n }\n return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n const {\n activePoint,\n setActivePoint,\n containerRef,\n xScale,\n yScale,\n lastScrollbarPosition,\n setXScrollbarPosition,\n containerRatio,\n xScrollbarPosition,\n innerWidth,\n innerHeight,\n getXScaleValue,\n getYScaleValue,\n groups,\n isZooming,\n setIsZooming,\n zoomStartingPosition,\n setZoomStartingPosition,\n setMovingPosition,\n setContainerRatio,\n currentDataWithNullValues,\n props: { xScroll, yScroll },\n } = useContext(ChartContext);\n\n const currentSerie = useMemo(\n () => currentDataWithNullValues.find((d) => d.name === activePoint?.serie) ?? currentDataWithNullValues[0],\n [activePoint?.serie, currentDataWithNullValues],\n );\n\n const currentActiveItemIndex = useMemo(\n () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n [activePoint, currentSerie],\n );\n\n const listMap = useMemo(\n () =>\n currentSerie?.data.map((d) => {\n if (typeof d.value === 'object') return JSON.stringify(d.value);\n return d.value?.toString();\n }) ?? [],\n [currentSerie?.data],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (containerRef === e.target && activePoint === null) {\n setActivePoint(currentSerie?.data[0]);\n setXScrollbarPosition(0);\n }\n },\n [activePoint, containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\n );\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setTimeout(() => {\n if (!containerRef?.contains(document.activeElement)) {\n setActivePoint(null);\n }\n });\n }, [setActivePoint, containerRef]);\n\n const navigateSerie = useCallback(\n (step: number) => {\n const newValue = findInCircularList(listMap, currentActiveItemIndex, step);\n setActivePoint(currentSerie?.data[newValue]);\n\n if (xScroll) {\n const xValue = getXScaleValue(currentSerie?.data[newValue]);\n if (xValue === undefined) return;\n const barWidth = innerWidth / containerRatio;\n const total = innerWidth * containerRatio;\n if (total <= xValue) {\n // to go from the first to last\n setXScrollbarPosition((total - innerWidth) / containerRatio);\n } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n // if is not visible we move the scroll to the next best position\n setXScrollbarPosition((prev) => {\n const nextPosition = prev + (xValue / containerRatio - prev);\n if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n return nextPosition;\n });\n // move backwards - 2 because focus ring in bars\n else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n } else if (yScroll) {\n const yValue = getYScaleValue(currentSerie?.data[newValue]);\n if (yValue === undefined) return;\n const barWidth = innerHeight / containerRatio;\n const total = innerHeight * containerRatio;\n if (total <= yValue) {\n // to go from the first to last\n setXScrollbarPosition((total - innerHeight) / containerRatio);\n } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n // if is not visible we move the scroll to the next best position\n setXScrollbarPosition((prev) => {\n const nextPosition = prev + (yValue / containerRatio - prev);\n if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n return nextPosition;\n });\n // move backwards - 2 because focus ring in bars\n else if (yValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(yValue / containerRatio);\n }\n },\n [\n listMap,\n currentActiveItemIndex,\n setActivePoint,\n currentSerie?.data,\n xScroll,\n yScroll,\n getXScaleValue,\n innerWidth,\n containerRatio,\n xScrollbarPosition,\n setXScrollbarPosition,\n getYScaleValue,\n innerHeight,\n ],\n );\n\n const changeSerie = useCallback(\n (step: number) => {\n const nextSerieIndex = findInCircularList(\n groups,\n groups.findIndex((item) => item === currentSerie.name),\n step,\n (idx: number) => currentDataWithNullValues[idx].data[currentActiveItemIndex].value !== null,\n );\n setActivePoint(currentDataWithNullValues[nextSerieIndex].data[currentActiveItemIndex]);\n },\n [groups, setActivePoint, currentActiveItemIndex, currentSerie.name, currentDataWithNullValues],\n );\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (!activePoint) return;\n if (e.code !== 'Tab') {\n e.preventDefault();\n }\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n if (yScale?.type === 'BAND') changeSerie(e.code === 'ArrowLeft' ? -1 : 1);\n else navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n }\n\n if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n if (yScale?.type === 'BAND') navigateSerie(e.code === 'ArrowDown' ? 1 : -1);\n else changeSerie(e.code === 'ArrowDown' ? -1 : 1);\n }\n\n const { code } = e;\n const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n const xScaledActivePoint = getXScaleValue(activePoint);\n if (isShiftKey && !isZooming && xScale?.type !== 'BAND' && xScaledActivePoint) {\n setIsZooming(true);\n setZoomStartingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n }\n },\n [\n activePoint,\n changeSerie,\n containerRatio,\n getXScaleValue,\n isZooming,\n navigateSerie,\n setIsZooming,\n setZoomStartingPosition,\n xScale?.type,\n xScrollbarPosition,\n yScale?.type,\n ],\n );\n\n const handleOnKeyUp: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n if (!activePoint) return;\n\n if (!isZooming && xScale?.type === 'BAND') return false;\n const { shiftKey, code } = e;\n const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n const xScaledActivePoint = getXScaleValue(activePoint);\n\n if (shiftKey && ['ArrowRight', 'ArrowLeft'].includes(code) && xScaledActivePoint) {\n setMovingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n }\n if (isShiftKey && xScaledActivePoint) {\n setIsZooming(false);\n setZoomStartingPosition(0);\n setMovingPosition(0);\n const endingPosition = xScaledActivePoint - xScrollbarPosition * containerRatio;\n // isRightDirection is used to know if we are zooming right or left direction\n const isRightDirection = zoomStartingPosition < endingPosition;\n const offsetActivePoint = findInCircularList(listMap, currentActiveItemIndex, isRightDirection ? 1 : -1);\n // we do this so the activePoint does not fall into the blur gradient\n const offSetXScaledActivePoint = getXScaleValue(currentSerie?.data[offsetActivePoint]);\n const correctEndingPosition = offSetXScaledActivePoint ?? 0 - xScrollbarPosition * containerRatio;\n const diff = Math.abs(zoomStartingPosition - correctEndingPosition);\n if (diff <= 0) return;\n const newRatio =\n innerWidth / ((innerWidth * containerRatio) / diff) < 40\n ? innerWidth / 40\n : (innerWidth * containerRatio) / diff;\n const newPosition =\n lastScrollbarPosition?.current +\n (!isRightDirection ? correctEndingPosition : zoomStartingPosition) / containerRatio;\n\n // if is bigger thant innerwidth possible we force the end\n if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n else setXScrollbarPosition(newPosition);\n setActivePoint(null);\n setTimeout(() => setActivePoint(activePoint));\n setContainerRatio(newRatio);\n lastScrollbarPosition.current = newPosition;\n }\n },\n [\n activePoint,\n containerRatio,\n currentActiveItemIndex,\n currentSerie?.data,\n getXScaleValue,\n\n innerWidth,\n isZooming,\n lastScrollbarPosition,\n listMap,\n setActivePoint,\n setContainerRatio,\n setIsZooming,\n setMovingPosition,\n setXScrollbarPosition,\n setZoomStartingPosition,\n xScale?.type,\n xScrollbarPosition,\n zoomStartingPosition,\n ],\n );\n return useMemo(\n () => ({ handleOnKeyUp, onInputKeyDown, handleOnBlur, handleOnFocus }),\n [handleOnBlur, handleOnFocus, handleOnKeyUp, onInputKeyDown],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAiD;AACjD,0BAA6B;AAEtB,MAAM,qBAAqB,CAChC,MACA,MACA,OAAO,GACP,WAAW,CAAC,SAAiB,SAAS,WAE3B;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK,CAAC,KAAK,SAAS,CAAC,GAAG;AAC1B,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC5B,QAAI,yBAAW,gCAAY;AAE3B,QAAM,mBAAe;AAAA,IACnB,MAAM,0BAA0B,KAAK,CAAC,MAAM,EAAE,SAAS,aAAa,KAAK,KAAK,0BAA0B,CAAC;AAAA,IACzG,CAAC,aAAa,OAAO,yBAAyB;AAAA,EAChD;AAEA,QAAM,6BAAyB;AAAA,IAC7B,MAAM,cAAc,KAAK,UAAU,CAAC,QAAQ,IAAI,QAAQ,aAAa,GAAG;AAAA,IACxE,CAAC,aAAa,YAAY;AAAA,EAC5B;AAEA,QAAM,cAAU;AAAA,IACd,MACE,cAAc,KAAK,IAAI,CAAC,MAAM;AAC5B,UAAI,OAAO,EAAE,UAAU;AAAU,eAAO,KAAK,UAAU,EAAE,KAAK;AAC9D,aAAO,EAAE,OAAO,SAAS;AAAA,IAC3B,CAAC,KAAK,CAAC;AAAA,IACT,CAAC,cAAc,IAAI;AAAA,EACrB;AAEA,QAAM,oBAAyD;AAAA,IAC7D,CAAC,MAAM;AACL,UAAI,iBAAiB,EAAE,UAAU,gBAAgB,MAAM;AACrD,uBAAe,cAAc,KAAK,CAAC,CAAC;AACpC,8BAAsB,CAAC;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,cAAc,cAAc,MAAM,gBAAgB,qBAAqB;AAAA,EACvF;AAEA,QAAM,mBAA0D,0BAAY,MAAM;AAChF,eAAW,MAAM;AACf,UAAI,CAAC,cAAc,SAAS,SAAS,aAAa,GAAG;AACnD,uBAAe,IAAI;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,gBAAgB,YAAY,CAAC;AAEjC,QAAM,oBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,YAAM,WAAW,mBAAmB,SAAS,wBAAwB,IAAI;AACzE,qBAAe,cAAc,KAAK,QAAQ,CAAC;AAE3C,UAAI,SAAS;AACX,cAAM,SAAS,eAAe,cAAc,KAAK,QAAQ,CAAC;AAC1D,YAAI,WAAW;AAAW;AAC1B,cAAM,WAAW,aAAa;AAC9B,cAAM,QAAQ,aAAa;AAC3B,YAAI,SAAS,QAAQ;AAEnB,iCAAuB,QAAQ,cAAc,cAAc;AAAA,QAC7D,WAAW,SAAS,qBAAqB,iBAAiB;AAExD,gCAAsB,CAAC,SAAS;AAC9B,kBAAM,eAAe,QAAQ,SAAS,iBAAiB;AACvD,gBAAI,eAAe,WAAW;AAAY,qBAAO,aAAa;AAC9D,mBAAO;AAAA,UACT,CAAC;AAAA,iBAEM,SAAS,qBAAqB;AAAgB,gCAAsB,SAAS,cAAc;AAAA,MACtG,WAAW,SAAS;AAClB,cAAM,SAAS,eAAe,cAAc,KAAK,QAAQ,CAAC;AAC1D,YAAI,WAAW;AAAW;AAC1B,cAAM,WAAW,cAAc;AAC/B,cAAM,QAAQ,cAAc;AAC5B,YAAI,SAAS,QAAQ;AAEnB,iCAAuB,QAAQ,eAAe,cAAc;AAAA,QAC9D,WAAW,SAAS,qBAAqB,iBAAiB;AAExD,gCAAsB,CAAC,SAAS;AAC9B,kBAAM,eAAe,QAAQ,SAAS,iBAAiB;AACvD,gBAAI,eAAe,WAAW;AAAa,qBAAO,cAAc;AAChE,mBAAO;AAAA,UACT,CAAC;AAAA,iBAEM,SAAS,qBAAqB;AAAgB,gCAAsB,SAAS,cAAc;AAAA,MACtG;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAc;AAAA,IAClB,CAAC,SAAiB;AAChB,YAAM,iBAAiB;AAAA,QACrB;AAAA,QACA,OAAO,UAAU,CAAC,SAAS,SAAS,aAAa,IAAI;AAAA,QACrD;AAAA,QACA,CAAC,QAAgB,0BAA0B,GAAG,EAAE,KAAK,sBAAsB,EAAE,UAAU;AAAA,MACzF;AACA,qBAAe,0BAA0B,cAAc,EAAE,KAAK,sBAAsB,CAAC;AAAA,IACvF;AAAA,IACA,CAAC,QAAQ,gBAAgB,wBAAwB,aAAa,MAAM,yBAAyB;AAAA,EAC/F;AAEA,QAAM,qBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,UAAI,CAAC;AAAa;AAClB,UAAI,EAAE,SAAS,OAAO;AACpB,UAAE,eAAe;AAAA,MACnB;AACA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,YAAI,QAAQ,SAAS;AAAQ,sBAAY,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA;AACnE,wBAAc,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MACpD;AAEA,UAAI,CAAC,aAAa,SAAS,EAAE,SAAS,EAAE,IAAI,GAAG;AAC7C,YAAI,QAAQ,SAAS;AAAQ,wBAAc,EAAE,SAAS,cAAc,IAAI,EAAE;AAAA;AACrE,sBAAY,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MAClD;AAEA,YAAM,EAAE,KAAK,IAAI;AACjB,YAAM,aAAa,CAAC,aAAa,YAAY,EAAE,SAAS,IAAI;AAE5D,YAAM,qBAAqB,eAAe,WAAW;AACrD,UAAI,cAAc,CAAC,aAAa,QAAQ,SAAS,UAAU,oBAAoB;AAC7E,qBAAa,IAAI;AACjB,gCAAwB,qBAAqB,qBAAqB,cAAc;AAAA,MAClF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,IACV;AAAA,EACF;AAEA,QAAM,oBAA4D;AAAA,IAChE,CAAC,MAAM;AACL,UAAI,CAAC;AAAa;AAElB,UAAI,CAAC,aAAa,QAAQ,SAAS;AAAQ,eAAO;AAClD,YAAM,EAAE,UAAU,KAAK,IAAI;AAC3B,YAAM,aAAa,CAAC,aAAa,YAAY,EAAE,SAAS,IAAI;AAE5D,YAAM,qBAAqB,eAAe,WAAW;AAErD,UAAI,YAAY,CAAC,cAAc,WAAW,EAAE,SAAS,IAAI,KAAK,oBAAoB;AAChF,0BAAkB,qBAAqB,qBAAqB,cAAc;AAAA,MAC5E;AACA,UAAI,cAAc,oBAAoB;AACpC,qBAAa,KAAK;AAClB,gCAAwB,CAAC;AACzB,0BAAkB,CAAC;AACnB,cAAM,iBAAiB,qBAAqB,qBAAqB;AAEjE,cAAM,mBAAmB,uBAAuB;AAChD,cAAM,oBAAoB,mBAAmB,SAAS,wBAAwB,mBAAmB,IAAI,EAAE;AAEvG,cAAM,2BAA2B,eAAe,cAAc,KAAK,iBAAiB,CAAC;AACrF,cAAM,wBAAwB,4BAA4B,IAAI,qBAAqB;AACnF,cAAM,OAAO,KAAK,IAAI,uBAAuB,qBAAqB;AAClE,YAAI,QAAQ;AAAG;AACf,cAAM,WACJ,cAAe,aAAa,iBAAkB,QAAQ,KAClD,aAAa,KACZ,aAAa,iBAAkB;AACtC,cAAM,cACJ,uBAAuB,WACtB,CAAC,mBAAmB,wBAAwB,wBAAwB;AAGvE,YAAI,cAAc,aAAa,aAAa;AAAU,gCAAsB,aAAa,aAAa,QAAQ;AAAA;AACzG,gCAAsB,WAAW;AACtC,uBAAe,IAAI;AACnB,mBAAW,MAAM,eAAe,WAAW,CAAC;AAC5C,0BAAkB,QAAQ;AAC1B,8BAAsB,UAAU;AAAA,MAClC;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,aAAO;AAAA,IACL,OAAO,EAAE,eAAe,gBAAgB,cAAc,cAAc;AAAA,IACpE,CAAC,cAAc,eAAe,eAAe,cAAc;AAAA,EAC7D;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,10 +45,10 @@ const useScales = ({
|
|
|
45
45
|
innerWidth,
|
|
46
46
|
stackedData,
|
|
47
47
|
currentData,
|
|
48
|
+
scalesStackedDataMap,
|
|
48
49
|
containerRatio
|
|
49
50
|
}) => {
|
|
50
|
-
const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;
|
|
51
|
-
const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
|
|
51
|
+
const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll, yScroll } = props;
|
|
52
52
|
const getBandDomain = (0, import_react.useCallback)(
|
|
53
53
|
(axis) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],
|
|
54
54
|
[series]
|
|
@@ -67,7 +67,7 @@ const useScales = ({
|
|
|
67
67
|
})
|
|
68
68
|
);
|
|
69
69
|
const dataFlattened = data.flat();
|
|
70
|
-
const stackedDataFlatten = stackedData.filter((
|
|
70
|
+
const stackedDataFlatten = stackedData.filter((_, i) => scalesStackedDataMap[i] === axisString).flat();
|
|
71
71
|
const minStackedData = (0, import_d3.min)(stackedDataFlatten, (layer) => (0, import_d3.min)(layer, (sequence) => sequence[0]));
|
|
72
72
|
const maxStackedData = (0, import_d3.max)(stackedDataFlatten, (layer) => (0, import_d3.max)(layer, (sequence) => sequence[1]));
|
|
73
73
|
const minData = (0, import_d3.min)(dataFlattened);
|
|
@@ -77,7 +77,7 @@ const useScales = ({
|
|
|
77
77
|
const aux = [];
|
|
78
78
|
if (typeof begin === "number" || typeof begin === "object")
|
|
79
79
|
aux.push(begin);
|
|
80
|
-
if (types.includes(typeof minData))
|
|
80
|
+
if (types.includes(typeof minData) && minData !== void 0)
|
|
81
81
|
aux.push(minData);
|
|
82
82
|
if (typeof minStackedData === "number")
|
|
83
83
|
aux.push(minStackedData);
|
|
@@ -89,7 +89,7 @@ const useScales = ({
|
|
|
89
89
|
aux.push(begin);
|
|
90
90
|
if (typeof end === "number" || typeof end === "object")
|
|
91
91
|
aux.push(end);
|
|
92
|
-
if (types.includes(typeof maxData))
|
|
92
|
+
if (types.includes(typeof maxData) && maxData !== void 0)
|
|
93
93
|
aux.push(maxData);
|
|
94
94
|
if (typeof maxStackedData === "number")
|
|
95
95
|
aux.push(maxStackedData);
|
|
@@ -115,14 +115,14 @@ const useScales = ({
|
|
|
115
115
|
}
|
|
116
116
|
return [];
|
|
117
117
|
},
|
|
118
|
-
[currentData, stackedData]
|
|
118
|
+
[currentData, scalesStackedDataMap, stackedData]
|
|
119
119
|
);
|
|
120
120
|
const getScaleTime = (domain, range) => (0, import_d3.scaleUtc)().domain(domain).range(range);
|
|
121
121
|
const getScaleBand = (domain, range, padding = 0.2) => (0, import_d3.scaleBand)().domain(domain).range(range).padding(padding).paddingOuter(0.05);
|
|
122
122
|
const getScaleLinear = (domain, range) => (0, import_d3.scaleLinear)().domain(domain).range(range);
|
|
123
123
|
const getScaleLog = (domain, range) => (0, import_d3.scaleLog)().domain(domain).range(range);
|
|
124
124
|
const scaleFactory = (0, import_react.useCallback)(
|
|
125
|
-
(axis, axisProps, range) => {
|
|
125
|
+
(axis, axisProps, range = []) => {
|
|
126
126
|
if (!axisProps)
|
|
127
127
|
return null;
|
|
128
128
|
if (["time", "datetime"].includes(axisProps?.type)) {
|
|
@@ -132,7 +132,7 @@ const useScales = ({
|
|
|
132
132
|
return new import_scales.LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);
|
|
133
133
|
}
|
|
134
134
|
if (axisProps?.type === "log")
|
|
135
|
-
return new import_scales.LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));
|
|
135
|
+
return new import_scales.LogScale(getScaleLog(getLinearDomain(axisProps, axis), range), axisProps);
|
|
136
136
|
if (axisProps?.type === "band" || axis === "x" && axisProps?.type === void 0) {
|
|
137
137
|
const realRange = axis === "y" ? range.reverse() : range;
|
|
138
138
|
return new import_scales.BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);
|
|
@@ -186,7 +186,7 @@ const useScales = ({
|
|
|
186
186
|
}, [currentData, stackedSeries]);
|
|
187
187
|
const getBandwidth = (0, import_react.useCallback)(() => {
|
|
188
188
|
if (xScale?.type === "BAND") {
|
|
189
|
-
return xScale
|
|
189
|
+
return xScale?.getBandwidth();
|
|
190
190
|
}
|
|
191
191
|
if (yScale?.type === "BAND") {
|
|
192
192
|
return yScale?.getBandwidth();
|
|
@@ -194,9 +194,16 @@ const useScales = ({
|
|
|
194
194
|
const bars = currentData.filter((serie) => serie.type === "bar");
|
|
195
195
|
const barsLength = bars.length;
|
|
196
196
|
if (!barsLength)
|
|
197
|
-
return;
|
|
197
|
+
return 0;
|
|
198
198
|
const maxDataLength = Math.max(...bars.map((bar) => bar.data.length));
|
|
199
|
-
|
|
199
|
+
if (xScale && xScale instanceof import_scales.BandScale)
|
|
200
|
+
return 0;
|
|
201
|
+
const divisor = Math.max(
|
|
202
|
+
maxDataLength,
|
|
203
|
+
xScale?.scale.ticks().length ?? 0,
|
|
204
|
+
xScale?.getTicks(innerWidth, "").length ?? 0,
|
|
205
|
+
1
|
|
206
|
+
);
|
|
200
207
|
const width = innerWidth / divisor;
|
|
201
208
|
if (containerRatio > 1) {
|
|
202
209
|
return Math.max(0.5, width * containerRatio);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/config/useScales.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { getStackedIndex } from '../helpers/index.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { TIME_OFFSET } from '../../constants.js';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales/index.js';\ninterface UseScales {\n props: DSChartT.Props;\n innerHeight: number;\n innerWidth: number;\n stackedData: Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n currentData: DSChartT.InternalData;\n groups: string[];\n containerRatio: number;\n}\n\nexport const useScales = ({\n props,\n originalSeries: series,\n innerHeight,\n innerWidth,\n stackedData,\n currentData,\n containerRatio,\n}: UseScales) => {\n const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;\n\n // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n const getBandDomain = useCallback(\n (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n [series],\n );\n\n const getPadding = (domainPadding: number | Array<number>) =>\n typeof domainPadding === 'number' ? [domainPadding, domainPadding] : domainPadding ?? [0, 0];\n\n const getLinearDomain = useCallback(\n (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n // we are calculating the min and max between all the data\n // including the stacked groups if exists\n const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n const end = axis.max ?? undefined;\n const data = currentData\n // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n .filter((serie) => serie.scale === axisString || axisString === 'x')\n .map((serie) =>\n serie.data\n .filter((datum) => datum.value !== null)\n .map((datum) => {\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n\n return datum.value[axisString === 'y2' ? 'y' : axisString];\n }),\n );\n\n const dataFlattened = data.flat();\n const stackedDataFlatten = stackedData.filter((data) => data.scale === axisString).flat();\n const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n const minData = min(dataFlattened);\n const maxData = max(dataFlattened);\n const types = ['number', 'object'];\n\n const getMin = () => {\n const aux = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (types.includes(typeof minData)) aux.push(minData);\n if (typeof minStackedData === 'number') aux.push(minStackedData);\n return min(aux);\n };\n const getMax = () => {\n const aux = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n if (types.includes(typeof maxData)) aux.push(maxData);\n if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n return max(aux);\n };\n const minRange = getMin();\n const maxRange = getMax();\n\n const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n if (typeof minRange === 'number' && typeof maxRange === 'number') {\n // @TODO fix this domain padding\n return [\n minRange - (maxRange - minRange) * (leftPadding ?? 0),\n maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n ];\n }\n // timelinear case\n if (typeof minRange === 'object' && typeof maxRange === 'object') {\n if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n return [\n TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n ];\n }\n return [minRange, maxRange];\n }\n\n return [];\n },\n [currentData, stackedData],\n );\n\n // d3 scale functions\n const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n // dataviz scales\n\n const scaleFactory = useCallback(\n (axis: 'x' | 'y' | 'y2', axisProps: DSChartT.AxisT, range: number[]) => {\n if (!axisProps) return null;\n if (['time', 'datetime'].includes(axisProps?.type)) {\n return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis), range), axisProps);\n }\n\n if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);\n }\n\n if (axisProps?.type === 'log') return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));\n\n if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n // we need to reverse the range in case is a horizontal bar char\n const realRange = axis === 'y' ? range.reverse() : range;\n return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);\n }\n return null;\n },\n [getBandDomain, getLinearDomain],\n );\n\n const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n const xRangeTo = useMemo(\n () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n );\n\n const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n const yRangeFrom = useMemo(\n () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n );\n\n const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n const y2RangeFrom = useMemo(\n () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n );\n\n const xScale = useMemo(\n () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n );\n\n const yScale = useMemo(\n () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n );\n\n const y2Scale = useMemo(\n () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n );\n\n const colorScale = useMemo(\n () =>\n scaleOrdinal()\n .domain(series.map((d) => d.name))\n .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n .unknown('red'),\n [series],\n );\n // get only groups bars to calculate the subgroup scale\n\n const subgroupsWithBars = useMemo(() => {\n const data = currentData\n .filter(\n (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n )\n .map((serie) => serie.name);\n\n if (stackedSeries?.length) {\n stackedSeries.forEach((stackedGroup, i) => {\n if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n });\n }\n return data;\n }, [currentData, stackedSeries]);\n\n const getBandwidth = useCallback(() => {\n if (xScale?.type === 'BAND') {\n return xScale.getBandwidth();\n }\n if (yScale?.type === 'BAND') {\n return yScale?.getBandwidth();\n }\n // @todo explore this. is to create bars with a linear axis\n const bars = currentData.filter((serie) => serie.type === 'bar');\n const barsLength = bars.length;\n if (!barsLength) return;\n // we get the size of the bars using the length of the data or the ticks amounts\n // the biggest is the one we use to get the real width we need.\n // we are doing calculations only for x axis because we are not expecting\n // y axis linear cases.\n const maxDataLength = Math.max(...bars.map((bar) => bar.data.length));\n const divisor = Math.max(maxDataLength, xScale?.scale.ticks().length, xScale?.getTicks(innerWidth).length, 1);\n\n const width = innerWidth / divisor;\n if (containerRatio > 1) {\n return Math.max(0.5, width * containerRatio);\n }\n // this reduce the width of the bars under small width graphs\n const modificator = innerWidth > 400 ? 0.5 : 0.8;\n return Math.max(0.5, Math.min(20, Math.trunc(width - width * modificator)));\n }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n const subGroupScale = useMemo(\n () =>\n getBandwidth()\n ? scaleBand()\n .domain(subgroupsWithBars)\n .range([0, getBandwidth()])\n .paddingInner(0.55)\n .padding(0.2)\n .paddingOuter(0.01)\n : null,\n [getBandwidth, subgroupsWithBars],\n );\n\n return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqC;AAErC,gBAAmF;AAEnF,qBAAgC;AAChC,yBAA6B;AAC7B,uBAA4B;AAC5B,oBAAkE;
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { getStackedIndex } from '../helpers/index.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { TIME_OFFSET } from '../../constants.js';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales/index.js';\ninterface UseScales {\n props: DSChartT.Props;\n innerHeight: number;\n innerWidth: number;\n originalSeries: DSChartT.SeriesT[];\n stackedData: Series<\n {\n [key: string]: number;\n },\n string\n >[][];\n currentData: DSChartT.InternalData;\n groups: string[];\n containerRatio: number;\n scalesStackedDataMap: string[];\n}\n\nexport const useScales = ({\n props,\n originalSeries: series,\n innerHeight,\n innerWidth,\n stackedData,\n currentData,\n scalesStackedDataMap,\n containerRatio,\n}: UseScales) => {\n const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll, yScroll } = props;\n\n const getBandDomain = useCallback(\n (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n [series],\n );\n\n const getPadding = (domainPadding?: number | Array<number>) =>\n typeof domainPadding === 'number' ? [domainPadding, domainPadding] : domainPadding ?? [0, 0];\n\n const getLinearDomain = useCallback(\n (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n // we are calculating the min and max between all the data\n // including the stacked groups if exists\n const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n const end = axis.max ?? undefined;\n const data = currentData\n // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n .filter((serie) => serie.scale === axisString || axisString === 'x')\n .map((serie) =>\n serie.data\n .filter((datum) => datum.value !== null)\n .map((datum) => {\n if (typeof datum.value === 'number') {\n return datum.value;\n }\n\n return datum.value[axisString === 'y2' ? 'y' : axisString];\n }),\n );\n const dataFlattened = data.flat();\n const stackedDataFlatten = stackedData.filter((_, i) => scalesStackedDataMap[i] === axisString).flat();\n const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n const minData = min(dataFlattened);\n const maxData = max(dataFlattened);\n const types = ['number', 'object'];\n const getMin = () => {\n const aux: (number | Date)[] = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (types.includes(typeof minData) && minData !== undefined) aux.push(minData);\n if (typeof minStackedData === 'number') aux.push(minStackedData);\n return min(aux);\n };\n const getMax = () => {\n const aux: (number | Date)[] = [];\n if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n if (types.includes(typeof maxData) && maxData !== undefined) aux.push(maxData);\n if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n return max(aux);\n };\n const minRange = getMin();\n const maxRange = getMax();\n\n const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n if (typeof minRange === 'number' && typeof maxRange === 'number') {\n // @TODO fix this domain padding\n return [\n minRange - (maxRange - minRange) * (leftPadding ?? 0),\n maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n ];\n }\n // timelinear case\n if (typeof minRange === 'object' && typeof maxRange === 'object') {\n if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n return [\n TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n ];\n }\n return [minRange, maxRange];\n }\n\n return [];\n },\n [currentData, scalesStackedDataMap, stackedData],\n );\n\n // d3 scale functions\n const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n // dataviz scales\n\n const scaleFactory = useCallback(\n (axis: 'x' | 'y' | 'y2', axisProps?: DSChartT.AxisT, range: number[] = []) => {\n if (!axisProps) return null;\n if (['time', 'datetime'].includes(axisProps?.type)) {\n return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis) as Date[], range), axisProps);\n }\n\n if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n }\n\n if (axisProps?.type === 'log')\n return new LogScale(getScaleLog(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n\n if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n // we need to reverse the range in case is a horizontal bar char\n const realRange = axis === 'y' ? range.reverse() : range;\n return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);\n }\n return null;\n },\n [getBandDomain, getLinearDomain],\n );\n\n const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n const xRangeTo = useMemo(\n () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n );\n\n const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n const yRangeFrom = useMemo(\n () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n );\n\n const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n const y2RangeFrom = useMemo(\n () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n );\n\n const xScale = useMemo(\n () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n );\n\n const yScale = useMemo(\n () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n );\n\n const y2Scale = useMemo(\n () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n );\n\n const colorScale = useMemo(\n () =>\n scaleOrdinal()\n .domain(series.map((d) => d.name))\n .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n .unknown('red'),\n [series],\n );\n // get only groups bars to calculate the subgroup scale\n\n const subgroupsWithBars = useMemo(() => {\n const data = currentData\n .filter(\n (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n )\n .map((serie) => serie.name);\n\n if (stackedSeries?.length) {\n stackedSeries.forEach((stackedGroup, i) => {\n if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n });\n }\n return data;\n }, [currentData, stackedSeries]);\n\n const getBandwidth = useCallback(() => {\n if (xScale?.type === 'BAND') {\n return xScale?.getBandwidth();\n }\n if (yScale?.type === 'BAND') {\n return yScale?.getBandwidth();\n }\n // @todo explore this. is to create bars with a linear axis\n const bars = currentData.filter((serie) => serie.type === 'bar');\n const barsLength = bars.length;\n if (!barsLength) return 0;\n // we get the size of the bars using the length of the data or the ticks amounts\n // the biggest is the one we use to get the real width we need.\n // we are doing calculations only for x axis because we are not expecting\n // y axis linear cases.\n const maxDataLength = Math.max(...bars.map((bar) => bar.data.length));\n if (xScale && xScale instanceof BandScale) return 0;\n const divisor = Math.max(\n maxDataLength,\n xScale?.scale.ticks().length ?? 0,\n xScale?.getTicks(innerWidth, '').length ?? 0,\n 1,\n );\n\n const width = innerWidth / divisor;\n if (containerRatio > 1) {\n return Math.max(0.5, width * containerRatio);\n }\n // this reduce the width of the bars under small width graphs\n const modificator = innerWidth > 400 ? 0.5 : 0.8;\n return Math.max(0.5, Math.min(20, Math.trunc(width - width * modificator)));\n }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n const subGroupScale = useMemo(\n () =>\n getBandwidth()\n ? scaleBand()\n .domain(subgroupsWithBars)\n .range([0, getBandwidth()])\n .paddingInner(0.55)\n .padding(0.2)\n .paddingOuter(0.01)\n : null,\n [getBandwidth, subgroupsWithBars],\n );\n\n return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/helpers/colorPallet.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const COLOR_PALLET = {\n 'blue-100': '#1E79C2',\n 'blue-200': '#165A91',\n 'blue-400': '#10426A',\n 'magenta-100': '#CA3981',\n 'magenta-200': '#832553',\n 'magenta-400': '#6E1F46',\n 'orange-100': '#B25119',\n 'orange-200': '#853C12',\n 'orange-400': '#612C0D',\n 'purple-100': '#8E49B2',\n 'purple-200': '#61327A',\n 'purple-400': '#4D2861',\n 'green-100': '#007A78',\n 'green-200': '#005B59',\n 'green-400': '#004241',\n 'grey-100': '#697489',\n 'grey-200': '#4E5666',\n 'grey-400': '#323842',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["export const COLOR_PALLET = {\n 'blue-100': '#1E79C2',\n 'blue-200': '#165A91',\n 'blue-400': '#10426A',\n 'magenta-100': '#CA3981',\n 'magenta-200': '#832553',\n 'magenta-400': '#6E1F46',\n 'orange-100': '#B25119',\n 'orange-200': '#853C12',\n 'orange-400': '#612C0D',\n 'purple-100': '#8E49B2',\n 'purple-200': '#61327A',\n 'purple-400': '#4D2861',\n 'green-100': '#007A78',\n 'green-200': '#005B59',\n 'green-400': '#004241',\n 'grey-100': '#697489',\n 'grey-200': '#4E5666',\n 'grey-400': '#323842',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,6 +36,8 @@ module.exports = __toCommonJS(helpers_exports);
|
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_d3 = require("d3");
|
|
38
38
|
const getStackedIndex = (groups, serie) => {
|
|
39
|
+
if (!groups)
|
|
40
|
+
return -1;
|
|
39
41
|
for (let i = 0; i < groups.length; i += 1) {
|
|
40
42
|
for (let j = 0; j < groups[i].length; j += 1) {
|
|
41
43
|
if (groups[i][j] === serie)
|
|
@@ -63,7 +65,7 @@ const stackData = (groupsStacked, series, hiddenSeries, isHorizontal) => {
|
|
|
63
65
|
const allSeriesStackedByGroups = [];
|
|
64
66
|
const scalesStackedDataMap = [];
|
|
65
67
|
if (!groupsStacked)
|
|
66
|
-
return
|
|
68
|
+
return { stackedData: allSeriesStackedByGroups, scalesStackedDataMap };
|
|
67
69
|
groupsStacked?.forEach((g) => {
|
|
68
70
|
const seriesFilteredByStackGroup = series.filter(
|
|
69
71
|
(serie) => g.includes(serie.name) && !hiddenSeries.includes(serie.name)
|
|
@@ -84,7 +86,6 @@ const stackData = (groupsStacked, series, hiddenSeries, isHorizontal) => {
|
|
|
84
86
|
});
|
|
85
87
|
allSeriesStackedByGroups.push((0, import_d3.stack)().offset(import_d3.stackOffsetDiverging).keys(keys)(stackedData));
|
|
86
88
|
});
|
|
87
|
-
|
|
88
|
-
return allSeriesStackedByGroups;
|
|
89
|
+
return { stackedData: allSeriesStackedByGroups, scalesStackedDataMap };
|
|
89
90
|
};
|
|
90
91
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/graphs/Chart/helpers/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\nimport { stack,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\nimport { stack, stackOffsetDiverging } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\n\nexport const getStackedIndex = (groups?: string[][], serie?: string) => {\n if (!groups) return -1;\n for (let i = 0; i < groups.length; i += 1) {\n for (let j = 0; j < groups[i].length; j += 1) {\n if (groups[i][j] === serie) return i;\n }\n }\n return -1;\n};\n\nexport const getStackedData = (stackedData: DSChartT.StackedSeriesByGroupT, serie: DSChartT.InternalSerie) => {\n for (let i = 0; i < stackedData?.length; i += 1) {\n const data = stackedData[i].find((d) => d.key === serie.name);\n if (data) return data;\n }\n return false;\n};\n\n// this function check if the series that are stacked share the same scale.\n// return the scale or false if they dont share it\n//\n// si serie.scale === undefined ... la scala es Y\n\nconst checkSharedScale = (series: DSChartT.SeriesT[], isHorizontal: boolean) => {\n const scales = series\n .map((serie) => serie.scale || (isHorizontal ? 'x' : 'y'))\n .filter((value, index, self) => self.indexOf(value) === index);\n if (scales.length > 1) {\n return false;\n }\n return scales[0];\n};\n\n// transform series grouped in stack into what d3 stack function need to read\nexport const stackData = (\n groupsStacked: string[][] | undefined,\n series: DSChartT.SeriesT[],\n hiddenSeries: string[],\n isHorizontal: boolean,\n) => {\n const allSeriesStackedByGroups: DSChartT.StackedSeriesByGroupT = [];\n const scalesStackedDataMap: string[] = [];\n if (!groupsStacked) return { stackedData: allSeriesStackedByGroups, scalesStackedDataMap };\n\n groupsStacked?.forEach((g) => {\n const seriesFilteredByStackGroup = series.filter(\n (serie) => g.includes(serie.name) && !hiddenSeries.includes(serie.name),\n );\n const sharedScale = checkSharedScale(seriesFilteredByStackGroup, isHorizontal);\n if (!sharedScale) return;\n scalesStackedDataMap.push(sharedScale);\n const keys = seriesFilteredByStackGroup.map((serie) => serie.name);\n const stackedData: Array<{ [serieName: string]: number }> = [];\n seriesFilteredByStackGroup.forEach((serie) => {\n serie.data.forEach((d, i) => {\n stackedData[i] = {\n ...stackedData[i],\n [serie.name]: typeof d === 'number' ? d : d?.y || 0,\n };\n });\n });\n\n allSeriesStackedByGroups.push(stack().offset(stackOffsetDiverging).keys(keys)(stackedData));\n });\n\n return { stackedData: allSeriesStackedByGroups, scalesStackedDataMap };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,gBAA4C;AAGrC,MAAM,kBAAkB,CAAC,QAAqB,UAAmB;AACtE,MAAI,CAAC;AAAQ,WAAO;AACpB,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;AACzC,aAAS,IAAI,GAAG,IAAI,OAAO,CAAC,EAAE,QAAQ,KAAK,GAAG;AAC5C,UAAI,OAAO,CAAC,EAAE,CAAC,MAAM;AAAO,eAAO;AAAA,IACrC;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,aAA6C,UAAkC;AAC5G,WAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAM,OAAO,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC5D,QAAI;AAAM,aAAO;AAAA,EACnB;AACA,SAAO;AACT;AAOA,MAAM,mBAAmB,CAAC,QAA4B,iBAA0B;AAC9E,QAAM,SAAS,OACZ,IAAI,CAAC,UAAU,MAAM,UAAU,eAAe,MAAM,IAAI,EACxD,OAAO,CAAC,OAAO,OAAO,SAAS,KAAK,QAAQ,KAAK,MAAM,KAAK;AAC/D,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO;AAAA,EACT;AACA,SAAO,OAAO,CAAC;AACjB;AAGO,MAAM,YAAY,CACvB,eACA,QACA,cACA,iBACG;AACH,QAAM,2BAA2D,CAAC;AAClE,QAAM,uBAAiC,CAAC;AACxC,MAAI,CAAC;AAAe,WAAO,EAAE,aAAa,0BAA0B,qBAAqB;AAEzF,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO;AAAA,MACxC,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,KAAK,CAAC,aAAa,SAAS,MAAM,IAAI;AAAA,IACxE;AACA,UAAM,cAAc,iBAAiB,4BAA4B,YAAY;AAC7E,QAAI,CAAC;AAAa;AAClB,yBAAqB,KAAK,WAAW;AACrC,UAAM,OAAO,2BAA2B,IAAI,CAAC,UAAU,MAAM,IAAI;AACjE,UAAM,cAAsD,CAAC;AAC7D,+BAA2B,QAAQ,CAAC,UAAU;AAC5C,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,oBAAY,CAAC,IAAI;AAAA,UACf,GAAG,YAAY,CAAC;AAAA,UAChB,CAAC,MAAM,IAAI,GAAG,OAAO,MAAM,WAAW,IAAI,GAAG,KAAK;AAAA,QACpD;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,6BAAyB,SAAK,iBAAM,EAAE,OAAO,8BAAoB,EAAE,KAAK,IAAI,EAAE,WAAW,CAAC;AAAA,EAC5F,CAAC;AAED,SAAO,EAAE,aAAa,0BAA0B,qBAAqB;AACvE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,16 +36,16 @@ var import_react = require("react");
|
|
|
36
36
|
var import_ChartContext = require("../ChartContext.js");
|
|
37
37
|
const useUniqueData = () => {
|
|
38
38
|
const {
|
|
39
|
-
props: { xAxis },
|
|
40
39
|
currentData: data,
|
|
41
40
|
xScale,
|
|
42
41
|
xScrollbarPosition,
|
|
43
42
|
containerRatio,
|
|
44
43
|
innerWidth,
|
|
45
44
|
getXValue,
|
|
46
|
-
getYValue
|
|
45
|
+
getYValue,
|
|
46
|
+
getXScaleValue
|
|
47
47
|
} = (0, import_react.useContext)(import_ChartContext.ChartContext);
|
|
48
|
-
|
|
48
|
+
const compare = (0, import_react.useCallback)((a, b) => {
|
|
49
49
|
if (a.xPosition < b.xPosition) {
|
|
50
50
|
return -1;
|
|
51
51
|
}
|
|
@@ -53,68 +53,81 @@ const useUniqueData = () => {
|
|
|
53
53
|
return 1;
|
|
54
54
|
}
|
|
55
55
|
return 0;
|
|
56
|
-
}
|
|
57
|
-
const isBandAxis = xScale
|
|
56
|
+
}, []);
|
|
57
|
+
const isBandAxis = xScale?.type === "BAND";
|
|
58
58
|
return (0, import_react.useMemo)(() => {
|
|
59
|
-
let valueToPositionPerSeries;
|
|
59
|
+
let valueToPositionPerSeries = [];
|
|
60
60
|
if (isBandAxis) {
|
|
61
61
|
valueToPositionPerSeries = data.map(
|
|
62
62
|
(serie) => serie.data.filter((datum) => {
|
|
63
|
-
const xScaleValue =
|
|
63
|
+
const xScaleValue = getXScaleValue(datum);
|
|
64
|
+
if (xScaleValue === void 0)
|
|
65
|
+
return false;
|
|
64
66
|
return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth;
|
|
65
67
|
}).map((datum) => {
|
|
66
68
|
const x = getXValue(datum);
|
|
67
69
|
const y = getYValue(datum);
|
|
70
|
+
const xScaleValue = getXScaleValue(datum);
|
|
68
71
|
return {
|
|
69
|
-
position:
|
|
72
|
+
position: xScaleValue,
|
|
70
73
|
name: serie.name,
|
|
71
74
|
xValue: x,
|
|
72
75
|
yValue: y,
|
|
73
76
|
key: datum.position,
|
|
74
|
-
datum
|
|
77
|
+
datum,
|
|
78
|
+
color: serie.color
|
|
75
79
|
};
|
|
76
80
|
})
|
|
77
81
|
).flat(1);
|
|
78
82
|
} else {
|
|
79
83
|
valueToPositionPerSeries = data.map(
|
|
80
84
|
(serie) => serie.data.filter((datum) => {
|
|
81
|
-
const xScaleValue =
|
|
85
|
+
const xScaleValue = getXScaleValue(datum);
|
|
86
|
+
if (xScaleValue === void 0)
|
|
87
|
+
return false;
|
|
82
88
|
return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth;
|
|
83
|
-
}).map((datum) =>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
}).map((datum) => {
|
|
90
|
+
const xScaleValue = getXScaleValue(datum);
|
|
91
|
+
const x = getXValue(datum);
|
|
92
|
+
return {
|
|
93
|
+
position: xScaleValue,
|
|
94
|
+
name: serie.name,
|
|
95
|
+
xValue: x,
|
|
96
|
+
yValue: typeof datum.value === "number" ? datum.value : datum.value.y,
|
|
97
|
+
key: datum.position,
|
|
98
|
+
datum,
|
|
99
|
+
color: serie.color
|
|
100
|
+
};
|
|
101
|
+
})
|
|
91
102
|
).flat(1);
|
|
92
103
|
}
|
|
93
|
-
const
|
|
104
|
+
const positionUniqueData = {};
|
|
94
105
|
valueToPositionPerSeries.forEach((set) => {
|
|
95
|
-
if (
|
|
96
|
-
|
|
106
|
+
if (!set.position)
|
|
107
|
+
return;
|
|
108
|
+
if (positionUniqueData[set.position]) {
|
|
109
|
+
positionUniqueData[set.position] = [...positionUniqueData[set.position], { ...set }];
|
|
97
110
|
} else {
|
|
98
|
-
|
|
111
|
+
positionUniqueData[set.position] = [{ ...set }];
|
|
99
112
|
}
|
|
100
113
|
});
|
|
101
|
-
const
|
|
114
|
+
const positionUniqueDataArray = Object.keys(positionUniqueData).map((key) => {
|
|
102
115
|
const xPosition = parseFloat(key);
|
|
103
|
-
const
|
|
104
|
-
return { xPosition,
|
|
116
|
+
const dataPerPosition = positionUniqueData[xPosition];
|
|
117
|
+
return { xPosition, dataPerPosition, xValue: dataPerPosition[0].xValue };
|
|
105
118
|
});
|
|
106
119
|
if (isBandAxis) {
|
|
107
|
-
return
|
|
120
|
+
return positionUniqueDataArray;
|
|
108
121
|
}
|
|
109
|
-
return
|
|
110
|
-
const prevPoint =
|
|
111
|
-
const postPoint =
|
|
122
|
+
return positionUniqueDataArray.sort(compare).map((line, i, array) => {
|
|
123
|
+
const prevPoint = array[i - 1]?.xPosition ?? 0;
|
|
124
|
+
const postPoint = array[i + 1]?.xPosition ?? 0;
|
|
112
125
|
const rectDetector = {
|
|
113
126
|
left: (line.xPosition - prevPoint) / 2,
|
|
114
127
|
right: Math.abs((postPoint === 0 ? 0 : postPoint - line.xPosition) / 2)
|
|
115
128
|
};
|
|
116
129
|
return { ...line, rectDetector };
|
|
117
130
|
});
|
|
118
|
-
}, [isBandAxis,
|
|
131
|
+
}, [isBandAxis, compare, data, getXScaleValue, xScrollbarPosition, containerRatio, innerWidth, getXValue, getYValue]);
|
|
119
132
|
};
|
|
120
133
|
//# sourceMappingURL=useUniqueData.js.map
|