fix review(1)

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

@@ -4,7 +4,6 @@ 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(
@@ -35,7 +34,7 @@ export const LineWithMarkers = () => {
                 type: 'line',
                 data: s.data.filter((d) => d.x),
                 name: s.name,
-                marker: {enabled: true, symbol: SymbolType.Square},
+                marker: {enabled: true, symbol: 'square'},
             })),
         },
         yAxis: [

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

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

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

@@ -1,4 +1,5 @@
 import type {BaseTextStyle, Halo} from '../../../../../types';
+import {PointMarkerOptions} from '../../../../../types/widget-data/marker';
 
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
 
@@ -17,3 +18,10 @@ export const DEFAULT_HALO_OPTIONS: Required<Halo> = {
     opacity: 0.25,
     size: 6,
 };
+
+export const DEFAULT_POINT_MARKER_OPTIONS: Omit<Required<PointMarkerOptions>, 'enabled'> = {
+    radius: 4,
+    borderColor: '',
+    borderWidth: 0,
+    symbol: 'circle',
+};

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

@@ -9,20 +9,17 @@ import {
     DEFAULT_DATALABELS_PADDING,
     DEFAULT_DATALABELS_STYLE,
     DEFAULT_HALO_OPTIONS,
+    DEFAULT_POINT_MARKER_OPTIONS,
 } 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 = {
+    ...DEFAULT_POINT_MARKER_OPTIONS,
     enabled: false,
-    symbol: SymbolType.Circle,
-    radius: 4,
-    borderWidth: 0,
-    borderColor: '',
 };
 
 type PrepareAreaSeriesArgs = {

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

@@ -17,6 +17,7 @@ import {
     DEFAULT_DATALABELS_STYLE,
     DEFAULT_HALO_OPTIONS,
     DEFAULT_LEGEND_SYMBOL_PADDING,
+    DEFAULT_POINT_MARKER_OPTIONS,
 } from './constants';
 import {getRandomCKId} from '../../../../../utils';
 
@@ -25,11 +26,8 @@ export const DEFAULT_LINE_WIDTH = 1;
 export const DEFAULT_DASH_STYLE = DashStyle.Solid;
 
 export const DEFAULT_MARKER = {
+    ...DEFAULT_POINT_MARKER_OPTIONS,
     enabled: false,
-    symbol: 'circle',
-    radius: 4,
-    borderWidth: 0,
-    borderColor: '',
 };
 
 type PrepareLineSeriesArgs = {
@@ -89,7 +87,7 @@ function prepareMarker(series: LineSeries, seriesOptions?: ChartKitWidgetSeriesO
     };
 }
 
-export function prepareLine(args: PrepareLineSeriesArgs) {
+export function prepareLineSeries(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

@@ -4,10 +4,9 @@ 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 {DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS} from './constants';
 
 import {PointMarkerOptions} from '../../../../../types/widget-data/marker';
 import {getRandomCKId} from '../../../../../utils';
@@ -19,11 +18,9 @@ function prepareMarker(
 ) {
     const seriesHoverState = get(seriesOptions, 'scatter.states.hover');
     const markerNormalState: Required<PointMarkerOptions> = {
+        ...DEFAULT_POINT_MARKER_OPTIONS,
         enabled: true,
-        radius: 4,
-        borderColor: '',
-        borderWidth: 0,
-        symbol: ((series as ScatterSeries).symbolType || getSymbolType(index)) as SymbolType,
+        symbol: (series as ScatterSeries).symbolType || getSymbolType(index),
     };
 
     const hoveredMarkerDefaultOptions = {
@@ -55,13 +52,12 @@ export function prepareScatterSeries(args: PrepareScatterSeriesArgs): PreparedSc
     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 symbolType = (s as ScatterSeries).symbolType || getSymbolType(index);
 
         const prepared: PreparedScatterSeries = {
             id,
             type: s.type,
             name,
-            symbolType,
             color: get(s, 'color', colorScale(name)),
             visible: get(s, 'visible', true),
             legend: {

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

@@ -12,7 +12,7 @@ import type {
 } from '../../../../../types';
 
 import type {PreparedLegend, PreparedSeries} from './types';
-import {prepareLine} from './prepare-line';
+import {prepareLineSeries} from './prepare-line';
 import {prepareBarXSeries} from './prepare-bar-x';
 import {prepareBarYSeries} from './prepare-bar-y';
 import {ChartKitError} from '../../../../../libs';
@@ -48,7 +48,7 @@ export function prepareSeries(args: {
             return prepareScatterSeries({series: series as ScatterSeries[], legend, colorScale});
         }
         case 'line': {
-            return prepareLine({
+            return prepareLineSeries({
                 series: series as LineSeries[],
                 seriesOptions,
                 legend,

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

@@ -33,7 +33,7 @@ export type PathLegendSymbol = {
 
 export type SymbolLegendSymbol = {
     shape: 'symbol';
-    symbolType: SymbolType;
+    symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
 
 export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
@@ -85,11 +85,10 @@ type BasePreparedSeries = {
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];
     data: ScatterSeriesData[];
-    symbolType: SymbolType;
     marker: {
         states: {
             normal: {
-                symbol: SymbolType;
+                symbol: `${SymbolType}`;
                 enabled: boolean;
                 radius: number;
                 borderWidth: number;
@@ -177,7 +176,7 @@ export type PreparedLineSeries = {
     marker: {
         states: {
             normal: {
-                symbol: SymbolType;
+                symbol: `${SymbolType}`;
                 enabled: boolean;
                 radius: number;
                 borderWidth: number;
@@ -212,7 +211,7 @@ export type PreparedAreaSeries = {
     marker: {
         states: {
             normal: {
-                symbol: SymbolType;
+                symbol: `${SymbolType}`;
                 enabled: boolean;
                 radius: number;
                 borderWidth: number;

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

@@ -21,7 +21,7 @@ export const getAllLegendItems = (series: PreparedSeries[]) => {
 
 export function prepareLegendSymbol(
     series: ChartKitWidgetSeries,
-    symbolType?: SymbolType,
+    symbolType?: `${SymbolType}`,
 ): PreparedLegendSymbol {
     const symbolOptions = series.legend?.symbol || {};
 

src/plugins/d3/renderer/hooks/useShapes/marker.ts

@@ -73,7 +73,7 @@ export function setMarker<T extends BaseType, D extends MarkerData>(
         .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
 }
 
-export function getMarkerSymbol(type: SymbolType = SymbolType.Circle, radius: number) {
+export function getMarkerSymbol(type: `${SymbolType}` = SymbolType.Circle, radius: number) {
     const symbolFn = getSymbol(type);
     const size = Math.pow(radius, 2) * Math.PI;
 

src/plugins/d3/renderer/utils/symbol.ts

@@ -23,7 +23,7 @@ const triangleDown = {
     },
 };
 
-export const getSymbol = (symbolType: SymbolType) => {
+export const getSymbol = (symbolType: `${SymbolType}`) => {
     switch (symbolType) {
         case SymbolType.Diamond:
             return symbolDiamond2;

src/types/widget-data/marker.ts

@@ -9,5 +9,5 @@ export type PointMarkerOptions = {
     borderColor?: string;
     /** The width of the point marker's border */
     borderWidth?: number;
-    symbol?: SymbolType;
+    symbol?: `${SymbolType}`;
 };