@gravity-ui/charts 1.32.1 → 1.33.0

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

@@ -1,6 +1,7 @@
 export * from './useAxis';
 export * from './useAxis/types';
 export * from './useAxisScales';
+export * from './useAxisScales/types';
 export * from './useBrush';
 export * from './useBrush/types';
 export * from './useChartDimensions';

package/dist/cjs/hooks/index.js

@@ -1,6 +1,7 @@
 export * from './useAxis';
 export * from './useAxis/types';
 export * from './useAxisScales';
+export * from './useAxisScales/types';
 export * from './useBrush';
 export * from './useBrush/types';
 export * from './useChartDimensions';

package/dist/cjs/hooks/useAxis/x-axis.js

@@ -127,6 +127,8 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
         },
         min: get(xAxis, 'min'),
         max: get(xAxis, 'max'),
+        startOnTick: get(xAxis, 'startOnTick'),
+        endOnTick: get(xAxis, 'endOnTick'),
         maxPadding,
         grid: {
             enabled: shouldHideGrid ? false : get(xAxis, 'grid.enabled', true),

package/dist/cjs/hooks/useAxis/y-axis.js

@@ -139,6 +139,8 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             },
             min: (_l = get(axisItem, 'min')) !== null && _l !== void 0 ? _l : getDefaultMinYAxisValue(axisSeriesData),
             max: get(axisItem, 'max'),
+            startOnTick: get(axisItem, 'startOnTick'),
+            endOnTick: get(axisItem, 'endOnTick'),
             maxPadding: get(axisItem, 'maxPadding', getMaxPaddingBySeries({ series: axisSeriesData })),
             grid: {
                 enabled: shouldHideGrid

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -1,10 +1,6 @@
-import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
 import type { PreparedAxis, PreparedSeries, PreparedSplit, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartAxis, ChartSeries } from '../../types';
-type ChartScaleBand = ScaleBand<string>;
-export type ChartScaleLinear = ScaleLinear<number, number>;
-export type ChartScaleTime = ScaleTime<number, number>;
-export type ChartScale = ChartScaleBand | ChartScaleLinear | ChartScaleTime;
+import type { ChartScale } from './types';
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
@@ -12,6 +8,7 @@ type Args = {
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     split: PreparedSplit;
+    isRangeSlider?: boolean;
     rangeSliderState?: RangeSliderState;
     zoomState?: Partial<ZoomState>;
 };
@@ -22,16 +19,17 @@ type ReturnValue = {
 export declare function createYScale(args: {
     axis: PreparedAxis;
     boundsHeight: number;
-    series: (PreparedSeries | ChartSeries)[];
+    series: PreparedSeries[] | ChartSeries[];
+    primaryTickPositions?: number[];
     zoomStateY?: [number, number];
-}): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never> | undefined;
+}): import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | undefined;
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;
     series: (PreparedSeries | ChartSeries)[];
     rangeSliderState?: RangeSliderState;
     zoomStateX?: [number, number];
-}): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never> | undefined;
+}): import("d3-scale").ScaleBand<string> | import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleTime<number, number, never> | undefined;
 /**
  * Uses to create scales for axis related series
  */

package/dist/cjs/hooks/useAxisScales/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
+import { getTickValues } from '../../components/AxisY/utils';
 import { DEFAULT_AXIS_TYPE, SERIES_TYPE } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisCategories, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 import { getBandSize } from '../utils/get-band-size';
