@gravity-ui/charts 1.32.0 → 1.33.0

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

@@ -1,3 +1,4 @@
+import { ticks } from 'd3';
 import get from 'lodash/get';
 import { SERIES_TYPE } from '../../constants';
 const MARKER_SERIES_TYPES = [SERIES_TYPE.Area, SERIES_TYPE.Line, SERIES_TYPE.Scatter];
@@ -49,3 +50,76 @@ export function getXMaxDomainResult(args) {
     }
     return xMaxDomainResult;
 }
+export function clusterYAxes(yAxes) {
+    if (yAxes.length <= 1) {
+        return yAxes.map((axis) => [axis]);
+    }
+    const clusters = {};
+    yAxes.forEach((axis) => {
+        var _a;
+        const plotIndex = (_a = axis.plotIndex) !== null && _a !== void 0 ? _a : 0;
+        if (!clusters[plotIndex]) {
+            clusters[plotIndex] = [];
+        }
+        clusters[plotIndex].push(axis);
+    });
+    return Object.values(clusters).map((cluster) => {
+        if (cluster.length <= 1) {
+            return [cluster[0]];
+        }
+        const leftAxis = cluster.find((a) => a.position === 'left');
+        const secondaryAxis = cluster.find((a) => a !== leftAxis);
+        if (leftAxis) {
+            return [leftAxis, secondaryAxis];
+        }
+        return [cluster[0], cluster[1]];
+    });
+}
+export function getDomainSyncedToPrimaryTicks(args) {
+    const { primaryTickPositions, range, scaleFn, secondaryDomain } = args;
+    const [dMin, dMax] = secondaryDomain;
+    const primaryPosBottom = primaryTickPositions[0];
+    const primaryPosTop = primaryTickPositions[primaryTickPositions.length - 1];
+    let secondaryTicks = ticks(dMin, dMax, primaryTickPositions.length);
+    let originalStep = 0;
+    if (typeof secondaryTicks[0] === 'number' && typeof secondaryTicks[1] === 'number') {
+        originalStep = secondaryTicks[1] - secondaryTicks[0];
+    }
+    let i = 1;
+    while (secondaryTicks.length > primaryTickPositions.length) {
+        secondaryTicks = ticks(dMin, dMax, primaryTickPositions.length - i);
+        i += 1;
+    }
+    let step = originalStep;
+    if (typeof secondaryTicks[0] === 'number' && typeof secondaryTicks[1] === 'number') {
+        step = secondaryTicks[1] - secondaryTicks[0];
+    }
+    let ticksCountDiff = primaryTickPositions.length - secondaryTicks.length;
+    let deltaMin = Math.abs(dMin - secondaryTicks[0]);
+    let deltaMax = Math.abs(dMax - secondaryTicks[secondaryTicks.length - 1]);
+    while (ticksCountDiff > 0) {
+        if (deltaMin > deltaMax) {
+            secondaryTicks.unshift(secondaryTicks[0] - step);
+            deltaMin -= step;
+        }
+        else {
+            secondaryTicks.push(secondaryTicks[secondaryTicks.length - 1] + step);
+            deltaMax -= step;
+        }
+        ticksCountDiff -= 1;
+    }
+    let tmpScale = scaleFn()
+        .domain([secondaryTicks[0], secondaryTicks[secondaryTicks.length - 1]])
+        .range([primaryPosBottom, primaryPosTop]);
+    let dNewMin = tmpScale.invert(range[0]);
+    let dNewMax = tmpScale.invert(range[1]);
+    if (dNewMin < dMin) {
+        secondaryTicks = secondaryTicks.map((st) => st + step);
+        tmpScale = scaleFn()
+            .domain([secondaryTicks[0], secondaryTicks[secondaryTicks.length - 1]])
+            .range([primaryPosBottom, primaryPosTop]);
+        dNewMin = tmpScale.invert(range[0]);
+        dNewMax = tmpScale.invert(range[1]);
+    }
+    return [dNewMin, dNewMax];
+}

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

@@ -29,6 +29,8 @@ export declare function useNormalizedOriginalData(props: UseOriginalDataProps):
         plotBands?: import("../..").AxisPlotBand[];
         visible?: boolean;
         order?: "sortAsc" | "sortDesc" | "reverse";
