@gravity-ui/chartkit 4.8.0 → 4.9.0

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-x.d.ts

@@ -0,0 +1,10 @@
+import type { ScaleOrdinal } from 'd3';
+import type { BarXSeries } from '../../../../../types';
+import type { PreparedLegend, PreparedSeries } from './types';
+type PrepareBarXSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: BarXSeries[];
+    legend: PreparedLegend;
+};
+export declare function prepareBarXSeries(args: PrepareBarXSeriesArgs): PreparedSeries[];
+export {};

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-x.js

@@ -0,0 +1,38 @@
+import get from 'lodash/get';
+import { getRandomCKId } from '../../../../../utils';
+import { prepareLegendSymbol } from './utils';
+import { DEFAULT_DATALABELS_STYLE } from './constants';
+export function prepareBarXSeries(args) {
+    const { colorScale, series: seriesList, legend } = args;
+    const commonStackId = getRandomCKId();
+    return seriesList.map((series) => {
+        var _a, _b, _c, _d;
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        let stackId = series.stackId;
+        if (!stackId) {
+            stackId = series.stacking === 'normal' ? commonStackId : getRandomCKId();
+        }
+        return {
+            type: series.type,
+            color,
+            name,
+            id: getRandomCKId(),
+            visible: get(series, 'visible', true),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            data: series.data,
+            stacking: series.stacking,
+            stackId,
+            dataLabels: {
+                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
+                inside: typeof ((_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.inside) === 'boolean'
+                    ? (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.inside
+                    : false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.style),
+            },
+        };
+    }, []);
+}

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-y.d.ts

@@ -0,0 +1,10 @@
+import type { ScaleOrdinal } from 'd3';
+import type { BarYSeries } from '../../../../../types';
+import type { PreparedLegend, PreparedSeries } from './types';
+type PrepareBarYSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: BarYSeries[];
+    legend: PreparedLegend;
+};
+export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): PreparedSeries[];
+export {};

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-y.js

@@ -0,0 +1,50 @@
+import get from 'lodash/get';
+import { getRandomCKId } from '../../../../../utils';
+import { prepareLegendSymbol } from './utils';
+import { DEFAULT_DATALABELS_STYLE } from './constants';
+import { getLabelsSize } from '../../utils';
+function prepareDataLabels(series) {
+    var _a;
+    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 { maxHeight = 0, maxWidth = 0 } = enabled
+        ? getLabelsSize({
+            labels: series.data.map((d) => String(d.label || d.x)),
+            style,
+        })
+        : {};
+    return {
+        enabled,
+        inside: get(series, 'dataLabels.inside', false),
+        style,
+        maxHeight,
+        maxWidth,
+    };
+}
+export function prepareBarYSeries(args) {
+    const { colorScale, series: seriesList, legend } = args;
+    const commonStackId = getRandomCKId();
+    return seriesList.map((series) => {
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        let stackId = series.stackId;
+        if (!stackId) {
+            stackId = series.stacking === 'normal' ? commonStackId : getRandomCKId();
+        }
+        return {
+            type: series.type,
+            color,
+            name,
+            id: getRandomCKId(),
+            visible: get(series, 'visible', true),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            data: series.data,
+            stacking: series.stacking,
+            stackId,
+            dataLabels: prepareDataLabels(series),
+        };
+    }, []);
+}

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line-series.d.ts

@@ -0,0 +1,11 @@
+import { ScaleOrdinal } from 'd3';
+import { ChartKitWidgetSeriesOptions, LineSeries } from '../../../../../types';
+import { PreparedLegend, PreparedSeries } from './types';
+type PrepareLineSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: LineSeries[];
+    seriesOptions?: ChartKitWidgetSeriesOptions;
+    legend: PreparedLegend;
+};
+export declare function prepareLineSeries(args: PrepareLineSeriesArgs): PreparedSeries[];
+export {};

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line-series.js

@@ -0,0 +1,32 @@
+import get from 'lodash/get';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { prepareLegendSymbol } from './utils';
+import { getRandomCKId } from '../../../../../utils';
+export function prepareLineSeries(args) {
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
+    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', 1);
+    return seriesList.map((series) => {
+        var _a, _b;
+        const id = getRandomCKId();
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        return {
+            type: series.type,
+            color,
+            lineWidth: get(series, 'lineWidth', defaultLineWidth),
+            name,
+            id,
+            visible: get(series, 'visible', true),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            data: series.data,
+            dataLabels: {
+                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+            },
+        };
+    }, []);
+}

package/build/plugins/d3/renderer/hooks/useSeries/prepareSeries.d.ts

