@gravity-ui/chartkit 4.9.2 → 4.10.0

package/build/components/ChartKit.css

@@ -28,4 +28,5 @@
   --highcharts-tooltip-alternate-bg: var(--yc-color-base-generic);
   --highcharts-tooltip-text-complementary: var(--yc-color-text-complementary);
   --highcharts-holiday-band: var(--yc-color-base-generic);
+  --d3-data-labels: var(--yc-color-text-complementary);
 }

package/build/plugins/d3/examples/bar-x/DataLabels.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DataLabels: () => React.JSX.Element;

package/build/plugins/d3/examples/bar-x/DataLabels.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import nintendoGames from '../nintendoGames';
+import { groups, sort } from 'd3';
+const years = Array.from(new Set(nintendoGames.map((g) => g.date ? new Date(g.date).getFullYear().toString() : 'unknown')));
+function prepareData() {
+    const games = sort(nintendoGames.filter((d) => {
+        return d.date && d.user_score;
+    }), (d) => d.date);
+    const groupByYear = (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown');
+    const byGenre = (genre) => {
+        const data = groups(games.filter((d) => d.genres.includes(genre)), groupByYear).map(([year, items]) => {
+            return {
+                x: years.indexOf(String(year)),
+                y: items.length,
+            };
+        });
+        return {
+            type: 'bar-x',
+            name: genre,
+            dataLabels: {
+                enabled: true,
+            },
+            stacking: 'normal',
+            data,
+        };
+    };
+    return [byGenre('Strategy'), byGenre('Shooter'), byGenre('Puzzle'), byGenre('Action')];
+}
+export const DataLabels = () => {
+    const series = prepareData();
+    const widgetData = {
+        series: {
+            data: series,
+        },
+        xAxis: {
+            categories: years,
+            type: 'category',
+            title: {
+                text: 'Release year',
+            },
+            ticks: { pixelInterval: 200 },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

package/build/plugins/d3/examples/line/DataLabels.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DataLabels: () => React.JSX.Element;

package/build/plugins/d3/examples/line/DataLabels.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import nintendoGames from '../nintendoGames';
+import { dateTime } from '@gravity-ui/date-utils';
+function prepareData() {
+    const games = nintendoGames.filter((d) => {
+        return d.date && d.user_score;
+    });
+    const byGenre = (genre) => {
+        return games
+            .filter((d) => d.genres.includes(genre))
+            .map((d) => {
+            return {
+                x: d.date,
+                y: d.user_score,
+                label: `${d.title} (${d.user_score})`,
+                custom: d,
+            };
+        });
+    };
+    return [
+        {
+            name: 'Strategy',
+            type: 'line',
+            data: byGenre('Strategy'),
+            dataLabels: {
+                enabled: true,
+            },
+        },
+        {
+            name: 'Shooter',
+            type: 'line',
+            data: byGenre('Shooter'),
+            dataLabels: {
+                enabled: true,
+            },
+        },
+    ];
+}
+export const DataLabels = () => {
+    const series = prepareData();
+    const widgetData = {
+        series: {
+            data: series.map((s) => ({
+                type: 'line',
+                data: s.data.filter((d) => d.x),
+                name: s.name,
+                dataLabels: {
+                    enabled: true,
+                },
+            })),
+        },
+        yAxis: [
+            {
+                title: {
+                    text: 'User score',
+                },
+            },
+        ],
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Release dates',
+            },
+            ticks: { pixelInterval: 200 },
+        },
+        tooltip: {
+            renderer: (d) => {
+                var _a;
+                const point = (_a = d.hovered[0]) === null || _a === void 0 ? void 0 : _a.data;
+                if (!point) {
+                    return null;
+                }
+                const title = point.custom.title;
+                const score = point.custom.user_score;
+                const date = dateTime({ input: point.custom.date }).format('DD MMM YYYY');
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("b", null, title),
+                    React.createElement("br", null),
+                    "Release date: ",
+                    date,
+                    React.createElement("br", null),
+                    "User score: ",
+                    score));
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -25,6 +25,13 @@ const getAxisLabelMaxWidth = (args) => {
         rotation: axis.labels.rotation,
     }).maxWidth;
 };
+function getAxisMin(axis, series) {
+    const min = axis === null || axis === void 0 ? void 0 : axis.min;
+    if (typeof min === 'undefined' && (series === null || series === void 0 ? void 0 : series.some((s) => s.type === 'bar-x'))) {
+        return 0;
+    }
+    return min;
+}
 export const getPreparedYAxis = ({ series, yAxis, }) => {
     // FIXME: add support for n axises
     const yAxis1 = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
@@ -36,8 +43,9 @@ export const getPreparedYAxis = ({ series, yAxis, }) => {
     const y1TitleStyle = {
         fontSize: get(yAxis1, 'title.style.fontSize', yAxisTitleDefaults.fontSize),
     };
+    const axisType = get(yAxis1, 'type', 'linear');
     const preparedY1Axis = {
-        type: get(yAxis1, 'type', 'linear'),
+        type: axisType,
         labels: {
             enabled: labelsEnabled,
             margin: labelsEnabled ? get(yAxis1, 'labels.margin', axisLabelsDefaults.margin) : 0,
@@ -62,7 +70,7 @@ export const getPreparedYAxis = ({ series, yAxis, }) => {
                 ? getHorisontalSvgTextHeight({ text: y1TitleText, style: y1TitleStyle })
                 : 0,
         },
-        min: get(yAxis1, 'min'),
+        min: getAxisMin(yAxis1, series),
         maxPadding: get(yAxis1, 'maxPadding', 0.05),
         grid: {
             enabled: get(yAxis1, 'grid.enabled', true),

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

@@ -3,4 +3,5 @@ export const DEFAULT_DATALABELS_PADDING = 5;
 export const DEFAULT_DATALABELS_STYLE = {
     fontSize: '11px',
     fontWeight: 'bold',
+    fontColor: 'var(--d3-data-labels)',
 };

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

@@ -1,12 +1,12 @@
 import get from 'lodash/get';
 import { getRandomCKId } from '../../../../../utils';
 import { prepareLegendSymbol } from './utils';
-import { DEFAULT_DATALABELS_STYLE } from './constants';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 export function prepareBarXSeries(args) {
     const { colorScale, series: seriesList, legend } = args;
     const commonStackId = getRandomCKId();
     return seriesList.map((series) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         let stackId = series.stackId;
@@ -32,6 +32,8 @@ export function prepareBarXSeries(args) {
                     ? (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.inside
                     : false,
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.style),
+                allowOverlap: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.allowOverlap) || false,
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
             },
         };
     }, []);

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line-series.js

@@ -26,6 +26,7 @@ export function prepareLineSeries(args) {
                 enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                allowOverlap: get(series, 'dataLabels.allowOverlap', false),
             },
         };
     }, []);

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

@@ -51,6 +51,8 @@ export type PreparedBarXSeries = {
         enabled: boolean;
         inside: boolean;
         style: BaseTextStyle;
+        allowOverlap: boolean;
+        padding: number;
     };
 } & BasePreparedSeries;
 export type PreparedBarYSeries = {
@@ -79,6 +81,7 @@ export type PreparedLineSeries = {
         enabled: boolean;
         style: BaseTextStyle;
         padding: number;
+        allowOverlap: boolean;
     };
 } & BasePreparedSeries;
 export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedBarXData } from './prepare-data';