+        startOnTick?: boolean;
+        endOnTick?: boolean;
     };
     normalizedYAxis: import("../..").ChartYAxis[] | undefined;
 };

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

@@ -40,6 +40,7 @@ export function useRangeSlider(props) {
     const { xScale, yScale } = useAxisScales({
         boundsHeight: preparedRangeSlider.height,
         boundsWidth,
+        isRangeSlider: true,
         series: preparedSeries,
         split: EMPTY_PREPARED_SPLIT,
         xAxis: preparedXAxis,

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

@@ -1,6 +1,6 @@
 import type { ChartXAxis, ChartYAxis } from '../../types';
 import type { PreparedRangeSlider, PreparedXAxis, PreparedYAxis } from '../useAxis/types';
-import type { ChartScale } from '../useAxisScales';
+import type { ChartScale } from '../useAxisScales/types';
 import type { BrushSelection, UseBrushProps } from '../useBrush/types';
 import type { PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';

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

@@ -1,5 +1,5 @@
 import type { PreparedRangeSlider } from '../useAxis/types';
-import type { ChartScale } from '../useAxisScales';
+import type { ChartScale } from '../useAxisScales/types';
 import type { BrushSelection } from '../useBrush/types';
 import type { PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend } from '../useSeries/types';

package/dist/esm/hooks/useShapes/area/prepare-data.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { ChartScale } from '../../useAxisScales';
+import type { ChartScale } from '../../useAxisScales/types';
 import type { PreparedAreaSeries } from '../../useSeries/types';
 import type { PreparedSplit } from '../../useSplit/types';
 import type { PreparedAreaData } from './types';

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

@@ -91,9 +91,11 @@ export const prepareAreaData = async (args) => {
         for (let i = 0; i < list.length; i++) {
             const [_stackId, seriesStack] = list[i];
             const xValues = getXValues(seriesStack, xAxis, xScale);
-            const accumulatedYValues = new Map();
+            const positiveStackValues = new Map();
+            const negativeStackValues = new Map();
             xValues.forEach(([key]) => {
-                accumulatedYValues.set(key, 0);
+                positiveStackValues.set(key, 0);
+                negativeStackValues.set(key, 0);
             });
             const seriesStackData = [];
             for (let j = 0; j < seriesStack.length; j++) {
@@ -122,24 +124,36 @@ export const prepareAreaData = async (args) => {
                     return m.set(key, d);
                 }, new Map());
                 const points = xValues.reduce((pointsAcc, [x, xValue]) => {
-                    var _a;
-                    const accumulatedYValue = accumulatedYValues.get(x) || 0;
+                    var _a, _b;
                     const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
                         x,
                         y: 0,
                     };
+                    const yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
                     const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
-                    const yPointValue = yValue === null ? null : yValue - accumulatedYValue;
-                    if (yPointValue !== null) {
-                        accumulatedYValues.set(x, yMin - yPointValue);
+                    let y = null;
+                    let y0 = yAxisTop + yMin;
+                    if (typeof yDataValue === 'number' && yValue !== null) {
+                        if (yDataValue >= 0) {
+                            const positiveStackHeight = positiveStackValues.get(x) || 0;
+                            y = yAxisTop + yValue - positiveStackHeight;
+                            y0 -= positiveStackHeight;
+                            positiveStackValues.set(x, positiveStackHeight + (yMin - yValue));
+                        }
+                        else {
+                            const negativeStackHeight = negativeStackValues.get(x) || 0;
+                            y = yAxisTop + yValue + negativeStackHeight;
+                            y0 += negativeStackHeight;
+                            negativeStackValues.set(x, negativeStackHeight + (yValue - yMin));
+                        }
                     }
-                    if (s.nullMode === 'connect' && yPointValue === null) {
+                    if (s.nullMode === 'connect' && yDataValue === null) {
                         return pointsAcc;
                     }
                     pointsAcc.push({
-                        y0: yAxisTop + yMin - accumulatedYValue,
+                        y0,
                         x: xValue,
-                        y: yPointValue === null ? null : yAxisTop + (yPointValue !== null && yPointValue !== void 0 ? yPointValue : 0),
+                        y,
                         data: d,
                         series: s,
                     });
@@ -183,7 +197,7 @@ export const prepareAreaData = async (args) => {
             }
             if (series.some((s) => s.stacking === 'percent')) {
                 xValues.forEach(([x], index) => {
-                    const stackHeight = accumulatedYValues.get(x) || 0;
+                    const stackHeight = positiveStackValues.get(x) || 0;
                     let acc = 0;
                     const ratio = plotHeight / stackHeight;
                     seriesStackData.forEach((item) => {

package/dist/esm/hooks/useShapes/bar-x/prepare-data.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { ChartScale } from '../../useAxisScales';
+import type { ChartScale } from '../../useAxisScales/types';
 import type { PreparedBarXSeries, PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedSplit } from '../../useSplit/types';
 import type { PreparedBarXData } from './types';

package/dist/esm/hooks/useShapes/bar-y/prepare-data.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { ChartScale } from '../../useAxisScales';
+import type { ChartScale } from '../../useAxisScales/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../../useSeries/types';
 import type { BarYShapesArgs } from './types';
 export declare function prepareBarYData(args: {

package/dist/esm/hooks/useShapes/bar-y/prepare-data.js

@@ -45,7 +45,8 @@ export async function prepareBarYData(args) {
         stacks.forEach((measureValues, groupItemIndex) => {
             const baseValue = xAxis.type === 'logarithmic' ? 0 : xLinearScale(0);
             const base = baseValue - measureValues[0].series.borderWidth;
-            let stackSum = base;
+            let positiveStack = base;
+            let negativeStack = base;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
@@ -93,7 +94,8 @@ export async function prepareBarYData(args) {
                 const isLastStackItem = xValueIndex === sortedData.length - 1;
                 // Calculate position with border compensation
                 // Border extends halfBorder outward from the shape, so we need to adjust position
-                let itemX = (xValue > baseRangeValue ? stackSum : stackSum - width) + itemStackGap;
+                let itemX = xValue > baseRangeValue ? positiveStack : negativeStack - width;
+                itemX += itemStackGap;
                 const halfBorder = borderWidth / 2;
                 if (isFirstInStack && xValue > 0) {
                     // Positive bar: border extends left, so shift position left by halfBorder
@@ -119,7 +121,12 @@ export async function prepareBarYData(args) {
                     isLastStackItem,
                 };
                 stackItems.push(item);
-                stackSum += width;
+                if (xValue > baseRangeValue) {
+                    positiveStack += width;
+                }
+                else {
+                    negativeStack -= width;
+                }
             });
             result.push(...stackItems);
         });

package/dist/esm/hooks/useShapes/heatmap/prepare-data.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../../hooks/useAxis/types';
-import type { ChartScale } from '../../../hooks/useAxisScales';
+import type { ChartScale } from '../../../hooks/useAxisScales/types';
 import type { PreparedHeatmapSeries } from '../../useSeries/types';
 import type { PreparedHeatmapData } from './types';
 type PrepareHeatmapDataArgs = {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Dispatch } from 'd3';
 import type { SeriesType } from '../../constants';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
-import type { ChartScale } from '../useAxisScales';
+import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedSplit } from '../useSplit/types';
 import type { PreparedAreaData } from './area/types';

package/dist/esm/hooks/useShapes/line/prepare-data.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { ChartScale } from '../../useAxisScales';
+import type { ChartScale } from '../../useAxisScales/types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 import type { PreparedSplit } from '../../useSplit/types';
 import type { PreparedLineData } from './types';

package/dist/esm/hooks/useShapes/scatter/prepare-data.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { ChartScale } from '../../useAxisScales';
+import type { ChartScale } from '../../useAxisScales/types';
 import type { PreparedScatterSeries } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
 export declare function prepareScatterData(args: {

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

@@ -1,7 +1,7 @@
 import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
-import type { ChartScale } from '../useAxisScales';
+import type { ChartScale } from '../useAxisScales/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string | null;

package/dist/esm/hooks/useShapes/waterfall/prepare-data.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { ChartScale } from '../../useAxisScales';
+import type { ChartScale } from '../../useAxisScales/types';
 import type { PreparedSeriesOptions, PreparedWaterfallSeries } from '../../useSeries/types';
 import type { PreparedWaterfallData } from './types';
 export declare const prepareWaterfallData: (args: {

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

@@ -1,5 +1,5 @@
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
-import type { ChartScale } from '../useAxisScales';
+import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedZoom } from '../useChartOptions/types';
 import type { PreparedSplit } from '../useSplit/types';
 import type { ZoomState } from './types';

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

@@ -1,7 +1,7 @@
 import type { BrushSelection } from 'd3';
 import type { ZoomType } from '../../constants';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
-import type { ChartScale } from '../useAxisScales';
+import type { ChartScale } from '../useAxisScales/types';
 import type { ZoomState } from './types';
 export declare function selectionToZoomBounds(args: {
     selection: BrushSelection;

package/dist/esm/hooks/utils/bar-x.d.ts

@@ -1,6 +1,6 @@
 import type { BarXSeries, BarXSeriesData } from '../../types';
 import type { PreparedXAxis } from '../useAxis/types';
-import type { ChartScale } from '../useAxisScales';
+import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedBarXSeries, PreparedSeriesOptions } from '../useSeries/types';
 export declare function groupBarXDataByXValue<T extends BarXSeries | PreparedBarXSeries>(series: T[], xAxis: PreparedXAxis): Record<string | number, Record<string, {
     data: BarXSeriesData;

package/dist/esm/hooks/utils/bar-y.d.ts

@@ -1,6 +1,6 @@
 import type { BarYSeries, BarYSeriesData } from '../../types';
 import type { PreparedYAxis } from '../useAxis/types';
-import type { ChartScale } from '../useAxisScales';
+import type { ChartScale } from '../useAxisScales/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../useSeries/types';
 /**
  * BarY always filters out data with null or replace null by zero.

package/dist/esm/i18n/keysets/en.json

@@ -20,7 +20,8 @@
     "label_invalid-axis-labels-html-type": "It seems you are trying to use inappropriate type for \"labels.html\" property. Only boolean is allowed.",
     "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis.",
     "label_duplicate-axis-categories": "It seems you have duplicate value \"{{duplicate}}\" found in {{key}}[{{axisIndex}}].",
-    "label_invalid-axis-categories": "It seems you are trying to use inappropriate value for \"categories\", or defined it incorrectly. Categories must be a non-empty array for an axis with \"category\" type."
+    "label_invalid-axis-categories": "It seems you are trying to use inappropriate value for \"categories\", or defined it incorrectly. Categories must be a non-empty array for an axis with \"category\" type.",
+    "label_inconsistent-y-axis-configuration": "It seems you have inconsistent Y-axis configuration. Possible reasons:\n1. Multiple Y axes with the same position and plot index.\n2. At the moment, 'category' axis is not supported in dual Y-axis configurations."
   },
   "tooltip": {
     "label_totals_sum": "Sum",

package/dist/esm/i18n/keysets/ru.json

@@ -20,7 +20,8 @@
     "label_invalid-axis-labels-html-type": "Похоже, что вы пытаетесь использовать некорректный тип для свойства \"labels.html\". Допускается только использование булевых значений.",
     "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\".",
     "label_duplicate-axis-categories": "Похоже, что у вас есть дублирующееся значение категории \"{{duplicate}}\" в оси {{key}}[{{axisIndex}}].",
-    "label_invalid-axis-categories": "Похоже, что вы пытаетесь использовать недопустимое значение для \"categories\", или указали его неверно. Категории для оси типа \"category\" должны быть непустым массивом."
+    "label_invalid-axis-categories": "Похоже, что вы пытаетесь использовать недопустимое значение для \"categories\", или указали его неверно. Категории для оси типа \"category\" должны быть непустым массивом.",
+    "label_inconsistent-y-axis-configuration": "Похоже, что конфигурация осей Y неконсистентна. Возможные причины:\n1. Несколько осей Y имеют одинаковые значения position и plotIndex.\n2. На данный момент категорийные оси не поддерживаются в конфигурациях с двумя осями Y."
   },
   "tooltip": {
     "label_totals_sum": "Сумма",

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

@@ -164,6 +164,31 @@ export interface ChartAxis {
      * the "reverse" value is needed to use the reverse order without sorting
      */
     order?: 'sortAsc' | 'sortDesc' | 'reverse';
+    /**
+     * Whether to force the axis to start on a tick.
+     *
+     * When enabled, the axis minimum is rounded to a "nice" value (e.g., round numbers)
+     * for better readability. This can create a visual gap at the beginning of the chart
+     * if the data minimum doesn't align with the tick.
+     *
+     * Use `startOnTick: false` to make the chart start exactly at the data minimum,
+     * preventing gaps at the chart start.
+     *
+     * @default true for X axis and datetime Y axis, false for linear/logarithmic Y axis
+     */
+    startOnTick?: boolean;
+    /**
+     * Whether to force the axis to end on a tick.
+     *
+     * When enabled, the axis maximum is rounded to a "nice" value (e.g., round numbers)
+     * for better readability. This can create extra space at the end of the chart
+     * if the data maximum doesn't align with the tick.
+     *
+     * Use `endOnTick: false` to make the chart end closer to the data maximum.
+     *
+     * @default true for X axis and datetime Y axis, false for linear/logarithmic Y axis
+     */
+    endOnTick?: boolean;
 }
 export interface ChartXAxis extends ChartAxis {
     /**

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

@@ -104,11 +104,9 @@ export function getDefaultMaxXAxisValue(series) {
 }
 export function getDefaultMinXAxisValue(series) {
     if (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_X_AXIS.includes(s.type))) {
-        return series.reduce((minValue, s) => {
-            // https://github.com/gravity-ui/charts/issues/160
-            // @ts-expect-error
-            const minXValue = s.data.reduce((res, d) => Math.min(res, get(d, 'x', 0)), 0);
-            return Math.min(minValue, minXValue);
+        const domainData = getDomainDataXBySeries(series);
+        return domainData.reduce((minValue, d) => {
+            return Math.min(minValue, d);
         }, 0);
     }
     return undefined;

package/dist/esm/validation/validate-axes.js

@@ -57,6 +57,40 @@ function validateLabelsHtmlOptions(args) {
         });
     }
 }
+function validateYAxesConsistency(yAxis) {
+    const axesByPlot = {};
+    yAxis.forEach((axis) => {
+        const plotIndex = axis.plotIndex || 0;
+        if (!axesByPlot[plotIndex]) {
+            axesByPlot[plotIndex] = [];
+        }
+        axesByPlot[plotIndex].push(axis);
+    });
+    Object.values(axesByPlot).forEach((axes) => {
+        const seenPositions = new Set();
+        axes.forEach((axis, index) => {
+            const isFirstPlotAxis = index === 0;
+            const defaultAxisPosition = isFirstPlotAxis ? 'left' : 'right';
+            const position = axis.position || defaultAxisPosition;
+            if (seenPositions.has(position)) {
+                throw new ChartError({
+                    code: CHART_ERROR_CODE.INVALID_DATA,
+                    message: i18n('error', 'label_inconsistent-y-axis-configuration'),
+                });
+            }
+            seenPositions.add(position);
+        });
+        if (axes.length > 1) {
+            const hasCategoryAxis = axes.some((axis) => axis.type === 'category');
+            if (hasCategoryAxis) {
+                throw new ChartError({
+                    code: CHART_ERROR_CODE.INVALID_DATA,
+                    message: i18n('error', 'label_inconsistent-y-axis-configuration'),
+                });
+            }
+        }
+    });
+}
 export function validateAxes(args) {
     const { xAxis, yAxis = [] } = args;
     if (xAxis) {
@@ -71,6 +105,7 @@ export function validateAxes(args) {
             });
         }
     }
+    validateYAxesConsistency(yAxis);
     yAxis.forEach((axis, axisIndex) => {
         validateAxisType({ axis, key: 'y' });
         if (axis.type === 'category') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",