@gravity-ui/charts 1.11.4 → 1.13.0

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

@@ -0,0 +1,27 @@
+import { ascending, descending, reverse, sort } from 'd3';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
+export function prepareAxisPlotLabel(d) {
+    var _a, _b, _c, _d, _e;
+    return {
+        text: (_b = (_a = d.label) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
+        style: Object.assign({ fontSize: DEFAULT_AXIS_LABEL_FONT_SIZE, fontColor: 'var(--g-color-text-secondary)' }, (_c = d.label) === null || _c === void 0 ? void 0 : _c.style),
+        padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
+    };
+}
+export function getAxisCategories(axis) {
+    const categories = axis === null || axis === void 0 ? void 0 : axis.categories;
+    if (categories) {
+        switch (axis.order) {
+            case 'reverse': {
+                return reverse(categories);
+            }
+            case 'sortAsc': {
+                return sort(categories, (a, b) => ascending(a, b));
+            }
+            case 'sortDesc': {
+                return sort(categories, (a, b) => descending(a, b));
+            }
+        }
+    }
+    return categories;
+}

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

@@ -2,8 +2,9 @@ import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
+import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 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,
@@ -69,7 +70,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             maxWidth: get(xAxis, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
         },
         lineColor: get(xAxis, 'lineColor'),
-        categories: get(xAxis, 'categories'),
+        categories: getAxisCategories(xAxis),
         timestamps: get(xAxis, 'timestamps'),
         title: {
             text: titleText,
@@ -98,6 +99,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
+            label: prepareAxisPlotLabel(d),
         })),
         plotBands: get(xAxis, 'plotBands', []).map((d) => ({
             color: get(d, 'color', 'var(--g-color-base-brand)'),
@@ -105,6 +107,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             from: get(d, 'from', 0),
             to: get(d, 'to', 0),
             layerPlacement: get(d, 'layerPlacement', 'before'),
+            label: prepareAxisPlotLabel(d),
         })),
         crosshair: {
             enabled: get(xAxis, 'crosshair.enabled', axisCrosshairDefaults.enabled),
@@ -116,6 +119,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             opacity: get(xAxis, 'crosshair.opacity', axisCrosshairDefaults.opacity),
         },
         visible: get(xAxis, 'visible', true),
+        order: xAxis === null || xAxis === void 0 ? void 0 : xAxis.order,
     };
     const { height, rotation } = await getLabelSettings({
         axis: preparedXAxis,

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

@@ -2,12 +2,18 @@ import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
+import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 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 +29,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);
@@ -73,7 +79,7 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
                 maxWidth: get(axisItem, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
             },
             lineColor: get(axisItem, 'lineColor'),
-            categories: get(axisItem, 'categories'),
+            categories: getAxisCategories(axisItem),
             timestamps: get(axisItem, 'timestamps'),
             title: {
                 text: titleText,
@@ -103,6 +109,7 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
                 dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
+                label: prepareAxisPlotLabel(d),
             })),
             plotBands: get(axisItem, 'plotBands', []).map((d) => ({
                 color: get(d, 'color', 'var(--g-color-base-brand)'),
@@ -110,6 +117,7 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
                 from: get(d, 'from', 0),
                 to: get(d, 'to', 0),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
+                label: prepareAxisPlotLabel(d),
             })),
             crosshair: {
                 enabled: get(axisItem, 'crosshair.enabled', axisCrosshairDefaults.enabled),
@@ -121,11 +129,13 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
                 opacity: get(axisItem, 'crosshair.opacity', axisCrosshairDefaults.opacity),
             },
             visible: get(axisItem, 'visible', true),
+            order: axisItem.order,
         };
         if (labelsEnabled) {
             preparedAxis.labels.width = await getAxisLabelMaxWidth({
                 axis: preparedAxis,
                 seriesData,
+                seriesOptions,
             });
         }
         return preparedAxis;

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

@@ -6,8 +6,8 @@ export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
     radius: number;
-    borderColor: string;
     borderWidth: number;
+    borderColor: string;
 };
 type PrepareAreaSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

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

