@gravity-ui/chartkit 4.12.0 → 4.14.0

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

@@ -1,10 +1,43 @@
 import React from 'react';
-import { select, line as lineGenerator, color } from 'd3';
+import { color, line as lineGenerator, select, symbol, symbolCircle, symbolSquare } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
 import { setActiveState } from '../utils';
 const b = block('d3-line');
+function setMarker(selection, state) {
+    selection
+        .attr('d', (d) => {
+        const radius = d.point.series.marker.states[state].radius +
+            d.point.series.marker.states[state].borderWidth;
+        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
+    })
+        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
+        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
+}
+function getMarkerSymbol(type, radius) {
+    switch (type) {
+        case 'square': {
+            const size = Math.pow(radius, 2) * Math.PI;
+            return symbol(symbolSquare, size)();
+        }
+        case 'circle':
+        default: {
+            const size = Math.pow(radius, 2) * Math.PI;
+            return symbol(symbolCircle, size)();
+        }
+    }
+}
+const getMarkerVisibility = (d) => {
+    const markerStates = d.point.series.marker.states;
+    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
+    return enabled ? '' : 'hidden';
+};
+const getMarkerHaloVisibility = (d) => {
+    const markerStates = d.point.series.marker.states;
+    const enabled = markerStates.hover.halo.enabled && d.hovered;
+    return enabled ? '' : 'hidden';
+};
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
@@ -48,11 +81,40 @@ export const LineSeriesShapes = (args) => {
             .style('font-size', (d) => d.style.fontSize)
             .style('font-weight', (d) => d.style.fontWeight || null)
             .style('fill', (d) => d.style.fontColor || null);
+        const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
+        const markerSelection = svgElement
+            .selectAll('marker')
+            .data(markers)
+            .join('g')
+            .attr('class', b('marker'))
+            .attr('visibility', getMarkerVisibility)
+            .attr('transform', (d) => {
+            return `translate(${d.point.x},${d.point.y})`;
+        });
+        markerSelection
+            .append('path')
+            .attr('class', b('marker-halo'))
+            .attr('d', (d) => {
+            const type = d.point.series.marker.states.normal.symbol;
+            const radius = d.point.series.marker.states.hover.halo.radius;
+            return getMarkerSymbol(type, radius);
+        })
+            .attr('fill', (d) => d.point.series.color)
+            .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
+            .attr('z-index', -1)
+            .attr('visibility', getMarkerHaloVisibility);
+        markerSelection
+            .append('path')
+            .attr('class', b('marker-symbol'))
+            .call(setMarker, 'normal')
+            .attr('fill', (d) => d.point.series.color);
         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;
+            var _a;
+            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'line');
+            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
+            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
             lineSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
                 const hovered = Boolean(hoverEnabled && d.id === selectedSeriesId);
@@ -82,6 +144,32 @@ export const LineSeriesShapes = (args) => {
                     datum: d,
                 });
             });
