@gravity-ui/charts 1.11.3 → 1.12.0

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
-import { DEFAULT_AXIS_TYPE } from '../../constants';
+import { DEFAULT_AXIS_TYPE, SeriesType } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+import { getBarYLayoutForNumericScale } from '../utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
-const isNumericalArrayData = (data) => {
+function isNumericalArrayData(data) {
     return data.every((d) => typeof d === 'number' || d === null);
-};
-const filterCategoriesByVisibleSeries = (args) => {
+}
+function filterCategoriesByVisibleSeries(args) {
     const { axisDirection, categories, series } = args;
     const visibleCategories = new Set();
     series.forEach((s) => {
@@ -18,18 +19,61 @@ const filterCategoriesByVisibleSeries = (args) => {
         }
     });
     return categories.filter((c) => visibleCategories.has(c));
-};
-export function createYScale(axis, series, boundsHeight) {
-    const yType = get(axis, 'type', DEFAULT_AXIS_TYPE);
+}
+// axis is validated in `validation/index.ts`, so the value of `axis.type` is definitely valid.
+// eslint-disable-next-line consistent-return
+function getYScaleRange(args) {
+    const { axis, boundsHeight, series, seriesOptions } = args;
+    switch (axis.type) {
+        case 'datetime':
+        case 'linear':
+        case 'logarithmic': {
+            const barYSeries = series.filter((s) => s.type === SeriesType.BarY);
+            if (barYSeries.length) {
+                const { barSize, dataLength } = getBarYLayoutForNumericScale({
+                    plotHeight: boundsHeight - boundsHeight * axis.maxPadding,
+                    series: barYSeries,
+                    seriesOptions: seriesOptions,
+                });
+                if (dataLength > 1) {
+                    const alreadyCountedStackingIds = new Set();
+                    const offsetMultiplier = barYSeries.reduce((acc, s) => {
+                        let count = 0;
+                        if (s.stackId) {
+                            if (!alreadyCountedStackingIds.has(s.stackId)) {
+                                alreadyCountedStackingIds.add(s.stackId);
+                                count = 1;
+                            }
+                        }
+                        else {
+                            count = 1;
+                        }
+                        return acc + count;
+                    }, 0);
+                    const offset = (barSize * Math.max(offsetMultiplier, 1)) / 2;
+                    const start = boundsHeight - offset;
+                    const end = boundsHeight * axis.maxPadding + offset;
+                    return [start, end];
+                }
+            }
+            return [boundsHeight, boundsHeight * axis.maxPadding];
+        }
+        case 'category': {
+            return [boundsHeight, 0];
+        }
+    }
+}
+export function createYScale(args) {
+    const { axis, boundsHeight, series, seriesOptions } = args;
     const yMinProps = get(axis, 'min');
     const yMaxProps = get(axis, 'max');
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
-    switch (yType) {
+    const range = getYScaleRange({ axis, boundsHeight, series, seriesOptions });
+    switch (axis.type) {
         case 'linear':
         case 'logarithmic': {
             const domain = getDomainDataYBySeries(series);
-            const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (isNumericalArrayData(domain)) {
                 const [yMinDomain, yMaxDomain] = extent(domain);
                 const yMin = typeof yMinProps === 'number' ? yMinProps : yMinDomain;
@@ -41,7 +85,7 @@ export function createYScale(axis, series, boundsHeight) {
                     const hasSeriesWithVolumeOnYAxis = series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type));
                     yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
-                const scaleFn = yType === 'logarithmic' ? scaleLog : scaleLinear;
+                const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
                 return scaleFn().domain([yMin, yMax]).range(range).nice();
             }
             break;
@@ -53,12 +97,11 @@ export function createYScale(axis, series, boundsHeight) {
                     categories: yCategories,
                     series: series,
                 });
-                return scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
+                return scaleBand().domain(filteredCategories).range(range);
             }
             break;
         }
         case 'datetime': {
-            const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (yTimestamps) {
                 const [yMinTimestamp, yMaxTimestamp] = extent(yTimestamps);
                 const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
@@ -74,7 +117,6 @@ export function createYScale(axis, series, boundsHeight) {
                     return scaleUtc().domain([yMin, yMax]).range(range).nice();
                 }
             }
-            break;
         }
     }
     throw new Error('Failed to create yScale');
@@ -97,7 +139,8 @@ function calculateXAxisPadding(series) {
     return result;
 }
 // eslint-disable-next-line complexity