+import type { PreparedBarXData } from './types';
 export { prepareBarXData } from './prepare-data';
-export type { PreparedBarXData } from './prepare-data';
+export * from './types';
 type Args = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedBarXData[];

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

@@ -2,13 +2,15 @@ import React from 'react';
 import get from 'lodash/get';
 import { color, select } from 'd3';
 import { block } from '../../../../../../utils/cn';
+import { filterOverlappingLabels } from '../../../utils';
 export { prepareBarXData } from './prepare-data';
-const DEFAULT_LABEL_PADDING = 7;
+export * from './types';
 const b = block('d3-bar-x');
 export const BarXSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
+        var _a;
         if (!ref.current) {
             return () => { };
         }
@@ -26,24 +28,22 @@ export const BarXSeriesShapes = (args) => {
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
             .attr('fill', (d) => d.data.color || d.series.color);
-        const dataLabels = preparedData.filter((d) => d.series.dataLabels.enabled);
+        let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
+        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+            dataLabels = filterOverlappingLabels(dataLabels);
+        }
         const labelSelection = svgElement
-            .selectAll('allLabels')
+            .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => String(d.data.label || d.data.y))
+            .text((d) => d.text)
             .attr('class', b('label'))
-            .attr('x', (d) => d.x + d.width / 2)
-            .attr('y', (d) => {
-            if (d.series.dataLabels.inside) {
-                return d.y + d.height / 2;
-            }
-            return d.y - DEFAULT_LABEL_PADDING;
-        })
-            .attr('text-anchor', 'middle')
-            .style('font-size', (d) => d.series.dataLabels.style.fontSize)
-            .style('font-weight', (d) => d.series.dataLabels.style.fontWeight || null)
-            .style('fill', (d) => d.series.dataLabels.style.fontColor || null);
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null);
         dispatcher.on('hover-shape.bar-x', (data) => {
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;

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

@@ -1,14 +1,7 @@
-import type { TooltipDataChunkBarX } from '../../../../../../types';
 import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedBarXSeries, PreparedSeriesOptions } from '../../useSeries/types';
-export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    series: PreparedBarXSeries;
-};
+import { PreparedBarXData } from './types';
 export declare const prepareBarXData: (args: {
     series: PreparedBarXSeries[];
     seriesOptions: PreparedSeriesOptions;

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

@@ -1,7 +1,28 @@
 import { ascending, descending, max, sort } from 'd3';
 import get from 'lodash/get';
-import { getDataCategoryValue } from '../../../utils';
+import { getDataCategoryValue, getLabelsSize } from '../../../utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+function getLabelData(d) {
+    if (!d.series.dataLabels.enabled) {
+        return undefined;
+    }
+    const text = String(d.data.label || d.data.y);
+    const style = d.series.dataLabels.style;
+    const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
+    let y = Math.max(height, d.y - d.series.dataLabels.padding);
+    if (d.series.dataLabels.inside) {
+        y = d.y + d.height / 2;
+    }
+    return {
+        text,
+        x: d.x + d.width / 2,
+        y,
+        style,
+        size: { width, height },
+        textAnchor: 'middle',
+        series: d.series,
+    };
+}
 export const prepareBarXData = (args) => {
     const { series, seriesOptions, xAxis, xScale, yScale } = args;
     const categories = get(xAxis, 'categories', []);
@@ -89,14 +110,16 @@ export const prepareBarXData = (args) => {
                 const yLinearScale = yScale;
                 const y = yLinearScale(yValue.data.y);
                 const height = yLinearScale(yLinearScale.domain()[0]) - y;
-                result.push({
+                const barData = {
                     x,
                     y: y - stackHeight,
                     width: rectWidth,
                     height,
                     data: yValue.data,
                     series: yValue.series,
-                });
+                };
+                barData.label = getLabelData(barData);
+                result.push(barData);
                 stackHeight += height + 1;
             });
         });

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