+            markerSelection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    elementSelection.attr('visibility', getMarkerVisibility(d));
+                    elementSelection
+                        .select(`.${b('marker-halo')}`)
+                        .attr('visibility', getMarkerHaloVisibility);
+                    elementSelection
+                        .select(`.${b('marker-symbol')}`)
+                        .call(setMarker, hovered ? 'hover' : 'normal');
+                }
+                if (d.point.series.marker.states.normal.enabled) {
+                    const isActive = Boolean(!inactiveEnabled ||
+                        !selectedSeriesId ||
+                        selectedSeriesId === d.point.series.id);
+                    setActiveState({
+                        element: list[index],
+                        state: inactiveOptions,
+                        active: isActive,
+                        datum: d,
+                    });
+                }
+                return d;
+            });
         });
         return () => {
             dispatcher.on('hover-shape.line', null);

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

@@ -35,14 +35,25 @@ export const prepareLineData = (args) => {
         const points = s.data.map((d) => ({
             x: getXValue({ point: d, xAxis, xScale }),
             y: getYValue({ point: d, yAxis, yScale }),
+            active: true,
             data: d,
+            series: s,
         }));
         let labels = [];
         if (s.dataLabels.enabled) {
             labels = points.map((p) => getLabelData(p, s, xMax));
         }
+        let markers = [];
+        if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
+            markers = points.map((p) => ({
+                point: p,
+                active: true,
+                hovered: false,
+            }));
+        }
         acc.push({
             points,
+            markers,
             labels,
             color: s.color,
             width: s.lineWidth,

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

@@ -5,10 +5,17 @@ export type PointData = {
     x: number;
     y: number;
     data: LineSeriesData;
+    series: PreparedLineSeries;
+};
+export type MarkerData = {
+    point: PointData;
+    active: boolean;
+    hovered: boolean;
 };
 export type PreparedLineData = {
     id: string;
     points: PointData[];
+    markers: MarkerData[];
     color: string;
     width: number;
     series: PreparedLineSeries;

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

@@ -1,5 +1,5 @@
 import { AxisDomain } from 'd3';
-import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetSeriesData } from '../../../../types/widget-data';
+import type { BaseTextStyle, ChartKitWidgetSeries, ChartKitWidgetSeriesData } from '../../../../types';
 import { PreparedAxis } from '../hooks';
 export * from './math';
 export * from './text';

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

@@ -6,6 +6,7 @@ import { formatNumber } from '../../../shared';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
 import { getNumberUnitRate } from '../../../shared/format-number/format-number';
 import { getDefaultDateFormat } from './time';
+import { getSeriesStackId } from '../hooks/useSeries/utils';
 export * from './math';
 export * from './text';
 export * from './time';
@@ -42,20 +43,26 @@ export const getDomainDataYBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
     return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
         switch (type) {
+            case 'area':
             case 'bar-x': {
-                const barXSeries = seriesList;
-                const stackedSeries = group(barXSeries, (item) => item.stackId);
-                Array.from(stackedSeries).forEach(([, stack]) => {
+                const stackedSeries = group(seriesList, getSeriesStackId);
+                Array.from(stackedSeries).forEach(([_stackId, seriesStack]) => {
                     const values = {};
-                    stack.forEach((singleSeries) => {
+                    seriesStack.forEach((singleSeries) => {
+                        const data = new Map();
                         singleSeries.data.forEach((point) => {
-                            const key = String(point.x || point.category);
-                            if (typeof values[key] === 'undefined') {
-                                values[key] = 0;
-                            }
+                            const key = String(point.x);
+                            let value = 0;
                             if (point.y && typeof point.y === 'number') {
-                                values[key] += point.y;
+                                value = point.y;
+                            }
+                            if (data.has(key)) {
+                                value = Math.max(value, data.get(key));
                             }
+                            data.set(key, value);
+                        });
+                        Array.from(data).forEach(([key, value]) => {
+                            values[key] = (values[key] || 0) + value;
                         });
                     });
                     acc.push(...Object.values(values));

package/build/plugins/d3/renderer/validation/__mocks__/index.d.ts

@@ -0,0 +1,3 @@
+import { ChartKitWidgetData } from '../../../../../types';
+export declare const XY_SERIES: Record<string, ChartKitWidgetData>;
+export declare const PIE_SERIES: Record<string, ChartKitWidgetData>;

package/build/plugins/d3/renderer/validation/__mocks__/index.js

@@ -0,0 +1,44 @@
+export const XY_SERIES = {
+    INVALID_CATEGORY_X: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
+        },
+        xAxis: { type: 'category' },
+    },
+    INVALID_CATEGORY_Y: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: 1, y: undefined }], name: 'Series' }],
+        },
+        yAxis: [{ type: 'category' }],
+    },
+    INVALID_DATETIME_X: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
+        },
+        xAxis: { type: 'datetime' },
+    },
+    INVALID_DATETIME_Y: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
+        },
+        yAxis: [{ type: 'datetime' }],
+    },
+    INVALID_LINEAR_X: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: 'str', y: 1 }], name: 'Series' }],
+        },
+    },
+    INVALID_LINEAR_Y: {
+        series: {
+            data: [{ type: 'scatter', data: [{ x: 1, y: 'str' }], name: 'Series' }],
+        },
+    },
+};
+export const PIE_SERIES = {
+    INVALID_VALUE: {
+        series: {
+            // @ts-expect-error
+            data: [{ type: 'pie', data: [{ value: undefined, name: 'Series' }] }],
+        },
+    },
+};

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

@@ -0,0 +1,2 @@
+import { ChartKitWidgetData } from '../../../../types';
+export declare const validateData: (data?: ChartKitWidgetData) => void;

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