@@ -20,8 +20,11 @@ export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): Promise<
         maxWidth: number;
         html: boolean;
         format?: import("../..").ValueFormat;
+        allowOverlap: boolean;
     };
     borderRadius: number;
+    borderWidth: number;
+    borderColor: string;
 } & {
     color: string;
     name: string;

package/dist/esm/hooks/useSeries/prepare-bar-y.js

@@ -4,7 +4,7 @@ import { getLabelsSize, getUniqId } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 async function prepareDataLabels(series) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const enabled = get(series, 'dataLabels.enabled', false);
     const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
     const html = get(series, 'dataLabels.html', false);
@@ -25,12 +25,13 @@ async function prepareDataLabels(series) {
         maxWidth,
         html,
         format: (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.format,
+        allowOverlap: (_d = (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) !== null && _d !== void 0 ? _d : false,
     };
 }
 export function prepareBarYSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return Promise.all(seriesList.map(async (series) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         return {
@@ -49,6 +50,8 @@ export function prepareBarYSeries(args) {
             dataLabels: await prepareDataLabels(series),
             cursor: get(series, 'cursor', null),
             borderRadius: (_c = (_a = series.borderRadius) !== null && _a !== void 0 ? _a : (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : 0,
+            borderWidth: (_f = (_d = series.borderWidth) !== null && _d !== void 0 ? _d : (_e = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _e === void 0 ? void 0 : _e.borderWidth) !== null && _f !== void 0 ? _f : 0,
+            borderColor: (_j = (_g = series.borderColor) !== null && _g !== void 0 ? _g : (_h = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _h === void 0 ? void 0 : _h.borderColor) !== null && _j !== void 0 ? _j : 'var(--gcharts-shape-border-color)',
         };
     }));
 }

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

@@ -8,8 +8,8 @@ export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
     radius: number;
-    borderColor: string;
     borderWidth: number;
+    borderColor: string;
 };
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

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

@@ -10,8 +10,8 @@ export declare const DEFAULT_MARKER: {
     enabled: boolean;
     radius: number;
     symbol: `${import("../../constants").SymbolType}`;
-    borderColor: string;
     borderWidth: number;
+    borderColor: string;
 };
 export declare function prepareRadarSeries(args: PrepareRadarSeriesArgs): PreparedRadarSeries[];
 export {};

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

@@ -130,8 +130,11 @@ export type PreparedBarYSeries = {
         maxWidth: number;
         html: boolean;
         format?: ValueFormat;
+        allowOverlap: boolean;
     };
     borderRadius: number;
+    borderWidth: number;
+    borderColor: string;
 } & BasePreparedSeries;
 export type PreparedPieSeries = {
     type: PieSeries['type'];

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;
@@ -95,36 +95,39 @@ export const prepareBarXData = async (args) => {
     const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
     const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
     const result = [];
-    await Promise.all(Object.entries(data).map(async ([xValue, val]) => {
+    const groupedData = Object.entries(data);
+    for (let groupedDataIndex = 0; groupedDataIndex < groupedData.length; groupedDataIndex++) {
+        const [xValue, val] = groupedData[groupedDataIndex];
         const stacks = Object.values(val);
         const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
-        await Promise.all(stacks.map(async (yValues, groupItemIndex) => {
+        for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
+            const yValues = stacks[groupItemIndex];
             let stackHeight = 0;
             const stackItems = [];
             const sortedData = sortKey
                 ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : yValues;
-            await Promise.all(sortedData.map(async (yValue, yValueIndex) => {
+            for (let yValueIndex = 0; yValueIndex < sortedData.length; yValueIndex++) {
+                const yValue = sortedData[yValueIndex];
                 const yAxisIndex = yValue.series.yAxis;
                 const seriesYScale = yScale[yAxisIndex];
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;
-                    xCenter =
-                        (xBandScale(xValue) || 0) +
-                            xBandScale.bandwidth() / 2;
+                    xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
                 }
                 else {
                     const xLinearScale = xScale;
                     xCenter = xLinearScale(Number(xValue));
                 }
-                const x = xCenter -
-                    currentGroupWidth / 2 +
-                    (rectWidth + rectGap) * groupItemIndex;
+                const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                 const yDataValue = yValue.data.y;
                 const y = seriesYScale(yDataValue);
                 const base = seriesYScale(0);
                 const height = yDataValue > 0 ? base - y : y - base;
+                if (height <= 0) {
+                    continue;
+                }
                 const barData = {
                     x,
                     y: yDataValue > 0 ? y - stackHeight : seriesYScale(0),
@@ -151,7 +154,7 @@ export const prepareBarXData = async (args) => {
                 }
                 stackItems.push(barData);
                 stackHeight += height + 1;
-            }));
+            }
             if (series.some((s) => s.stacking === 'percent')) {
                 let acc = 0;
                 const ratio = plotHeight / (stackHeight - stackItems.length);
@@ -162,7 +165,7 @@ export const prepareBarXData = async (args) => {
                 });
             }
             result.push(...stackItems);
-        }));
-    }));
+        }
+    }
     return result;
 };

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedBarYData } from './types';
+import type { BarYShapesArgs } from './types';
 export { prepareBarYData } from './prepare-data';
 type Args = {
     dispatcher: Dispatch<object>;
-    preparedData: PreparedBarYData[];
+    preparedData: BarYShapesArgs;
     seriesOptions: PreparedSeriesOptions;
     htmlLayout: HTMLElement | null;
     clipPathId: string;

package/dist/esm/hooks/useShapes/bar-y/index.js

@@ -7,7 +7,7 @@ import { getRectPath } from '../utils';
 export { prepareBarYData } from './prepare-data';
 const b = block('bar-y');
 export const BarYSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const { dispatcher, preparedData: { shapes: preparedData, labels: dataLabels, htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -39,14 +39,10 @@ export const BarYSeriesShapes = (args) => {
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
             .attr('fill', (d) => d.color)
+            .attr('stroke', (d) => d.borderColor)
+            .attr('stroke-width', (d) => d.borderWidth)
             .attr('opacity', (d) => d.data.opacity || null)
             .attr('cursor', (d) => d.series.cursor);
-        const dataLabels = preparedData.reduce((acc, d) => {
-            if (d.label) {
-                acc.push(d.label);
-            }
-            return acc;
-        }, []);
         const labelSelection = svgElement
             .selectAll('text')
             .data(dataLabels)
@@ -97,8 +93,8 @@ export const BarYSeriesShapes = (args) => {
         return () => {
             dispatcher.on('hover-shape.bar-y', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [dataLabels, 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 })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));
 };

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

@@ -1,7 +1,7 @@
 import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedBarYData } from './types';
+import type { BarYShapesArgs } from './types';
 export declare const prepareBarYData: (args: {
     series: PreparedBarYSeries[];
     seriesOptions: PreparedSeriesOptions;
@@ -9,4 +9,4 @@ export declare const prepareBarYData: (args: {
     xScale: ChartScale;
     yAxis: PreparedAxis[];
     yScale: ChartScale[];
-}) => Promise<PreparedBarYData[]>;
+}) => Promise<BarYShapesArgs>;

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

@@ -1,98 +1,16 @@
-import { ascending, descending, max, sort } from 'd3';
+import { ascending, descending, sort } from 'd3';
 import get from 'lodash/get';
-import { getDataCategoryValue, getLabelsSize } from '../../../utils';
+import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } 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) {
-        return;
-    }
-    const data = prepared.data;
-    const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
-    const { maxHeight: height, maxWidth: width } = await getLabelsSize({
-        labels: [content],
-        style: dataLabels.style,
-        html: dataLabels.html,
-    });
-    const x = dataLabels.inside
-        ? prepared.x + prepared.width / 2
-        : prepared.x + prepared.width + DEFAULT_LABEL_PADDING;
-    const y = prepared.y + prepared.height / 2;
-    if (dataLabels.html) {
-        prepared.htmlElements.push({
-            x,
-            y: y - height / 2,
-            content,
-            size: { width, height },
-            style: dataLabels.style,
-        });
-    }
-    else {
-        prepared.label = {
-            x,
-            y: y + height / 2,
-            text: content,
-            textAnchor: dataLabels.inside ? 'middle' : 'right',
-            style: dataLabels.style,
-            series: prepared.series,
-            size: { width, height },
-        };
-    }
-}
 export const prepareBarYData = async (args) => {
+    var _a;
     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,19 +26,21 @@ 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({
+            groupedData,
+            seriesOptions,
+            plotHeight: plotHeight - plotHeight * yAxis[0].maxPadding,
+        });
     const result = [];
+    const baseRangeValue = xLinearScale.range()[0];
     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);
