@gravity-ui/chartkit 3.5.0 → 3.7.0

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

@@ -0,0 +1,126 @@
+import { scaleOrdinal } from 'd3';
+import cloneDeep from 'lodash/cloneDeep';
+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) {
+        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,
+            };
+        }
+    }
+}
+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.name = name;
+    preparedSeries.visible = get(preparedSeries, 'visible', true);
+    preparedSeries.legend = {
+        enabled: get(preparedSeries, 'legend.enabled', legend.enabled),
+        symbol: prepareLegendSymbol(series),
+    };
+    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);
+    const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
+    const stackId = getRandomCKId();
+    const preparedSeries = series.data.map((dataItem) => {
+        var _a, _b;
+        const result = {
+            type: 'pie',
+            data: dataItem.value,
+            dataLabels: {
+                enabled: get(series, 'dataLabels.enabled', true),
+            },
+            label: dataItem.label,
+            visible: typeof dataItem.visible === 'boolean' ? dataItem.visible : true,
+            name: dataItem.name,
+            color: dataItem.color || colorScale(dataItem.name),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            center: series.center || ['50%', '50%'],
+            borderColor: series.borderColor || '',
+            borderRadius: (_a = series.borderRadius) !== null && _a !== void 0 ? _a : 0,
+            borderWidth: (_b = series.borderWidth) !== null && _b !== void 0 ? _b : 1,
+            radius: series.radius || '100%',
+            innerRadius: series.innerRadius || 0,
+            stackId,
+        };
+        return result;
+    });
+    return preparedSeries;
+}
+export function prepareSeries(args) {
+    const { type, series, legend, colorScale } = args;
+    switch (type) {
+        case 'pie': {
+            return series.reduce((acc, singleSeries) => {
+                acc.push(...preparePieSeries({ series: singleSeries, legend }));
+                return acc;
+            }, []);
+        }
+        case 'bar-x': {
+            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');
+            throw new Error(`Series type ${seriesType} 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

@@ -0,0 +1,35 @@
+import { BarXSeries, BarXSeriesData, BaseTextStyle, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData } from '../../../../../types/widget-data';
+export type RectLegendSymbol = {
+    shape: 'rect';
+} & Required<RectLegendSymbolOptions>;
+export type PreparedLegendSymbol = RectLegendSymbol;
+type BasePreparedSeries = {
+    color: string;
+    name: string;
+    visible: boolean;
+    legend: {
+        enabled: boolean;
+        symbol: PreparedLegendSymbol;
+    };
+};
+export type PreparedScatterSeries = {
+    type: ScatterSeries['type'];
+    data: ScatterSeriesData[];
+} & BasePreparedSeries;
+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'];
+    stackId: string;
+    label?: PieSeriesData['label'];
+};
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedPieSeries;
+export {};

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

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

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

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

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

@@ -0,0 +1,11 @@
+export const getActiveLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        if (s.legend.enabled && s.visible) {
+            acc.push(s.name);
+        }
+        return acc;
+    }, []);
+};
+export const getAllLegendItems = (series) => {
+    return series.map((s) => s.name);
+};

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,10 +1,11 @@
 import React from 'react';
 import { block } from '../../../../../utils/cn';
-import { pointer } from 'd3';
+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;
@@ -47,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 = Math.random().toString();
-        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', 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.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ChartOptions } from '../useChartOptions/types';
 import type { ChartScale } from '../useAxisScales';
-import type { ChartSeries } from '../useSeries';
+import type { PreparedSeries } from '../';
 import type { OnSeriesMouseMove, OnSeriesMouseLeave } from '../useTooltip/types';
 import './styles.css';
 type Args = {
@@ -9,7 +9,7 @@ type Args = {
     left: number;
     boundsWidth: number;
     boundsHeight: number;
-    series: ChartSeries[];
+    series: PreparedSeries[];
     xAxis: ChartOptions['xAxis'];
     yAxis: ChartOptions['yAxis'];
     svgContainer: SVGSVGElement | null;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
-import { prepareBarXSeries } from './bar-x';
+import { BarXSeriesShapes } from './bar-x';
 import { prepareScatterSeries } from './scatter';
 import { PieSeriesComponent } from './pie';
 import './styles.css';
@@ -15,18 +15,7 @@ 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, Object.assign({}, args, { key: "bar-x", series: chartSeries, xScale: xScale, yScale: yScale })));
                     }
                     break;
                 }
@@ -48,7 +37,10 @@ export const useShapes = (args) => {
                     break;
                 }
                 case 'pie': {
-                    acc.push(...chartSeries.map((cs, i) => (React.createElement(PieSeriesComponent, { key: `pie-${i}`, boundsWidth: boundsWidth, boundsHeight: boundsHeight, series: cs, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }))));
+                    const groupedPieSeries = group(chartSeries, (item) => item.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 }));
+                    }));
                 }
             }
             return acc;

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { PieSeries } from '../../../../../types/widget-data';
 import type { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
+import { PreparedPieSeries } from '../useSeries/types';
 type PreparePieSeriesArgs = {
     boundsWidth: number;
     boundsHeight: number;
-    series: PieSeries;
+    series: PreparedPieSeries[];
     svgContainer: SVGSVGElement | null;
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { arc, pie, select } from 'd3';
 import { block } from '../../../../../utils/cn';
-import { calculateNumericProperty } from '../../utils';
+import { calculateNumericProperty, getHorisontalSvgTextHeight } from '../../utils';
 const b = block('d3-pie');
 const getCenter = (boundsWidth, boundsHeight, center) => {
     var _a, _b;
@@ -16,36 +16,111 @@ const getCenter = (boundsWidth, boundsHeight, center) => {
     return [resultX, resultY];
 };
 export function PieSeriesComponent(args) {
+    var _a;
     const { boundsWidth, boundsHeight, series, onSeriesMouseMove, onSeriesMouseLeave, svgContainer } = args;
     const ref = React.useRef(null);
-    const [x, y] = getCenter(boundsWidth, boundsHeight, series.center);
+    const [x, y] = getCenter(boundsWidth, boundsHeight, (_a = series[0]) === null || _a === void 0 ? void 0 : _a.center);
     React.useEffect(() => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!ref.current) {
             return;
         }
         const svgElement = select(ref.current);
-        const radiusRelatedToChart = Math.min(boundsWidth, boundsHeight) / 2;
-        const radius = (_a = calculateNumericProperty({ value: series.radius, base: radiusRelatedToChart })) !== null && _a !== void 0 ? _a : radiusRelatedToChart;
-        const innerRadius = (_b = calculateNumericProperty({ value: series.innerRadius, base: radius })) !== null && _b !== void 0 ? _b : 0;
-        const pieGenerator = pie().value((d) => d.value);
-        const visibleData = series.data.filter((d) => d.visible);
+        const isLabelsEnabled = (_b = (_a = series[0]) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.enabled;
+        let radiusRelatedToChart = Math.min(boundsWidth, boundsHeight) / 2;
+        if (isLabelsEnabled) {
+            // To have enough space for labels
+            radiusRelatedToChart *= 0.9;
+        }
+        let radius = (_d = calculateNumericProperty({ value: (_c = series[0]) === null || _c === void 0 ? void 0 : _c.radius, base: radiusRelatedToChart })) !== null && _d !== void 0 ? _d : radiusRelatedToChart;
+        const labelsArcRadius = ((_e = series[0]) === null || _e === void 0 ? void 0 : _e.radius) ? radius : radiusRelatedToChart;
+        if (isLabelsEnabled) {
+            // To have enough space for labels lines
+            radius *= 0.9;
+        }
+        const innerRadius = (_f = calculateNumericProperty({ value: series[0].innerRadius, base: radius })) !== null && _f !== void 0 ? _f : 0;
+        const pieGenerator = pie().value((d) => d.data);
+        const visibleData = series.filter((d) => d.visible);
         const dataReady = pieGenerator(visibleData);
         const arcGenerator = arc()
             .innerRadius(innerRadius)
             .outerRadius(radius)
-            .cornerRadius((_c = series.borderRadius) !== null && _c !== void 0 ? _c : 0);
+            .cornerRadius((d) => d.data.borderRadius);
         svgElement.selectAll('*').remove();
         svgElement
-            .selectAll('*')
+            .selectAll('allSlices')
             .data(dataReady)
             .enter()
             .append('path')
             .attr('d', arcGenerator)
             .attr('class', b('segment'))
             .attr('fill', (d) => d.data.color || '')
-            .style('stroke', series.borderColor || '')
-            .style('stroke-width', (_d = series.borderWidth) !== null && _d !== void 0 ? _d : 1);
+            .style('stroke', ((_g = series[0]) === null || _g === void 0 ? void 0 : _g.borderColor) || '')
+            .style('stroke-width', (_j = (_h = series[0]) === null || _h === void 0 ? void 0 : _h.borderWidth) !== null && _j !== void 0 ? _j : 1);
+        if ((_l = (_k = series[0]) === null || _k === void 0 ? void 0 : _k.dataLabels) === null || _l === void 0 ? void 0 : _l.enabled) {
+            const labelHeight = getHorisontalSvgTextHeight({ text: 'tmp' });
+            const outerArc = arc()
+                .innerRadius(labelsArcRadius)
+                .outerRadius(labelsArcRadius);
+            // Add the polylines between chart and labels
+            svgElement
+                .selectAll('allPolylines')
+                .data(dataReady)
+                .enter()
+                .append('polyline')
+                .attr('stroke', (d) => d.data.color || '')
+                .style('fill', 'none')
+                .attr('stroke-width', 1)
+                .attr('points', (d) => {
+                // Line insertion in the slice
+                const posA = arcGenerator.centroid(d);
+                // Line break: we use the other arc generator that has been built only for that
+                const posB = outerArc.centroid(d);
+                const posC = outerArc.centroid(d);
+                // We need the angle to see if the X position will be at the extreme right or extreme left
+                const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                const result = [posA, posB, posC];
+                if (midangle < Math.PI) {
+                    // polylines located to the right
+                    const nextCx = radiusRelatedToChart * 0.95;
+                    if (nextCx > result[1][0]) {
+                        result[2][0] = nextCx;
+                    }
+                    else {
+                        result.splice(2, 1);
+                    }
+                }
+                else {
+                    // polylines located to the left
+                    const nextCx = radiusRelatedToChart * 0.95 * -1;
+                    if (nextCx < result[1][0]) {
+                        result[2][0] = nextCx;
+                    }
+                    else {
+                        result.splice(2, 1);
+                    }
+                }
+                return result.join(' ');
+            });
+            // Add the polylines between chart and labels
+            svgElement
+                .selectAll('allLabels')
+                .data(dataReady)
+                .join('text')
+                .text((d) => d.data.label || d.value)
+                .attr('class', b('label'))
+                .attr('transform', (d) => {
+                const pos = outerArc.centroid(d);
+                const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                pos[0] = radiusRelatedToChart * 0.99 * (midangle < Math.PI ? 1 : -1);
+                pos[1] += labelHeight / 4;
+                return `translate(${pos})`;
+            })
+                .style('text-anchor', (d) => {
+                const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                return midangle < Math.PI ? 'start' : 'end';
+            });
+        }
     }, [boundsWidth, boundsHeight, series, onSeriesMouseMove, onSeriesMouseLeave, svgContainer]);
     return React.createElement("g", { ref: ref, className: b(), transform: `translate(${x}, ${y})` });
 }

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

@@ -14,7 +14,6 @@ type PrepareScatterSeriesArgs = {
     svgContainer: SVGSVGElement | null;
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;
-    key?: string;
 };
 export declare function prepareScatterSeries(args: PrepareScatterSeriesArgs): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
 export {};

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

@@ -1,6 +1,7 @@
 import { pointer } 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) => {
@@ -33,9 +34,10 @@ const getPointProperties = (args) => {
     return { r, cx, cy };
 };
 export function prepareScatterSeries(args) {
-    const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, key, svgContainer, } = args;
+    const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
     return series.reduce((result, s) => {
         var _a;
+        const randomKey = getRandomCKId();
         const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
             ? prepareCategoricalScatterData(s.data)
             : prepareLinearScatterData(s.data);
@@ -47,7 +49,7 @@ export function prepareScatterSeries(args) {
                 yAxis,
                 yScale,
             });
-            return (React.createElement("circle", Object.assign({ key: `${i}-${key}`, className: b('point'), fill: s.color }, pointProps, { onMouseMove: function (e) {
+            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: {

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

@@ -13,4 +13,14 @@
 
 .chartkit-d3-pie__segment {
   stroke: var(--g-color-base-background);
+}
+
+.chartkit-d3-pie__label {
+  fill: var(--g-color-text-complementary);
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.chartkit-d3-bar-x__label {
+  fill: var(--g-color-text-complementary);
 }