@gravity-ui/chartkit 3.4.3 → 3.6.0

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

@@ -1,23 +1,52 @@
 import React from 'react';
-import clone from 'lodash/clone';
 import { scaleOrdinal } from 'd3';
 import { DEFAULT_PALETTE } from '../../constants';
 import { getSeriesNames } from '../../utils';
+import { getActiveLegendItems, getAllLegendItems } from './utils';
+import { prepareSeries } from './prepareSeries';
 export const useSeries = (args) => {
-    const { activeLegendItems, series } = args;
-    // FIXME: handle case with one pie chart series
-    const chartSeries = React.useMemo(() => {
+    const { series: { data: series }, legend, } = args;
+    const preparedSeries = React.useMemo(() => {
         const seriesNames = getSeriesNames(series);
         const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
-        return series.map((s) => {
-            const preparedSeries = clone(s);
-            const name = 'name' in s ? s.name : '';
-            const color = 'color' in s && s.color ? s.color : colorScale(name);
-            preparedSeries.color = color;
-            preparedSeries.name = name;
-            preparedSeries.visible = activeLegendItems.includes(name);
-            return preparedSeries;
+        return series.reduce((acc, singleSeries) => {
+            acc.push(...prepareSeries({
+                series: singleSeries,
+                legend,
+                colorScale,
+            }));
+            return acc;
+        }, []);
+    }, [series, legend]);
+    const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
+    const chartSeries = React.useMemo(() => {
+        return preparedSeries.map((singleSeries) => {
+            if (singleSeries.legend.enabled) {
+                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
+            }
+            return singleSeries;
         });
-    }, [activeLegendItems, series]);
-    return { chartSeries };
+    }, [preparedSeries, activeLegendItems]);
+    // FIXME: remove effect. It initiates extra rerender
+    React.useEffect(() => {
+        setActiveLegendItems(getActiveLegendItems(preparedSeries));
+    }, [preparedSeries]);
+    const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
+        const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
+        let nextActiveLegendItems;
+        if (metaKey && activeLegendItems.includes(name)) {
+            nextActiveLegendItems = activeLegendItems.filter((item) => item !== name);
+        }
+        else if (metaKey && !activeLegendItems.includes(name)) {
+            nextActiveLegendItems = activeLegendItems.concat(name);
+        }
+        else if (onlyItemSelected) {
+            nextActiveLegendItems = getAllLegendItems(preparedSeries);
+        }
+        else {
+            nextActiveLegendItems = [name];
+        }
+        setActiveLegendItems(nextActiveLegendItems);
+    }, [preparedSeries, activeLegendItems]);
+    return { preparedSeries: chartSeries, handleLegendItemClick };
 };

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

@@ -0,0 +1,9 @@
+import type { ScaleOrdinal } from 'd3';
+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;
+    legend: PreparedLegend;
+    colorScale: ScaleOrdinal<string, string>;
+}): PreparedSeries[];

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

@@ -0,0 +1,85 @@
+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';
+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 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 { series, legend, colorScale } = args;
+    switch (series.type) {
+        case 'pie': {
+            return preparePieSeries({ series, legend });
+        }
+        case 'scatter':
+        case 'bar-x': {
+            return prepareAxisRelatedSeries({ series, legend, colorScale });
+        }
+        default: {
+            const seriesType = get(series, 'type');
+            throw new Error(`Series type ${seriesType} does not support data preparation for series that do not support the presence of axes`);
+        }
+    }
+}

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

@@ -0,0 +1,29 @@
+import { BarXSeries, BarXSeriesData, 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[];
+} & 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

