@gravity-ui/charts 1.11.1 → 1.11.3

package/dist/esm/hooks/useChartOptions/index.d.ts

@@ -1,7 +1,11 @@
-import type { ChartData } from '../../types';
+import type { ChartSeries, ChartTitle, ChartTooltip, ChartOptions as GeneralChartOptions } from '../../types';
 import type { ChartOptions } from './types';
 type Args = {
-    data: ChartData;
+    seriesData: ChartSeries[];
+    chart?: GeneralChartOptions;
+    colors?: string[];
+    title?: ChartTitle;
+    tooltip?: ChartTooltip;
 };
 export declare const useChartOptions: (args: Args) => ChartOptions;
 export {};

package/dist/esm/hooks/useChartOptions/index.js

@@ -4,21 +4,21 @@ import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { data: { chart, title, tooltip, colors, series }, } = args;
+    const { chart, colors, seriesData, title, tooltip } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
         const preparedTooltip = getPreparedTooltip({ tooltip });
         const preparedChart = getPreparedChart({
             chart,
             preparedTitle,
-            seriesData: series.data,
+            seriesData,
         });
         return {
+            colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
             chart: preparedChart,
             title: preparedTitle,
             tooltip: preparedTooltip,
-            colors: colors !== null && colors !== void 0 ? colors : DEFAULT_PALETTE,
         };
-    }, [chart, colors, title, tooltip, series.data]);
+    }, [chart, colors, seriesData, title, tooltip]);
     return options;
 };

package/dist/esm/hooks/useSeries/index.d.ts

@@ -1,34 +1,16 @@
 import type { ChartData } from '../../types';
-import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { OnLegendItemClick, PreparedLegend, PreparedSeries } from './types';
 type Args = {
-    chartWidth: number;
-    chartHeight: number;
-    chartMargin: PreparedChart['margin'];
     colors: string[];
     legend: ChartData['legend'];
     originalSeriesData: ChartData['series']['data'];
     seriesData: ChartData['series']['data'];
     seriesOptions: ChartData['series']['options'];
-    preparedYAxis: PreparedAxis[];
+    preparedLegend?: PreparedLegend;
 };
 export declare const useSeries: (args: Args) => {
-    legendItems: never[] | import("./types").LegendItem[][];
-    legendConfig: {
-        offset: {
-            left: number;
-            top: number;
-        };
-        pagination: {
-            pages: {
-                start: number;
-                end: number;
-            }[];
-        } | undefined;
-    } | undefined;
     preparedLegend: PreparedLegend | null;
     preparedSeries: PreparedSeries[];
-    preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     handleLegendItemClick: OnLegendItemClick;
 };
 export {};

package/dist/esm/hooks/useSeries/index.js

@@ -2,16 +2,17 @@ import React from 'react';
 import { group, scaleOrdinal } from 'd3';
 import { getSeriesNames } from '../../utils';
 import { usePrevious } from '../usePrevious';
-import { getLegendComponents, getPreparedLegend } from './prepare-legend';
-import { getPreparedOptions } from './prepare-options';
+import { getPreparedLegend } from './prepare-legend';
 import { prepareSeries } from './prepareSeries';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
 export const useSeries = (args) => {
-    const { chartWidth, chartHeight, chartMargin, legend, originalSeriesData, preparedYAxis, seriesData, seriesOptions, colors, } = args;
-    const [preparedLegend, setPreparedLegend] = React.useState(null);
+    const { legend, originalSeriesData, seriesData, seriesOptions, colors, preparedLegend: preparedLegendProps = null, } = args;
+    const [preparedLegend, setPreparedLegend] = React.useState(preparedLegendProps);
     React.useEffect(() => {
-        getPreparedLegend({ legend, series: seriesData }).then((value) => setPreparedLegend(value));
-    }, [legend, seriesData]);
+        if (!preparedLegendProps) {
+            getPreparedLegend({ legend, series: seriesData }).then((value) => setPreparedLegend(value));
+        }
+    }, [legend, preparedLegendProps, seriesData]);
     const [preparedSeries, setPreparedSeries] = React.useState([]);
     const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
     React.useEffect(() => {
@@ -39,9 +40,6 @@ export const useSeries = (args) => {
             setActiveLegendItems(getActiveLegendItems(acc));
         })();
     }, [seriesData, seriesOptions, preparedLegend, colors]);
