From 4774dd1e60d9417cc7a7cac8593ec3be41f7f138 Mon Sep 17 00:00:00 2001 From: Artem Panchuk Date: Wed, 27 Dec 2023 14:28:07 +0300 Subject: [PATCH] Minor pr fixes --- src/constants/index.ts | 2 ++ src/constants/widget-data.ts | 20 +++++++++++++ src/plugins/d3/examples/line/Shapes.tsx | 3 +- .../hooks/useSeries/prepare-line-series.ts | 8 ++--- .../d3/renderer/hooks/useSeries/types.ts | 3 +- .../d3/renderer/hooks/useShapes/line/types.ts | 3 +- .../hooks/useShapes/scatter/index.tsx | 12 ++++---- .../d3/renderer/hooks/useShapes/utils.ts | 4 ++- src/types/widget-data/line.ts | 6 ++-- src/types/widget-data/series.ts | 30 ++++--------------- 10 files changed, 49 insertions(+), 42 deletions(-) create mode 100644 src/constants/widget-data.ts diff --git a/src/constants/index.ts b/src/constants/index.ts index fe0e0e5e..36445340 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1 +1,3 @@ export {CHARTKIT_SCROLLABLE_NODE_CLASSNAME} from './common'; + +export * from './widget-data'; diff --git a/src/constants/widget-data.ts b/src/constants/widget-data.ts new file mode 100644 index 00000000..b6f66e02 --- /dev/null +++ b/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', +} diff --git a/src/plugins/d3/examples/line/Shapes.tsx b/src/plugins/d3/examples/line/Shapes.tsx index be877cfa..bdf1a8e8 100644 --- a/src/plugins/d3/examples/line/Shapes.tsx +++ b/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, diff --git a/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts b/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts index 89983477..6211cbf2 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts +++ b/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'; @@ -120,8 +120,8 @@ export function prepareLineSeries(args: PrepareLineSeriesArgs) { allowOverlap: get(series, 'dataLabels.allowOverlap', false), }, marker: prepareMarker(series, seriesOptions), - dashStyle, - linecap: prepareLinecap(dashStyle, series, seriesOptions), + dashStyle: dashStyle as DashStyle, + linecap: prepareLinecap(dashStyle as DashStyle, series, seriesOptions) as LineCap, }; return prepared; diff --git a/src/plugins/d3/renderer/hooks/useSeries/types.ts b/src/plugins/d3/renderer/hooks/useSeries/types.ts index 7aa3be00..b4249f51 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/types.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/types.ts @@ -15,12 +15,11 @@ import { ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, - DashStyle, - LineCap, AreaSeries, AreaSeriesData, } from '../../../../../types'; import type {SeriesOptionsDefaults} from '../../constants'; +import {DashStyle, LineCap} from '../../../../../constants'; export type RectLegendSymbol = { shape: 'rect'; diff --git a/src/plugins/d3/renderer/hooks/useShapes/line/types.ts b/src/plugins/d3/renderer/hooks/useShapes/line/types.ts index dfc42c3d..9c1ed1e6 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/line/types.ts +++ b/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; diff --git a/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx index 8dd669f9..4073aa07 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx +++ b/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) => { diff --git a/src/plugins/d3/renderer/hooks/useShapes/utils.ts b/src/plugins/d3/renderer/hooks/useShapes/utils.ts index 25f25985..9bdb4158 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/utils.ts +++ b/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; diff --git a/src/types/widget-data/line.ts b/src/types/widget-data/line.ts index 5ca951bd..f3cf85f7 100644 --- a/src/types/widget-data/line.ts +++ b/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 = BaseSeriesData & { /** @@ -47,7 +47,7 @@ export type LineSeries = BaseSeries & { /** Options for the point markers of line series */ marker?: LineMarkerOptions; /** Option for line stroke style */ - dashStyle?: DashStyle; + dashStyle?: `${DashStyle}`; /** Option for line cap style */ - linecap?: LineCap; + linecap?: `${LineCap}`; }; diff --git a/src/types/widget-data/series.ts b/src/types/widget-data/series.ts index 8cfbe329..7fddefd0 100644 --- a/src/types/widget-data/series.ts +++ b/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 = | ScatterSeries | PieSeries @@ -27,27 +29,6 @@ export type DataLabelRendererData = { data: ChartKitWidgetSeriesData; }; -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.