@@ -1,9 +1,10 @@
 import type { ScaleOrdinal } from 'd3';
-import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
+import type { ChartKitWidgetSeries, ChartKitWidgetSeriesOptions } from '../../../../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 export declare function prepareSeries(args: {
     type: ChartKitWidgetSeries['type'];
     series: ChartKitWidgetSeries[];
+    seriesOptions?: ChartKitWidgetSeriesOptions;
     legend: PreparedLegend;
     colorScale: ScaleOrdinal<string, string>;
 }): PreparedSeries[];

package/build/plugins/d3/renderer/hooks/useSeries/prepareSeries.js

@@ -3,33 +3,16 @@ import get from 'lodash/get';
 import { scaleOrdinal } from 'd3';
 import { getRandomCKId } from '../../../../../utils';
 import { DEFAULT_PALETTE } from '../../constants';
-import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
-const DEFAULT_DATALABELS_STYLE = {
-    fontSize: '11px',
-    fontWeight: 'bold',
-};
-function prepareLegendSymbol(series) {
-    var _a;
-    switch (series.type) {
-        default: {
-            const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
-            const symbolHeight = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.height) || DEFAULT_LEGEND_SYMBOL_SIZE;
-            return {
-                shape: 'rect',
-                width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
-                height: symbolHeight,
-                radius: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.radius) || symbolHeight / 2,
-                padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || 5,
-            };
-        }
-    }
-}
+import { prepareLineSeries } from './prepare-line-series';
+import { prepareBarXSeries } from './prepare-bar-x';
+import { prepareBarYSeries } from './prepare-bar-y';
+import { prepareLegendSymbol } from './utils';
+import { ChartKitError } from '../../../../../libs';
 function prepareAxisRelatedSeries(args) {
     const { colorScale, series, legend } = args;
     const preparedSeries = cloneDeep(series);
     const name = 'name' in series && series.name ? series.name : '';
-    const color = 'color' in series && series.color ? series.color : colorScale(name);
-    preparedSeries.color = color;
+    preparedSeries.color = 'color' in series && series.color ? series.color : colorScale(name);
     preparedSeries.name = name;
     preparedSeries.visible = get(preparedSeries, 'visible', true);
     preparedSeries.legend = {
@@ -38,40 +21,6 @@ function prepareAxisRelatedSeries(args) {
     };
     return [preparedSeries];
 }
-function prepareBarXSeries(args) {
-    const { colorScale, series: seriesList, legend } = args;
-    const commonStackId = getRandomCKId();
-    return seriesList.map((series) => {
-        var _a, _b, _c, _d;
-        const name = series.name || '';
-        const color = series.color || colorScale(name);
-        let stackId = series.stackId;
-        if (!stackId) {
-            stackId = series.stacking === 'normal' ? commonStackId : getRandomCKId();
-        }
-        return {
-            type: series.type,
-            color: color,
-            name: name,
-            id: '',
-            visible: get(series, 'visible', true),
-            legend: {
-                enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
-            },
-            data: series.data,
-            stacking: series.stacking,
-            stackId,
-            dataLabels: {
-                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
-                inside: typeof ((_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.inside) === 'boolean'
-                    ? (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.inside
-                    : false,
-                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.style),
-            },
-        };
-    }, []);
-}
 function preparePieSeries(args) {
     const { series, legend } = args;
     const dataNames = series.data.map((d) => d.name);
@@ -108,7 +57,7 @@ function preparePieSeries(args) {
     return preparedSeries;
 }
 export function prepareSeries(args) {
-    const { type, series, legend, colorScale } = args;
+    const { type, series, seriesOptions, legend, colorScale } = args;
     switch (type) {
         case 'pie': {
             return series.reduce((acc, singleSeries) => {
@@ -119,15 +68,27 @@ export function prepareSeries(args) {
         case 'bar-x': {
             return prepareBarXSeries({ series: series, legend, colorScale });
         }
+        case 'bar-y': {
+            return prepareBarYSeries({ series: series, legend, colorScale });
+        }
         case 'scatter': {
             return series.reduce((acc, singleSeries) => {
                 acc.push(...prepareAxisRelatedSeries({ series: singleSeries, legend, colorScale }));
                 return acc;
             }, []);
         }
+        case 'line': {
+            return prepareLineSeries({
+                series: series,
+                seriesOptions,
+                legend,
+                colorScale,
+            });
+        }
         default: {
-            const seriesType = get(series, 'type');
-            throw new Error(`Series type ${seriesType} does not support data preparation for series that do not support the presence of axes`);
+            throw new ChartKitError({
+                message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,
+            });
         }
     }
 }

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -1,4 +1,4 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
@@ -53,12 +53,34 @@ export type PreparedBarXSeries = {
         style: BaseTextStyle;
     };
 } & BasePreparedSeries;
+export type PreparedBarYSeries = {
+    type: BarYSeries['type'];
+    data: BarYSeriesData[];
+    stackId: string;
+    dataLabels: {
+        enabled: boolean;
+        inside: boolean;
+        style: BaseTextStyle;
+        maxHeight: number;
+        maxWidth: number;
+    };
+} & BasePreparedSeries;
 export type PreparedPieSeries = BasePreparedSeries & Required<Omit<PieSeries, 'data'>> & {
     data: PieSeriesData;
     value: PieSeriesData['value'];
     stackId: string;
     label?: PieSeriesData['label'];
 };
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedPieSeries;
+export type PreparedLineSeries = {
+    type: LineSeries['type'];
+    data: LineSeriesData[];
+    lineWidth: number;
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+    };
+} & BasePreparedSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export {};

package/build/plugins/d3/renderer/hooks/useSeries/utils.d.ts

@@ -1,3 +1,5 @@
-import { PreparedSeries } from './types';
+import { PreparedLegendSymbol, PreparedSeries } from './types';
+import { ChartKitWidgetSeries } from '../../../../../types';
 export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
 export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
+export declare function prepareLegendSymbol(series: ChartKitWidgetSeries): PreparedLegendSymbol;

package/build/plugins/d3/renderer/hooks/useSeries/utils.js

@@ -1,3 +1,4 @@
+import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
@@ -9,3 +10,15 @@ export const getActiveLegendItems = (series) => {
 export const getAllLegendItems = (series) => {
     return series.map((s) => s.name);
 };
+export function prepareLegendSymbol(series) {
+    var _a;
+    const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const symbolHeight = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.height) || DEFAULT_LEGEND_SYMBOL_SIZE;
+    return {
+        shape: 'rect',
+        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        height: symbolHeight,
+        radius: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.radius) || symbolHeight / 2,
+        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || 5,
+    };
+}

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/prepare-data.js

@@ -1,9 +1,7 @@
 import { ascending, descending, max, sort } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../../utils';
-const MIN_RECT_WIDTH = 1;
-const MIN_RECT_GAP = 1;
-const MIN_GROUP_GAP = 1;
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
 export const prepareBarXData = (args) => {
     const { series, seriesOptions, xAxis, xScale, yScale } = args;
     const categories = get(xAxis, 'categories', []);
@@ -64,10 +62,10 @@ export const prepareBarXData = (args) => {
         });
     }
     const maxGroupSize = max(Object.values(data), (d) => Object.values(d).length) || 1;
-    const groupGap = Math.max(bandWidth * groupPadding, MIN_GROUP_GAP);
+    const groupGap = Math.max(bandWidth * groupPadding, MIN_BAR_GROUP_GAP);
     const groupWidth = bandWidth - groupGap;
-    const rectGap = Math.max(bandWidth * barPadding, MIN_RECT_GAP);
-    const rectWidth = Math.max(MIN_RECT_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
+    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
+    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(groupWidth / maxGroupSize - rectGap, barMaxWidth));
     const result = [];
     Object.entries(data).forEach(([xValue, val]) => {
         const stacks = Object.values(val);

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedBarYData } from './types';
+export { prepareBarYData } from './prepare-data';
+type Args = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedBarYData[];
+    seriesOptions: PreparedSeriesOptions;
+};
+export declare const BarYSeriesShapes: (args: Args) => React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/index.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import get from 'lodash/get';
+import { color, select } from 'd3';
+import { block } from '../../../../../../utils/cn';
+export { prepareBarYData } from './prepare-data';
+const DEFAULT_LABEL_PADDING = 7;
+const b = block('d3-bar-y');
+export const BarYSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const rectSelection = svgElement
+            .selectAll('rect')
+            .data(preparedData)
+            .join('rect')
+            .attr('class', b('segment'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('height', (d) => d.height)
+            .attr('width', (d) => d.width)
+            .attr('fill', (d) => d.color);
+        const dataLabels = preparedData.filter((d) => d.series.dataLabels.enabled);
+        const labelSelection = svgElement
+            .selectAll('text')
+            .data(dataLabels)
+            .join('text')
+            .text((d) => String(d.data.label || d.data.x))
+            .attr('class', b('label'))
+            .attr('x', (d) => {
+            if (d.series.dataLabels.inside) {
+                return d.x + d.width / 2;
+            }
+            return d.x + d.width + DEFAULT_LABEL_PADDING;
+        })
+            .attr('y', (d) => {
+            return d.y + d.height / 2 + d.series.dataLabels.maxHeight / 2;
+        })
+            .attr('text-anchor', (d) => {
+            if (d.series.dataLabels.inside) {
+                return 'middle';
+            }
+            return 'right';
+        })
+            .style('font-size', (d) => d.series.dataLabels.style.fontSize)
+            .style('font-weight', (d) => d.series.dataLabels.style.fontWeight || null)
+            .style('fill', (d) => d.series.dataLabels.style.fontColor || null);
+        const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
+        const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
+        dispatcher.on('hover-shape.bar-y', (data) => {
+            if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
+                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
+                    acc.add(d.data.y);
+                    return acc;
+                }, new Set());
+                rectSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = d.color;
+                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data.y)) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
+                            fillColor);
+                    }
+                    return fillColor;
+                });
+            }
+            if (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled) {
+                const hoveredSeries = data === null || data === void 0 ? void 0 : data.map((d) => d.series.id);
+                const newOpacity = (d) => {
+                    if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
+                        return inactiveOptions.opacity || null;
+                    }
+                    return null;
+                };
+                rectSelection.attr('opacity', newOpacity);
+                labelSelection.attr('opacity', newOpacity);
+            }
+        });
+        return () => {
+            dispatcher.on('hover-shape.bar-y', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return React.createElement("g", { ref: ref, className: b() });
+};

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/prepare-data.d.ts

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

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/prepare-data.js

@@ -0,0 +1,114 @@
+import { ascending, descending, max, sort } from 'd3';
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../../../utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+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;
+}
+export const prepareBarYData = (args) => {
+    const { series, seriesOptions, yAxis, xScale, yScale } = args;
+    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 = (() => {
+        switch (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.key) {
+            case 'x': {
+                return 'data.x';
+            }
+            case 'name': {
+                return 'series.name';
+            }
+            default: {
+                return undefined;
+            }
+        }
+    })();
+    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 result = [];
+    Object.entries(groupedData).forEach(([yValue, val]) => {
+        const stacks = Object.values(val);
+        const currentBarHeight = barHeight * stacks.length + rectGap * (stacks.length - 1);
+        stacks.forEach((measureValues, groupItemIndex) => {
+            let stackSum = 0;
+            const sortedData = sortKey
+                ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
+                : measureValues;
+            sortedData.forEach(({ data, series: s }) => {
+                let center;
+                if (yAxis[0].type === 'category') {
+                    const bandScale = yScale;
+                    center = (bandScale(yValue) || 0) + bandWidth / 2;
+                }
+                else {
+                    const scale = yScale;
+                    center = scale(Number(yValue));
+                }
+                const y = center - currentBarHeight / 2 + (barHeight + rectGap) * groupItemIndex;
+                const xLinearScale = xScale;
+                const x = xLinearScale(data.x);
+                const width = x - xLinearScale(xLinearScale.domain()[0]);
+                result.push({
+                    x: stackSum,
+                    y,
+                    width,
+                    height: barHeight,
+                    color: data.color || s.color,
+                    data,
+                    series: s,
+                });
+                stackSum += width + 1;
+            });
+        });
+    });
+    return result;
+};

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/types.d.ts

