@gravity-ui/chartkit 4.8.0 → 4.9.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>;

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

@@ -4,9 +4,12 @@ import { getOnlyVisibleSeries } from '../../utils';
 import { BarXSeriesShapes, prepareBarXData } from './bar-x';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { PieSeriesComponent } from './pie';
+import { prepareLineData } from './line/prepare-data';
+import { LineSeriesShapes } from './line';
+import { BarYSeriesShapes, prepareBarYData } from './bar-y';
 import './styles.css';
 export const useShapes = (args) => {
-    const { top, left, boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, } = args;
+    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, } = args;
     const shapesComponents = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
@@ -29,6 +32,35 @@ export const useShapes = (args) => {
                     }
                     break;
                 }
+                case 'bar-y': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareBarYData({
+                            series: chartSeries,
+                            seriesOptions,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
+                case 'line': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareLineData({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
                 case 'scatter': {
                     if (xScale && yScale) {
                         const preparedData = prepareScatterData({
@@ -38,14 +70,14 @@ export const useShapes = (args) => {
                             yAxis: yAxis[0],
                             yScale,
                         });
-                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, top: top, left: left, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
                     }
                     break;
                 }
                 case 'pie': {
                     const groupedPieSeries = group(chartSeries, (pieSeries) => pieSeries.stackId);
                     acc.push(...Array.from(groupedPieSeries).map(([key, pieSeries]) => {
-                        return (React.createElement(PieSeriesComponent, { key: `pie-${key}`, boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, top: top, left: left, series: pieSeries, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                        return (React.createElement(PieSeriesComponent, { key: `pie-${key}`, boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, series: pieSeries, seriesOptions: seriesOptions, svgContainer: svgContainer }));
                     }));
                 }
             }
@@ -63,8 +95,6 @@ export const useShapes = (args) => {
         yAxis,
         yScale,
         svgContainer,
-        left,
-        top,
     ]);
     return { shapes: shapesComponents.shapes, shapesData: shapesComponents.shapesData };
 };

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

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

package/build/plugins/d3/renderer/hooks/useShapes/line/index.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { select, line as lineGenerator, color } from 'd3';
+import get from 'lodash/get';
+import { block } from '../../../../../../utils/cn';
+import { shapeKey } from '../utils';
+const b = block('d3-line');
+export const LineSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'line.states.hover');
+        const inactiveOptions = get(seriesOptions, 'line.states.inactive');
+        const line = lineGenerator()
+            .x((d) => d.x)
+            .y((d) => d.y);
+        svgElement.selectAll('*').remove();
+        const selection = svgElement
+            .selectAll('path')
+            .data(preparedData, shapeKey)
+            .join('path')
+            .attr('d', (d) => line(d.points))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', (d) => d.width)
+            .attr('stroke-linejoin', 'round')
+            .attr('stroke-linecap', 'round');
+        const dataLabels = preparedData.reduce((acc, d) => {
+            if (d.series.dataLabels.enabled) {
+                acc.push(...d.points.map((p) => ({
+                    x: p.x,
+                    y: p.y,
+                    data: p.data,
+                    series: d.series,
+                })));
+            }
+            return acc;
+        }, []);
+        svgElement
+            .selectAll('allLabels')
+            .data(dataLabels)
+            .join('text')
+            .text((d) => String(d.data.label || d.data.y))
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => {
+            return d.y - d.series.dataLabels.padding;
+        })
+            .attr('text-anchor', 'middle')
+            .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 hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+        dispatcher.on('hover-shape.line', (data) => {
+            var _a, _b;
+            const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'line')) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.id;
+            const updates = [];
+            preparedData.forEach((p) => {
+                const hovered = Boolean(hoverEnabled && p.id === selectedSeriesId);
+                if (p.hovered !== hovered) {
+                    p.hovered = hovered;
+                    updates.push(p);
+                }
+                const active = Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === p.id);
+                if (p.active !== active) {
+                    p.active = active;
+                    updates.push(p);
+                }
+            });
+            selection.data(updates, shapeKey).join('shape', (update) => {
+                update
+                    .attr('stroke', (d) => {
+                    var _a;
+                    const initialColor = d.color || '';
+                    if (d.hovered) {
+                        return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
+                    }
+                    return initialColor;
+                })
+                    .attr('opacity', function (d) {
+                    if (!d.active) {
+                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                    }
+                    return null;
+                });
+                return update;
+            }, (exit) => exit);
+        });
+        return () => {
+            dispatcher.on('hover-shape.line', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return React.createElement("g", { ref: ref, className: b() });
+};

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

@@ -0,0 +1,11 @@
+import { PreparedLineSeries } from '../../useSeries/types';
+import { PreparedAxis } from '../../useChartOptions/types';
+import { ChartScale } from '../../useAxisScales';
+import { PreparedLineData } from './types';
+export declare const prepareLineData: (args: {
+    series: PreparedLineSeries[];
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale;
+}) => PreparedLineData[];

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

@@ -0,0 +1,21 @@
+import { getXValue, getYValue } from '../utils';
+export const prepareLineData = (args) => {
+    const { series, xAxis, xScale, yScale } = args;
+    const yAxis = args.yAxis[0];
+    return series.reduce((acc, s) => {
+        acc.push({
+            points: s.data.map((d) => ({
+                x: getXValue({ point: d, xAxis, xScale }),
+                y: getYValue({ point: d, yAxis, yScale }),
+                data: d,
+            })),
+            color: s.color,
+            width: s.lineWidth,
+            series: s,
+            hovered: false,
+            active: true,
+            id: s.id,
+        });
+        return acc;
+    }, []);
+};

package/build/plugins/d3/renderer/hooks/useShapes/line/types.d.ts

@@ -0,0 +1,16 @@
+import { PreparedLineSeries } from '../../useSeries/types';
+import { LineSeriesData } from '../../../../../../types';
+export type PointData = {
+    x: number;
+    y: number;
+    data: LineSeriesData;
+};
+export type PreparedLineData = {
+    id: string;
+    points: PointData[];
+    color: string;
+    width: number;
+    series: PreparedLineSeries;
+    hovered: boolean;
+    active: boolean;
+};

package/build/plugins/d3/renderer/hooks/useShapes/line/types.js

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

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

@@ -5,8 +5,6 @@ type PreparePieSeriesArgs = {
     boundsWidth: number;
     boundsHeight: number;
     dispatcher: Dispatch<object>;
-    top: number;
-    left: number;
     series: PreparedPieSeries[];
     seriesOptions: PreparedSeriesOptions;
     svgContainer: SVGSVGElement | null;

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

@@ -32,7 +32,7 @@ const isNodeContainsPieData = (node) => {
 };
 export function PieSeriesComponent(args) {
     var _a;
-    const { boundsWidth, boundsHeight, dispatcher, top, left, series, seriesOptions, svgContainer } = args;
+    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, svgContainer } = args;
     const ref = React.useRef(null);
     const [x, y] = getCenter(boundsWidth, boundsHeight, (_a = series[0]) === null || _a === void 0 ? void 0 : _a.center);
     React.useEffect(() => {
@@ -154,7 +154,7 @@ export function PieSeriesComponent(args) {
             }
             const [pointerX, pointerY] = pointer(e, svgContainer);
             const segmentData = extractD3DataFromNode(segment).data;
-            dispatcher.call('hover-shape', {}, [segmentData], [pointerX - left, pointerY - top]);
+            dispatcher.call('hover-shape', {}, [segmentData], [pointerX, pointerY]);
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
@@ -199,6 +199,6 @@ export function PieSeriesComponent(args) {
         return () => {
             dispatcher.on(eventName, null);
         };
-    }, [boundsWidth, boundsHeight, dispatcher, top, left, series, seriesOptions, svgContainer]);
+    }, [boundsWidth, boundsHeight, dispatcher, series, seriesOptions, svgContainer]);
     return React.createElement("g", { ref: ref, className: b(), transform: `translate(${x}, ${y})` });
 }

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

