@gravity-ui/chartkit 4.12.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/hooks/useSeries/prepare-line-series.d.ts

@@ -1,13 +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,8 +1,16 @@
 import get from 'lodash/get';
+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) || {};
@@ -14,6 +22,28 @@ function prepareLineLegendSymbol(series, seriesOptions) {
         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', DEFAULT_LINE_WIDTH);
@@ -22,7 +52,7 @@ export function prepareLineSeries(args) {
         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),
@@ -40,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

@@ -104,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/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/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.12.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.1",
+    "@gravity-ui/yagr": "^4.0.3",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",