review fixes

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

@@ -2,36 +2,22 @@ import React from 'react';
 import {ChartKit} from '../../../../components/ChartKit';
 import type {ChartKitWidgetData, AreaSeries, AreaSeriesData} from '../../../../types';
 import nintendoGames from '../nintendoGames';
-import {dateTime} from '@gravity-ui/date-utils';
 
 function prepareData(): AreaSeries[] {
     const games = nintendoGames.filter((d) => {
-        return d.date && d.user_score;
+        return d.date && d.user_score && d.genres.includes('Puzzle');
     });
 
-    const byGenre = (genre: string) => {
-        return games
-            .filter((d) => d.genres.includes(genre))
-            .map((d) => {
-                return {
-                    x: d.date,
-                    y: d.user_score,
-                    label: `${d.title} (${d.user_score})`,
-                    custom: d,
-                };
-            }) as AreaSeriesData[];
-    };
-
     return [
         {
-            name: 'Strategy',
-            type: 'area',
-            data: byGenre('Strategy'),
-        },
-        {
-            name: 'Shooter',
+            name: 'User score',
             type: 'area',
-            data: byGenre('Shooter'),
+            data: games.map<AreaSeriesData>((d) => {
+                return {
+                    x: Number(d.date),
+                    y: Number(d.user_score),
+                };
+            }),
         },
     ];
 }
@@ -40,44 +26,14 @@ export const Basic = () => {
     const series = prepareData();
 
     const widgetData: ChartKitWidgetData = {
+        title: {
+            text: 'User score (puzzle genre)',
+        },
         series: {
             data: series,
         },
-        yAxis: [
-            {
-                title: {
-                    text: 'User score',
-                },
-            },
-        ],
         xAxis: {
             type: 'datetime',
-            title: {
-                text: 'Release dates',
-            },
-        },
-        tooltip: {
-            renderer: (d) => {
-                const point = d.hovered[0]?.data as AreaSeriesData;
-
-                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>
-                );
-            },
         },
     };
 

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

@@ -1,4 +1,5 @@
-import {BaseTextStyle} from '../../../../../types';
+import type {BaseTextStyle} from '../../../../../types';
+import type {PointMarkerHalo} from '../../../../../types/widget-data/marker';
 
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
 
@@ -11,3 +12,9 @@ export const DEFAULT_DATALABELS_STYLE: BaseTextStyle = {
     fontWeight: 'bold',
     fontColor: 'var(--d3-data-labels)',
 };
+
+export const DEFAULT_HALO_OPTIONS: Required<PointMarkerHalo> = {
+    enabled: true,
+    opacity: 0.25,
+    radius: 10,
+};

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

@@ -5,7 +5,11 @@ import merge from 'lodash/merge';
 import {ChartKitWidgetSeriesOptions, AreaSeries} from '../../../../../types';
 import {PreparedAreaSeries, PreparedLegend} from './types';
 
-import {DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE} from './constants';
+import {
+    DEFAULT_DATALABELS_PADDING,
+    DEFAULT_DATALABELS_STYLE,
+    DEFAULT_HALO_OPTIONS,
+} from './constants';
 import {getRandomCKId} from '../../../../../utils';
 import {getSeriesStackId, prepareLegendSymbol} from './utils';
 