@@ -4,6 +4,8 @@ import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
 import { BarXSeries } from '../../../../../types/widget-data';
 type Args = {
+    top: number;
+    left: number;
     series: BarXSeries[];
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
@@ -11,6 +13,7 @@ type Args = {
     yScale: ChartScale;
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;
+    svgContainer: SVGSVGElement | null;
 };
 export declare function prepareBarXSeries(args: Args): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
 export {};

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { block } from '../../../../../utils/cn';
+import { pointer } from 'd3';
+import { getRandomCKId } from '../../../../../utils';
 const DEFAULT_BAR_RECT_WIDTH = 50;
 const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
 const MIN_RECT_GAP = 1;
@@ -47,11 +49,11 @@ function minDiff(arr) {
     return result;
 }
 export function prepareBarXSeries(args) {
-    const { series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave } = 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();
+        const randomKey = getRandomCKId();
         item.data.forEach((point, i) => {
             const rectProps = getRectProperties({
                 point,
@@ -61,12 +63,14 @@ export function prepareBarXSeries(args) {
                 yScale,
                 minPointDistance,
             });
-            result.push(React.createElement("rect", Object.assign({ key: `${i}-${randomKey}`, className: b('rect'), fill: item.color }, rectProps, { onMouseMove: function () {
+            result.push(React.createElement("rect", Object.assign({ key: `${i}-${randomKey}`, className: b('rect'), fill: item.color }, rectProps, { onMouseMove: function (e) {
+                    const [x, y] = pointer(e, svgContainer);
                     onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
                         hovered: {
                             data: point,
                             series: item,
                         },
+                        pointerPosition: [x - left, y - top],
                     });
                 }, onMouseLeave: onSeriesMouseLeave })));
         });

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

@@ -1,10 +1,15 @@
 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 = {
-    series: ChartSeries[];
+    top: number;
+    left: number;
+    boundsWidth: number;
+    boundsHeight: number;
+    series: PreparedSeries[];
     xAxis: ChartOptions['xAxis'];
     yAxis: ChartOptions['yAxis'];
     svgContainer: SVGSVGElement | null;

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

@@ -3,8 +3,10 @@ import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
 import { prepareBarXSeries } from './bar-x';
 import { prepareScatterSeries } from './scatter';
+import { PieSeriesComponent } from './pie';
+import './styles.css';
 export const useShapes = (args) => {
-    const { series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
+    const { top, left, boundsWidth, boundsHeight, series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
     const shapes = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
@@ -14,6 +16,8 @@ export const useShapes = (args) => {
                 case 'bar-x': {
                     if (xScale && yScale) {
                         acc.push(...prepareBarXSeries({
+                            top,
+                            left,
                             series: chartSeries,
                             xAxis,
                             xScale,
@@ -21,6 +25,7 @@ export const useShapes = (args) => {
                             yScale,
                             onSeriesMouseMove,
                             onSeriesMouseLeave,
+                            svgContainer,
                         }));
                     }
                     break;
@@ -28,6 +33,8 @@ export const useShapes = (args) => {
                 case 'scatter': {
                     if (xScale && yScale) {
                         acc.push(...prepareScatterSeries({
+                            top,
+                            left,
                             series: chartSeries,
                             xAxis,
                             xScale,
@@ -40,9 +47,26 @@ export const useShapes = (args) => {
                     }
                     break;
                 }
+                case 'pie': {
+                    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;
         }, []);
-    }, [series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave]);
+    }, [
+        boundsWidth,
+        boundsHeight,
+        series,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        svgContainer,
+        onSeriesMouseMove,
+        onSeriesMouseLeave,
+    ]);
     return { shapes };
 };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
+import { PreparedPieSeries } from '../useSeries/types';
+type PreparePieSeriesArgs = {
+    boundsWidth: number;
+    boundsHeight: number;
+    series: PreparedPieSeries[];
+    svgContainer: SVGSVGElement | null;
+    onSeriesMouseMove?: OnSeriesMouseMove;
+    onSeriesMouseLeave?: OnSeriesMouseLeave;
+};
+export declare function PieSeriesComponent(args: PreparePieSeriesArgs): React.JSX.Element;
+export {};

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { arc, pie, select } from 'd3';
+import { block } from '../../../../../utils/cn';
+import { calculateNumericProperty, getHorisontalSvgTextHeight } from '../../utils';
+const b = block('d3-pie');
+const getCenter = (boundsWidth, boundsHeight, center) => {
+    var _a, _b;
+    const defaultX = boundsWidth * 0.5;
+    const defaultY = boundsHeight * 0.5;
+    if (!center) {
+        return [defaultX, defaultY];
+    }
+    const [x, y] = center;
+    const resultX = (_a = calculateNumericProperty({ value: x, base: boundsWidth })) !== null && _a !== void 0 ? _a : defaultX;
+    const resultY = (_b = calculateNumericProperty({ value: y, base: boundsHeight })) !== null && _b !== void 0 ? _b : defaultY;
+    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, (_a = series[0]) === null || _a === void 0 ? void 0 : _a.center);
+    React.useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        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((d) => d.data.borderRadius);
+        svgElement.selectAll('*').remove();
+        svgElement
+            .selectAll('allSlices')
+            .data(dataReady)
+            .enter()
+            .append('path')
+            .attr('d', arcGenerator)
+            .attr('class', b('segment'))
+            .attr('fill', (d) => d.data.color || '')
+            .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

@@ -4,6 +4,8 @@ import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
 import { ScatterSeries } from '../../../../../types/widget-data';
 type PrepareScatterSeriesArgs = {
+    top: number;
+    left: number;
     series: ScatterSeries[];
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
@@ -12,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 { 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,13 +49,14 @@ 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: {
                             data: point,
                             series: s,
                         },
-                        pointerPosition: pointer(e, svgContainer),
+                        pointerPosition: [x - left, y - top],
                     });
                 }, onMouseLeave: onSeriesMouseLeave })));
         }));

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

@@ -0,0 +1,22 @@
+.chartkit-d3-scatter__point {
+  stroke-width: 1px;
+}
+
+.chartkit-d3_hovered .chartkit-d3-scatter__point {
+  opacity: 0.5;
+}
+
+.chartkit-d3-scatter__point:hover {
+  stroke: #fff;
+  opacity: 1;
+}
+
+.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;
+}

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

@@ -1,11 +1,41 @@
-import type { AxisDomain } from 'd3';
-import type { ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
-export declare const isAxisRelatedSeries: (series: ChartKitWidgetSeries) => boolean;
-export declare const getDomainDataXBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
-export declare const getDomainDataYBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
+import { AxisDomain } from 'd3';
+import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
+export * from './math';
+type UnknownSeries = {
+    type: ChartKitWidgetSeries['type'];
+    data: unknown;
+};
+/**
+ * Checks whether the series should be drawn with axes.
+ *
+ * @param series - The series object to check.
+ * @returns `true` if the series should be drawn with axes, `false` otherwise.
+ */
+export declare function isAxisRelatedSeries(series: UnknownSeries): boolean;
+export declare function isSeriesWithNumericalXValues(series: UnknownSeries): series is {
+    type: ChartKitWidgetSeries['type'];
+    data: {
+        x: number;
+    }[];
+};
+export declare function isSeriesWithNumericalYValues(series: UnknownSeries): series is {
+    type: ChartKitWidgetSeries['type'];
+    data: {
+        y: number;
+    }[];
+};
+export declare function isSeriesWithCategoryValues(series: UnknownSeries): series is {
+    type: ChartKitWidgetSeries['type'];
+    data: {
+        category: string;
+    }[];
+};
+export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => number[];
+export declare const getDomainDataYBySeries: (series: UnknownSeries[]) => unknown[];
 export declare const getSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
-export declare const getVisibleSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
-export declare const getOnlyVisibleSeries: <T extends ChartKitWidgetSeries<any>>(series: T[]) => T[];
+export declare const getOnlyVisibleSeries: <T extends {
+    visible: boolean;
+}>(series: T[]) => T[];
 export declare const parseTransformStyle: (style: string | null) => {
     x?: number | undefined;
     y?: number | undefined;
@@ -16,3 +46,15 @@ export declare const formatAxisTickLabel: (args: {
     dateFormat?: ChartKitWidgetAxisLabels['dateFormat'];
     numberFormat?: ChartKitWidgetAxisLabels['numberFormat'];
 }) => string;
+/**
+ * Calculates the height of a text element in a horizontal SVG layout.
+ *
+ * @param {Object} args - The arguments for the function.
+ * @param {string} args.text - The text to be measured.
+ * @param {Partial<BaseTextStyle>} args.style - Optional style properties for the text element.
+ * @return {number} The height of the text element.
+ */
+export declare const getHorisontalSvgTextHeight: (args: {
+    text: string;
+    style?: Partial<BaseTextStyle>;
+}) => number;