@@ -0,0 +1,10 @@
+import { TooltipDataChunkBarX } from '../../../../../../types';
+import { PreparedBarYSeries } from '../../useSeries/types';
+export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    series: PreparedBarYSeries;
+};

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/types.js

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

package/build/plugins/d3/renderer/hooks/useShapes/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MIN_BAR_WIDTH = 1;
+export declare const MIN_BAR_GAP = 1;
+export declare const MIN_BAR_GROUP_GAP = 1;

package/build/plugins/d3/renderer/hooks/useShapes/constants.js

@@ -0,0 +1,3 @@
+export const MIN_BAR_WIDTH = 1;
+export const MIN_BAR_GAP = 1;
+export const MIN_BAR_GROUP_GAP = 1;

package/build/plugins/d3/renderer/hooks/useShapes/index.d.ts

@@ -5,13 +5,13 @@ import type { ChartScale } from '../useAxisScales';
 import type { PreparedSeries, PreparedSeriesOptions } from '../';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedScatterData } from './scatter';
-import './styles.css';
+import type { PreparedLineData } from './line/types';
+import type { PreparedBarYData } from './bar-y/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter';
-export type ShapeData = PreparedBarXData | PreparedScatterData;
+import './styles.css';
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData;
 type Args = {
-    top: number;
-    left: number;
     boundsWidth: number;
     boundsHeight: number;
     dispatcher: Dispatch<object>;