@@ -39,11 +43,7 @@ function prepareMarker(series: AreaSeries, seriesOptions?: ChartKitWidgetSeriesO
         radius: markerNormalState.radius,
         borderWidth: 1,
         borderColor: '#ffffff',
-        halo: {
-            enabled: true,
-            opacity: 0.25,
-            radius: 10,
-        },
+        halo: DEFAULT_HALO_OPTIONS,
     };
 
     return {
@@ -57,6 +57,7 @@ function prepareMarker(series: AreaSeries, seriesOptions?: ChartKitWidgetSeriesO
 export function prepareArea(args: PrepareAreaSeriesArgs) {
     const {colorScale, series: seriesList, seriesOptions, legend} = args;
     const defaultAreaWidth = get(seriesOptions, 'area.lineWidth', DEFAULT_LINE_WIDTH);
+    const defaultOpacity = get(seriesOptions, 'area.opacity', 0.75);
 
     return seriesList.map<PreparedAreaSeries>((series) => {
         const id = getRandomCKId();
@@ -66,6 +67,7 @@ export function prepareArea(args: PrepareAreaSeriesArgs) {
         const prepared: PreparedAreaSeries = {
             type: series.type,
             color,
+            opacity: get(series, 'opacity', defaultOpacity),
             lineWidth: get(series, 'lineWidth', defaultAreaWidth),
             name,
             id,

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

@@ -13,6 +13,7 @@ import {PreparedLineSeries, PreparedLegend, PreparedLegendSymbol} from './types'
 import {
     DEFAULT_DATALABELS_PADDING,
     DEFAULT_DATALABELS_STYLE,
+    DEFAULT_HALO_OPTIONS,
     DEFAULT_LEGEND_SYMBOL_PADDING,
 } from './constants';
 import {getRandomCKId} from '../../../../../utils';
@@ -63,11 +64,7 @@ function prepareMarker(series: LineSeries, seriesOptions?: ChartKitWidgetSeriesO
         radius: markerNormalState.radius,
         borderWidth: 1,
         borderColor: '#ffffff',
-        halo: {
-            enabled: true,
-            opacity: 0.25,
-            radius: 10,
-        },
+        halo: DEFAULT_HALO_OPTIONS,
     };
 
     return {

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

@@ -163,6 +163,7 @@ export type PreparedAreaSeries = {
     stacking: AreaSeries['stacking'];
     stackId: string;
     lineWidth: number;
+    opacity: number;
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;

src/plugins/d3/renderer/hooks/useShapes/area/prepare-data.ts

@@ -129,7 +129,7 @@ export const prepareAreaData = (args: {
                     markers,
                     labels,
                     color: s.color,
-                    opacity: 0.5,
+                    opacity: s.opacity,
                     width: s.lineWidth,
                     series: s,
                     hovered: false,

src/types/widget-data/area.ts

@@ -33,7 +33,7 @@ export type AreaSeries<T = any> = BaseSeries & {
     /** 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 or "percent"
+     * Possible values are undefined to disable, "normal" to stack by value
      *
      * @default undefined
      * */
@@ -42,6 +42,11 @@ export type AreaSeries<T = any> = BaseSeries & {
     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

src/types/widget-data/marker.ts

@@ -8,3 +8,12 @@ export type PointMarkerOptions = {
     /** 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;
+};

src/types/widget-data/series.ts

@@ -4,7 +4,7 @@ import type {ScatterSeries, ScatterSeriesData} from './scatter';
 import type {BarXSeries, BarXSeriesData} from './bar-x';
 import type {LineSeries, LineSeriesData, LineMarkerOptions} from './line';
 import type {BarYSeries, BarYSeriesData} from './bar-y';
-import type {PointMarkerOptions} from './marker';
+import type {PointMarkerOptions, PointMarkerHalo} from './marker';
 import type {AreaSeries, AreaSeriesData} from './area';
 
 export type ChartKitWidgetSeries<T = any> =
@@ -166,11 +166,7 @@ export type ChartKitWidgetSeriesOptions = {
             hover?: BasicHoverState & {
                 marker?: PointMarkerOptions & {
                     /** Options for the halo appearing around the hovered point */
-                    halo?: {
-                        enabled?: boolean;
-                        opacity?: number;
-                        radius?: number;
-                    };
+                    halo?: PointMarkerHalo;
                 };
             };
             inactive?: BasicInactiveState;
@@ -189,11 +185,7 @@ export type ChartKitWidgetSeriesOptions = {
             hover?: BasicHoverState & {
                 marker?: PointMarkerOptions & {
                     /** Options for the halo appearing around the hovered point */
-                    halo?: {
-                        enabled?: boolean;
-                        opacity?: number;
-                        radius?: number;
-                    };
+                    halo?: PointMarkerHalo;
                 };
             };
             inactive?: BasicInactiveState;