@@ -0,0 +1,145 @@
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { ChartKitError, CHARTKIT_ERROR_CODE } from '../../../../libs';
+import { i18n } from '../../../../i18n';
+import { DEFAULT_AXIS_TYPE } from '../constants';
+const AVAILABLE_SERIES_TYPES = [
+    'area',
+    'bar-x',
+    'bar-y',
+    'line',
+    'pie',
+    'scatter',
+];
+const validateXYSeries = (args) => {
+    const { series, xAxis, yAxis } = args;
+    const xType = get(xAxis, 'type', DEFAULT_AXIS_TYPE);
+    const yType = get(yAxis, 'type', DEFAULT_AXIS_TYPE);
+    series.data.forEach(({ x, y }) => {
+        switch (xType) {
+            case 'category': {
+                if (typeof x !== 'string' && typeof x !== 'number') {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-category-data-point', {
+                            key: 'x',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'datetime': {
+                if (typeof x !== 'number') {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-datetime-data-point', {
+                            key: 'x',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'linear': {
+                if (typeof x !== 'number' && x !== null) {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-linear-data-point', {
+                            key: 'x',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+            }
+        }
+        switch (yType) {
+            case 'category': {
+                if (typeof y !== 'string' && typeof y !== 'number') {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-category-data-point', {
+                            key: 'y',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'datetime': {
+                if (typeof y !== 'number') {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-datetime-data-point', {
+                            key: 'y',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+                break;
+            }
+            case 'linear': {
+                if (typeof y !== 'number' && y !== null) {
+                    throw new ChartKitError({
+                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                        message: i18n('error', 'label_invalid-axis-linear-data-point', {
+                            key: 'y',
+                            seriesName: series.name,
+                        }),
+                    });
+                }
+            }
+        }
+    });
+};
+const validatePieSeries = ({ series }) => {
+    series.data.forEach(({ value }) => {
+        if (typeof value !== 'number') {
+            throw new ChartKitError({
+                code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+                message: i18n('error', 'label_invalid-pie-data-value'),
+            });
+        }
+    });
+};
+const validateSeries = (args) => {
+    const { series, xAxis, yAxis } = args;
+    if (!AVAILABLE_SERIES_TYPES.includes(series.type)) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-series-type', {
+                types: AVAILABLE_SERIES_TYPES.join(', '),
+            }),
+        });
+    }
+    switch (series.type) {
+        case 'bar-x':
+        case 'bar-y':
+        case 'line':
+        case 'scatter': {
+            validateXYSeries({ series, xAxis, yAxis });
+            break;
+        }
+        case 'pie': {
+            validatePieSeries({ series });
+        }
+    }
+};
+export const validateData = (data) => {
+    if (isEmpty(data) || isEmpty(data.series) || isEmpty(data.series.data)) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.NO_DATA,
+            message: i18n('error', 'label_no-data'),
+        });
+    }
+    if (data.series.data.some((s) => isEmpty(s.data))) {
+        throw new ChartKitError({
+            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
+            message: 'You should specify data for all series',
+        });
+    }
+    data.series.data.forEach((series) => {
+        var _a;
+        validateSeries({ series, yAxis: (_a = data.yAxis) === null || _a === void 0 ? void 0 : _a[0], xAxis: data.xAxis });
+    });
+};

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

@@ -0,0 +1,57 @@
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+import type { PointMarkerOptions } from './marker';
+export type AreaSeriesData<T = any> = BaseSeriesData<T> & {
+    /**
+     * 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;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
+};
+export type AreaMarkerSymbol = 'circle' | 'square';
+export type AreaMarkerOptions = PointMarkerOptions & {
+    symbol?: AreaMarkerSymbol;
+};
+export type AreaSeries<T = any> = BaseSeries & {
+    type: 'area';
+    data: AreaSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc) */
+    name: string;
+    /** Whether to stack the values of each series on top of each other.
+     * Possible values are undefined to disable, "normal" to stack by value
+     *
+     * @default undefined
+     * */
+    stacking?: 'normal';
+    /** This option allows grouping series in a stacked chart */
+    stackId?: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    /** Fill opacity for the area
+     *
+     * @default 0.75
+     * */
+    opacity?: number;
+    /** Pixel width of the graph line.
+     *
+     * @default 1
+     * */
+    lineWidth?: number;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+    /** Options for the point markers of line in area series */
+    marker?: AreaMarkerOptions;
+};

package/build/types/widget-data/area.js

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

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

@@ -12,6 +12,7 @@ export * from './pie';
 export * from './scatter';
 export * from './bar-x';
 export * from './bar-y';
