@gravity-ui/charts 1.41.1 → 1.41.2
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/components/ChartInner/index.js +2 -2
- package/dist/cjs/components/ChartInner/useDefaultState.js +4 -1
- package/dist/cjs/hooks/useRangeSlider/index.js +5 -2
- package/dist/cjs/hooks/useRangeSlider/types.d.ts +1 -0
- package/dist/esm/components/ChartInner/index.js +2 -2
- package/dist/esm/components/ChartInner/useDefaultState.js +4 -1
- package/dist/esm/hooks/useRangeSlider/index.js +5 -2
- package/dist/esm/hooks/useRangeSlider/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -61,7 +61,7 @@ export const ChartInner = (props) => {
|
|
|
61
61
|
preparedRangeSlider,
|
|
62
62
|
tooltip: preparedTooltip,
|
|
63
63
|
});
|
|
64
|
-
const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
|
|
64
|
+
const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
|
|
65
65
|
dispatcher,
|
|
66
66
|
htmlLayout, plotNode: plotRef.current, preparedChart,
|
|
67
67
|
rangeSliderState,
|
|
@@ -270,7 +270,7 @@ export const ChartInner = (props) => {
|
|
|
270
270
|
((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
|
|
271
271
|
preparedLegend &&
|
|
272
272
|
debouncedAllPreparedSeries &&
|
|
273
|
-
preparedSeriesOptions && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
|
|
273
|
+
preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
|
|
274
274
|
(preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
|
|
275
275
|
return (React.createElement("div", { className: b() },
|
|
276
276
|
React.createElement("svg", { ref: svgRef, width: width, height: height,
|
|
@@ -16,7 +16,7 @@ export function useDefaultState(props) {
|
|
|
16
16
|
// Defer dispatch so shape components (Area, Line, etc.) register their hover-shape.*
|
|
17
17
|
// listeners first; parent effects run before child effects in React.
|
|
18
18
|
queueMicrotask(() => {
|
|
19
|
-
var _a;
|
|
19
|
+
var _a, _b;
|
|
20
20
|
const x = calculateNumericProperty({ value: hoveredPosition.x, base: boundsWidth });
|
|
21
21
|
const y = calculateNumericProperty({ value: hoveredPosition.y, base: boundsHeight });
|
|
22
22
|
if (x === undefined || y === undefined) {
|
|
@@ -48,6 +48,9 @@ export function useDefaultState(props) {
|
|
|
48
48
|
clientX: rect.left + svgPointerX,
|
|
49
49
|
clientY: rect.top + svgPointerY,
|
|
50
50
|
});
|
|
51
|
+
if (syntheticEvent) {
|
|
52
|
+
(_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.dispatchEvent(syntheticEvent);
|
|
53
|
+
}
|
|
51
54
|
dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
|
|
52
55
|
hovered: closest,
|
|
53
56
|
xAxis,
|
|
@@ -17,15 +17,18 @@ const CLIP_PATH_BY_SERIES_TYPE = {
|
|
|
17
17
|
[SERIES_TYPE.Scatter]: true,
|
|
18
18
|
};
|
|
19
19
|
export function useRangeSlider(props) {
|
|
20
|
-
const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
|
|
20
|
+
const { activeLegendItems, boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
|
|
21
21
|
const filteredPreparedSeries = React.useMemo(() => {
|
|
22
22
|
return preparedSeries.filter((s) => {
|
|
23
|
+
if (s.legend.enabled && !activeLegendItems.includes(s.legend.groupId)) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
23
26
|
if ('rangeSlider' in s && !s.rangeSlider.visible) {
|
|
24
27
|
return false;
|
|
25
28
|
}
|
|
26
29
|
return true;
|
|
27
30
|
});
|
|
28
|
-
}, [preparedSeries]);
|
|
31
|
+
}, [preparedSeries, activeLegendItems]);
|
|
29
32
|
const { xAxis: preparedXAxis, yAxis: preparedYAxis } = useAxis({
|
|
30
33
|
boundsHeight: preparedRangeSlider.height,
|
|
31
34
|
height,
|
|
@@ -61,7 +61,7 @@ export const ChartInner = (props) => {
|
|
|
61
61
|
preparedRangeSlider,
|
|
62
62
|
tooltip: preparedTooltip,
|
|
63
63
|
});
|
|
64
|
-
const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
|
|
64
|
+
const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
|
|
65
65
|
dispatcher,
|
|
66
66
|
htmlLayout, plotNode: plotRef.current, preparedChart,
|
|
67
67
|
rangeSliderState,
|
|
@@ -270,7 +270,7 @@ export const ChartInner = (props) => {
|
|
|
270
270
|
((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
|
|
271
271
|
preparedLegend &&
|
|
272
272
|
debouncedAllPreparedSeries &&
|
|
273
|
-
preparedSeriesOptions && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
|
|
273
|
+
preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
|
|
274
274
|
(preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
|
|
275
275
|
return (React.createElement("div", { className: b() },
|
|
276
276
|
React.createElement("svg", { ref: svgRef, width: width, height: height,
|
|
@@ -16,7 +16,7 @@ export function useDefaultState(props) {
|
|
|
16
16
|
// Defer dispatch so shape components (Area, Line, etc.) register their hover-shape.*
|
|
17
17
|
// listeners first; parent effects run before child effects in React.
|
|
18
18
|
queueMicrotask(() => {
|
|
19
|
-
var _a;
|
|
19
|
+
var _a, _b;
|
|
20
20
|
const x = calculateNumericProperty({ value: hoveredPosition.x, base: boundsWidth });
|
|
21
21
|
const y = calculateNumericProperty({ value: hoveredPosition.y, base: boundsHeight });
|
|
22
22
|
if (x === undefined || y === undefined) {
|
|
@@ -48,6 +48,9 @@ export function useDefaultState(props) {
|
|
|
48
48
|
clientX: rect.left + svgPointerX,
|
|
49
49
|
clientY: rect.top + svgPointerY,
|
|
50
50
|
});
|
|
51
|
+
if (syntheticEvent) {
|
|
52
|
+
(_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.dispatchEvent(syntheticEvent);
|
|
53
|
+
}
|
|
51
54
|
dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
|
|
52
55
|
hovered: closest,
|
|
53
56
|
xAxis,
|
|
@@ -17,15 +17,18 @@ const CLIP_PATH_BY_SERIES_TYPE = {
|
|
|
17
17
|
[SERIES_TYPE.Scatter]: true,
|
|
18
18
|
};
|
|
19
19
|
export function useRangeSlider(props) {
|
|
20
|
-
const { boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
|
|
20
|
+
const { activeLegendItems, boundsWidth, boundsOffsetLeft, clipPathId, height, htmlLayout, onUpdate, preparedChart, preparedLegend, legendConfig, preparedSeries, preparedSeriesOptions, preparedRangeSlider, rangeSliderState, width, xAxis, yAxis, } = props;
|
|
21
21
|
const filteredPreparedSeries = React.useMemo(() => {
|
|
22
22
|
return preparedSeries.filter((s) => {
|
|
23
|
+
if (s.legend.enabled && !activeLegendItems.includes(s.legend.groupId)) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
23
26
|
if ('rangeSlider' in s && !s.rangeSlider.visible) {
|
|
24
27
|
return false;
|
|
25
28
|
}
|
|
26
29
|
return true;
|
|
27
30
|
});
|
|
28
|
-
}, [preparedSeries]);
|
|
31
|
+
}, [preparedSeries, activeLegendItems]);
|
|
29
32
|
const { xAxis: preparedXAxis, yAxis: preparedYAxis } = useAxis({
|
|
30
33
|
boundsHeight: preparedRangeSlider.height,
|
|
31
34
|
height,
|