@@ -0,0 +1,11 @@
+import { TooltipDataChunkBarX } from '../../../../../../types';
+import { PreparedBarXSeries } from '../../useSeries/types';
+import { LabelData } from '../../../types';
+export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    series: PreparedBarXSeries;
+    label?: LabelData;
+};

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
-import { PreparedLineData } from './types';
+import type { PreparedLineData } from './types';
 type Args = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedLineData[];

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

@@ -2,12 +2,14 @@ import React from 'react';
 import { select, line as lineGenerator, color } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
-import { shapeKey } from '../utils';
+import { filterOverlappingLabels } from '../../../utils';
+import { setActiveState } from '../utils';
 const b = block('d3-line');
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
+        var _a;
         if (!ref.current) {
             return () => { };
         }
@@ -18,9 +20,9 @@ export const LineSeriesShapes = (args) => {
             .x((d) => d.x)
             .y((d) => d.y);
         svgElement.selectAll('*').remove();
-        const selection = svgElement
+        const lineSelection = svgElement
             .selectAll('path')
-            .data(preparedData, shapeKey)
+            .data(preparedData)
             .join('path')
             .attr('d', (d) => line(d.points))
             .attr('fill', 'none')
@@ -28,67 +30,58 @@ export const LineSeriesShapes = (args) => {
             .attr('stroke-width', (d) => d.width)
             .attr('stroke-linejoin', 'round')
             .attr('stroke-linecap', 'round');
-        const dataLabels = preparedData.reduce((acc, d) => {
-            if (d.series.dataLabels.enabled) {
-                acc.push(...d.points.map((p) => ({
-                    x: p.x,
-                    y: p.y,
-                    data: p.data,
-                    series: d.series,
-                })));
-            }
-            return acc;
+        let dataLabels = preparedData.reduce((acc, d) => {
+            return acc.concat(d.labels);
         }, []);
-        svgElement
-            .selectAll('allLabels')
+        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+            dataLabels = filterOverlappingLabels(dataLabels);
+        }
+        const labelsSelection = svgElement
+            .selectAll('text')
             .data(dataLabels)
             .join('text')
-            .text((d) => String(d.data.label || d.data.y))
+            .text((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
-            .attr('y', (d) => {
-            return d.y - d.series.dataLabels.padding;
-        })
-            .attr('text-anchor', 'middle')
-            .style('font-size', (d) => d.series.dataLabels.style.fontSize)
-            .style('font-weight', (d) => d.series.dataLabels.style.fontWeight || null)
-            .style('fill', (d) => d.series.dataLabels.style.fontColor || null);
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         dispatcher.on('hover-shape.line', (data) => {
             var _a, _b;
             const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'line')) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.id;
-            const updates = [];
-            preparedData.forEach((p) => {
-                const hovered = Boolean(hoverEnabled && p.id === selectedSeriesId);
-                if (p.hovered !== hovered) {
-                    p.hovered = hovered;
-                    updates.push(p);
-                }
-                const active = Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === p.id);
-                if (p.active !== active) {
-                    p.active = active;
-                    updates.push(p);
+            lineSelection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.id === selectedSeriesId);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    elementSelection.attr('stroke', (d) => {
+                        var _a;
+                        const initialColor = d.color || '';
+                        if (d.hovered) {
+                            return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
+                        }
+                        return initialColor;
+                    });
                 }
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.id),
+                    datum: d,
+                });
             });
