@gravity-ui/chartkit 4.0.0-beta.7 → 4.1.0

package/README.md

@@ -19,7 +19,8 @@ import '@gravity-ui/uikit/styles/styles.scss';
 ```typescript
 import {ThemeProvider} from '@gravity-ui/uikit';
 import ChartKit, {settings} from '@gravity-ui/chartkit';
-import {YagrPlugin, YagrWidgetData} from '@gravity-ui/chartkit/build/plugins';
+import {YagrPlugin} from '@gravity-ui/chartkit/yagr';
+import type {YagrWidgetData} from '@gravity-ui/chartkit/yagr';
 
 import '@gravity-ui/uikit/styles/styles.scss';
 

package/build/plugins/d3/renderer/D3Widget.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import { select } from 'd3';
 import debounce from 'lodash/debounce';
+import { getRandomCKId } from '../../../utils';
 import { Chart } from './components';
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     const ref = React.useRef(null);
     const debounced = React.useRef();
     const [dimensions, setDimensions] = React.useState();
     const handleResize = React.useCallback(() => {
-        if (ref.current) {
-            const { top, left, width, height } = ref.current.getBoundingClientRect();
+        var _a;
+        const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (parentElement) {
+            const { top, left, width, height } = parentElement.getBoundingClientRect();
             setDimensions({ top, left, width, height });
         }
     }, []);
@@ -25,16 +28,22 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     }), [handleResize]);
     React.useEffect(() => {
         const selection = select(window);
-        selection.on('resize', debuncedHandleResize);
+        // https://github.com/d3/d3-selection/blob/main/README.md#handling-events
+        const eventName = `resize.${getRandomCKId()}`;
+        selection.on(eventName, debuncedHandleResize);
         return () => {
             // https://d3js.org/d3-selection/events#selection_on
-            selection.on('resize', null);
+            selection.on(eventName, null);
         };
     }, [debuncedHandleResize]);
     React.useEffect(() => {
         // dimensions initialize
         handleResize();
     }, [handleResize]);
-    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%', position: 'relative' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
+    return (React.createElement("div", { ref: ref, style: {
+            width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
+            height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',
+            position: 'relative',
+        } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
 });
 export default D3Widget;

package/build/plugins/d3/renderer/components/Chart.js

@@ -18,9 +18,6 @@ export const Chart = (props) => {
         width,
         height,
         margin: chart.margin,
-        legend,
-        title,
-        xAxis,
         yAxis,
     });
     const { preparedSeries, handleLegendItemClick } = useSeries({ series: data.series, legend });
@@ -51,10 +48,7 @@ export const Chart = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("svg", { ref: svgRef, className: b({ hovered: chartHovered }), width: width, height: height, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[
-                    chart.margin.left,
-                    chart.margin.top + ((title === null || title === void 0 ? void 0 : title.height) || 0),
-                ].join(',')})` },
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[chart.margin.left, chart.margin.top].join(',')})` },
                 xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },

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

@@ -1,17 +1,13 @@
 import type { ChartMargin } from '../../../../../types/widget-data';
-import type { PreparedAxis, PreparedLegend, PreparedTitle } from '../useChartOptions/types';
+import type { PreparedAxis } from '../useChartOptions/types';
 type Args = {
     width: number;
     height: number;
     margin: ChartMargin;
-    legend: PreparedLegend;
-    title?: PreparedTitle;
-    xAxis?: PreparedAxis;
     yAxis?: PreparedAxis[];
 };
 export declare const useChartDimensions: (args: Args) => {
     boundsWidth: number;
     boundsHeight: number;
-    legendHeight: number;
 };
 export {};

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

@@ -1,11 +1,9 @@
 export const useChartDimensions = (args) => {
-    const { margin, legend, title, width, height, xAxis, yAxis } = args;
-    const titleHeight = (title === null || title === void 0 ? void 0 : title.height) || 0;
-    const xAxisTitleHeight = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.title.height) || 0;
+    const { margin, width, height, yAxis } = args;
     const yAxisTitleHeight = (yAxis === null || yAxis === void 0 ? void 0 : yAxis.reduce((acc, axis) => {
         return acc + (axis.title.height || 0);
     }, 0)) || 0;
     const boundsWidth = width - margin.right - margin.left - yAxisTitleHeight;
-    const boundsHeight = height - margin.top - margin.bottom - legend.height - titleHeight - xAxisTitleHeight;
-    return { boundsWidth, boundsHeight, legendHeight: legend.height };
+    const boundsHeight = height - margin.top - margin.bottom;
+    return { boundsWidth, boundsHeight };
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.d.ts

@@ -1,8 +1,10 @@
 import type { ChartKitWidgetData } from '../../../../../types/widget-data';
-import type { PreparedAxis, PreparedChart } from './types';
+import type { PreparedAxis, PreparedChart, PreparedTitle, PreparedLegend } from './types';
 export declare const getPreparedChart: (args: {
     chart: ChartKitWidgetData['chart'];
     series: ChartKitWidgetData['series'];
+    preparedLegend: PreparedLegend;
     preparedXAxis: PreparedAxis;
     preparedY1Axis: PreparedAxis;
+    preparedTitle?: PreparedTitle;
 }) => PreparedChart;

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -42,26 +42,63 @@ const getAxisLabelMaxWidth = (args) => {
         .remove();
     return width;
 };
-export const getPreparedChart = (args) => {
-    const { chart, series, preparedXAxis, preparedY1Axis } = args;
-    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
-    let marginBottom = get(chart, 'margin.bottom', 0);
-    let marginLeft = get(chart, 'margin.left', 0);
+const getMarginTop = (args) => {
+    const { chart, hasAxisRelatedSeries, preparedY1Axis, preparedTitle } = args;
     let marginTop = get(chart, 'margin.top', 0);
-    let marginRight = get(chart, 'margin.right', 0);
+    if (hasAxisRelatedSeries) {
+        marginTop +=
+            getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+    }
+    if (preparedTitle === null || preparedTitle === void 0 ? void 0 : preparedTitle.height) {
+        marginTop += preparedTitle.height;
+    }
+    return marginTop;
+};
+const getMarginBottom = (args) => {
+    const { chart, hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
+    let marginBottom = get(chart, 'margin.bottom', 0) + preparedLegend.height;
     if (hasAxisRelatedSeries) {
         marginBottom +=
-            preparedXAxis.labels.padding +
+            preparedXAxis.title.height +
                 getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedXAxis.labels.style });
+        if (preparedXAxis.labels.enabled) {
+            marginBottom += preparedXAxis.labels.padding;
+        }
+    }
+    return marginBottom;
+};
+const getMarginLeft = (args) => {
+    const { chart, hasAxisRelatedSeries, series, preparedY1Axis } = args;
+    let marginLeft = get(chart, 'margin.left', 0);
+    if (hasAxisRelatedSeries) {
         marginLeft +=
             AXIS_WIDTH +
                 preparedY1Axis.labels.padding +
                 getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
-                (preparedY1Axis.title.height || 0);
-        marginTop +=
-            getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+                preparedY1Axis.title.height;
+    }
+    return marginLeft;
+};
+const getMarginRight = (args) => {
+    const { chart, hasAxisRelatedSeries, series, preparedXAxis } = args;
+    let marginRight = get(chart, 'margin.right', 0);
+    if (hasAxisRelatedSeries) {
         marginRight += getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
     }
+    return marginRight;
+};
+export const getPreparedChart = (args) => {
+    const { chart, series, preparedLegend, preparedXAxis, preparedY1Axis, preparedTitle } = args;
+    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
+    const marginTop = getMarginTop({ chart, hasAxisRelatedSeries, preparedY1Axis, preparedTitle });
+    const marginBottom = getMarginBottom({
+        chart,
+        hasAxisRelatedSeries,
+        preparedLegend,
+        preparedXAxis,
+    });
+    const marginLeft = getMarginLeft({ chart, hasAxisRelatedSeries, series, preparedY1Axis });
+    const marginRight = getMarginRight({ chart, hasAxisRelatedSeries, series, preparedXAxis });
     return {
         margin: {
             top: marginTop,

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

@@ -16,6 +16,8 @@ export const useChartOptions = (args) => {
         const preparedChart = getPreparedChart({
             chart,
             series,
+            preparedTitle,
+            preparedLegend,
             preparedXAxis,
             preparedY1Axis: preparedYAxis[0],
         });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { scaleOrdinal } from 'd3';
+import { group, scaleOrdinal } from 'd3';
 import { DEFAULT_PALETTE } from '../../constants';
 import { getSeriesNames } from '../../utils';
 import { getActiveLegendItems, getAllLegendItems } from './utils';
@@ -9,9 +9,11 @@ export const useSeries = (args) => {
     const preparedSeries = React.useMemo(() => {
         const seriesNames = getSeriesNames(series);
         const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
-        return series.reduce((acc, singleSeries) => {
+        const groupedSeries = group(series, (item) => item.type);
+        return Array.from(groupedSeries).reduce((acc, [seriesType, seriesList]) => {
             acc.push(...prepareSeries({
-                series: singleSeries,
+                type: seriesType,
+                series: seriesList,
                 legend,
                 colorScale,
             }));

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

@@ -3,7 +3,8 @@ import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
 import type { PreparedLegend } from '../useChartOptions/types';
 import type { PreparedSeries } from './types';
 export declare function prepareSeries(args: {
-    series: ChartKitWidgetSeries;
+    type: ChartKitWidgetSeries['type'];
+    series: ChartKitWidgetSeries[];
     legend: PreparedLegend;
     colorScale: ScaleOrdinal<string, string>;
 }): PreparedSeries[];

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

@@ -4,6 +4,10 @@ import get from 'lodash/get';
 import { DEFAULT_PALETTE } from '../../constants';
 import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+const DEFAULT_DATALABELS_STYLE = {
+    fontSize: '11px',
+    fontWeight: 'bold',
+};
 function prepareLegendSymbol(series) {
     var _a;
     switch (series.type) {
@@ -34,6 +38,35 @@ function prepareAxisRelatedSeries(args) {
     };
     return [preparedSeries];
 }
+function prepareBarXSeries(args) {
+    const { colorScale, series, legend } = args;
+    const commonStackId = getRandomCKId();
+    return series.map((singleSeries) => {
+        var _a, _b, _c, _d;
+        const name = singleSeries.name || '';
+        const color = singleSeries.color || colorScale(name);
+        return {
+            type: singleSeries.type,
+            color: color,
+            name: name,
+            visible: get(singleSeries, 'visible', true),
+            legend: {
+                enabled: get(singleSeries, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(singleSeries),
+            },
+            data: singleSeries.data,
+            stacking: singleSeries.stacking,
+            stackId: singleSeries.stacking === 'normal' ? commonStackId : getRandomCKId(),
+            dataLabels: {
+                enabled: ((_a = singleSeries.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
+                inside: typeof ((_b = singleSeries.dataLabels) === null || _b === void 0 ? void 0 : _b.inside) === 'boolean'
+                    ? (_c = singleSeries.dataLabels) === null || _c === void 0 ? void 0 : _c.inside
+                    : false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_d = singleSeries.dataLabels) === null || _d === void 0 ? void 0 : _d.style),
+            },
+        };
+    }, []);
+}
 function preparePieSeries(args) {
     const { series, legend } = args;
     const dataNames = series.data.map((d) => d.name);
@@ -68,14 +101,22 @@ function preparePieSeries(args) {
     return preparedSeries;
 }
 export function prepareSeries(args) {
-    const { series, legend, colorScale } = args;
-    switch (series.type) {
+    const { type, series, legend, colorScale } = args;
+    switch (type) {
         case 'pie': {
-            return preparePieSeries({ series, legend });
+            return series.reduce((acc, singleSeries) => {
+                acc.push(...preparePieSeries({ series: singleSeries, legend }));
+                return acc;
+            }, []);
         }
-        case 'scatter':
         case 'bar-x': {
-            return prepareAxisRelatedSeries({ series, legend, colorScale });
+            return prepareBarXSeries({ series: series, legend, colorScale });
+        }
+        case 'scatter': {
+            return series.reduce((acc, singleSeries) => {
+                acc.push(...prepareAxisRelatedSeries({ series: singleSeries, legend, colorScale }));
+                return acc;
+            }, []);
         }
         default: {
             const seriesType = get(series, 'type');

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

@@ -1,4 +1,4 @@
-import { BarXSeries, BarXSeriesData, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -19,6 +19,12 @@ export type PreparedScatterSeries = {
 export type PreparedBarXSeries = {
     type: BarXSeries['type'];
     data: BarXSeriesData[];
+    stackId: string;
+    dataLabels: {
+        enabled: boolean;
+        inside: boolean;
+        style: BaseTextStyle;
+    };
 } & BasePreparedSeries;
 export type PreparedPieSeries = BasePreparedSeries & Required<Omit<PieSeries, 'data'>> & {
     data: PieSeriesData['value'];

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

@@ -2,11 +2,11 @@ import React from 'react';
 import { ChartOptions } from '../useChartOptions/types';
 import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
-import { BarXSeries } from '../../../../../types/widget-data';
+import { PreparedBarXSeries } from '../useSeries/types';
 type Args = {
     top: number;
     left: number;
-    series: BarXSeries[];
+    series: PreparedBarXSeries[];
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
     yAxis: ChartOptions['yAxis'];
@@ -15,5 +15,5 @@ type Args = {
     onSeriesMouseLeave?: OnSeriesMouseLeave;
     svgContainer: SVGSVGElement | null;
 };
-export declare function prepareBarXSeries(args: Args): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare function BarXSeriesShapes(args: Args): React.JSX.Element;
 export {};

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { block } from '../../../../../utils/cn';
-import { pointer } from 'd3';
-import { getRandomCKId } from '../../../../../utils';
+import { group, pointer, select } from 'd3';
 const DEFAULT_BAR_RECT_WIDTH = 50;
 const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
 const MIN_RECT_GAP = 1;
-const b = block('d3-bar');
+const DEFAULT_LABEL_PADDING = 7;
+const b = block('d3-bar-x');
 const getRectProperties = (args) => {
     const { point, xAxis, xScale, yAxis, yScale, minPointDistance } = args;
     let cx;
@@ -48,32 +48,103 @@ function minDiff(arr) {
     }
     return result;
 }
-export function prepareBarXSeries(args) {
+export function BarXSeriesShapes(args) {
     const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
-    const seriesData = series.map(({ data }) => data).flat(2);
-    const minPointDistance = minDiff(seriesData.map((item) => Number(item.x)));
-    return series.reduce((result, item) => {
-        const randomKey = getRandomCKId();
-        item.data.forEach((point, i) => {
-            const rectProps = getRectProperties({
-                point,
-                xAxis,
-                xScale,
-                yAxis,
-                yScale,
-                minPointDistance,
-            });
-            result.push(React.createElement("rect", Object.assign({ key: `${i}-${randomKey}`, className: b('rect'), fill: item.color }, rectProps, { onMouseMove: function (e) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const xValues = xAxis.type === 'category'
+            ? []
+            : series.reduce((acc, { data }) => {
+                data.forEach((dataItem) => acc.push(Number(dataItem.x)));
+                return acc;
+            }, []);
+        const minPointDistance = minDiff(xValues);
+        const stackedSeriesMap = group(series, (item) => item.stackId);
+        Array.from(stackedSeriesMap).forEach(([, stackedSeries]) => {
+            const stackHeights = {};
+            stackedSeries.forEach((item) => {
+                const shapes = item.data.map((dataItem) => {
+                    const rectProps = getRectProperties({
+                        point: dataItem,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        minPointDistance,
+                    });
+                    if (!stackHeights[rectProps.x]) {
+                        stackHeights[rectProps.x] = 0;
+                    }
+                    const rectY = rectProps.y - stackHeights[rectProps.x];
+                    stackHeights[rectProps.x] += rectProps.height + 1;
+                    return Object.assign(Object.assign({}, rectProps), { y: rectY, data: dataItem });
+                });
+                svgElement
+                    .selectAll('allRects')
+                    .data(shapes)
+                    .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.data.color || item.color)
+                    .on('mousemove', (e, point) => {
                     const [x, y] = pointer(e, svgContainer);
                     onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
                         hovered: {
-                            data: point,
+                            data: point.data,
                             series: item,
                         },
                         pointerPosition: [x - left, y - top],
                     });
-                }, onMouseLeave: onSeriesMouseLeave })));
+                })
+                    .on('mouseleave', () => {
+                    if (onSeriesMouseLeave) {
+                        onSeriesMouseLeave();
+                    }
+                });
+                if (item.dataLabels.enabled) {
+                    const selection = svgElement
+                        .selectAll('allLabels')
+                        .data(shapes)
+                        .join('text')
+                        .text((d) => String(d.data.label || d.data.y))
+                        .attr('class', b('label'))
+                        .attr('x', (d) => d.x + d.width / 2)
+                        .attr('y', (d) => {
+                        if (item.dataLabels.inside) {
+                            return d.y + d.height / 2;
+                        }
+                        return d.y - DEFAULT_LABEL_PADDING;
+                    })
+                        .attr('text-anchor', 'middle')
+                        .style('font-size', item.dataLabels.style.fontSize);
+                    if (item.dataLabels.style.fontWeight) {
+                        selection.style('font-weight', item.dataLabels.style.fontWeight);
+                    }
+                    if (item.dataLabels.style.fontColor) {
+                        selection.style('fill', item.dataLabels.style.fontColor);
+                    }
+                }
+            });
         });
-        return result;
-    }, []);
+    }, [
+        onSeriesMouseMove,
+        onSeriesMouseLeave,
+        svgContainer,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        series,
+        left,
+        top,
+    ]);
+    return React.createElement("g", { ref: ref, className: b() });
 }

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { group } from 'd3';
+import { getRandomCKId } from '../../../../../utils';
 import { getOnlyVisibleSeries } from '../../utils';
-import { prepareBarXSeries } from './bar-x';
-import { prepareScatterSeries } from './scatter';
+import { BarXSeriesShapes } from './bar-x';
+import { ScatterSeriesShape } from './scatter';
 import { PieSeriesComponent } from './pie';
 import './styles.css';
 export const useShapes = (args) => {
@@ -15,40 +16,22 @@ export const useShapes = (args) => {
             switch (seriesType) {
                 case 'bar-x': {
                     if (xScale && yScale) {
-                        acc.push(...prepareBarXSeries({
-                            top,
-                            left,
-                            series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            onSeriesMouseMove,
-                            onSeriesMouseLeave,
-                            svgContainer,
-                        }));
+                        acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", series: chartSeries, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, top: top, left: left, svgContainer: svgContainer, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave }));
                     }
                     break;
                 }
                 case 'scatter': {
                     if (xScale && yScale) {
-                        acc.push(...prepareScatterSeries({
-                            top,
-                            left,
-                            series: chartSeries,
-                            xAxis,
-                            xScale,
-                            yAxis,
-                            yScale,
-                            onSeriesMouseMove,
-                            onSeriesMouseLeave,
-                            svgContainer,
-                        }));
+                        const scatterShapes = chartSeries.map((scatterSeries, i) => {
+                            const id = getRandomCKId();
+                            return (React.createElement(ScatterSeriesShape, { key: `${i}-${id}`, top: top, left: left, series: scatterSeries, xAxis: xAxis, xScale: xScale, yAxis: yAxis, yScale: yScale, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }));
+                        });
+                        acc.push(...scatterShapes);
                     }
                     break;
                 }
                 case 'pie': {
-                    const groupedPieSeries = group(chartSeries, (item) => item.stackId);
+                    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, series: pieSeries, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }));
                     }));
@@ -65,6 +48,8 @@ export const useShapes = (args) => {
         yAxis,
         yScale,
         svgContainer,
+        left,
+        top,
         onSeriesMouseMove,
         onSeriesMouseLeave,
     ]);

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

@@ -3,10 +3,10 @@ import { ChartOptions } from '../useChartOptions/types';
 import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
 import { ScatterSeries } from '../../../../../types/widget-data';
-type PrepareScatterSeriesArgs = {
+type ScatterSeriesShapeProps = {
     top: number;
     left: number;
-    series: ScatterSeries[];
+    series: ScatterSeries;
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
     yAxis: ChartOptions['yAxis'];
@@ -15,5 +15,5 @@ type PrepareScatterSeriesArgs = {
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;
 };
-export declare function prepareScatterSeries(args: PrepareScatterSeriesArgs): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;
 export {};

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

@@ -1,7 +1,6 @@
-import { pointer } from 'd3';
+import { pointer, select } from 'd3';
 import React from 'react';
 import { block } from '../../../../../utils/cn';
-import { getRandomCKId } from '../../../../../utils';
 const b = block('d3-scatter');
 const DEFAULT_SCATTER_POINT_RADIUS = 4;
 const prepareCategoricalScatterData = (data) => {
@@ -10,11 +9,9 @@ const prepareCategoricalScatterData = (data) => {
 const prepareLinearScatterData = (data) => {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 };
-const getPointProperties = (args) => {
-    const { point, xAxis, xScale, yAxis, yScale } = args;
-    const r = point.radius || DEFAULT_SCATTER_POINT_RADIUS;
+const getCxAttr = (args) => {
+    const { point, xAxis, xScale } = args;
     let cx;
-    let cy;
     if (xAxis.type === 'category') {
         const xBandScale = xScale;
         cx = (xBandScale(point.category) || 0) + xBandScale.step() / 2;
@@ -23,6 +20,11 @@ const getPointProperties = (args) => {
         const xLinearScale = xScale;
         cx = xLinearScale(point.x);
     }
+    return cx;
+};
+const getCyAttr = (args) => {
+    const { point, yAxis, yScale } = args;
+    let cy;
     if (yAxis[0].type === 'category') {
         const yBandScale = yScale;
         cy = (yBandScale(point.category) || 0) + yBandScale.step() / 2;
@@ -31,35 +33,57 @@ const getPointProperties = (args) => {
         const yLinearScale = yScale;
         cy = yLinearScale(point.y);
     }
-    return { r, cx, cy };
+    return cy;
 };
-export function prepareScatterSeries(args) {
-    const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
-    return series.reduce((result, s) => {
+export function ScatterSeriesShape(props) {
+    const { series, xAxis, xScale, yAxis, yScale, svgContainer, left, top, onSeriesMouseMove, onSeriesMouseLeave, } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
         var _a;
-        const randomKey = getRandomCKId();
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
         const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
-            ? prepareCategoricalScatterData(s.data)
-            : prepareLinearScatterData(s.data);
-        result.push(...preparedData.map((point, i) => {
-            const pointProps = getPointProperties({
-                point,
-                xAxis,
-                xScale,
-                yAxis,
-                yScale,
+            ? prepareCategoricalScatterData(series.data)
+            : prepareLinearScatterData(series.data);
+        svgElement
+            .selectAll('allPoints')
+            .data(preparedData)
+            .enter()
+            .append('circle')
+            .attr('class', b('point'))
+            .attr('fill', (d) => d.color || series.color || '')
+            .attr('r', (d) => d.radius || DEFAULT_SCATTER_POINT_RADIUS)
+            .attr('cx', (d) => getCxAttr({ point: d, xAxis, xScale }))
+            .attr('cy', (d) => getCyAttr({ point: d, yAxis, yScale }))
+            .on('mousemove', (e, d) => {
+            const [x, y] = pointer(e, svgContainer);
+            onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
+                hovered: {
+                    data: d,
+                    series,
+                },
+                pointerPosition: [x - left, y - top],
             });
-            return (React.createElement("circle", Object.assign({ key: `${i}-${randomKey}`, className: b('point'), fill: s.color }, pointProps, { onMouseMove: function (e) {
-                    const [x, y] = pointer(e, svgContainer);
-                    onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
-                        hovered: {
-                            data: point,
-                            series: s,
-                        },
-                        pointerPosition: [x - left, y - top],
-                    });
-                }, onMouseLeave: onSeriesMouseLeave })));
-        }));
-        return result;
-    }, []);
+        })
+            .on('mouseleave', () => {
+            if (onSeriesMouseLeave) {
+                onSeriesMouseLeave();
+            }
+        });
+    }, [
+        series,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        svgContainer,
+        left,
+        top,
+        onSeriesMouseMove,
+        onSeriesMouseLeave,
+    ]);
+    return React.createElement("g", { ref: ref, className: b() });
 }

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

@@ -19,4 +19,8 @@
   fill: var(--g-color-text-complementary);
   font-size: 11px;
   font-weight: bold;
+}
+
+.chartkit-d3-bar-x__label {
+  fill: var(--g-color-text-complementary);
 }

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

@@ -1,4 +1,4 @@
-import { select } from 'd3';
+import { group, select } from 'd3';
 import get from 'lodash/get';
 import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
@@ -32,8 +32,35 @@ export const getDomainDataXBySeries = (series) => {
     }, []);
 };
 export const getDomainDataYBySeries = (series) => {
-    return series.filter(isSeriesWithNumericalYValues).reduce((acc, s) => {
-        acc.push(...s.data.map((d) => d.y));
+    const groupedSeries = group(series, (item) => item.type);
+    return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
+        switch (type) {
+            case 'bar-x': {
+                const barXSeries = seriesList;
+                const stackedSeries = group(barXSeries, (item) => item.stackId);
+                Array.from(stackedSeries).forEach(([, stack]) => {
+                    const values = {};
+                    stack.forEach((singleSeries) => {
+                        singleSeries.data.forEach((point) => {
+                            const key = String(point.x || point.category);
+                            if (typeof values[key] === 'undefined') {
+                                values[key] = 0;
+                            }
+                            if (point.y) {
+                                values[key] += point.y;
+                            }
+                        });
+                    });
+                    acc.push(...Object.values(values));
+                });
+                break;
+            }
+            default: {
+                seriesList.filter(isSeriesWithNumericalYValues).forEach((s) => {
+                    acc.push(...s.data.map((d) => d.y));
+                });
+            }
+        }
         return acc;
     }, []);
 };

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

@@ -8,6 +8,8 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     y?: number;
     /** Corresponding value of axis category */
     category?: string;
+    /** Data label value of the bar-x column. If not specified, the y value is used. */
+    label?: string | number;
 };
 export type BarXSeries<T = any> = BaseSeries & {
     type: 'bar-x';
@@ -16,6 +18,11 @@ export type BarXSeries<T = any> = BaseSeries & {
     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;
@@ -26,7 +33,11 @@ export type BarXSeries<T = any> = BaseSeries & {
      * */
     grouping?: boolean;
     dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
-        /** Whether to align the data label inside the box or to the actual value point */
+        /**
+         * 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 */

package/build/types/widget-data/base.d.ts

@@ -12,6 +12,7 @@ export type BaseSeries = {
          * @default true
          */
         enabled?: boolean;
+        style?: Partial<BaseTextStyle>;
     };
 };
 export type BaseSeriesData<T = any> = {
@@ -21,7 +22,11 @@ export type BaseSeriesData<T = any> = {
      * Here you can add additional data for your own event callbacks and formatter callbacks
      */
     custom?: T;
+    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
+    color?: string;
 };
 export type BaseTextStyle = {
     fontSize: string;
+    fontWeight?: string;
+    fontColor?: string;
 };

package/build/types/widget-data/pie.d.ts

@@ -5,8 +5,6 @@ export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     value: number;
     /** The name of the pie segment (used in legend, tooltip etc). */
     name: string;
-    /** Individual color for the pie segment. */
-    color?: string;
     /** Initial visibility of the pie segment. */
     visible?: boolean;
     /** Initial data label of the pie segment. If not specified, the value is used. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.0.0-beta.7",
+  "version": "4.1.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -41,10 +41,14 @@
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.7.10",
+    "@gravity-ui/yagr": "^3.7.13",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"