@gravity-ui/charts 1.8.0 → 1.10.0

package/dist/cjs/components/ChartInner/index.js

@@ -1,4 +1,7 @@
 import React from 'react';
+import { ArrowRotateLeft } from '@gravity-ui/icons';
+import { Button, ButtonIcon } from '@gravity-ui/uikit';
+import { useCrosshair } from '../../hooks';
 import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
 import { Legend } from '../Legend';
@@ -14,10 +17,13 @@ export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
-    const htmlLayerRef = React.useRef(null);
+    const [htmlLayout, setHtmlLayout] = React.useState(null);
     const plotRef = React.useRef(null);
+    const plotBeforeRef = React.useRef(null);
+    const plotAfterRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current, svgContainer: svgRef.current }));
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
+        htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
         tooltip,
@@ -39,6 +45,19 @@ export const ChartInner = (props) => {
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
+    useCrosshair({
+        split: preparedSplit,
+        plotElement: plotAfterRef.current,
+        boundsOffsetLeft,
+        boundsOffsetTop,
+        width: boundsWidth,
+        height: boundsHeight,
+        xAxis,
+        yAxes: yAxis,
+        yScale,
+        xScale,
+        dispatcher,
+    });
     React.useEffect(() => {
         if (clickHandler) {
             dispatcher.on(EventType.CLICK_CHART, clickHandler);
@@ -60,20 +79,28 @@ export const ChartInner = (props) => {
         }
     }, [prevWidth, width, prevHeight, height, tooltipPinned, unpinTooltip]);
     return (React.createElement("div", { className: b() },
-        React.createElement("svg", { ref: svgRef, width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
+        React.createElement("svg", { ref: svgRef, width: width, height: height, 
+            // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
+            // when starting to select an area, the tooltip remains in the position where the selection began
+            onPointerMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
             })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
-                    React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
-                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotRef: plotRef })))),
-                shapes),
-            preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayerRef.current }))),
-        React.createElement("div", { className: b('html-layer'), ref: htmlLayerRef, style: {
+                    React.createElement(AxisY, { bottomLimit: svgBottomPos, axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }),
+                    xAxis && (React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
+                        React.createElement(AxisX, { leftmostLimit: svgXPos, axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit, plotBeforeRef: plotBeforeRef, plotAfterRef: plotAfterRef }))))),
+                React.createElement("g", { ref: plotBeforeRef }),
+                shapes,
+                React.createElement("g", { ref: plotAfterRef })),
+            (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))),
+        React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
+        handleZoomReset && (React.createElement(Button, { style: { position: 'absolute', top: 0, right: 0 }, onClick: handleZoomReset },
+            React.createElement(ButtonIcon, null,
+                React.createElement(ArrowRotateLeft, null)))),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));
 };

package/dist/cjs/components/ChartInner/useChartInnerHandlers.d.ts

@@ -14,7 +14,7 @@ type Props = {
     togglePinTooltip: ChartInnerState['togglePinTooltip'];
     tooltipPinned: boolean;
     unpinTooltip: ChartInnerState['unpinTooltip'];
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     tooltipThrottle: number;
 };

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
+import type { PreparedAxis } from '../../hooks';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
     svgContainer: SVGGElement | null;
+    plotNode: SVGGElement | null;
 };
 export declare function useChartInnerProps(props: Props): {
     svgBottomPos: number | undefined;
@@ -14,6 +16,7 @@ export declare function useChartInnerProps(props: Props): {
     boundsOffsetTop: number;
     boundsWidth: number;
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
+    handleZoomReset: (() => void) | undefined;
     legendConfig: {
         offset: {
             left: number;
@@ -25,9 +28,9 @@ export declare function useChartInnerProps(props: Props): {
                 end: number;
             }[];
         } | undefined;
-    };
-    legendItems: import("../../hooks").LegendItem[][];
-    preparedLegend: import("../../hooks").PreparedLegend;
+    } | undefined;
+    legendItems: never[] | import("../../hooks").LegendItem[][];
+    preparedLegend: import("../../hooks").PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSplit: import("../../hooks").PreparedSplit;
     prevHeight: number | undefined;
@@ -41,9 +44,9 @@ export declare function useChartInnerProps(props: Props): {
         enabled: boolean;
         throttle: number;
     };
-    xAxis: import("../../hooks").PreparedAxis;
+    xAxis: PreparedAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
-    yAxis: import("../../hooks").PreparedAxis[];
+    yAxis: PreparedAxis[];
     yScale: import("../../hooks").ChartScale[] | undefined;
 };
 export {};

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -1,28 +1,44 @@
 import React from 'react';
 import { useAxisScales, useChartDimensions, useChartOptions, usePrevious, useSeries, useShapes, useSplit, } from '../../hooks';