+export * from './area';
 export * from './line';
 export * from './series';
 export * from './title';

package/build/types/widget-data/index.js

@@ -6,6 +6,7 @@ export * from './pie';
 export * from './scatter';
 export * from './bar-x';
 export * from './bar-y';
+export * from './area';
 export * from './line';
 export * from './series';
 export * from './title';

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

@@ -1,5 +1,6 @@
-import { BaseSeries, BaseSeriesData } from './base';
-import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+import type { PointMarkerOptions } from './marker';
 export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     /**
      * The `x` value of the point. Depending on the context , it may represents:
@@ -18,6 +19,10 @@ export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     /** Data label value of the point. If not specified, the y value is used. */
     label?: string | number;
 };
+export type LineMarkerSymbol = 'circle' | 'square';
+export type LineMarkerOptions = PointMarkerOptions & {
+    symbol?: LineMarkerSymbol;
+};
 export type LineSeries<T = any> = BaseSeries & {
     type: 'line';
     data: LineSeriesData<T>[];
@@ -34,4 +39,6 @@ export type LineSeries<T = any> = BaseSeries & {
     legend?: ChartKitWidgetLegend & {
         symbol?: RectLegendSymbolOptions;
     };
+    /** Options for the point markers of line series */
+    marker?: LineMarkerOptions;
 };

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

@@ -0,0 +1,18 @@
+export type PointMarkerOptions = {
+    /** Enable or disable the point marker */
+    enabled?: boolean;
+    /** The radius of the point marker */
+    radius?: number;
+    /** The color of the point marker's border */
+    borderColor?: string;
+    /** The width of the point marker's border */
+    borderWidth?: number;
+};
+export type PointMarkerHalo = {
+    /** Enable or disable the halo appearing around the point */
+    enabled?: boolean;
+    /** The Opacity of the point halo */
+    opacity?: number;
+    /** The radius of the point halo */
+    radius?: number;
+};

package/build/types/widget-data/marker.js

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

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

@@ -2,10 +2,12 @@ import React from 'react';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
-import type { LineSeries, LineSeriesData } from './line';
+import type { LineSeries, LineSeriesData, LineMarkerOptions } from './line';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
-export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T>;
-export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T>;
+import type { PointMarkerOptions, PointMarkerHalo } from './marker';
+import type { AreaSeries, AreaSeriesData } from './area';
+export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T>;
+export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T>;
 export type DataLabelRendererData<T = any> = {
     data: ChartKitWidgetSeriesData<T>;
 };
@@ -142,9 +144,35 @@ export type ChartKitWidgetSeriesOptions = {
         lineWidth?: number;
         /** Options for the series states that provide additional styling information to the series. */
         states?: {
-            hover?: BasicHoverState;
+            hover?: BasicHoverState & {
+                marker?: PointMarkerOptions & {
+                    /** Options for the halo appearing around the hovered point */
+                    halo?: PointMarkerHalo;
+                };
+            };
+            inactive?: BasicInactiveState;
+        };
+        /** Options for the point markers of line series */
+        marker?: LineMarkerOptions;
+    };
+    area?: {
+        /** Pixel width of the graph line.
+         *
+         * @default 1
+         * */
+        lineWidth?: number;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState & {
+                marker?: PointMarkerOptions & {
+                    /** Options for the halo appearing around the hovered point */
+                    halo?: PointMarkerHalo;
+                };
+            };
             inactive?: BasicInactiveState;
         };
+        /** Options for the point markers of line series */
+        marker?: LineMarkerOptions;
     };
 };
 export {};

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

@@ -4,6 +4,7 @@ import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { LineSeries, LineSeriesData } from './line';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
+import type { AreaSeries, AreaSeriesData } from './area';
 export type TooltipDataChunkBarX<T = any> = {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
@@ -32,7 +33,15 @@ export type TooltipDataChunkLine<T = any> = {
         name: string;
     };
 };
-export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T>;
+export type TooltipDataChunkArea<T = any> = {
+    data: AreaSeriesData<T>;
+    series: {
+        type: AreaSeries['type'];
+        id: string;
+        name: string;
+    };
+};
+export type TooltipDataChunk<T = any> = TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T>;
 export type ChartKitWidgetTooltip<T = any> = {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.12.0",
+  "version": "4.14.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": "^4.0.1",
+    "@gravity-ui/yagr": "^4.1.0",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",