Minor pr fixes

src/constants/index.ts

@@ -1 +1,3 @@
 export {CHARTKIT_SCROLLABLE_NODE_CLASSNAME} from './common';
+
+export * from './widget-data';

src/constants/widget-data.ts

@@ -0,0 +1,20 @@
+export enum DashStyle {
+    Dash = 'Dash',
+    DashDot = 'DashDot',
+    Dot = 'Dot',
+    LongDash = 'LongDash',
+    LongDashDot = 'LongDashDot',
+    LongDashDotDot = 'LongDashDotDot',
+    ShortDash = 'ShortDash',
+    ShortDashDot = 'ShortDashDot',
+    ShortDashDotDot = 'ShortDashDotDot',
+    ShortDot = 'ShortDot',
+    Solid = 'Solid',
+}
+
+export enum LineCap {
+    Butt = 'butt',
+    Round = 'round',
+    Square = 'square',
+    None = 'none',
+}

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import {ChartKitWidgetData, LineSeriesData, LineSeries, DashStyle} from '../../../../types';
+import {ChartKitWidgetData, LineSeriesData, LineSeries} from '../../../../types';
 import {ChartKit} from '../../../../components/ChartKit';
 import nintendoGames from '../../examples/nintendoGames';
+import {DashStyle} from '../../../../constants';
 
 const SHAPES = {
     [DashStyle.Solid]: 1,

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

@@ -2,11 +2,11 @@ import {ScaleOrdinal} from 'd3';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 
+import {DashStyle, LineCap} from '../../../../../constants';
+
 import {
     ChartKitWidgetSeries,
     ChartKitWidgetSeriesOptions,
-    DashStyle,
-    LineCap,
     LineSeries,
     RectLegendSymbolOptions,
 } from '../../../../../types';
@@ -121,7 +121,7 @@ export function prepareLineSeries(args: PrepareLineSeriesArgs) {
             },
             marker: prepareMarker(series, seriesOptions),
             dashStyle,
-            linecap: prepareLinecap(dashStyle, series, seriesOptions),
+            linecap: prepareLinecap(dashStyle as DashStyle, series, seriesOptions),
         };
 
         return prepared;

src/plugins/d3/renderer/hooks/useShapes/line/types.ts

@@ -1,6 +1,7 @@
 import {PreparedLineSeries} from '../../useSeries/types';
-import {DashStyle, LineCap, LineSeriesData} from '../../../../../../types';
+import {LineSeriesData} from '../../../../../../types';
 import {LabelData} from '../../../types';
+import {DashStyle, LineCap} from '../../../../../../constants';
 
 export type PointData = {
     x: number;

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

@@ -48,17 +48,19 @@ export function ScatterSeriesShape(props: ScatterSeriesShapeProps) {
         const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
 
         const selection = svgElement
-            .selectAll(`circle`)
+            .selectAll('point')
             .data(preparedData, shapeKey)
             .join(
-                (enter) => enter.append('circle').attr('class', b('point')),
+                (enter) => enter.append('rect').attr('class', b('point')),
                 (update) => update,
                 (exit) => exit.remove(),
             )
             .attr('fill', (d) => d.data.color || d.series.color || '')
-            .attr('r', (d) => d.data.radius || DEFAULT_SCATTER_POINT_RADIUS)
-            .attr('cx', (d) => d.cx)
-            .attr('cy', (d) => d.cy);
+            // .attr('r', (d) => d.data.radius || DEFAULT_SCATTER_POINT_RADIUS)
+            .attr('x', (d) => d.cx)
+            .attr('y', (d) => d.cy)
+            .attr('width', () => DEFAULT_SCATTER_POINT_RADIUS)
+            .attr('height', () => DEFAULT_SCATTER_POINT_RADIUS);
 
         svgElement
             .on('mousemove', (e) => {

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

@@ -2,13 +2,15 @@ import type {BaseType, ScaleBand, ScaleLinear, ScaleTime} from 'd3';
 import {select} from 'd3';
 import get from 'lodash/get';
 
-import type {BasicInactiveState, DashStyle} from '../../../../../types';
+import type {BasicInactiveState} from '../../../../../types';
 import {getDataCategoryValue} from '../../utils';
 import type {ChartScale} from '../useAxisScales';
 import type {PreparedAxis} from '../useChartOptions/types';
 
 import type {PreparedLineData} from './line/types';
 import type {PreparedScatterData} from './scatter';
+import {DashStyle} from '../../../../../constants';
+
 export function getXValue(args: {
     point: {x?: number | string};
     xAxis: PreparedAxis;

src/types/widget-data/line.ts

@@ -1,7 +1,7 @@
 import type {BaseSeries, BaseSeriesData} from './base';
 import type {ChartKitWidgetLegend, RectLegendSymbolOptions} from './legend';
 import type {PointMarkerOptions} from './marker';
-import type {DashStyle, LineCap} from './series';
+import {DashStyle, LineCap} from '../../constants';
 
 export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     /**

src/types/widget-data/series.ts

@@ -7,6 +7,8 @@ import type {BarYSeries, BarYSeriesData} from './bar-y';
 import type {PointMarkerOptions, PointMarkerHalo} from './marker';
 import type {AreaSeries, AreaSeriesData} from './area';
 
+import {DashStyle, LineCap} from '../../constants';
+
 export type ChartKitWidgetSeries<T = any> =
     | ScatterSeries<T>
     | PieSeries<T>
@@ -27,27 +29,6 @@ export type DataLabelRendererData<T = any> = {
     data: ChartKitWidgetSeriesData<T>;
 };
 
-export enum DashStyle {
-    Dash = 'Dash',
-    DashDot = 'DashDot',
-    Dot = 'Dot',
-    LongDash = 'LongDash',
-    LongDashDot = 'LongDashDot',
-    LongDashDotDot = 'LongDashDotDot',
-    ShortDash = 'ShortDash',
-    ShortDashDot = 'ShortDashDot',
-    ShortDashDotDot = 'ShortDashDotDot',
-    ShortDot = 'ShortDot',
-    Solid = 'Solid',
-}
-
-export enum LineCap {
-    Butt = 'butt',
-    Round = 'round',
-    Square = 'square',
-    None = 'none',
-}
-
 type BasicHoverState = {
     /**
      * Enable separate styles for the hovered series.
@@ -199,14 +180,13 @@ export type ChartKitWidgetSeriesOptions = {
          *
          * @default 'Solid'
          * */
-        dashStyle?: DashStyle;
+        dashStyle?: `${DashStyle}`;
 
         /** Options for line cap style
          *
-         * @default 'round' when dashStyle is 'solid'
-         * @default 'none' when dashStyle is not 'solid'
+         * @default 'round' when dashStyle is not 'solid', 'none' when dashStyle is not 'solid'
          * */
-        linecap?: LineCap;
+        linecap?: `${LineCap}`;
     };
     area?: {
         /** Pixel width of the graph line.