-export function createXScale(axis, series, boundsWidth, hasZoomX) {
+export function createXScale(args) {
+    const { axis, boundsWidth, series, hasZoomX } = args;
     const xMinProps = get(axis, 'min');
     const xMaxProps = get(axis, 'max');
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
@@ -193,13 +236,15 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX } = args;
+    const { boundsWidth, boundsHeight, hasZoomX, series, seriesOptions, split, xAxis, yAxis } = 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;
     return {
-        xScale: xAxis ? createXScale(xAxis, visibleSeries, boundsWidth, hasZoomX) : undefined,
+        xScale: xAxis
+            ? createXScale({ axis: xAxis, boundsWidth, series: visibleSeries, hasZoomX })
+            : undefined,
         yScale: yAxis.map((axis, index) => {
             const axisSeries = series.filter((s) => {
                 const seriesAxisIndex = get(s, 'yAxis', 0);
@@ -207,7 +252,12 @@ const createScales = (args) => {
             });
             const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
             const axisHeight = getAxisHeight({ boundsHeight, split });
-            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, axisHeight);
+            return createYScale({
+                axis,
+                boundsHeight: axisHeight,
+                series: visibleAxisSeries.length ? visibleAxisSeries : axisSeries,
+                seriesOptions,
+            });
         }),
     };
 };
@@ -215,7 +265,7 @@ const createScales = (args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX, hasZoomY } = args;
+    const { boundsWidth, boundsHeight, hasZoomX, hasZoomY, series, seriesOptions, split, xAxis, yAxis, } = args;
     return React.useMemo(() => {
         let xScale;
         let yScale;
@@ -224,14 +274,15 @@ export const useAxisScales = (args) => {
             ({ xScale, yScale } = createScales({
                 boundsWidth,
                 boundsHeight,
+                hasZoomX,
+                hasZoomY,
                 series,
+                seriesOptions,
+                split,
                 xAxis,
                 yAxis,
-                split,
-                hasZoomX,
-                hasZoomY,
             }));
         }
         return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX, hasZoomY]);
+    }, [boundsWidth, boundsHeight, hasZoomX, hasZoomY, series, seriesOptions, split, xAxis, yAxis]);
 };

package/dist/esm/hooks/useChartOptions/x-axis.js

@@ -3,7 +3,7 @@ import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLa
 import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 async function getLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