-            selection.data(updates, shapeKey).join('shape', (update) => {
-                update
-                    .attr('stroke', (d) => {
-                    var _a;
-                    const initialColor = d.color || '';
-                    if (d.hovered) {
-                        return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
-                    }
-                    return initialColor;
-                })
-                    .attr('opacity', function (d) {
-                    if (!d.active) {
-                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                    }
-                    return null;
+            labelsSelection.datum((d, index, list) => {
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                    datum: d,
                 });
-                return update;
-            }, (exit) => exit);
+            });
         });
         return () => {
             dispatcher.on('hover-shape.line', null);

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

@@ -1,14 +1,49 @@
 import { getXValue, getYValue } from '../utils';
+import { getLabelsSize, getLeftPosition } from '../../../utils';
+function getLabelData(point, series, xMax) {
+    const text = String(point.data.label || point.data.y);
+    const style = series.dataLabels.style;
+    const size = getLabelsSize({ labels: [text], style });
+    const labelData = {
+        text,
+        x: point.x,
+        y: point.y - series.dataLabels.padding,
+        style,
+        size: { width: size.maxWidth, height: size.maxHeight },
+        textAnchor: 'middle',
+        series: series,
+        active: true,
+    };
+    const left = getLeftPosition(labelData);
+    if (left < 0) {
+        labelData.x = labelData.x + Math.abs(left);
+    }
+    else {
+        const right = left + labelData.size.width;
+        if (right > xMax) {
+            labelData.x = labelData.x - xMax - right;
+        }
+    }
+    return labelData;
+}
 export const prepareLineData = (args) => {
     const { series, xAxis, xScale, yScale } = args;
     const yAxis = args.yAxis[0];
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax / (1 - xAxis.maxPadding);
     return series.reduce((acc, s) => {
+        const points = s.data.map((d) => ({
+            x: getXValue({ point: d, xAxis, xScale }),
+            y: getYValue({ point: d, yAxis, yScale }),
+            data: d,
+        }));
+        let labels = [];
+        if (s.dataLabels.enabled) {
+            labels = points.map((p) => getLabelData(p, s, xMax));
+        }
         acc.push({
-            points: s.data.map((d) => ({
-                x: getXValue({ point: d, xAxis, xScale }),
-                y: getYValue({ point: d, yAxis, yScale }),
-                data: d,
-            })),
+            points,
+            labels,
             color: s.color,
             width: s.lineWidth,
             series: s,

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

@@ -1,5 +1,6 @@
 import { PreparedLineSeries } from '../../useSeries/types';
 import { LineSeriesData } from '../../../../../../types';
+import { LabelData } from '../../../types';
 export type PointData = {
     x: number;
     y: number;
@@ -13,4 +14,5 @@ export type PreparedLineData = {
     series: PreparedLineSeries;
     hovered: boolean;
     active: boolean;
+    labels: LabelData[];
 };

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

@@ -1,5 +1,7 @@
-import { PreparedAxis } from '../useChartOptions/types';
-import { ChartScale } from '../useAxisScales';
+import type { BaseType } from 'd3';
+import type { BasicInactiveState } from '../../../../../types';
+import type { ChartScale } from '../useAxisScales';
+import type { PreparedAxis } from '../useChartOptions/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string;
@@ -15,3 +17,11 @@ export declare function getYValue(args: {
     yScale: ChartScale;
 }): number;
 export declare const shapeKey: (d: unknown) => string | number;
+export declare function setActiveState<T extends {
+    active?: boolean;
+}>(args: {
+    element: BaseType;
+    datum: T;
+    state: BasicInactiveState | undefined;
+    active: boolean;
+}): T;

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

@@ -1,3 +1,4 @@
+import { select } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 export function getXValue(args) {
@@ -23,3 +24,17 @@ export function getYValue(args) {
     return yLinearScale(point.y);
 }
 export const shapeKey = (d) => d.id || -1;
+export function setActiveState(args) {
+    const { element, datum, state, active } = args;
+    const elementSelection = select(element);
+    if (datum.active !== active) {
+        datum.active = active;
+        elementSelection.attr('opacity', function (d) {
+            if (!d.active) {
+                return (state === null || state === void 0 ? void 0 : state.opacity) || null;
+            }
+            return null;
+        });
+    }
+    return datum;
+}

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

@@ -0,0 +1,16 @@
+import { BaseTextStyle } from '../../../../types';
+export type LabelData = {
+    text: string;
+    x: number;
+    y: number;
+    style: BaseTextStyle;
+    size: {
+        width: number;
+        height: number;
+    };
+    textAnchor: 'middle';
+    series: {
+        id: string;
+    };
+    active?: boolean;
+};

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

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

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

@@ -5,6 +5,7 @@ export * from './math';
 export * from './text';
 export * from './time';
 export * from './axis';
+export * from './labels';
 export type AxisDirection = 'x' | 'y';
 export type NodeWithD3Data<T = unknown> = Element & {
     __data__: T;

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

@@ -10,6 +10,7 @@ export * from './math';
 export * from './text';
 export * from './time';
 export * from './axis';
+export * from './labels';
 const CHARTS_WITHOUT_AXIS = ['pie'];
 /**
  * Checks whether the series should be drawn with axes.

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

@@ -0,0 +1,3 @@
+import type { LabelData } from '../types';
+export declare function getLeftPosition(label: LabelData): number;
+export declare function filterOverlappingLabels(labels: LabelData[]): LabelData[];

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

@@ -0,0 +1,35 @@
+import sortBy from 'lodash/sortBy';
+export function getLeftPosition(label) {
+    switch (label.textAnchor) {
+        case 'middle': {
+            return label.x - label.size.width / 2;
+        }
+        default: {
+            return label.x;
+        }
+    }
+}
+function hasOverlappingByX(rect1, rect2) {
+    const left1 = getLeftPosition(rect1);
+    const right1 = left1 + rect1.size.width;
+    const left2 = getLeftPosition(rect2);
+    const right2 = left2 + rect2.size.width;
+    return Math.max(0, Math.min(right1, right2) - Math.max(left1, left2)) > 0;
+}
+function hasOverlappingByY(rect1, rect2) {
+    const top1 = rect1.y - rect1.size.height;
+    const bottom1 = rect1.y;
+    const top2 = rect2.y - rect2.size.height;
+    const bottom2 = rect2.y;
+    return Math.max(0, Math.min(bottom1, bottom2) - Math.max(top1, top2)) > 0;
+}
+export function filterOverlappingLabels(labels) {
+    const result = [];
+    const sorted = sortBy(labels, (d) => d.y, getLeftPosition);
+    sorted.forEach((label) => {
+        if (!result.some((l) => hasOverlappingByX(l, label) && hasOverlappingByY(l, label))) {
+            result.push(label);
+        }
+    });
+    return result;
+}

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

@@ -17,6 +17,10 @@ export type BaseSeries = {
          * @default 5
          * */
         padding?: number;
+        /**
+         * @default false
+         * */
+        allowOverlap?: boolean;
     };
 };
 export type BaseSeriesData<T = any> = {

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

@@ -26,7 +26,7 @@ type BasicHoverState = {
      */
     brightness?: number;
 };
-type BasicInactiveState = {
+export type BasicInactiveState = {
     /**
      * Enable separate styles for the inactive series.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.9.2",
+  "version": "4.10.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.11.1",
+    "@gravity-ui/yagr": "^3.11.3",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",