+            const base = xLinearScale(0 - measureValues[0].series.borderWidth);
             let stackSum = base;
             const stackItems = [];
             const sortedData = sortKey
@@ -130,25 +50,29 @@ 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 width = Math.abs(xLinearScale(xValue) - base);
+                if (width <= 0) {
+                    return;
+                }
                 const item = {
-                    x: xValue > 0 ? stackSum : stackSum - width,
+                    x: xValue > baseRangeValue ? stackSum : stackSum - width,
                     y,
                     width,
-                    height: barHeight,
+                    height: barSize,
                     color: data.color || s.color,
+                    borderColor: s.borderColor,
+                    borderWidth: s.borderWidth,
                     opacity: get(data, 'opacity', null),
                     data,
                     series: s,
-                    htmlElements: [],
                     isLastStackItem: xValueIndex === sortedData.length - 1,
                 };
                 stackItems.push(item);
@@ -166,8 +90,57 @@ export const prepareBarYData = async (args) => {
             result.push(...stackItems);
         });
     });
-    await Promise.all(result.map(async (d) => {
-        await setLabel(d);
-    }));
-    return result;
+    let labels = [];
+    const htmlElements = [];
+    const map = new Map();
+    for (let i = 0; i < result.length; i++) {
+        const prepared = result[i];
+        const dataLabels = prepared.series.dataLabels;
+        if (dataLabels.enabled) {
+            const data = prepared.data;
+            const content = getFormattedValue(Object.assign({ value: data.label || data.x }, dataLabels));
+            const x = dataLabels.inside
+                ? prepared.x + prepared.width / 2
+                : prepared.x + prepared.width + DEFAULT_LABEL_PADDING;
+            const y = prepared.y + prepared.height / 2;
+            if (dataLabels.html) {
+                const { maxHeight: height, maxWidth: width } = await getLabelsSize({
+                    labels: [content],
+                    style: dataLabels.style,
+                    html: dataLabels.html,
+                });
+                htmlElements.push({
+                    x,
+                    y: y - height / 2,
+                    content,
+                    size: { width, height },
+                    style: dataLabels.style,
+                });
+            }
+            else {
+                if (!map.has(dataLabels.style)) {
+                    map.set(dataLabels.style, getTextSizeFn({ style: dataLabels.style }));
+                }
+                const getTextSize = map.get(dataLabels.style);
+                const { width, height } = await getTextSize(content);
+                labels.push({
+                    x,
+                    y: y + height / 2,
+                    text: content,
+                    textAnchor: dataLabels.inside ? 'middle' : 'right',
+                    style: dataLabels.style,
+                    series: prepared.series,
+                    size: { width, height },
+                });
+            }
+        }
+    }
+    if (!((_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        labels = filterOverlappingLabels(labels);
+    }
+    return {
+        shapes: result,
+        labels,
+        htmlElements,
+    };
 };

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

@@ -6,9 +6,14 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
     width: number;
     height: number;
     color: string;
+    borderWidth: number;
+    borderColor: string;
     opacity: number | null;
     series: PreparedBarYSeries;
-    label?: LabelData;
-    htmlElements: HtmlItem[];
     isLastStackItem: boolean;
 };
+export type BarYShapesArgs = {
+    shapes: PreparedBarYData[];
+    labels: LabelData[];
+    htmlElements: HtmlItem[];
+};

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

@@ -64,7 +64,7 @@ export const useShapes = (args) => {
                                 yScale,
                             });
                             shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                            shapesData.push(...preparedData);
+                            shapesData.push(...preparedData.shapes);
                         }
                         break;
                     }