@gravity-ui/chartkit 3.5.0 → 3.6.0

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.js

@@ -1,6 +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;
@@ -52,7 +53,7 @@ export function prepareBarXSeries(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,

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

@@ -48,7 +48,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,10 @@
 
 .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,17 +1,41 @@
-import type { AxisDomain } from 'd3';
-import type { ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
+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 const isAxisRelatedSeries: (series: ChartKitWidgetSeries) => boolean;
-export declare const getDomainDataXBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
-export declare const getDomainDataYBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
+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 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;
@@ -22,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;

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

@@ -1,5 +1,8 @@
+import { select } from 'd3';
+import get from 'lodash/get';
 import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
 export * from './math';
 const CHARTS_WITHOUT_AXIS = ['pie'];
 /**
@@ -8,18 +11,29 @@ const CHARTS_WITHOUT_AXIS = ['pie'];
  * @param series - The series object to check.
  * @returns `true` if the series should be drawn with axes, `false` otherwise.
  */
-export const isAxisRelatedSeries = (series) => {
+export function isAxisRelatedSeries(series) {
     return !CHARTS_WITHOUT_AXIS.includes(series.type);
-};
+}
+export function isSeriesWithNumericalXValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithNumericalYValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithCategoryValues(series) {
+    return isAxisRelatedSeries(series);
+}
 export const getDomainDataXBySeries = (series) => {
-    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
-        acc.push(...s.data.map((d) => 'x' in d && d.x));
+    return series.reduce((acc, s) => {
+        if (isSeriesWithNumericalXValues(s)) {
+            acc.push(...s.data.map((d) => d.x));
+        }
         return acc;
     }, []);
 };
 export const getDomainDataYBySeries = (series) => {
-    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
-        acc.push(...s.data.map((d) => 'y' in d && d.y));
+    return series.filter(isSeriesWithNumericalYValues).reduce((acc, s) => {
+        acc.push(...s.data.map((d) => d.y));
         return acc;
     }, []);
 };
@@ -64,3 +78,26 @@ export const formatAxisTickLabel = (args) => {
         }
     }
 };
+/**
+ * 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 const getHorisontalSvgTextHeight = (args) => {
+    const { text, style } = args;
+    const textSelection = select(document.body).append('text').text(text);
+    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
+    let height = 0;
+    if (fontSize) {
+        textSelection.style('font-size', fontSize);
+    }
+    textSelection
+        .each(function () {
+        height = this.getBoundingClientRect().height;
+    })
+        .remove();
+    return height;
+};

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

@@ -1,5 +1,6 @@
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetSeriesOptions } from './series';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     /** The x value of the point */
     x?: number;
@@ -28,4 +29,8 @@ export type BarXSeries<T = any> = BaseSeries & {
         /** Whether to align the data label inside the box or to the actual value point */
         inside?: boolean;
     };
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

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

@@ -1,9 +1,18 @@
-import type { ChartKitWidgetLegend } from './legend';
 export type BaseSeries = {
-    /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartKitWidgetLegend;
     /** Initial visibility of the series */
     visible?: boolean;
+    /**
+     * Options for the series data labels, appearing next to each data point.
+     *
+     * Note: now this option is supported only for `pie` charts.
+     * */
+    dataLabels?: {
+        /**
+         * Enable or disable the data labels
+         * @default true
+         */
+        enabled?: boolean;
+    };
 };
 export type BaseSeriesData<T = any> = {
     /**

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

@@ -1,3 +1,35 @@
 export type ChartKitWidgetLegend = {
     enabled?: boolean;
+    /** The horizontal alignment of the legend box within the chart area.
+     *
+     * @default center
+     * */
+    align?: 'left' | 'center' | 'right';
+    /** Defines the pixel distance between each legend item
+     *
+     * @default 20
+     * */
+    itemDistance?: number;
+};
+export type BaseLegendSymbol = {
+    /** The pixel padding between the legend item symbol and the legend item text.
+     *
+     * @default 5
+     * */
+    padding?: number;
+};
+export type RectLegendSymbolOptions = BaseLegendSymbol & {
+    /** The pixel width of the symbol for series types that use a rectangle in the legend
+     *
+     * @default 10
+     * */
+    width?: number;
+    /** The pixel width of the symbol for series types that use a rectangle in the legend
+     *
+     * @default 10
+     * */
+    height?: number;
+    /** The border radius of the symbol for series types that use a rectangle in the legend.
+     * Defaults to half the symbolHeight, effectively creating a circle. */
+    radius?: number;
 };

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