-    const scale = createXScale(axis, seriesData, width);
+    const scale = createXScale({ axis, series: seriesData, boundsWidth: width });
     const tickCount = getTicksCount({ axis, range: width });
     const ticks = getXAxisItems({
         scale: scale,

package/dist/esm/hooks/useChartOptions/y-axis.d.ts

@@ -1,7 +1,9 @@
 import type { ChartSeries, ChartYAxis } from '../../types';
+import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ seriesData, yAxis, height, }: {
+export declare const getPreparedYAxis: ({ height, seriesData, seriesOptions, yAxis, }: {
+    height: number;
     seriesData: ChartSeries[];
+    seriesOptions: PreparedSeriesOptions;
     yAxis: ChartYAxis[] | undefined;
-    height: number;
 }) => Promise<PreparedAxis[]>;

package/dist/esm/hooks/useChartOptions/y-axis.js

@@ -3,11 +3,16 @@ import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrossh
 import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = async (args) => {
-    const { axis, seriesData } = args;
+    const { axis, seriesData, seriesOptions } = args;
     if (!axis.labels.enabled) {
         return 0;
     }
-    const scale = createYScale(axis, seriesData, 1);
+    const scale = createYScale({
+        axis,
+        boundsHeight: 1,
+        series: seriesData,
+        seriesOptions,
+    });
     const ticks = getScaleTicks(scale);
     // FIXME: it is necessary to filter data, since we do not draw overlapping ticks
     const step = getClosestPointsRange(axis, ticks);
@@ -23,7 +28,7 @@ const getAxisLabelMaxWidth = async (args) => {
     });
     return size.maxWidth;
 };
-export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
+export const getPreparedYAxis = ({ height, seriesData, seriesOptions, yAxis, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
@@ -126,6 +131,7 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
             preparedAxis.labels.width = await getAxisLabelMaxWidth({
                 axis: preparedAxis,
                 seriesData,
+                seriesOptions,
             });
         }
         return preparedAxis;

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

@@ -13,4 +13,13 @@ export declare const useSeries: (args: Args) => {
     preparedSeries: PreparedSeries[];
     handleLegendItemClick: OnLegendItemClick;
 };
+export declare const useShapeSeries: ({ seriesData, seriesOptions, colors, preparedLegend, activeLegendItems, }: {
+    colors: string[];
+    seriesData: ChartData["series"]["data"];
+    seriesOptions: ChartData["series"]["options"];
+    activeLegendItems: string[];
+    preparedLegend?: PreparedLegend | null;
+}) => {
+    preparedSeries: PreparedSeries[];
+};
 export {};

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

@@ -5,6 +5,38 @@ import { usePrevious } from '../usePrevious';
 import { getPreparedLegend } from './prepare-legend';
 import { prepareSeries } from './prepareSeries';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
+const useVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
+    return React.useMemo(() => {
+        return preparedSeries.map((singleSeries) => {
+            if (singleSeries.legend.enabled) {
+                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
+            }
+            return singleSeries;
+        });
+    }, [preparedSeries, activeLegendItems]);
+};
+const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
+    const seriesNames = getSeriesNames(seriesData);
+    const colorScale = scaleOrdinal(seriesNames, colors);
+    const groupedSeries = group(seriesData, (item) => item.type);
+    const acc = [];
+    if (!preparedLegend) {
+        return acc;
+    }
+    const list = Array.from(groupedSeries);
+    for (let i = 0; i < list.length; i++) {
+        const [seriesType, seriesList] = list[i];
+        acc.push(...(await prepareSeries({
+            type: seriesType,
+            series: seriesList,
+            seriesOptions,
+            legend: preparedLegend,
+            colorScale,
+            colors,
+        })));
+    }
+    return acc;
+};
 export const useSeries = (args) => {
     const { legend, originalSeriesData, seriesData, seriesOptions, colors, preparedLegend: preparedLegendProps = null, } = args;
     const [preparedLegend, setPreparedLegend] = React.useState(preparedLegendProps);
@@ -17,38 +49,18 @@ export const useSeries = (args) => {
     const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
     React.useEffect(() => {
         (async () => {
-            const seriesNames = getSeriesNames(seriesData);
-            const colorScale = scaleOrdinal(seriesNames, colors);
-            const groupedSeries = group(seriesData, (item) => item.type);
-            const acc = [];
-            if (!preparedLegend) {
-                return;
-            }
-            const list = Array.from(groupedSeries);
-            for (let i = 0; i < list.length; i++) {
-                const [seriesType, seriesList] = list[i];
-                acc.push(...(await prepareSeries({
-                    type: seriesType,
-                    series: seriesList,
-                    seriesOptions,
-                    legend: preparedLegend,
-                    colorScale,
-                    colors,
-                })));
-            }
-            setPreparedSeries(acc);
-            setActiveLegendItems(getActiveLegendItems(acc));
+            const items = await getPreparedSeries({
+                seriesData,
+                seriesOptions,
+                preparedLegend,
+                colors,
+            });
+            setPreparedSeries(items);
+            setActiveLegendItems(getActiveLegendItems(items));
         })();
     }, [seriesData, seriesOptions, preparedLegend, colors]);
     const prevOriginalSeriesData = usePrevious(originalSeriesData);
-    const chartSeries = React.useMemo(() => {
-        return preparedSeries.map((singleSeries) => {
-            if (singleSeries.legend.enabled) {
-                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
-            }
-            return singleSeries;
-        });
-    }, [preparedSeries, activeLegendItems]);
+    const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
         const allItems = getAllLegendItems(preparedSeries);
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
@@ -81,3 +93,21 @@ export const useSeries = (args) => {
         handleLegendItemClick,
     };
 };
+export const useShapeSeries = ({ seriesData, seriesOptions, colors, preparedLegend, activeLegendItems, }) => {
+    const [preparedSeries, setPreparedSeries] = React.useState([]);
+    React.useEffect(() => {
+        (async () => {
+            const items = await getPreparedSeries({
+                seriesData,
+                seriesOptions,
+                preparedLegend,
+                colors,
+            });
+            setPreparedSeries(items);
+        })();
+    }, [seriesData, seriesOptions, preparedLegend, colors]);
+    const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
+    return {
+        preparedSeries: chartSeries,
+    };
+};

package/dist/esm/hooks/useSeries/prepare-legend.d.ts

@@ -1,5 +1,5 @@
 import type { ChartData } from '../../types';
-import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
+import type { PreparedChart } from '../useChartOptions/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
 export declare function getPreparedLegend(args: {
     legend: ChartData['legend'];
@@ -11,7 +11,6 @@ export declare function getLegendComponents(args: {
     chartMargin: PreparedChart['margin'];
     series: PreparedSeries[];
     preparedLegend: PreparedLegend;
-    preparedYAxis: PreparedAxis[];
 }): {
     legendConfig: {
         offset: {
@@ -24,6 +23,7 @@ export declare function getLegendComponents(args: {
                 end: number;
             }[];
         } | undefined;
+        maxWidth: number;
     };
     legendItems: LegendItem[][];
 };

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

@@ -4,8 +4,6 @@ import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
 import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize } from '../../utils';
-import { getBoundsWidth } from '../useChartDimensions';
-import { getYAxisWidth } from '../useChartDimensions/utils';
 export async function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
@@ -168,8 +166,8 @@ function getPagination(args) {
     return { pages };
 }
 export function getLegendComponents(args) {
-    const { chartWidth, chartHeight, chartMargin, series, preparedLegend, preparedYAxis } = args;
-    const maxLegendWidth = getBoundsWidth({ chartWidth, chartMargin, preparedYAxis });
+    const { chartWidth, chartHeight, chartMargin, series, preparedLegend } = args;
+    const maxLegendWidth = chartWidth - chartMargin.right - chartMargin.left;
     const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
     const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
     const items = getGroupedLegendItems({
@@ -199,8 +197,8 @@ export function getLegendComponents(args) {
     }
     const top = chartHeight - chartMargin.bottom - preparedLegend.height;
     const offset = {
-        left: chartMargin.left + getYAxisWidth(preparedYAxis[0]),
+        left: chartMargin.left,
         top,
     };
-    return { legendConfig: { offset, pagination }, legendItems: items };
+    return { legendConfig: { offset, pagination, maxWidth: maxLegendWidth }, legendItems: items };
 }

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

@@ -53,6 +53,7 @@ export type LegendConfig = {
         left: number;
         top: number;
     };
+    maxWidth: number;
     pagination?: {
         pages: {
             start: number;

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

@@ -2,7 +2,7 @@ import { ascending, descending, max, sort } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../../constants';
 async function getLabelData(d) {
     if (!d.series.dataLabels.enabled) {
         return undefined;

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

@@ -1,54 +1,9 @@
-import { ascending, descending, max, sort } from 'd3';
+import { ascending, descending, sort } from 'd3';
 import get from 'lodash/get';
-import { getDataCategoryValue, getLabelsSize } from '../../../utils';
+import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+import { getBarYLayoutForCategoryScale, getBarYLayoutForNumericScale, groupBarYDataByYValue, } from '../../utils';
 const DEFAULT_LABEL_PADDING = 7;
-function groupByYValue(series, yAxis) {
-    const data = {};
-    series.forEach((s) => {
-        s.data.forEach((d) => {
-            const axisIndex = get(s, 'yAxis', 0);
-            const seriesYAxis = yAxis[axisIndex];
-            const categories = get(seriesYAxis, 'categories', []);
-            const key = seriesYAxis.type === 'category'
-                ? getDataCategoryValue({ axisDirection: 'y', categories, data: d })
-                : d.y;
-            if (key) {
-                if (!data[key]) {
-                    data[key] = {};
-                }
-                if (!data[key][s.stackId]) {
-                    data[key][s.stackId] = [];
-                }
-                data[key][s.stackId].push({ data: d, series: s });
-            }
-        });
-    });
-    return data;
-}
-function getBandWidth(series, yAxis, yScale) {
-    let bandWidth = Infinity;
-    if (yAxis[0].type === 'category') {
-        bandWidth = yScale.bandwidth();
-    }
-    else {
-        const scale = yScale;
-        const axisValues = series.reduce((acc, s) => {
-            s.data.forEach((dataItem) => acc.push(Number(dataItem.y)));
-            return acc;
-        }, []);
-        axisValues.sort().forEach((value, index) => {
-            if (index > 0 && value !== axisValues[index - 1]) {
-                const dist = scale(value) - scale(axisValues[index - 1]);
-                if (dist < bandWidth) {
-                    bandWidth = dist;
-                }
-            }
-        });
-    }
-    return bandWidth;
-}
 async function setLabel(prepared) {
     const dataLabels = prepared.series.dataLabels;
     if (!dataLabels.enabled) {
@@ -89,10 +44,9 @@ async function setLabel(prepared) {
 export const prepareBarYData = async (args) => {
     const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
     const xLinearScale = xScale;
+    const yLinearScale = yScale;
+    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
     const plotWidth = xLinearScale(xLinearScale.domain()[1]);
-    const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
-    const barPadding = get(seriesOptions, 'bar-y.barPadding');
-    const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
     const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
     const sortKey = (() => {
@@ -108,17 +62,18 @@ export const prepareBarYData = async (args) => {
             }
         }
     })();
-    const groupedData = groupByYValue(series, yAxis);
-    const bandWidth = getBandWidth(series, yAxis, yScale);
-    const maxGroupSize = max(Object.values(groupedData), (d) => Object.values(d).length) || 1;
-    const groupGap = Math.max(bandWidth * groupPadding, MIN_BAR_GROUP_GAP);
-    const groupWidth = bandWidth - groupGap;
-    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
-    const barHeight = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
+    const groupedData = groupBarYDataByYValue(series, yAxis);
+    const { bandSize, barGap, barSize } = yAxis[0].type === 'category'
+        ? getBarYLayoutForCategoryScale({ groupedData, seriesOptions, yScale })
+        : getBarYLayoutForNumericScale({
+            series,
+            seriesOptions,
+            plotHeight: plotHeight - plotHeight * yAxis[0].maxPadding,
+        });
     const result = [];
     Object.entries(groupedData).forEach(([yValue, val]) => {
         const stacks = Object.values(val);
-        const currentBarHeight = barHeight * stacks.length + rectGap * (stacks.length - 1);
+        const currentBarHeight = barSize * stacks.length + barGap * (stacks.length - 1);
         stacks.forEach((measureValues, groupItemIndex) => {
             const base = xLinearScale(0);
             let stackSum = base;
@@ -130,20 +85,20 @@ export const prepareBarYData = async (args) => {
                 let center;
                 if (yAxis[0].type === 'category') {
                     const bandScale = yScale;
-                    center = (bandScale(yValue) || 0) + bandWidth / 2;
+                    center = (bandScale(yValue) || 0) + bandSize / 2;
                 }
                 else {
                     const scale = yScale;
                     center = scale(Number(yValue));
                 }
-                const y = center - currentBarHeight / 2 + (barHeight + rectGap) * groupItemIndex;
+                const y = center - currentBarHeight / 2 + (barSize + barGap) * groupItemIndex;
                 const xValue = Number(data.x);
                 const width = xValue > 0 ? xLinearScale(xValue) - base : base - xLinearScale(xValue);
                 const item = {
                     x: xValue > 0 ? stackSum : stackSum - width,
                     y,
                     width,
-                    height: barHeight,
+                    height: barSize,
                     color: data.color || s.color,
                     opacity: get(data, 'opacity', null),
                     data,

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

@@ -2,7 +2,7 @@ import get from 'lodash/get';
 import sortBy from 'lodash/sortBy';
 import { getLabelsSize } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
+import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../../constants';
 import { getXValue, getYValue } from '../utils';
 async function getLabelData(d, plotHeight) {
     var _a, _b;

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

@@ -0,0 +1,27 @@
+import type { BarYSeries, BarYSeriesData } from '../../types';
+import type { ChartScale } from '../useAxisScales';
+import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedBarYSeries, PreparedSeriesOptions } from '../useSeries/types';
+export declare function groupBarYDataByYValue(series: PreparedBarYSeries[], yAxis: PreparedAxis[]): Record<string | number, Record<string, {
+    data: BarYSeriesData;
+    series: PreparedBarYSeries;
+}[]>>;
+export declare function getBarYLayoutForNumericScale(args: {
+    plotHeight: number;
+    series: (BarYSeries | PreparedBarYSeries)[];
+    seriesOptions: PreparedSeriesOptions;
+}): {
+    bandSize: number;
+    barGap: number;
+    barSize: number;
+    dataLength: number;
+};
+export declare function getBarYLayoutForCategoryScale(args: {
+    groupedData: ReturnType<typeof groupBarYDataByYValue>;
+    seriesOptions: PreparedSeriesOptions;
+    yScale: ChartScale;
+}): {
+    bandSize: number;
+    barGap: number;
+    barSize: number;
+};