feat(D3 plugin): add halo to scatter hover series

src/plugins/d3/examples/line/LineWithMarkers.tsx

@@ -4,6 +4,7 @@ import {ChartKit} from '../../../../components/ChartKit';
 import type {ChartKitWidgetData, LineSeries, LineSeriesData} from '../../../../types';
 import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
+import {SymbolType} from '../../../../constants';
 
 function prepareData() {
     const dataset = nintendoGames.filter(
@@ -34,7 +35,7 @@ export const LineWithMarkers = () => {
                 type: 'line',
                 data: s.data.filter((d) => d.x),
                 name: s.name,
-                marker: {enabled: true, symbol: 'square'},
+                marker: {enabled: true, symbol: SymbolType.Square},
             })),
         },
         yAxis: [

src/plugins/d3/examples/scatter/Basic.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import {dateTime} from '@gravity-ui/date-utils';
 import {ChartKit} from '../../../../components/ChartKit';
-import type {ChartKitWidgetData, ScatterSeries, ScatterSeriesData} from '../../../../types';
+import type {ChartKitWidgetData, ScatterSeries} from '../../../../types';
 import {ExampleWrapper} from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
 
@@ -47,29 +46,6 @@ export const Basic = () => {
                 text: 'Release dates',
             },
         },
-        tooltip: {
-            renderer: (d) => {
-                const point = d.hovered[0]?.data as ScatterSeriesData;
-
-                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.Fragment>
-                        <b>{title}</b>
-                        <br />
-                        Release date: {date}
-                        <br />
-                        User score: {score}
-                    </React.Fragment>
-                );
-            },
-        },
     };
 
     return (

src/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.tsx

@@ -9,6 +9,7 @@ import type {NodeWithD3Data} from '../../utils';
 import {PreparedLineData} from '../../hooks/useShapes/line/types';
 import {BarYSeriesData, LineSeriesData} from '../../../../../types';
 import {PreparedBarYData} from '../../hooks/useShapes/bar-y/types';
+import get from 'lodash/get';
 
 const THROTTLE_DELAY = 50;
 
@@ -119,21 +120,21 @@ export const TooltipTriggerArea = (args: Args) => {
     const rectRef = React.useRef<SVGRectElement>(null);
     const xBarData = React.useMemo(() => {
         const result = shapesData
-            .filter((sd) => sd.series.type === 'bar-x')
+            .filter((sd) => get(sd, 'series.type') === 'bar-x')
             .map((sd) => ({x: (sd as PreparedBarXData).x, data: sd}));
 
         return sort(result, (item) => item.x);
     }, [shapesData]);
 
     const xLineData = React.useMemo(() => {
         const result = shapesData
-            .filter((sd) => ['line', 'area'].includes(sd.series.type))
+            .filter((sd) => ['line', 'area'].includes((sd as PreparedLineData).series.type))
             .reduce((acc, sd) => {
                 return acc.concat(
                     (sd as PreparedLineData).points.map<XLineData>((d) => ({
                         x: d.x,
                         data: d.data,
-                        series: sd.series,
+                        series: d.series,
                     })),
                 );
             }, [] as XLineData[]);
@@ -142,7 +143,7 @@ export const TooltipTriggerArea = (args: Args) => {
     }, [shapesData]);
 
     const barYData = React.useMemo(() => {
-        const barYShapeData = shapesData.filter((sd) => sd.series.type === 'bar-y');
+        const barYShapeData = shapesData.filter((sd) => get(sd, 'series.type') === 'bar-y');
         const result = Array.from(group(barYShapeData, (sd) => (sd as PreparedBarYData).y)).map(
             ([y, shapes]) => {
                 const yValue = y + (shapes[0] as PreparedBarYData).height / 2;
@@ -156,7 +157,7 @@ export const TooltipTriggerArea = (args: Args) => {
                             return {
                                 x: preparedData.x + preparedData.width,
                                 data: preparedData.data,
-                                series: shape.series,
+                                series: preparedData.series,
                             };
                         }),
                         (item) => item.x,

src/plugins/d3/renderer/hooks/useSeries/__tests__/prepare-line-series.test.ts

@@ -1,8 +1,9 @@
-import {DEFAULT_MARKER, prepareLineSeries} from '../prepare-line-series';
+import {DEFAULT_MARKER, prepareLine} from '../prepare-line';
 import {scaleOrdinal} from 'd3';
 import type {LineSeries} from '../../../../../../types';
 import type {PreparedLegend} from '../types';
 import {DEFAULT_PALETTE} from '../../../constants';
+import {SymbolType} from '../../../../../../constants';
 
 describe('prepareLineSeries', () => {
     describe('marker', () => {
@@ -12,7 +13,7 @@ describe('prepareLineSeries', () => {
         };
 
         it('If the marker parameters are not specified, the default values should be applied', () => {
-            const preparedSeries = prepareLineSeries({
+            const preparedSeries = prepareLine({
                 ...commonArgs,
                 series: [{}] as LineSeries[],
             });
@@ -24,14 +25,14 @@ describe('prepareLineSeries', () => {
         });
 
         it('Normal state. The settings of a specific series should be prioritized over the seriesOptions', () => {
-            const preparedSeries = prepareLineSeries({
+            const preparedSeries = prepareLine({
                 ...commonArgs,
                 seriesOptions: {
                     line: {
                         marker: {
                             enabled: true,
                             radius: 100,
-                            symbol: 'square',
+                            symbol: SymbolType.Square,
                         },
                     },
                 },

src/plugins/d3/renderer/hooks/useSeries/constants.ts

@@ -15,5 +15,5 @@ export const DEFAULT_DATALABELS_STYLE: BaseTextStyle = {
 export const DEFAULT_HALO_OPTIONS: Required<Halo> = {
     enabled: true,
     opacity: 0.25,
-    size: 10,
+    size: 6,
 };

src/plugins/d3/renderer/hooks/useSeries/prepare-area.ts

@@ -12,12 +12,14 @@ import {
 } from './constants';
 import {getRandomCKId} from '../../../../../utils';
 import {getSeriesStackId, prepareLegendSymbol} from './utils';
+import {SymbolType} from '../../../../../constants';
+import {PointMarkerOptions} from '../../../../../types/widget-data/marker';
 
 export const DEFAULT_LINE_WIDTH = 1;
 
 export const DEFAULT_MARKER = {
     enabled: false,
-    symbol: 'circle',
+    symbol: SymbolType.Circle,
     radius: 4,
     borderWidth: 0,
     borderColor: '',
@@ -32,7 +34,7 @@ type PrepareAreaSeriesArgs = {
 
 function prepareMarker(series: AreaSeries, seriesOptions?: ChartKitWidgetSeriesOptions) {
     const seriesHoverState = get(seriesOptions, 'area.states.hover');
-    const markerNormalState = Object.assign(
+    const markerNormalState: Required<PointMarkerOptions> = Object.assign(
         {},
         DEFAULT_MARKER,
         seriesOptions?.area?.marker,

src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts → src/plugins/d3/renderer/hooks/useSeries/prepare-line.ts

@@ -89,7 +89,7 @@ function prepareMarker(series: LineSeries, seriesOptions?: ChartKitWidgetSeriesO
     };
 }
 
-export function prepareLineSeries(args: PrepareLineSeriesArgs) {
+export function prepareLine(args: PrepareLineSeriesArgs) {
     const {colorScale, series: seriesList, seriesOptions, legend} = args;
 
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);

src/plugins/d3/renderer/hooks/useSeries/prepare-scatter.ts

@@ -0,0 +1,77 @@
+import {ScaleOrdinal} from 'd3';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import type {PreparedLegend, PreparedScatterSeries} from './types';
+import type {ChartKitWidgetSeriesOptions, ScatterSeries} from '../../../../../types';
+import {getSymbolType} from '../../utils';
+import {SymbolType} from '../../../../../constants';
+
+import {prepareLegendSymbol} from './utils';
+import {DEFAULT_HALO_OPTIONS} from './constants';
+
+import {PointMarkerOptions} from '../../../../../types/widget-data/marker';
+import {getRandomCKId} from '../../../../../utils';
+
+function prepareMarker(
+    series: ScatterSeries,
+    seriesOptions: ChartKitWidgetSeriesOptions | undefined,
+    index: number,
+) {
+    const seriesHoverState = get(seriesOptions, 'scatter.states.hover');
+    const markerNormalState: Required<PointMarkerOptions> = {
+        enabled: true,
+        radius: 4,
+        borderColor: '',
+        borderWidth: 0,
+        symbol: ((series as ScatterSeries).symbolType || getSymbolType(index)) as SymbolType,
+    };
+
+    const hoveredMarkerDefaultOptions = {
+        enabled: true,
+        radius: markerNormalState.radius,
+        borderWidth: 1,
+        borderColor: '#ffffff',
+        halo: DEFAULT_HALO_OPTIONS,
+    };
+
+    return {
+        states: {
+            normal: markerNormalState,
+            hover: merge(hoveredMarkerDefaultOptions, seriesHoverState?.marker),
+        },
+    };
+}
+
+interface PrepareScatterSeriesArgs {
+    colorScale: ScaleOrdinal<string, string>;
+    series: ScatterSeries[];
+    legend: PreparedLegend;
+    seriesOptions?: ChartKitWidgetSeriesOptions;
+}
+
+export function prepareScatterSeries(args: PrepareScatterSeriesArgs): PreparedScatterSeries[] {
+    const {colorScale, series, seriesOptions, legend} = args;
+
+    return series.map<PreparedScatterSeries>((s, index) => {
+        const id = getRandomCKId();
+        const name = 'name' in s && s.name ? s.name : '';
+        const symbolType = ((s as ScatterSeries).symbolType || getSymbolType(index)) as SymbolType;
+
+        const prepared: PreparedScatterSeries = {
+            id,
+            type: s.type,
+            name,
+            symbolType,
+            color: get(s, 'color', colorScale(name)),
+            visible: get(s, 'visible', true),
+            legend: {
+                enabled: get(s, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(s, symbolType),
+            },
+            data: s.data,
+            marker: prepareMarker(s, seriesOptions, index),
+        };
+
+        return prepared;
+    }, []);
+}

src/plugins/d3/renderer/hooks/useSeries/prepareSeries.ts

@@ -1,5 +1,3 @@
-import cloneDeep from 'lodash/cloneDeep';
-import get from 'lodash/get';
 import type {ScaleOrdinal} from 'd3';
 
 import type {
@@ -10,46 +8,17 @@ import type {
     ChartKitWidgetSeriesOptions,
     LineSeries,
     PieSeries,
+    ScatterSeries,
 } from '../../../../../types';
-import {SymbolType} from '../../../../../constants';
 
-import {getSymbolType} from '../../utils';
-import {ScatterSeries} from '../../../../../types/widget-data';
-
-import type {PreparedLegend, PreparedSeries, PreparedScatterSeries} from './types';
-import {prepareLineSeries} from './prepare-line-series';
+import type {PreparedLegend, PreparedSeries} from './types';
+import {prepareLine} from './prepare-line';
 import {prepareBarXSeries} from './prepare-bar-x';
 import {prepareBarYSeries} from './prepare-bar-y';
-import {prepareLegendSymbol} from './utils';
 import {ChartKitError} from '../../../../../libs';
 import {preparePieSeries} from './prepare-pie';
 import {prepareArea} from './prepare-area';
-
-type PrepareAxisRelatedSeriesArgs = {
-    colorScale: ScaleOrdinal<string, string>;
-    series: ChartKitWidgetSeries;
-    legend: PreparedLegend;
-    index: number;
-};
-
-function prepareAxisRelatedSeries(args: PrepareAxisRelatedSeriesArgs): PreparedScatterSeries[] {
-    const {colorScale, series, legend, index} = args;
-    const preparedSeries = cloneDeep(series) as PreparedScatterSeries;
-    const name = 'name' in series && series.name ? series.name : '';
-
-    const symbolType = ((series as ScatterSeries).symbolType || getSymbolType(index)) as SymbolType;
-
-    preparedSeries.symbolType = symbolType;
-    preparedSeries.color = 'color' in series && series.color ? series.color : colorScale(name);
-    preparedSeries.name = name;
-    preparedSeries.visible = get(preparedSeries, 'visible', true);
-    preparedSeries.legend = {
-        enabled: get(preparedSeries, 'legend.enabled', legend.enabled),
-        symbol: prepareLegendSymbol(series, symbolType),
-    };
-
-    return [preparedSeries];
-}
+import {prepareScatterSeries} from './prepare-scatter';
 
 export function prepareSeries(args: {
     type: ChartKitWidgetSeries['type'];
@@ -76,15 +45,10 @@ export function prepareSeries(args: {
             return prepareBarYSeries({series: series as BarYSeries[], legend, colorScale});
         }
         case 'scatter': {
-            return series.reduce<PreparedSeries[]>((acc, singleSeries, index) => {
-                acc.push(
-                    ...prepareAxisRelatedSeries({series: singleSeries, legend, colorScale, index}),
-                );
-                return acc;
-            }, []);
+            return prepareScatterSeries({series: series as ScatterSeries[], legend, colorScale});
         }
         case 'line': {
-            return prepareLineSeries({
+            return prepareLine({
                 series: series as LineSeries[],
                 seriesOptions,
                 legend,

src/plugins/d3/renderer/hooks/useSeries/types.ts

@@ -86,6 +86,24 @@ export type PreparedScatterSeries = {
     type: ScatterSeries['type'];
     data: ScatterSeriesData[];
     symbolType: SymbolType;
+    marker: {
+        states: {
+            normal: {
+                symbol: SymbolType;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: PreparedHaloOptions;
+            };
+        };
+    };
 } & BasePreparedSeries;
 
 export type PreparedBarXSeries = {
@@ -159,7 +177,7 @@ export type PreparedLineSeries = {
     marker: {
         states: {
             normal: {
-                symbol: string;
+                symbol: SymbolType;
                 enabled: boolean;
                 radius: number;
                 borderWidth: number;
@@ -194,7 +212,7 @@ export type PreparedAreaSeries = {
     marker: {
         states: {
             normal: {
-                symbol: string;
+                symbol: SymbolType;
                 enabled: boolean;
                 radius: number;
                 borderWidth: number;

src/plugins/d3/renderer/hooks/useShapes/index.tsx

@@ -17,7 +17,7 @@ import type {
 import {BarXSeriesShapes, prepareBarXData} from './bar-x';
 import type {PreparedBarXData} from './bar-x';
 import {ScatterSeriesShape, prepareScatterData} from './scatter';
-import type {PreparedScatterData} from './scatter';
+import type {PreparedScatterData} from './scatter/types';
 import {PieSeriesShapes} from './pie';
 import {preparePieData} from './pie/prepare-data';
 import type {PreparedPieData} from './pie/types';
@@ -27,7 +27,7 @@ import type {PreparedLineData} from './line/types';
 import {BarYSeriesShapes, prepareBarYData} from './bar-y';
 import type {PreparedBarYData} from './bar-y/types';
 export type {PreparedBarXData} from './bar-x';
-export type {PreparedScatterData} from './scatter';
+export type {PreparedScatterData} from './scatter/types';
 import {AreaSeriesShapes} from './area';
 import {prepareAreaData} from './area/prepare-data';
 import type {PreparedAreaData} from './area/types';