@gravity-ui/chartkit 4.1.0 → 4.2.0

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/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', (d) => d.data.color || 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/scatter.d.ts

@@ -1,15 +1,15 @@
 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';
+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'];
+    xAxis: PreparedAxis;
     xScale: ChartScale;
-    yAxis: ChartOptions['yAxis'];
+    yAxis: PreparedAxis[];
     yScale: ChartScale;
     svgContainer: SVGSVGElement | null;
     onSeriesMouseMove?: OnSeriesMouseMove;

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

@@ -1,11 +1,10 @@
-import { pointer, select } from 'd3';
 import React from 'react';
+import { pointer, select } from 'd3';
+import get from 'lodash/get';
 import { block } from '../../../../../utils/cn';
+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');
 };
@@ -14,7 +13,9 @@ const getCxAttr = (args) => {
     let cx;
     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;
@@ -25,9 +26,11 @@ const getCxAttr = (args) => {
 const getCyAttr = (args) => {
     const { point, yAxis, yScale } = args;
     let cy;
-    if (yAxis[0].type === 'category') {
+    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;
@@ -46,7 +49,7 @@ export function ScatterSeriesShape(props) {
         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(series.data)
+            ? series.data
             : prepareLinearScatterData(series.data);
         svgElement
             .selectAll('allPoints')
@@ -57,7 +60,7 @@ export function ScatterSeriesShape(props) {
             .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, yScale }))
+            .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({

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/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.1.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",