@@ -1,4 +1,5 @@
 import type { BaseSeries, BaseSeriesData } from './base';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     /** The value of the pie segment. */
     value: number;
@@ -8,20 +9,38 @@ export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     color?: string;
     /** Initial visibility of the pie segment. */
     visible?: boolean;
+    /** Initial data label of the pie segment. If not specified, the value is used. */
+    label?: string;
 };
 export type PieSeries<T = any> = BaseSeries & {
     type: 'pie';
     data: PieSeriesData<T>[];
-    /** The color of the border surrounding each segment. Default `--g-color-base-background` from @gravity-ui/uikit. */
+    /**
+     * The color of the border surrounding each segment.
+     * @default `--g-color-base-background` from @gravity-ui/uikit.
+     */
     borderColor?: string;
-    /** The width of the border surrounding each segment. Default 1px. */
+    /**
+     * The width of the border surrounding each segment.
+     * @default '1px'
+     */
     borderWidth?: number;
-    /** The corner radius of the border surrounding each segment. Default 0. */
+    /**
+     * The corner radius of the border surrounding each segment.
+     * @default 0
+     */
     borderRadius?: number;
     /** The center of the pie chart relative to the chart area. */
     center?: [string | number | null, string | number | null];
-    /** The inner radius of the pie. Default 0. */
+    /**
+     * The inner radius of the pie.
+     * @default 0
+     */
     innerRadius?: string | number;
     /** The radius of the pie relative to the chart area. The default behaviour is to scale to the chart area. */
     radius?: string | number;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

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

@@ -1,4 +1,5 @@
 import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
     /** The x value of the point */
     x?: number;
@@ -17,4 +18,8 @@ export type ScatterSeries<T = any> = BaseSeries & {
     color?: string;
     /** A predefined shape or symbol for the dot */
     symbol?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",

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

@@ -1,3 +0,0 @@
-export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
-export declare const DEFAULT_AXIS_LABEL_PADDING = 10;
-export declare const DEFAULT_AXIS_TITLE_FONT_SIZE = "14px";

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

@@ -1,3 +0,0 @@
-export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
-export const DEFAULT_AXIS_LABEL_PADDING = 10;
-export const DEFAULT_AXIS_TITLE_FONT_SIZE = '14px';

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

@@ -1,5 +0,0 @@
-import type { BaseTextStyle } from '../../../../../types/widget-data';
-export declare const getHorisontalSvgTextDimensions: (args: {
-    text: string;
-    style?: Partial<BaseTextStyle>;
-}) => number;

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

@@ -1,18 +0,0 @@
-import { select } from 'd3';
-import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE } from './constants';
-export const getHorisontalSvgTextDimensions = (args) => {
-    const { text, style } = args;
-    const textSelection = select(document.body).append('text').text(text);
-    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
-    let height = 0;
-    if (fontSize) {
-        textSelection.style('font-size', fontSize);
-    }
-    textSelection
-        .each(function () {
-        height = this.getBoundingClientRect().height;
-    })
-        .remove();
-    return height;
-};

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

@@ -1,13 +0,0 @@
-import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
-export type OnLegendItemClick = (data: {
-    name: string;
-    metaKey: boolean;
-}) => void;
-type Args = {
-    series: ChartKitWidgetSeries[];
-};
-export declare const useLegend: (args: Args) => {
-    activeLegendItems: string[];
-    handleLegendItemClick: OnLegendItemClick;
-};
-export {};