@gravity-ui/chartkit 4.11.0 → 4.13.0

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

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

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import nintendoGames from '../nintendoGames';
+import { dateTime } from '@gravity-ui/date-utils';
+function prepareData() {
+    const dataset = nintendoGames.filter((d) => d.date && d.user_score && new Date(d.date) > new Date(2022, 0, 1));
+    const data = dataset.map((d) => ({
+        x: d.date || undefined,
+        y: d.user_score || undefined,
+        custom: d,
+    }));
+    return {
+        series: [
+            {
+                data,
+                name: 'Nintendo games',
+            },
+        ],
+    };
+}
+export const LineWithMarkers = () => {
+    const { series } = prepareData();
+    const widgetData = {
+        series: {
+            data: series.map((s) => ({
+                type: 'line',
+                data: s.data.filter((d) => d.x),
+                name: s.name,
+                marker: { enabled: true, symbol: 'square' },
+            })),
+        },
+        yAxis: [
+            {
+                title: {
+                    text: 'User score',
+                },
+            },
+        ],
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Release dates',
+            },
+        },
+        tooltip: {
+            renderer: (d) => {
+                var _a;
+                const point = (_a = d.hovered[0]) === null || _a === void 0 ? void 0 : _a.data;
+                if (!point) {
+                    return null;
+                }
+                const title = point.custom.title;
+                const score = point.custom.user_score;
+                const date = dateTime({ input: point.custom.date }).format('DD MMM YYYY');
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("b", null, title),
+                    React.createElement("br", null),
+                    "Release date: ",
+                    date,
+                    React.createElement("br", null),
+                    "User score: ",
+                    score));
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select, line as lineGenerator } from 'd3';
 import { block } from '../../../../utils/cn';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
@@ -56,6 +56,58 @@ const appendPaginator = (args) => {
     });
     paginationLine.attr('transform', transform);
 };
+const legendSymbolGenerator = lineGenerator()
+    .x((d) => d.x)
+    .y((d) => d.y);
+function renderLegendSymbol(args) {
+    const { selection, legend } = args;
+    const line = selection.data();
+    const getXPosition = (i) => {
+        return line.slice(0, i).reduce((acc, legendItem) => {
+            return (acc +
+                legendItem.symbol.width +
+                legendItem.symbol.padding +
+                legendItem.textWidth +
+                legend.itemDistance);
+        }, 0);
+    };
+    selection.each(function (d, i) {
+        const element = select(this);
+        const x = getXPosition(i);
+        const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
+        const color = d.visible ? d.color : '';
+        switch (d.symbol.shape) {
+            case 'path': {
+                const y = legend.lineHeight / 2;
+                const points = [
+                    { x: x, y },
+                    { x: x + d.symbol.width, y },
+                ];
+                element
+                    .append('path')
+                    .attr('d', legendSymbolGenerator(points))
+                    .attr('fill', 'none')
+                    .attr('stroke-width', d.symbol.strokeWidth)
+                    .attr('class', className)
+                    .style('stroke', color);
+                break;
+            }
+            case 'rect': {
+                const y = (legend.lineHeight - d.symbol.height) / 2;
+                element
+                    .append('rect')
+                    .attr('x', x)
+                    .attr('y', y)
+                    .attr('width', d.symbol.width)
+                    .attr('height', d.symbol.height)
+                    .attr('rx', d.symbol.radius)
+                    .attr('class', className)
+                    .style('fill', color);
+                break;
+            }
+        }
+    });
+}
 export const Legend = (props) => {
     const { boundsWidth, chartSeries, legend, items, config, onItemClick } = props;
     const ref = React.useRef(null);
@@ -95,25 +147,7 @@ export const Legend = (props) => {
                         legend.itemDistance);
                 }, 0);
             };