+import { getZoomedSeriesData } from '../../hooks/hooks-utils';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../../hooks/useChartOptions/y-axis';
+import { useZoom } from '../../hooks/useZoom';
+import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 export function useChartInnerProps(props) {
     var _a;
-    const { width, height, data, dispatcher, htmlLayout, svgContainer } = props;
+    const { width, height, data, dispatcher, htmlLayout, svgContainer, plotNode } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
+    const [zoomState, setZoomState] = React.useState({});
     const { chart, title, tooltip, colors } = useChartOptions({ data });
-    const xAxis = React.useMemo(() => getPreparedXAxis({ xAxis: data.xAxis, width, series: data.series.data }), [data, width]);
-    const yAxis = React.useMemo(() => getPreparedYAxis({
-        series: data.series.data,
-        yAxis: data.yAxis,
-        height,
-    }), [data, height]);
+    const zoomedSeriesData = React.useMemo(() => {
+        return getZoomedSeriesData({
+            seriesData: data.series.data,
+            xAxis: data.xAxis,
+            yAxises: data.yAxis,
+            zoomState,
+        });
+    }, [data.series.data, data.xAxis, data.yAxis, zoomState]);
+    const [xAxis, setXAxis] = React.useState(null);
+    React.useEffect(() => {
+        getPreparedXAxis({ xAxis: data.xAxis, width, seriesData: zoomedSeriesData }).then((val) => setXAxis(val));
+    }, [data.xAxis, width, zoomedSeriesData]);
+    const [yAxis, setYAxis] = React.useState([]);
+    React.useEffect(() => {
+        getPreparedYAxis({ yAxis: data.yAxis, height, seriesData: zoomedSeriesData }).then((val) => setYAxis(val));
+    }, [data.yAxis, height, zoomedSeriesData]);
     const { legendItems, legendConfig, preparedSeries, preparedSeriesOptions, preparedLegend, handleLegendItemClick, } = useSeries({
         chartWidth: width,
         chartHeight: height,
         chartMargin: chart.margin,
-        series: data.series,
+        colors,
         legend: data.legend,
+        originalSeriesData: data.series.data,
+        seriesData: zoomedSeriesData,
+        seriesOptions: data.series.options,
         preparedYAxis: yAxis,
-        colors,
     });
     const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
@@ -37,6 +53,8 @@ export function useChartInnerProps(props) {
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
+        hasZoomX: Boolean(zoomState.x),
+        hasZoomY: Boolean(zoomState.y),
         series: preparedSeries,
         xAxis,
         yAxis,
@@ -55,10 +73,37 @@ export function useChartInnerProps(props) {
         split: preparedSplit,
         htmlLayout,
     });
+    const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
+        const nextZoomedSeriesData = getZoomedSeriesData({
+            seriesData: zoomedSeriesData,
+            xAxis: data.xAxis,
+            yAxises: data.yAxis,
+            zoomState: nextZoomState,
+        });
+        const hasData = hasAtLeastOneSeriesDataPerPlot(nextZoomedSeriesData, yAxis);
+        if (hasData) {
+            setZoomState(nextZoomState);
+        }
+    }, [data.xAxis, data.yAxis, yAxis, zoomedSeriesData]);
+    useZoom({
+        node: plotNode,
+        onUpdate: handleAttemptToSetZoomState,
+        plotContainerHeight: boundsHeight,
+        plotContainerWidth: boundsWidth,
+        preparedSplit,
+        preparedZoom: chart.zoom,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+    });
     const boundsOffsetTop = chart.margin.top;
-    // We need to calculate the width of each axis because the first axis can be hidden
+    // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = chart.margin.left +
         yAxis.reduce((acc, axis) => {
+            if (axis.position !== 'left') {
+                return acc;
+            }
             const axisWidth = getYAxisWidth(axis);
             if (acc < axisWidth) {
                 acc = axisWidth;
@@ -66,6 +111,9 @@ export function useChartInnerProps(props) {
             return acc;
         }, 0);
     const { x, bottom } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+    const handleZoomReset = React.useCallback(() => {
+        setZoomState({});
+    }, []);
     return {
         svgBottomPos: bottom,
         svgXPos: x,
@@ -74,6 +122,7 @@ export function useChartInnerProps(props) {
         boundsOffsetTop,
         boundsWidth,
         handleLegendItemClick,
+        handleZoomReset: Object.keys(zoomState).length > 0 ? handleZoomReset : undefined,
         legendConfig,
         legendItems,
         preparedLegend,

package/dist/cjs/components/ChartInner/utils.d.ts

@@ -0,0 +1,3 @@
+import type { PreparedAxis } from '../../hooks/useChartOptions/types';
+import type { ChartSeries } from '../../types';
+export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: ChartSeries[], yAxises?: PreparedAxis[]): boolean;

package/dist/cjs/components/ChartInner/utils.js

@@ -0,0 +1,28 @@
+export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxises = []) {
+    const hasDataMap = new Map();
+    yAxises.forEach((yAxis) => {
+        var _a;
+        const plotIndex = (_a = yAxis.plotIndex) !== null && _a !== void 0 ? _a : 0;
+        if (!hasDataMap.has(plotIndex)) {
+            hasDataMap.set(plotIndex, false);
+        }
+    });
+    if (hasDataMap.size === 0) {
+        return false;
+    }
+    seriesData.forEach((seriesDataChunk) => {
+        var _a;
+        let yAxisIndex = 0;
+        if ('yAxis' in seriesDataChunk && typeof seriesDataChunk.yAxis === 'number') {
+            yAxisIndex = seriesDataChunk.yAxis;
+        }
+        const yAxis = yAxises[yAxisIndex];
+        const plotIndex = (_a = yAxis === null || yAxis === void 0 ? void 0 : yAxis.plotIndex) !== null && _a !== void 0 ? _a : 0;
+        if (!hasDataMap.get(plotIndex)) {
+            if (seriesDataChunk.data.length > 0) {
+                hasDataMap.set(plotIndex, true);
+            }
+        }
+    });
+    return [...hasDataMap.values()].every((hasData) => hasData);
+}