@@ -6,8 +6,6 @@ export { prepareScatterData } from './prepare-data';
 export type { PreparedScatterData } from './prepare-data';
 type ScatterSeriesShapeProps = {
     dispatcher: Dispatch<object>;
-    top: number;
-    left: number;
     preparedData: PreparedScatterData[];
     seriesOptions: PreparedSeriesOptions;
     svgContainer: SVGSVGElement | null;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -3,16 +3,16 @@ import get from 'lodash/get';
 import { color, pointer, select } from 'd3';
 import { block } from '../../../../../../utils/cn';
 import { extractD3DataFromNode, isNodeContainsD3Data } from '../../../utils';
+import { shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
 const DEFAULT_SCATTER_POINT_RADIUS = 4;
 const EMPTY_SELECTION = null;
-const key = (d) => d.id || -1;
 const isNodeContainsScatterData = (node) => {
     return isNodeContainsD3Data(node);
 };
 export function ScatterSeriesShape(props) {
-    const { dispatcher, top, left, preparedData, seriesOptions, svgContainer } = props;
+    const { dispatcher, preparedData, seriesOptions, svgContainer } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -23,7 +23,7 @@ export function ScatterSeriesShape(props) {
         const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
         const selection = svgElement
             .selectAll(`circle`)
-            .data(preparedData, key)
+            .data(preparedData, shapeKey)
             .join((enter) => enter.append('circle').attr('class', b('point')), (update) => update, (exit) => exit.remove())
             .attr('fill', (d) => d.data.color || d.series.color || '')
             .attr('r', (d) => d.data.radius || DEFAULT_SCATTER_POINT_RADIUS)
@@ -37,7 +37,7 @@ export function ScatterSeriesShape(props) {
             }
             const [pointerX, pointerY] = pointer(e, svgContainer);
             const segmentData = extractD3DataFromNode(point);
-            dispatcher.call('hover-shape', {}, [segmentData], [pointerX - left, pointerY - top]);
+            dispatcher.call('hover-shape', {}, [segmentData], [pointerX, pointerY]);
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
@@ -62,7 +62,7 @@ export function ScatterSeriesShape(props) {
                     updates.push(p);
                 }
             });
-            selection.data(updates, key).join(() => EMPTY_SELECTION, (update) => {
+            selection.data(updates, shapeKey).join(() => EMPTY_SELECTION, (update) => {
                 update
                     .attr('fill', (d) => {
                     var _a;
@@ -84,6 +84,6 @@ export function ScatterSeriesShape(props) {
         return () => {
             dispatcher.on('hover-shape.scatter', null);
         };
-    }, [dispatcher, top, left, preparedData, seriesOptions, svgContainer]);
+    }, [dispatcher, preparedData, seriesOptions, svgContainer]);
     return React.createElement("g", { ref: ref, className: b() });
 }

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

@@ -1,4 +1,4 @@
-import type { TooltipDataChunkScatter } from '../../../../../../types/widget-data';
+import type { TooltipDataChunkScatter } from '../../../../../../types';
 import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import { PreparedScatterSeries } from '../../useSeries/types';

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

@@ -1,35 +1,4 @@
-import get from 'lodash/get';
-import { getDataCategoryValue } from '../../../utils';
-const getCxAttr = (args) => {
-    const { point, xAxis, xScale } = args;
-    let cx;
-    if (xAxis.type === 'category') {
-        const xBandScale = xScale;
-        const categories = get(xAxis, 'categories', []);
-        const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
-        cx = (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
-    }
-    else {
-        const xLinearScale = xScale;
-        cx = xLinearScale(point.x);
-    }
-    return cx;
-};
-const getCyAttr = (args) => {
-    const { point, yAxis, yScale } = args;
-    let cy;
-    if (yAxis.type === 'category') {
-        const yBandScale = yScale;
-        const categories = get(yAxis, 'categories', []);
-        const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
-        cy = (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
-    }
-    else {
-        const yLinearScale = yScale;
-        cy = yLinearScale(point.y);
-    }
-    return cy;
-};
+import { getXValue, getYValue } from '../utils';
 const getFilteredLinearScatterData = (data) => {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 };
@@ -43,8 +12,8 @@ export const prepareScatterData = (args) => {
             acc.push({
                 data: d,
                 series: s,
-                cx: getCxAttr({ point: d, xAxis, xScale }),
-                cy: getCyAttr({ point: d, yAxis, yScale }),
+                cx: getXValue({ point: d, xAxis, xScale }),
+                cy: getYValue({ point: d, yAxis, yScale }),
                 hovered: false,
                 active: true,
                 id: acc.length - 1,

package/build/plugins/d3/renderer/hooks/useShapes/styles.css

@@ -15,4 +15,10 @@
 .chartkit-d3-bar-x__label {
   fill: var(--g-color-text-complementary);
   user-select: none;
+}
+
+.chartkit-d3-bar-y__label {
+  fill: var(--g-color-text-complementary);
+  user-select: none;
+  alignment-baseline: after-edge;
 }

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

@@ -0,0 +1,17 @@
+import { PreparedAxis } from '../useChartOptions/types';
+import { ChartScale } from '../useAxisScales';
+export declare function getXValue(args: {
+    point: {
+        x?: number | string;
+    };
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+}): number;
+export declare function getYValue(args: {
+    point: {
+        y?: number | string;
+    };
+    yAxis: PreparedAxis;
+    yScale: ChartScale;
+}): number;
+export declare const shapeKey: (d: unknown) => string | number;

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

@@ -0,0 +1,25 @@
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../../utils';
+export function getXValue(args) {
+    const { point, xAxis, xScale } = args;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        const categories = get(xAxis, 'categories', []);
+        const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
+        return (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
+    }
+    const xLinearScale = xScale;
+    return xLinearScale(point.x);
+}
+export function getYValue(args) {
+    const { point, yAxis, yScale } = args;
+    if (yAxis.type === 'category') {
+        const yBandScale = yScale;
+        const categories = get(yAxis, 'categories', []);
+        const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
+        return (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
+    }
+    const yLinearScale = yScale;
+    return yLinearScale(point.y);
+}
+export const shapeKey = (d) => d.id || -1;

package/build/plugins/d3/renderer/utils/axis-generators/bottom.js

@@ -1,6 +1,6 @@
 import { select } from 'd3';
 import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
-import { getLabelsMaxHeight, setEllipsisForOverflowText } from '../text';
+import { getLabelsSize, setEllipsisForOverflowText } from '../text';
 import { calculateCos, calculateSin } from '../math';
 function addDomain(selection, options) {
     const { size, color } = options;
@@ -18,10 +18,10 @@ export function axisBottom(args) {
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
-    const labelHeight = getLabelsMaxHeight({
+    const labelHeight = getLabelsSize({
         labels: values,
         style: { 'font-size': (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '' },
-    });
+    }).maxHeight;
     return function (selection) {
         var _a, _b;
         const x = ((_b = (_a = selection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.x) || 0;

package/build/plugins/d3/renderer/utils/text.d.ts

@@ -8,13 +8,11 @@ export declare function hasOverlappingLabels({ width, labels, padding, style, }:
     style?: BaseTextStyle;
     padding?: number;
 }): boolean;
-export declare function getLabelsMaxWidth({ labels, style, rotation, }: {
+export declare function getLabelsSize({ labels, style, rotation, }: {
     labels: string[];
     style?: Record<string, string>;
     rotation?: number;
-}): number;
-export declare function getLabelsMaxHeight({ labels, style, rotation, }: {
-    labels: string[];
-    style?: Record<string, string>;
-    rotation?: number;
-}): number;
+}): {
+    maxHeight: number;
+    maxWidth: number;
+};

package/build/plugins/d3/renderer/utils/text.js

@@ -46,19 +46,8 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
         .text((d) => d);
     return text;
 }
-export function getLabelsMaxWidth({ labels, style, rotation, }) {
-    var _a, _b;
-    const svg = select(document.body).append('svg');
-    const textSelection = renderLabels(svg, { labels, style });
-    if (rotation) {
-        textSelection.attr('text-anchor', 'end').style('transform', `rotate(${rotation}deg)`);
-    }
-    const maxWidth = ((_b = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
-    svg.remove();
-    return maxWidth;
-}
-export function getLabelsMaxHeight({ labels, style, rotation, }) {
-    var _a, _b;
+export function getLabelsSize({ labels, style, rotation, }) {
+    var _a;
     const svg = select(document.body).append('svg');
     const textSelection = renderLabels(svg, { labels, style });
     if (rotation) {
@@ -66,7 +55,7 @@ export function getLabelsMaxHeight({ labels, style, rotation, }) {
             .attr('text-anchor', rotation > 0 ? 'start' : 'end')
             .style('transform', `rotate(${rotation}deg)`);
     }
-    const maxHeight = ((_b = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0;
+    const { height = 0, width = 0 } = ((_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
     svg.remove();
-    return maxHeight;
+    return { maxHeight: height, maxWidth: width };
 }

package/build/plugins/highcharts/renderer/HighchartsWidget.d.ts

@@ -10,7 +10,7 @@ declare const HighchartsWidget: React.ForwardRefExoticComponent<{
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"highcharts">) => void) | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
     renderError?: import("../../../types").RenderError | undefined;
-    renderPluginLoader?: (() => React.ReactNode) | undefined;
+    renderPluginLoader?: import("../../../types").ChartKitRenderPluginLoader | undefined;
 } & {
     hoistConfigError?: boolean | undefined;
     nonBodyScroll?: boolean | undefined;

package/build/plugins/indicator/renderer/IndicatorWidget.d.ts

@@ -11,7 +11,7 @@ declare const IndicatorWidget: React.ForwardRefExoticComponent<{
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"indicator">) => void) | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
     renderError?: import("../../../types").RenderError | undefined;
-    renderPluginLoader?: (() => React.ReactNode) | undefined;
+    renderPluginLoader?: import("../../../types").ChartKitRenderPluginLoader | undefined;
 } & {
     formatNumber?: (<T = any>(value: number, options?: T | undefined) => string) | undefined;
 } & React.RefAttributes<ChartKitWidgetRef | undefined>>;

package/build/plugins/yagr/renderer/YagrWidget.d.ts

@@ -13,7 +13,7 @@ declare const YagrWidget: React.ForwardRefExoticComponent<{
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"yagr">) => void) | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
     renderError?: import("../../../types").RenderError | undefined;
-    renderPluginLoader?: (() => React.ReactNode) | undefined;
+    renderPluginLoader?: import("../../../types").ChartKitRenderPluginLoader | undefined;
 } & {
     tooltip?: (<T extends import("../types").CustomTooltipProps = import("../types").CustomTooltipProps>(props: T) => React.ReactNode) | undefined;
 } & {

package/build/types/index.d.ts

@@ -24,6 +24,7 @@ export type ChartKitOnChartLoad<T extends ChartKitType> = {
 export type ChartKitOnError = (data: {
     error: any;
 }) => void;
+export type ChartKitRenderPluginLoader = () => React.ReactNode;
 export type ChartKitProps<T extends ChartKitType> = {
     type: T;
     data: ChartKitWidget[T]['data'];
@@ -39,7 +40,7 @@ export type ChartKitProps<T extends ChartKitType> = {
     /** Used to render user's error component */
     renderError?: RenderError;
     /** Used to render user's plugin loader component */
-    renderPluginLoader?: () => React.ReactNode;
+    renderPluginLoader?: ChartKitRenderPluginLoader;
 } & {
     [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key];
 };

package/build/types/widget-data/bar-y.d.ts

@@ -0,0 +1,55 @@
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetSeriesOptions } from './series';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+export type BarYSeriesData<T = any> = BaseSeriesData<T> & {
+    /**
+     * The `x` value of the bar. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value of the bar. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     * - timestamp value (for `datetime` y axis)
+     * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
+     */
+    y?: string | number;
+    /** Data label value of the bar. If not specified, the x value is used. */
+    label?: string | number;
+};
+export type BarYSeries<T = any> = BaseSeries & {
+    type: 'bar-y';
+    data: BarYSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    /** Whether to stack the values of each series on top of each other.
+     * Possible values are undefined to disable, "normal" to stack by value or "percent"
+     *
+     * @default undefined
+     * */
+    stacking?: 'normal' | 'percent';
+    /** This option allows grouping series in a stacked chart */
+    stackId?: string;
+    /** Whether to group non-stacked columns or to let them render independent of each other.
+     * When false columns will be laid out individually and overlap each other.
+     *
+     * @default true
+     * */
+    grouping?: boolean;
+    dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
+        /**
+         * Whether to align the data label inside or outside the box
+         *
+         * @default false
+         * */
+        inside?: boolean;
+    };
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+};