-            legendItemTemplate
-                .append('rect')
-                .attr('x', function (_d, i) {
-                return getXPosition(i);
-            })
-                .attr('y', (legendItem) => {
-                return (legend.lineHeight - legendItem.symbol.height) / 2;
-            })
-                .attr('width', (legendItem) => {
-                return legendItem.symbol.width;
-            })
-                .attr('height', (legendItem) => legendItem.symbol.height)
-                .attr('rx', (legendItem) => legendItem.symbol.radius)
-                .attr('class', function (d) {
-                return b('item-shape', { unselected: !d.visible });
-            })
-                .style('fill', function (d) {
-                return d.visible ? d.color : '';
-            });
+            renderLegendSymbol({ selection: legendItemTemplate, legend });
             legendItemTemplate
                 .append('text')
                 .attr('x', function (legendItem, i) {

package/build/plugins/d3/renderer/components/styles.css

@@ -21,12 +21,12 @@
   user-select: none;
 }
 
-.chartkit-d3-legend__item-shape {
-  fill: var(--g-color-base-misc-medium);
+.chartkit-d3-legend__item-symbol_shape_rect.chartkit-d3-legend__item-symbol_unselected {
+  fill: var(--g-color-text-hint);
 }
 
-.chartkit-d3-legend__item-shape_unselected {
-  fill: var(--g-color-text-hint);
+.chartkit-d3-legend__item-symbol_shape_path.chartkit-d3-legend__item-symbol_unselected {
+  stroke: var(--g-color-text-hint);
 }
 
 .chartkit-d3-legend__item-text {

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

@@ -1,4 +1,5 @@
 import { BaseTextStyle } from '../../../../../types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
+export declare const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export declare const DEFAULT_DATALABELS_PADDING = 5;
 export declare const DEFAULT_DATALABELS_STYLE: BaseTextStyle;

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

@@ -1,4 +1,5 @@
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
+export const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export const DEFAULT_DATALABELS_PADDING = 5;
 export const DEFAULT_DATALABELS_STYLE = {
     fontSize: '11px',

package/build/plugins/d3/renderer/hooks/useSeries/prepare-legend.d.ts

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartKitWidgetData } from '../../../../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, LegendItem } from './types';
 export declare const getPreparedLegend: (args: {

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

@@ -1,11 +1,20 @@
 import { ScaleOrdinal } from 'd3';
 import { ChartKitWidgetSeriesOptions, LineSeries } from '../../../../../types';
-import { PreparedLegend, PreparedSeries } from './types';
+import { PreparedLineSeries, PreparedLegend } from './types';
+export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
+export declare const DEFAULT_LINE_WIDTH = 1;
+export declare const DEFAULT_MARKER: {
+    enabled: boolean;
+    symbol: string;
+    radius: number;
+    borderWidth: number;
+    borderColor: string;
+};
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: LineSeries[];
     seriesOptions?: ChartKitWidgetSeriesOptions;
     legend: PreparedLegend;
 };
-export declare function prepareLineSeries(args: PrepareLineSeriesArgs): PreparedSeries[];
+export declare function prepareLineSeries(args: PrepareLineSeriesArgs): PreparedLineSeries[];
 export {};

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

@@ -1,16 +1,58 @@
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
-import { prepareLegendSymbol } from './utils';
+import merge from 'lodash/merge';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_LEGEND_SYMBOL_PADDING, } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
+export const DEFAULT_LINE_WIDTH = 1;
+export const DEFAULT_MARKER = {
+    enabled: false,
+    symbol: 'circle',
+    radius: 4,
+    borderWidth: 0,
+    borderColor: '',
+};
+function prepareLineLegendSymbol(series, seriesOptions) {
+    var _a;
+    const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    return {
+        shape: 'path',
+        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
+        strokeWidth: get(series, 'lineWidth', defaultLineWidth),
+    };
+}
+function prepareMarker(series, seriesOptions) {
+    var _a;
+    const seriesHoverState = get(seriesOptions, 'line.states.hover');
+    const markerNormalState = Object.assign({}, DEFAULT_MARKER, (_a = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.line) === null || _a === void 0 ? void 0 : _a.marker, series.marker);
+    const hoveredMarkerDefaultOptions = {
+        enabled: true,
+        radius: markerNormalState.radius,
+        borderWidth: 1,
+        borderColor: '#ffffff',
+        halo: {
+            enabled: true,
+            opacity: 0.25,
+            radius: 10,
+        },
+    };
+    return {
+        states: {
+            normal: markerNormalState,
+            hover: merge(hoveredMarkerDefaultOptions, seriesHoverState === null || seriesHoverState === void 0 ? void 0 : seriesHoverState.marker),
+        },
+    };
+}
 export function prepareLineSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
-    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', 1);
+    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
     return seriesList.map((series) => {
         var _a, _b;
         const id = getRandomCKId();
         const name = series.name || '';
         const color = series.color || colorScale(name);
-        return {
+        const prepared = {
             type: series.type,
             color,
             lineWidth: get(series, 'lineWidth', defaultLineWidth),
@@ -19,7 +61,7 @@ export function prepareLineSeries(args) {
             visible: get(series, 'visible', true),
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
+                symbol: prepareLineLegendSymbol(series, seriesOptions),
             },
             data: series.data,
             dataLabels: {
@@ -28,6 +70,8 @@ export function prepareLineSeries(args) {
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
             },
+            marker: prepareMarker(series, seriesOptions),
         };
+        return prepared;
     }, []);
 }

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

@@ -1,9 +1,13 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve } from '../../../../../types';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol;
+export type PathLegendSymbol = {
+    shape: 'path';
+    strokeWidth: number;
+} & Required<PathLegendSymbolOptions>;
+export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol;
 export type PreparedLegend = Required<ChartKitWidgetLegend> & {
     height: number;
     lineHeight: number;
@@ -100,6 +104,28 @@ export type PreparedLineSeries = {
         padding: number;
         allowOverlap: boolean;
     };
+    marker: {
+        states: {
+            normal: {
+                symbol: string;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: {
+                    enabled: boolean;
+                    opacity: number;
+                    radius: number;
+                };
+            };
+        };
+    };
 } & BasePreparedSeries;
 export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;

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

@@ -1,4 +1,4 @@
-import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
@@ -19,6 +19,6 @@ export function prepareLegendSymbol(series) {
         width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
         height: symbolHeight,
         radius: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.radius) || symbolHeight / 2,
-        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || 5,
+        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

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/types/widget-data/legend.d.ts

@@ -50,3 +50,11 @@ export type RectLegendSymbolOptions = BaseLegendSymbol & {
      */
     radius?: number;
 };
+export type PathLegendSymbolOptions = BaseLegendSymbol & {
+    /**
+     * The pixel width of the symbol for series types that use a path in the legend
+     *
+     * @default 16
+     * */
+    width?: number;
+};

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

@@ -1,5 +1,6 @@
 import { BaseSeries, BaseSeriesData } from './base';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+import { 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,10 @@
+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;
+};

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

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

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

@@ -2,8 +2,9 @@ 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';
+import { PointMarkerOptions } from './marker';
 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>;
 export type DataLabelRendererData<T = any> = {
@@ -142,9 +143,20 @@ 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?: {
+                        enabled?: boolean;
+                        opacity?: number;
+                        radius?: number;
+                    };
+                };
+            };
             inactive?: BasicInactiveState;
         };
+        /** Options for the point markers of line series */
+        marker?: LineMarkerOptions;
     };
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.11.0",
+  "version": "4.13.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.0",
+    "@gravity-ui/yagr": "^4.0.3",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",