-    const preparedSeriesOptions = React.useMemo(() => {
-        return getPreparedOptions(seriesOptions);
-    }, [seriesOptions]);
     const prevOriginalSeriesData = usePrevious(originalSeriesData);
     const chartSeries = React.useMemo(() => {
         return preparedSeries.map((singleSeries) => {
@@ -51,19 +49,6 @@ export const useSeries = (args) => {
             return singleSeries;
         });
     }, [preparedSeries, activeLegendItems]);
-    const { legendConfig, legendItems } = React.useMemo(() => {
-        if (!preparedLegend) {
-            return { legendConfig: undefined, legendItems: [] };
-        }
-        return getLegendComponents({
-            chartHeight,
-            chartMargin,
-            chartWidth,
-            series: chartSeries,
-            preparedLegend,
-            preparedYAxis,
-        });
-    }, [chartWidth, chartHeight, chartMargin, chartSeries, preparedLegend, preparedYAxis]);
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
         const allItems = getAllLegendItems(preparedSeries);
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
@@ -91,11 +76,8 @@ export const useSeries = (args) => {
         }
     }, [originalSeriesData, prevOriginalSeriesData, preparedSeries]);
     return {
-        legendItems,
-        legendConfig,
         preparedLegend,
         preparedSeries: chartSeries,
-        preparedSeriesOptions,
         handleLegendItemClick,
     };
 };

package/dist/esm/hooks/useSeries/prepare-area.js

@@ -1,4 +1,3 @@
-import { sort } from 'd3';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { DEFAULT_DATALABELS_STYLE } from '../../constants';
@@ -46,7 +45,7 @@ export function prepareArea(args) {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
             },