-import { checkIsPointDomain, getMinMaxPropsOrState, getXMaxDomainResult, hasOnlyMarkerSeries, } from './utils';
+import { checkIsPointDomain, clusterYAxes, getDomainSyncedToPrimaryTicks, getMinMaxPropsOrState, getXMaxDomainResult, hasOnlyMarkerSeries, } from './utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
 function validateArrayData(data) {
     let hasNumberAndNullValues;
@@ -65,7 +66,7 @@ function isSeriesWithYAxisOffset(series) {
 }
 // eslint-disable-next-line complexity
 export function createYScale(args) {
-    const { axis, boundsHeight, series, zoomStateY } = args;
+    const { axis, boundsHeight, series, primaryTickPositions, zoomStateY } = args;
     const [yMinPropsOrState, yMaxPropsOrState] = getMinMaxPropsOrState({
         axis,
         maxValues: [zoomStateY === null || zoomStateY === void 0 ? void 0 : zoomStateY[1]],
@@ -102,29 +103,57 @@ export function createYScale(args) {
                     yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
                 const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
-                const scale = scaleFn().domain([yMin, yMax]).range(range);
-                let offsetMin = 0;
-                // We should ignore padding if we are drawing only one point on the plot.
-                let offsetMax = yMin === yMax ? 0 : boundsHeight * axis.maxPadding;
-                if (isSeriesWithYAxisOffset(series)) {
-                    if (domain.length > 1) {
-                        const bandWidth = getBandSize({
-                            scale: scale,
-                            domain: domain,
-                        });
-                        offsetMin += bandWidth / 2;
-                        offsetMax += bandWidth / 2;
+                let scale = scaleFn().domain([yMin, yMax]).range(range);
+                if (primaryTickPositions) {
+                    const syncedDomain = getDomainSyncedToPrimaryTicks({
+                        primaryTickPositions,
+                        range,
+                        scaleFn,
+                        secondaryDomain: scale.domain(),
+                    });
+                    scale.domain(syncedDomain);
+                }
+                else {
+                    let offsetMin = 0;
+                    // We should ignore padding if we are drawing only one point on the plot.
+                    let offsetMax = yMin === yMax ? 0 : boundsHeight * axis.maxPadding;
+                    if (isSeriesWithYAxisOffset(series)) {
+                        if (domain.length > 1) {
+                            const bandWidth = getBandSize({
+                                scale: scale,
+                                domain: domain,
+                            });
+                            offsetMin += bandWidth / 2;
+                            offsetMax += bandWidth / 2;
+                        }
                     }
+                    const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
+                    const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
+                    const domainOffsetMin = isMinSpecified
+                        ? 0
+                        : Math.abs(scale.invert(offsetMin) - scale.invert(0));
+                    const domainOffsetMax = isMaxSpecified
+                        ? 0
+                        : Math.abs(scale.invert(offsetMax) - scale.invert(0));
+                    scale = scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
                 }
-                const isMinSpecified = typeof get(axis, 'min') === 'number' && !zoomStateY;
-                const isMaxSpecified = typeof get(axis, 'max') === 'number' && !zoomStateY;
-                const domainOffsetMin = isMinSpecified
-                    ? 0
-                    : Math.abs(scale.invert(offsetMin) - scale.invert(0));
-                const domainOffsetMax = isMaxSpecified
-                    ? 0
-                    : Math.abs(scale.invert(offsetMax) - scale.invert(0));
-                return scale.domain([yMin - domainOffsetMin, yMax + domainOffsetMax]);
+                // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
+                const nicedDomain = scale.copy().nice(Math.max(10, domain.length)).domain();
+                const startOnTick = get(axis, 'startOnTick', false);
+                const endOnTick = get(axis, 'endOnTick', false);
+                const hasOffset = isSeriesWithYAxisOffset(series);
+                if (!zoomStateY && !hasOffset && nicedDomain.length === 2) {
+                    const domainWithOffset = scale.domain();
+                    scale.domain([
+                        startOnTick
+                            ? Math.min(nicedDomain[0], domainWithOffset[0])
+                            : domainWithOffset[0],
+                        endOnTick
+                            ? Math.max(nicedDomain[1], domainWithOffset[1])
+                            : domainWithOffset[1],
+                    ]);
+                }
+                return scale;
             }
             break;
         }
@@ -155,7 +184,17 @@ export function createYScale(args) {
                     yMaxPropsOrState < yMaxTimestamp
                     ? yMaxPropsOrState
                     : yMaxTimestamp;
-                return scaleUtc().domain([yMin, yMax]).range(range).nice();
+                const scale = scaleUtc().domain([yMin, yMax]).range(range);
+                const startOnTick = get(axis, 'startOnTick', true);
+                const endOnTick = get(axis, 'endOnTick', true);
+                if (startOnTick || endOnTick) {
+                    const nicedDomain = scale.copy().nice().domain();
+                    return scale.domain([
+                        startOnTick ? Number(nicedDomain[0]) : yMin,
+                        endOnTick ? Number(nicedDomain[1]) : yMax,
+                    ]);
+                }
+                return scale;
             }
             else {
                 const domain = getDomainDataYBySeries(series);
@@ -330,11 +369,17 @@ export function createXScale(args) {
                 // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
                 const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
                 scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
+                const startOnTick = get(axis, 'startOnTick', true);
+                const endOnTick = get(axis, 'endOnTick', true);
                 if (!hasZoomX && !hasOffset && nicedDomain.length === 2) {
                     const domainWithOffset = scale.domain();
                     scale.domain([
-                        Math.min(nicedDomain[0], domainWithOffset[0]),
-                        Math.max(nicedDomain[1], domainWithOffset[1]),
+                        startOnTick
+                            ? Math.min(nicedDomain[0], domainWithOffset[0])
+                            : domainWithOffset[0],
+                        endOnTick
+                            ? Math.max(nicedDomain[1], domainWithOffset[1])
+                            : domainWithOffset[1],
                     ]);
                 }
                 return scale;
@@ -403,11 +448,17 @@ export function createXScale(args) {
                 // 10 is the default value for the number of ticks. Here, to preserve the appearance of a series with a small number of points
                 const nicedDomain = scale.copy().nice(Math.max(10, domainData.length)).domain();
                 scale.domain([xMin - domainOffsetMin, xMax + domainOffsetMax]);
+                const startOnTick = get(axis, 'startOnTick', true);
+                const endOnTick = get(axis, 'endOnTick', true);
                 if (!hasZoomX && !hasOffset && nicedDomain.length === 2) {
                     const domainWithOffset = scale.domain();
                     scale.domain([
-                        Math.min(Number(nicedDomain[0]), Number(domainWithOffset[0])),
-                        Math.max(Number(nicedDomain[1]), Number(domainWithOffset[1])),
+                        startOnTick
+                            ? Math.min(Number(nicedDomain[0]), Number(domainWithOffset[0]))
+                            : Number(domainWithOffset[0]),
+                        endOnTick
+                            ? Math.max(Number(nicedDomain[1]), Number(domainWithOffset[1]))
+                            : Number(domainWithOffset[1]),
                     ]);
                 }
                 return scale;
@@ -418,11 +469,62 @@ export function createXScale(args) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState } = args;
+    const { boundsWidth, boundsHeight, isRangeSlider, rangeSliderState, series, split, xAxis, yAxis, zoomState, } = args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
+    const axisHeight = getAxisHeight({ boundsHeight, split });
+    let index = 0;
+    const yScale = clusterYAxes(yAxis).reduce((acc, cluster) => {
+        var _a, _b;
+        const [primaryAxis, secondaryAxis] = cluster;
+        const mainAxisSeries = series.filter((s) => {
+            const seriesAxisIndex = get(s, 'yAxis', 0);
+            return seriesAxisIndex === index;
+        });
+        const visiblePrimaryAxisSeries = getOnlyVisibleSeries(mainAxisSeries);
+        const primaryAxisScale = createYScale({
+            axis: primaryAxis,
+            boundsHeight: axisHeight,
+            series: visiblePrimaryAxisSeries.length ? visiblePrimaryAxisSeries : mainAxisSeries,
+            zoomStateY: (_a = zoomState === null || zoomState === void 0 ? void 0 : zoomState.y) === null || _a === void 0 ? void 0 : _a[index],
+        });
+        acc.push(primaryAxisScale);
+        index += 1;
+        let primaryTickPositions;
+        if (primaryAxisScale && secondaryAxis && !isRangeSlider) {
+            primaryTickPositions = getTickValues({
+                axis: primaryAxis,
+                scale: primaryAxisScale,
+                labelLineHeight: primaryAxis.labels.lineHeight,
+                series: visiblePrimaryAxisSeries.length
+                    ? visiblePrimaryAxisSeries
+                    : mainAxisSeries,
+            }).map((t) => t.y);
+        }
+        const secondAxisSeries = series.filter((s) => {
+            const seriesAxisIndex = get(s, 'yAxis', 0);
+            return seriesAxisIndex === index;
+        });
+        const visibleSecondAxisSeries = getOnlyVisibleSeries(secondAxisSeries);
+        const secondaryAxisScale = secondaryAxis
+            ? createYScale({
+                axis: secondaryAxis,
+                boundsHeight: axisHeight,
+                primaryTickPositions,
+                series: visibleSecondAxisSeries.length
+                    ? visibleSecondAxisSeries
+                    : secondAxisSeries,
+                zoomStateY: (_b = zoomState === null || zoomState === void 0 ? void 0 : zoomState.y) === null || _b === void 0 ? void 0 : _b[index],
+            })
+            : undefined;
+        if (secondaryAxisScale) {
+            acc.push(secondaryAxisScale);
+            index += 1;
+        }
+        return acc;
+    }, []);
     return {
         xScale: xAxis
             ? createXScale({
@@ -433,29 +535,14 @@ const createScales = (args) => {
                 zoomStateX: zoomState === null || zoomState === void 0 ? void 0 : zoomState.x,
             })
             : undefined,
-        yScale: yAxis.map((axis, index) => {
-            var _a;
-            const axisSeries = series.filter((s) => {
-                const seriesAxisIndex = get(s, 'yAxis', 0);
-                return seriesAxisIndex === index;
-            });
-            const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
-            const axisHeight = getAxisHeight({ boundsHeight, split });
-            const zoomStateY = (_a = zoomState === null || zoomState === void 0 ? void 0 : zoomState.y) === null || _a === void 0 ? void 0 : _a[index];
-            return createYScale({
-                axis,
-                boundsHeight: axisHeight,
-                series: visibleAxisSeries.length ? visibleAxisSeries : axisSeries,
-                zoomStateY,
-            });
-        }),
+        yScale,
     };
 };
 /**
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState } = args;
+    const { boundsWidth, boundsHeight, isRangeSlider, rangeSliderState, series, split, xAxis, yAxis, zoomState, } = args;
     return React.useMemo(() => {
         let xScale;
         let yScale;
@@ -464,6 +551,7 @@ export const useAxisScales = (args) => {
             ({ xScale, yScale } = createScales({
                 boundsWidth,
                 boundsHeight,
+                isRangeSlider,
                 rangeSliderState,
                 series,
                 split,
@@ -473,5 +561,15 @@ export const useAxisScales = (args) => {
             }));
         }
         return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState]);
+    }, [
+        boundsWidth,
+        boundsHeight,
+        isRangeSlider,
+        rangeSliderState,
+        series,
+        split,
+        xAxis,
+        yAxis,
+        zoomState,
+    ]);
 };

package/dist/cjs/hooks/useAxisScales/types.d.ts

@@ -0,0 +1,6 @@
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
+type ChartScaleBand = ScaleBand<string>;
+export type ChartScaleLinear = ScaleLinear<number, number>;
+export type ChartScaleTime = ScaleTime<number, number>;
+export type ChartScale = ChartScaleBand | ChartScaleLinear | ChartScaleTime;
+export {};

package/dist/cjs/hooks/useAxisScales/types.js

@@ -0,0 +1 @@
+export {};

package/dist/cjs/hooks/useAxisScales/utils.d.ts

@@ -1,4 +1,5 @@
-import type { PreparedAxis, PreparedSeries } from '../../hooks';
+import type { scaleLinear } from 'd3';
+import type { PreparedAxis, PreparedSeries, PreparedYAxis } from '../../hooks';
 import type { ChartAxis, ChartSeries } from '../../types';
 type OptionalNumber = number | undefined;
 export declare function getMinMaxPropsOrState(args: {
@@ -22,4 +23,11 @@ export declare function getXMaxDomainResult(args: {
     xMaxRangeSlider?: number;
     xMaxZoom?: number;
 }): number;
+export declare function clusterYAxes(yAxes: PreparedYAxis[]): [PreparedYAxis, PreparedYAxis?][];
+export declare function getDomainSyncedToPrimaryTicks(args: {
+    primaryTickPositions: number[];
+    range: [number, number];
+    scaleFn: typeof scaleLinear;
+    secondaryDomain: number[];
+}): [number, number];
 export {};

package/dist/cjs/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/cjs/hooks/useNormalizedOriginalData/index.d.ts

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;