@gravity-ui/chartkit 4.0.0 → 4.2.0

package/README.md

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

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

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

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

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

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TooltipHoveredData } from '../../../../../types/widget-data';
+import type { TooltipHoveredData } from '../../../../../types';
 import type { PreparedAxis } from '../../hooks';
 type Props = {
     hovered: TooltipHoveredData;

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -1,11 +1,34 @@
 import React from 'react';
+import get from 'lodash/get';
+import { dateTime } from '@gravity-ui/date-utils';
+import { formatNumber } from '../../../../shared';
+import { getDataCategoryValue } from '../../utils';
+const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
+const getRowData = (fieldName, axis, data) => {
+    const categories = get(axis, 'categories', []);
+    switch (axis.type) {
+        case 'category': {
+            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
+        }
+        case 'datetime': {
+            const value = get(data, fieldName);
+            return dateTime({ input: value }).format(DEFAULT_DATE_FORMAT);
+        }
+        case 'linear':
+        default: {
+            const value = get(data, fieldName);
+            return formatNumber(value);
+        }
+    }
+};
+const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
+const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
 export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
     const { data, series } = hovered;
     switch (series.type) {
         case 'scatter': {
-            const scatterData = data;
-            const xRow = xAxis.type === 'category' ? scatterData.category : scatterData.x;
-            const yRow = yAxis.type === 'category' ? scatterData.category : scatterData.y;
+            const xRow = getXRowData(xAxis, data);
+            const yRow = getYRowData(yAxis, data);
             return (React.createElement("div", null,
                 React.createElement("div", null,
                     React.createElement("span", null, "X:\u00A0"),
@@ -15,9 +38,8 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     React.createElement("b", null, yRow))));
         }
         case 'bar-x': {
-            const barXData = data;
-            const xRow = xAxis.type === 'category' ? barXData.category : barXData.x;
-            const yRow = yAxis.type === 'category' ? barXData.category : barXData.y;
+            const xRow = getXRowData(xAxis, data);
+            const yRow = getYRowData(yAxis, data);
             return (React.createElement("div", null,
                 React.createElement("div", null, xRow),
                 React.createElement("div", null,

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

@@ -1,14 +1,19 @@
 import React from 'react';
 import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
 import get from 'lodash/get';
-import { getOnlyVisibleSeries, getDomainDataYBySeries, isAxisRelatedSeries, getDomainDataXBySeries, isSeriesWithCategoryValues, } from '../../utils';
+import { getOnlyVisibleSeries, getDataCategoryValue, getDomainDataYBySeries, getDomainDataXBySeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
-const filterCategoriesByVisibleSeries = (categories, series) => {
+const filterCategoriesByVisibleSeries = (args) => {
+    const { axisDirection, categories, series } = args;
     return categories.filter((category) => {
         return series.some((s) => {
-            return isSeriesWithCategoryValues(s) && s.data.some((d) => d.category === category);
+            return (isSeriesWithCategoryValues(s) &&
+                s.data.some((d) => {
+                    const dataCategory = getDataCategoryValue({ axisDirection, categories, data: d });
+                    return dataCategory === category;
+                }));
         });
     });
 };
@@ -41,7 +46,11 @@ const createScales = (args) => {
         }
         case 'category': {
             if (xCategories) {
-                const filteredCategories = filterCategoriesByVisibleSeries(xCategories, visibleSeries);
+                const filteredCategories = filterCategoriesByVisibleSeries({
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    series: visibleSeries,
+                });
                 xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
             }
             break;
@@ -78,7 +87,11 @@ const createScales = (args) => {
         }
         case 'category': {
             if (yCategories) {
-                const filteredCategories = filterCategoriesByVisibleSeries(yCategories, visibleSeries);
+                const filteredCategories = filterCategoriesByVisibleSeries({
+                    axisDirection: 'y',
+                    categories: yCategories,
+                    series: visibleSeries,
+                });
                 yScale = scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
             }
             break;

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

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

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

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

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

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

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

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

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

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

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

@@ -39,30 +39,34 @@ function prepareAxisRelatedSeries(args) {
     return [preparedSeries];
 }
 function prepareBarXSeries(args) {
-    const { colorScale, series, legend } = args;
+    const { colorScale, series: seriesList, legend } = args;
     const commonStackId = getRandomCKId();
-    return series.map((singleSeries) => {
+    return seriesList.map((series) => {
         var _a, _b, _c, _d;
-        const name = singleSeries.name || '';
-        const color = singleSeries.color || colorScale(name);
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        let stackId = series.stackId;
+        if (!stackId) {
+            stackId = series.stacking === 'normal' ? commonStackId : getRandomCKId();
+        }
         return {
-            type: singleSeries.type,
+            type: series.type,
             color: color,
             name: name,
-            visible: get(singleSeries, 'visible', true),
+            visible: get(series, 'visible', true),
             legend: {
-                enabled: get(singleSeries, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(singleSeries),
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
             },
-            data: singleSeries.data,
-            stacking: singleSeries.stacking,
-            stackId: singleSeries.stacking === 'normal' ? commonStackId : getRandomCKId(),
+            data: series.data,
+            stacking: series.stacking,
+            stackId,
             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
+                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
+                inside: typeof ((_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.inside) === 'boolean'
+                    ? (_c = series.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),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.style),
             },
         };
     }, []);

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { ChartOptions } from '../useChartOptions/types';
-import { ChartScale } from '../useAxisScales';
-import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
-import { PreparedBarXSeries } from '../useSeries/types';
+import type { ChartScale } from '../useAxisScales';
+import type { ChartOptions } from '../useChartOptions/types';
+import type { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
+import type { PreparedBarXSeries } from '../useSeries/types';
 type Args = {
     top: number;
     left: number;

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

@@ -1,51 +1,93 @@
+import { max, pointer, select } from 'd3';
 import React from 'react';
+import get from 'lodash/get';
 import { block } from '../../../../../utils/cn';
-import { group, pointer, select } from 'd3';
-const DEFAULT_BAR_RECT_WIDTH = 50;
-const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
+import { getDataCategoryValue } from '../../utils';
+const RECT_PADDING = 0.1;
 const MIN_RECT_GAP = 1;
+const MAX_RECT_WIDTH = 50;
+const GROUP_PADDING = 0.1;
+const MIN_GROUP_GAP = 1;
 const DEFAULT_LABEL_PADDING = 7;
 const b = block('d3-bar-x');
-const getRectProperties = (args) => {
-    const { point, xAxis, xScale, yAxis, yScale, minPointDistance } = args;
-    let cx;
-    let cy;
-    let width;
-    let height;
+function prepareData(args) {
+    const { series, xAxis, xScale, yScale } = args;
+    const categories = get(xAxis, 'categories', []);
+    const data = {};
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            const xValue = xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x;
+            if (xValue) {
+                if (!data[xValue]) {
+                    data[xValue] = {};
+                }
+                const xGroup = data[xValue];
+                if (!xGroup[s.stackId]) {
+                    xGroup[s.stackId] = [];
+                }
+                xGroup[s.stackId].push({ data: d, series: s });
+            }
+        });
+    });
+    let bandWidth = Infinity;
     if (xAxis.type === 'category') {
         const xBandScale = xScale;
-        const maxWidth = xBandScale.bandwidth() - MIN_RECT_GAP;
-        width = Math.min(maxWidth, DEFAULT_BAR_RECT_WIDTH);
-        cx = (xBandScale(point.category) || 0) + xBandScale.step() / 2 - width / 2;
+        bandWidth = xBandScale.bandwidth();
     }
     else {
         const xLinearScale = xScale;
-        const [min, max] = xLinearScale.domain();
-        const range = xLinearScale.range();
-        const maxWidth = ((range[1] - range[0]) * minPointDistance) / (Number(max) - Number(min)) - MIN_RECT_GAP;
-        width = Math.min(Math.max(maxWidth, 1), DEFAULT_LINEAR_BAR_RECT_WIDTH);
-        cx = xLinearScale(point.x) - width / 2;
-    }
-    if (yAxis[0].type === 'linear') {
-        const yLinearScale = yScale;
-        cy = yLinearScale(point.y);
-        height = yLinearScale(yLinearScale.domain()[0]) - cy;
-    }
-    else {
-        throw Error(`The "${yAxis[0].type}" type for the Y axis is not supported`);
-    }
-    return { x: cx, y: cy, width, height };
-};
-function minDiff(arr) {
-    let result = Infinity;
-    for (let i = 0; i < arr.length - 1; i++) {
-        for (let j = i + 1; j < arr.length; j++) {
-            const diff = Math.abs(arr[i] - arr[j]);
-            if (diff < result) {
-                result = diff;
+        const xValues = series.reduce((acc, s) => {
+            s.data.forEach((dataItem) => acc.push(Number(dataItem.x)));
+            return acc;
+        }, []);
+        xValues.sort().forEach((xValue, index) => {
+            if (index > 0 && xValue !== xValues[index - 1]) {
+                const dist = xLinearScale(xValue) - xLinearScale(xValues[index - 1]);
+                if (dist < bandWidth) {
+                    bandWidth = dist;
+                }
             }
-        }
+        });
     }
+    const maxGroupSize = max(Object.values(data), (d) => Object.values(d).length) || 1;
+    const groupGap = Math.max(bandWidth * GROUP_PADDING, MIN_GROUP_GAP);
+    const maxGroupWidth = bandWidth - groupGap;
+    const rectGap = Math.max((maxGroupWidth / maxGroupSize) * RECT_PADDING, MIN_RECT_GAP);
+    const rectWidth = Math.min(maxGroupWidth / maxGroupSize - rectGap, MAX_RECT_WIDTH);
+    const result = [];
+    Object.entries(data).forEach(([xValue, val]) => {
+        const stacks = Object.values(val);
+        const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
+        stacks.forEach((yValues, groupItemIndex) => {
+            let stackHeight = 0;
+            yValues.forEach((yValue) => {
+                let xCenter;
+                if (xAxis.type === 'category') {
+                    const xBandScale = xScale;
+                    xCenter = (xBandScale(xValue) || 0) + xBandScale.bandwidth() / 2;
+                }
+                else {
+                    const xLinearScale = xScale;
+                    xCenter = xLinearScale(Number(xValue));
+                }
+                const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
+                const yLinearScale = yScale;
+                const y = yLinearScale(yValue.data.y);
+                const height = yLinearScale(yLinearScale.domain()[0]) - y;
+                result.push({
+                    x,
+                    y: y - stackHeight,
+                    width: rectWidth,
+                    height,
+                    data: yValue.data,
+                    series: yValue.series,
+                });
+                stackHeight += height + 1;
+            });
+        });
+    });
     return result;
 }
 export function BarXSeriesShapes(args) {
@@ -57,83 +99,56 @@ export function BarXSeriesShapes(args) {
         }
         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,
-                            series: item,
-                        },
-                        pointerPosition: [x - left, y - top],
-                    });
-                })
-                    .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);
-                    }
-                }
+        const shapes = prepareData({
+            series,
+            xAxis,
+            xScale,
+            yAxis,
+            yScale,
+        });
+        svgElement
+            .selectAll('allRects')
+            .data(shapes)
+            .join('rect')
+            .attr('class', b('segment'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('height', (d) => d.height)
+            .attr('width', (d) => d.width)
+            .attr('fill', (d) => d.data.color || d.series.color)
+            .on('mousemove', (e, d) => {
+            const [x, y] = pointer(e, svgContainer);
+            onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
+                hovered: {
+                    data: d.data,
+                    series: d.series,
+                },
+                pointerPosition: [x - left, y - top],
             });
+        })
+            .on('mouseleave', () => {
+            if (onSeriesMouseLeave) {
+                onSeriesMouseLeave();
+            }
         });
+        const dataLabels = shapes.filter((s) => s.series.dataLabels.enabled);
+        svgElement
+            .selectAll('allLabels')
+            .data(dataLabels)
+            .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 (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);
     }, [
         onSeriesMouseMove,
         onSeriesMouseLeave,

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { AxisDomain } from 'd3';
-import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
+import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetSeriesData, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
 export * from './math';
+export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];
     data: unknown;
@@ -58,3 +59,8 @@ export declare const getHorisontalSvgTextHeight: (args: {
     text: string;
     style?: Partial<BaseTextStyle>;
 }) => number;
+export declare const getDataCategoryValue: (args: {
+    axisDirection: AxisDirection;
+    categories: string[];
+    data: ChartKitWidgetSeriesData;
+}) => string;

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

@@ -1,5 +1,6 @@
 import { group, select } from 'd3';
 import get from 'lodash/get';
+import isNil from 'lodash/isNil';
 import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
@@ -46,7 +47,7 @@ export const getDomainDataYBySeries = (series) => {
                             if (typeof values[key] === 'undefined') {
                                 values[key] = 0;
                             }
-                            if (point.y) {
+                            if (point.y && typeof point.y === 'number') {
                                 values[key] += point.y;
                             }
                         });
@@ -128,3 +129,29 @@ export const getHorisontalSvgTextHeight = (args) => {
         .remove();
     return height;
 };
+const extractCategoryValue = (args) => {
+    const { axisDirection, categories, data } = args;
+    const dataCategory = get(data, axisDirection);
+    let categoryValue;
+    if ('category' in data && data.category) {
+        categoryValue = data.category;
+    }
+    if (typeof dataCategory === 'string') {
+        categoryValue = dataCategory;
+    }
+    if (typeof dataCategory === 'number') {
+        categoryValue = categories[dataCategory];
+    }
+    if (isNil(categoryValue)) {
+        throw new Error('It seems you are trying to get non-existing category value');
+    }
+    return categoryValue;
+};
+export const getDataCategoryValue = (args) => {
+    const { axisDirection, categories, data } = args;
+    const categoryValue = extractCategoryValue({ axisDirection, categories, data });
+    if (!categories.includes(categoryValue)) {
+        throw new Error('It seems you are trying to use category value that is not in categories array');
+    }
+    return categoryValue;
+};

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

@@ -2,11 +2,25 @@ 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;
-    /** The y value of the point */
-    y?: number;
-    /** Corresponding value of axis category */
+    /**
+     * The `x` value of the bar. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value of the bar. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     * - timestamp value (for `datetime` y axis)
+     * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
+     */
+    y?: string | number;
+    /**
+     * Corresponding value of axis category.
+     *
+     * @deprecated use `x` or `y` instead
+     */
     category?: string;
     /** Data label value of the bar-x column. If not specified, the y value is used. */
     label?: string | number;

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

@@ -22,6 +22,8 @@ export type BaseSeriesData<T = any> = {
      * Here you can add additional data for your own event callbacks and formatter callbacks
      */
     custom?: T;
+    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
+    color?: string;
 };
 export type BaseTextStyle = {
     fontSize: string;

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

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

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

@@ -1,11 +1,25 @@
 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;
-    /** The y value of the point */
-    y?: number;
-    /** Corresponding value of axis category */
+    /**
+     * The `x` value of the point. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value of the point. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     * - timestamp value (for `datetime` y axis)
+     * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
+     */
+    y?: string | number;
+    /**
+     * Corresponding value of axis category.
+     *
+     * @deprecated use `x` or `y` instead
+     */
     category?: string;
     radius?: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.0.0",
+  "version": "4.2.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.7.10",
+    "@gravity-ui/yagr": "^3.7.13",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"