-            data: sort(series.data, (d) => d.x),
+            data: series.data,
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: {

package/dist/esm/hooks/useSeries/prepare-legend.js

@@ -21,9 +21,13 @@ export async function getPreparedLegend(args) {
     const titleText = isTitleEnabled ? get(legend, 'title.text', '') : '';
     const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
     const titleHeight = isTitleEnabled ? titleSize.maxHeight : 0;
+    const tickStyle = {
+        fontSize: '12px',
+    };
     const ticks = {
         labelsMargin: 4,
-        labelsLineHeight: 12,
+        labelsLineHeight: (await getLabelsSize({ labels: ['Tmp'], style: tickStyle })).maxHeight,
+        style: tickStyle,
     };
     const colorScale = {
         colors: [],

package/dist/esm/hooks/useSeries/types.d.ts

@@ -26,6 +26,7 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
     ticks: {
         labelsMargin: number;
         labelsLineHeight: number;
+        style: BaseTextStyle;
     };
     colorScale: {
         colors: string[];

package/dist/esm/hooks/useShapes/area/prepare-data.js

@@ -36,7 +36,7 @@ function getXValues(series, xAxis, xScale) {
                 ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
                 : d.x);
             if (!acc.has(key)) {
-                acc.set(key, getXValue({ point: d, xAxis, xScale }));
+                acc.set(key, getXValue({ point: d, points: s.data, xAxis, xScale }));
             }
         });
         return acc;
@@ -73,6 +73,7 @@ export const prepareAreaData = async (args) => {
             const seriesYScale = yScale[yAxisIndex];
             const yMin = getYValue({
                 point: { y: 0 },
+                points: s.data,
                 yAxis: seriesYAxis,
                 yScale: seriesYScale,
             });

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -51,8 +51,9 @@ export const prepareLineData = async (args) => {
         const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
         const seriesYScale = yScale[s.yAxis];
         const points = s.data.map((d) => ({
-            x: getXValue({ point: d, xAxis, xScale }),
-            y: yAxisTop + getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
+            x: getXValue({ point: d, points: s.data, xAxis, xScale }),
+            y: yAxisTop +
+                getYValue({ point: d, points: s.data, yAxis: seriesYAxis, yScale: seriesYScale }),
             active: true,
             data: d,
             series: s,

package/dist/esm/hooks/useShapes/utils.d.ts

@@ -6,6 +6,9 @@ export declare function getXValue(args: {
     point: {
         x?: number | string;
     };
+    points?: {
+        x?: number | string;
+    }[];
     xAxis: PreparedAxis;
     xScale: ChartScale;
 }): number;
@@ -13,6 +16,9 @@ export declare function getYValue(args: {
     point: {
         y?: number | string;
     };
+    points?: {
+        y?: number | string;
+    }[];
     yAxis: PreparedAxis;
     yScale: ChartScale;
 }): number;

package/dist/esm/hooks/useShapes/utils.js

@@ -1,26 +1,51 @@
 import { path, select } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
+const ONE_POINT_DOMAIN_DATA_CAPACITY = 3;
 export function getXValue(args) {
-    const { point, xAxis, xScale } = args;
+    const { point, points, xAxis, xScale } = args;
     if (xAxis.type === 'category') {
         const xBandScale = xScale;
         const categories = get(xAxis, 'categories', []);
         const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
         return (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
     }
-    const xLinearScale = xScale;
+    let xLinearScale = xScale;
+    const [xMinDomain, xMaxDomain] = xLinearScale.domain();
+    if (Number(xMinDomain) === Number(xMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const x1 = points[0].x;
+        const xTarget = points[1].x;
+        const x3 = points[2].x;
+        const xMin = Math.min(x1, xTarget, x3);
+        const xMax = Math.max(x1, xTarget, x3);
+        xLinearScale = xLinearScale
+            .copy()
+            .domain([xMin + (xTarget - xMin) / 2, xMax - (xMax - xTarget) / 2]);
+    }
     return xLinearScale(point.x);
 }
 export function getYValue(args) {
-    const { point, yAxis, yScale } = args;
+    const { point, points, yAxis, yScale } = args;
     if (yAxis.type === 'category') {
         const yBandScale = yScale;
         const categories = get(yAxis, 'categories', []);
         const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
         return (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
     }
-    const yLinearScale = yScale;
+    let yLinearScale = yScale;
+    const [yMinDomain, yMaxDomain] = yLinearScale.domain();
+    if (Number(yMinDomain) === Number(yMaxDomain) &&
+        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
+        const y1 = points[0].y;
+        const yTarget = points[1].y;
+        const y2 = points[2].y;
+        const yMin = Math.min(y1, yTarget, y2);
+        const yMax = Math.max(y1, yTarget, y2);
+        yLinearScale = yLinearScale
+            .copy()
+            .domain([yMin + (yTarget - yMin) / 2, yMax - (yMax - yTarget) / 2]);
+    }
     return yLinearScale(point.y);
 }
 export function shapeKey(d) {

package/dist/esm/hooks/useShapes/waterfall/index.js

@@ -125,7 +125,7 @@ export const WaterfallSeriesShapes = (args) => {
         return () => {
             dispatcher.on('hover-shape.waterfall', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [connectorSelector, dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));

package/dist/esm/libs/format-number/index.d.ts

@@ -1,5 +1,9 @@
 import type { FormatNumberOptions, FormatOptions } from './types';
-export declare const formatBytes: (value: number, options?: FormatOptions) => string;
-export declare const formatDuration: (value: number, options?: FormatOptions) => string;
-export declare const getNumberUnitRate: (value: number) => number;
+export declare const formatBytes: (value: number, options?: FormatOptions & {
+    unitRate?: number;
+}) => string;
+export declare const formatDuration: (value: number, options?: FormatOptions & {
+    unitRate?: number;
+}) => string;
+export declare const getDefaultUnit: (value: number) => string | undefined;
 export declare const formatNumber: (value: number | string, options?: FormatNumberOptions) => string;

package/dist/esm/libs/format-number/index.js

@@ -59,7 +59,6 @@ const baseFormatNumber = unitFormatter({
     unitDelimiterI18nKey: 'value_number-delimiter',
     unitsI18nKeys: BASE_NUMBER_FORMAT_UNIT_KEYS,
 });
-export const getNumberUnitRate = (value) => getUnitRate(value, 1000, BASE_NUMBER_FORMAT_UNIT_KEYS);
 const NUMBER_UNIT_RATE_BY_UNIT = {
     default: 0,
     auto: undefined,
@@ -68,11 +67,17 @@ const NUMBER_UNIT_RATE_BY_UNIT = {
     b: 3,
     t: 4,
 };
+export const getDefaultUnit = (value) => {
+    var _a;
+    const unitRate = getUnitRate(value, 1000, BASE_NUMBER_FORMAT_UNIT_KEYS);
+    const [unit] = (_a = Object.entries(NUMBER_UNIT_RATE_BY_UNIT).find(([_key, val]) => val === unitRate)) !== null && _a !== void 0 ? _a : [];
+    return unit;
+};
 export const formatNumber = (value, options = {}) => {
     if (Number.isNaN(value) || Number.isNaN(Number(value))) {
         return new Intl.NumberFormat('en').format(Number(value));
     }
-    const { format = 'number', multiplier = 1, prefix = '', postfix = '', unit, unitRate, labelMode, } = options;
+    const { format = 'number', multiplier = 1, prefix = '', postfix = '', unit, labelMode } = options;
     let changedMultiplier = multiplier;
     let prePostfix = '';
     if (format === 'percent') {
@@ -82,6 +87,6 @@ export const formatNumber = (value, options = {}) => {
     if (labelMode === 'percent') {
         prePostfix = '%';
     }
-    const formattedValue = baseFormatNumber(Number(value) * changedMultiplier, Object.assign(Object.assign({}, options), { unitRate: unitRate !== null && unitRate !== void 0 ? unitRate : NUMBER_UNIT_RATE_BY_UNIT[unit !== null && unit !== void 0 ? unit : 'default'] }));
+    const formattedValue = baseFormatNumber(Number(value) * changedMultiplier, Object.assign(Object.assign({}, options), { unitRate: NUMBER_UNIT_RATE_BY_UNIT[unit !== null && unit !== void 0 ? unit : 'default'] }));
     return `${prefix}${formattedValue}${prePostfix}${postfix}`;
 };

package/dist/esm/libs/format-number/types.d.ts

@@ -1,6 +1,5 @@
 export type FormatOptions = {
     precision?: number | 'auto';
-    unitRate?: number;
     showRankDelimiter?: boolean;
     lang?: string;
     labelMode?: string;

package/dist/esm/types/chart/tooltip.d.ts

@@ -63,6 +63,7 @@ export interface TooltipDataChunkSankey<T = MeaningfulAny> {
 export interface TooltipDataChunkWaterfall<T = MeaningfulAny> {
     data: WaterfallSeriesData<T>;
     series: WaterfallSeries<T>;
+    subTotal?: number;
 }
 export interface TooltipDataChunkRadar<T = MeaningfulAny> {
     data: RadarSeriesData<T>;

package/dist/esm/types/formatter.d.ts

@@ -1,6 +1,5 @@
 export interface FormatOptions {
     precision?: number | 'auto';
-    unitRate?: number;
     showRankDelimiter?: boolean;
     lang?: string;
     labelMode?: string;

package/dist/esm/utils/chart/axis-generators/bottom.js

@@ -90,27 +90,15 @@ export async function axisBottom(args) {
             });
         }
         else {
-            // remove overlapping labels
             let elementX = 0;
-            selection
-                .selectAll('.tick')
-                .filter(function () {
-                const node = this;
-                const r = node.getBoundingClientRect();
-                if (r.left < elementX) {
-                    return true;
-                }
-                elementX = r.right + labelsPaddings;
-                return false;
-            })
-                .remove();
             // add an ellipsis to the labels that go beyond the boundaries of the chart
+            // and remove overlapping labels
             labels.each(function (_d, i, nodes) {
-                var _a;
+                var _a, _b;
+                const currentElement = this;
+                const currentElementPosition = currentElement.getBoundingClientRect();
                 if (i === 0) {
-                    const currentElement = this;
                     const text = select(currentElement);
-                    const currentElementPosition = currentElement.getBoundingClientRect();
                     const nextElement = nodes[i + 1];
                     const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
                     if (currentElementPosition.left < leftmostLimit) {
@@ -123,18 +111,23 @@ export async function axisBottom(args) {
                         setEllipsisForOverflowText(text, remainSpace);
                     }
                 }
-                if (i === nodes.length - 1) {
-                    const currentElement = this;
-                    const prevElement = nodes[i - 1];
-                    const text = select(currentElement);
-                    const currentElementPosition = currentElement.getBoundingClientRect();
-                    const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
-                    const lackingSpace = Math.max(0, currentElementPosition.right - right);
-                    if (lackingSpace) {
-                        const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
-                        const translateX = -lackingSpace;
-                        text.style('transform', `translate(${translateX}px,${translateY}px)`);
-                        setEllipsisForOverflowText(text, remainSpace);
+                else {
+                    if (currentElementPosition.left < elementX) {
+                        (_b = currentElement.closest('.tick')) === null || _b === void 0 ? void 0 : _b.remove();
+                        return;
+                    }
+                    elementX = currentElementPosition.right + labelsPaddings;
+                    if (i === nodes.length - 1) {
+                        const prevElement = nodes[i - 1];
+                        const text = select(currentElement);
+                        const prevElementPosition = prevElement === null || prevElement === void 0 ? void 0 : prevElement.getBoundingClientRect();
+                        const lackingSpace = Math.max(0, currentElementPosition.right - right);
+                        if (lackingSpace) {
+                            const remainSpace = right - ((prevElementPosition === null || prevElementPosition === void 0 ? void 0 : prevElementPosition.right) || 0) - labelsPaddings;
+                            const translateX = -lackingSpace;
+                            text.style('transform', `translate(${translateX}px,${translateY}px)`);
+                            setEllipsisForOverflowText(text, remainSpace);
+                        }
                     }
                 }
             });

package/dist/esm/utils/chart/get-closest-data.d.ts

@@ -12,6 +12,7 @@ export type ShapePoint = {
     y1: number;
     data: ChartSeriesData;
     series: ChartSeries;
+    subTotal?: number;
 };
 export declare function getClosestPoints(args: GetClosestPointsArgs): TooltipDataChunk[];
 export {};

package/dist/esm/utils/chart/get-closest-data.js

@@ -35,11 +35,7 @@ function getClosestPointsByXValue(x, y, points) {
     });
     const closestPoints = sort(groupedBySeries, (p) => p.y0);
     const closestYIndex = getClosestYIndex(closestPoints, y);
-    return closestPoints.map((p, i) => ({
-        data: p.data,
-        series: p.series,
-        closest: i === closestYIndex,
-    }));
+    return closestPoints.map((p, i) => (Object.assign(Object.assign({}, p), { closest: i === closestYIndex })));
 }
 function getSeriesType(shapeData) {
     return (get(shapeData, 'series.type') ||
@@ -73,6 +69,7 @@ export function getClosestPoints(args) {
                     x: d.x + d.width / 2,
                     y0: d.y,
                     y1: d.y + d.height,
+                    subTotal: d.subTotal,
                 }));
                 result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;

package/dist/esm/utils/chart/index.d.ts

@@ -11,6 +11,7 @@ export * from './legend';
 export * from './symbol';
 export * from './series';
 export * from './color';
+export * from './zoom';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartSeries['type'][];
 type UnknownSeries = {

package/dist/esm/utils/chart/index.js

@@ -5,7 +5,7 @@ import isNil from 'lodash/isNil';
 import sortBy from 'lodash/sortBy';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
-import { formatNumber, getNumberUnitRate } from '../../libs/format-number';
+import { formatNumber, getDefaultUnit } from '../../libs/format-number';
 import { getWaterfallPointSubtotal } from './series/waterfall';
 import { getDefaultDateFormat } from './time';
 export * from './math';
@@ -17,6 +17,7 @@ export * from './legend';
 export * from './symbol';
 export * from './series';
 export * from './color';
+export * from './zoom';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',
@@ -184,7 +185,7 @@ export const formatAxisTickLabel = (args) => {
         }
         case 'linear':
         default: {
-            const numberFormat = Object.assign({ unitRate: value && step ? getNumberUnitRate(step) : undefined }, axis.labels.numberFormat);
+            const numberFormat = Object.assign({ unit: value && step ? getDefaultUnit(step) : undefined }, axis.labels.numberFormat);
             return formatNumber(value, numberFormat);
         }
     }

package/dist/esm/utils/chart/series/index.d.ts

@@ -1,2 +1,3 @@
 export * from './line';
+export * from './sorting';
 export * from './waterfall';

package/dist/esm/utils/chart/series/index.js

@@ -1,2 +1,3 @@
 export * from './line';
+export * from './sorting';
 export * from './waterfall';

package/dist/esm/utils/chart/series/sorting.d.ts

@@ -0,0 +1,2 @@
+import type { ChartSeries } from '../../../types';
+export declare function getSortedSeriesData(seriesData: ChartSeries[]): ChartSeries[];

package/dist/esm/utils/chart/series/sorting.js

@@ -0,0 +1,12 @@
+import { sort } from 'd3';
+import { SeriesType } from '../../../constants';
+export function getSortedSeriesData(seriesData) {
+    return seriesData.map((s) => {
+        switch (s.type) {
+            case SeriesType.Area: {
+                s.data = sort(s.data, (d) => d.x);
+            }
+        }
+        return s;
+    });
+}

package/dist/{cjs/hooks/hooks-utils → esm/utils/chart}/zoom.d.ts

@@ -1,8 +1,11 @@
+import type { ZoomState } from '../../hooks/useZoom/types';
 import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
-import type { ZoomState } from '../useZoom/types';
 export declare function getZoomedSeriesData(args: {
     seriesData: ChartSeries[];
     zoomState: Partial<ZoomState>;
     xAxis?: ChartXAxis;
     yAxes?: ChartYAxis[];
-}): ChartSeries[];
+}): {
+    zoomedSeriesData: ChartSeries[];
+    zoomedShapesSeriesData: ChartSeries[];
+};

package/dist/{cjs/hooks/hooks-utils → esm/utils/chart}/zoom.js

@@ -1,3 +1,5 @@
+import { SeriesType } from '../../constants';
+const SERIES_TYPE_WITH_HIDDEN_POINTS = [SeriesType.Area, SeriesType.Line];
 // eslint-disable-next-line complexity
 function isValueInRange(args) {
     const { axis, max, min, value } = args;
@@ -41,13 +43,24 @@ function isValueInRange(args) {
 }
 export function getZoomedSeriesData(args) {
     const { seriesData, xAxis, yAxes, zoomState } = args;
-    if (Object.keys(zoomState).length < 0) {
-        return seriesData;
+    if (Object.keys(zoomState).length <= 0) {
+        return { zoomedSeriesData: seriesData, zoomedShapesSeriesData: seriesData };
     }
-    return seriesData.map((seriesItem) => {
-        const filteredData = seriesItem.data.reduce((acc, point) => {
+    const zoomedSeriesData = [];
+    const zoomedShapesSeriesData = [];
+    let prevPointInRange = false;
+    let currentPointInRange = false;
+    seriesData.forEach((seriesItem) => {
+        const filteredData = [];
+        const filteredShapesData = SERIES_TYPE_WITH_HIDDEN_POINTS.includes(seriesItem.type) && (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) !== 'category'
+            ? []
+            : undefined;
+        seriesItem.data.forEach((point, i) => {
+            const prevPoint = seriesItem.data[i - 1];
+            const isFirstPoint = i === 0;
             let inXRange = true;
             let inYRange = true;
+            prevPointInRange = currentPointInRange;
             if (zoomState.x) {
                 const [xMin, xMax] = zoomState.x;
                 const x = 'x' in point ? point.x : undefined;
@@ -71,11 +84,25 @@ export function getZoomedSeriesData(args) {
                     max: yMax,
                 });
             }
-            if (inXRange && inYRange) {
-                acc.push(point);
+            currentPointInRange = inXRange && inYRange;
+            if (currentPointInRange) {
+                filteredData.push(point);
             }
-            return acc;
-        }, []);
-        return Object.assign(Object.assign({}, seriesItem), { data: filteredData });
+            if (filteredShapesData) {
+                if (prevPointInRange && !currentPointInRange) {
+                    filteredShapesData.push(point);
+                }
+                else if (!isFirstPoint && !prevPointInRange && currentPointInRange) {
+                    filteredShapesData.push(prevPoint, point);
+                }
+                else if ((isFirstPoint || (!isFirstPoint && prevPointInRange)) &&
+                    currentPointInRange) {
+                    filteredShapesData.push(point);
+                }
+            }
+        });
+        zoomedSeriesData.push(Object.assign(Object.assign({}, seriesItem), { data: filteredData }));
+        zoomedShapesSeriesData.push(Object.assign(Object.assign({}, seriesItem), { data: filteredShapesData || filteredData }));
     });
+    return { zoomedSeriesData, zoomedShapesSeriesData };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",

package/dist/cjs/hooks/hooks-utils/index.d.ts

@@ -1 +0,0 @@
-export * from './zoom';

package/dist/cjs/hooks/hooks-utils/index.js

@@ -1 +0,0 @@
-export * from './zoom';

package/dist/esm/hooks/hooks-utils/index.d.ts

@@ -1 +0,0 @@
-export * from './zoom';

package/dist/esm/hooks/hooks-utils/index.js

@@ -1 +0,0 @@
-export * from './zoom';