Add linecap option, fix story

gravity-ui · Dec 25, 2023 · e59e7db · e59e7db
1 parent 081fade
commit e59e7db
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 38 deletions.
diff --git a/src/plugins/d3/__stories__/line/Shapes.stories.tsx b/src/plugins/d3/__stories__/line/Shapes.stories.tsx
@@ -3,42 +3,29 @@ import {StoryObj} from '@storybook/react';
 import {Button} from '@gravity-ui/uikit';
 import {settings} from '../../../../libs';
 import {D3Plugin} from '../..';
-import {ChartKitWidgetData, LineSeriesData} from '../../../../types';
+import {ChartKitWidgetData, LineSeriesData, LineSeries, DashStyle} from '../../../../types';
 import {ChartKit} from '../../../../components/ChartKit';
 import nintendoGames from '../../examples/nintendoGames';
 import {HighchartsPlugin} from '../../../highcharts';
 
-enum LineShapeType {
-    Solid = 'Solid',
-    ShortDash = 'ShortDash',
-    ShortDot = 'ShortDot',
-    ShortDashDot = 'ShortDashDot',
-    ShortDashDotDot = 'ShortDashDotDot',
-    Dot = 'Dot',
-    Dash = 'Dash',
-    LongDash = 'LongDash',
-    DashDot = 'DashDot',
-    LongDashDot = 'LongDashDot',
-    LongDashDotDot = 'LongDashDotDot',
-}
-const SHAPES_ORDER = {
-    [LineShapeType.Solid]: 1,
-    [LineShapeType.Dash]: 2,
-    [LineShapeType.Dot]: 3,
-    [LineShapeType.ShortDashDot]: 4,
-    [LineShapeType.LongDash]: 5,
-    [LineShapeType.LongDashDot]: 6,
-    [LineShapeType.ShortDot]: 7,
-    [LineShapeType.LongDashDotDot]: 8,
-    [LineShapeType.ShortDash]: 9,
-    [LineShapeType.DashDot]: 10,
-    [LineShapeType.ShortDashDotDot]: 11,
+const SHAPES = {
+    [DashStyle.Solid]: 1,
+    [DashStyle.Dash]: 2,
+    [DashStyle.Dot]: 3,
+    [DashStyle.ShortDashDot]: 4,
+    [DashStyle.LongDash]: 5,
+    [DashStyle.LongDashDot]: 6,
+    [DashStyle.ShortDot]: 7,
+    [DashStyle.LongDashDotDot]: 8,
+    [DashStyle.ShortDash]: 9,
+    [DashStyle.DashDot]: 10,
+    [DashStyle.ShortDashDotDot]: 11,
 };
 
-const selectShapes = (): LineShapeType[] => Object.values(LineShapeType);
-const getServerShapesOrder = () => selectShapes().sort((a, b) => SHAPES_ORDER[a] - SHAPES_ORDER[b]);
+const selectShapes = (): DashStyle[] => Object.values(DashStyle);
+const getShapesOrder = () => selectShapes().sort((a, b) => SHAPES[a] - SHAPES[b]);
 
-const SHAPES_IN_ORDER = getServerShapesOrder();
+const SHAPES_IN_ORDER = getShapesOrder();
 
 function prepareData(): ChartKitWidgetData {
     const games = nintendoGames.filter((d) => {
@@ -127,8 +114,7 @@ const ChartStory = ({data}: {data: ChartKitWidgetData}) => {
         return <Button onClick={() => setShown(true)}>Show chart</Button>;
     }
 
-    data.series.data.forEach((graph, i) => {
-        // @ts-ignore
+    (data.series.data as LineSeries[]).forEach((graph, i) => {
         graph.dashStyle = SHAPES_IN_ORDER[i % SHAPES_IN_ORDER.length];
     });
 

diff --git a/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts b/src/plugins/d3/renderer/hooks/useSeries/prepare-line-series.ts
@@ -6,6 +6,7 @@ import {
     ChartKitWidgetSeries,
     ChartKitWidgetSeriesOptions,
     DashStyle,
+    LineCap,
     LineSeries,
     RectLegendSymbolOptions,
 } from '../../../../../types';
@@ -41,6 +42,10 @@ function prepareDashStyle(series: LineSeries) {
     return series.dashStyle || DashStyle.Solid;
 }
 
+function prepareLinecap(series: LineSeries) {
+    return series.linecap || LineCap.None;
+}
+
 function prepareLineLegendSymbol(
     series: ChartKitWidgetSeries,
     seriesOptions?: ChartKitWidgetSeriesOptions,
@@ -109,6 +114,7 @@ export function prepareLineSeries(args: PrepareLineSeriesArgs) {
             },
             marker: prepareMarker(series, seriesOptions),
             dashStyle: prepareDashStyle(series),
+            linecap: prepareLinecap(series),
         };
 
         return prepared;

diff --git a/src/plugins/d3/renderer/hooks/useSeries/types.ts b/src/plugins/d3/renderer/hooks/useSeries/types.ts
@@ -16,6 +16,7 @@ import {
     ConnectorCurve,
     PathLegendSymbolOptions,
     DashStyle,
+    LineCap,
     AreaSeries,
     AreaSeriesData,
 } from '../../../../../types';
@@ -157,6 +158,7 @@ export type PreparedLineSeries = {
         };
     };
     dashStyle: DashStyle;
+    linecap: LineCap;
 } & BasePreparedSeries;
 
 export type PreparedAreaSeries = {

diff --git a/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx
@@ -108,6 +108,8 @@ export const LineSeriesShapes = (args: Args) => {
             .attr('fill', 'none')
             .attr('stroke', (d) => d.color)
             .attr('stroke-width', (d) => d.width)
+            .attr('stroke-linejoin', (d) => d.linecap)
+            .attr('stroke-linecap', (d) => d.linecap)
             .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width));
 
         let dataLabels = preparedData.reduce((acc, d) => {

diff --git a/src/plugins/d3/renderer/hooks/useShapes/line/prepare-data.ts b/src/plugins/d3/renderer/hooks/useShapes/line/prepare-data.ts
@@ -80,12 +80,10 @@ export const prepareLineData = (args: {
             hovered: false,
             active: true,
             id: s.id,
+            dashStyle: s.dashStyle,
+            linecap: s.linecap,
         };
 
-        if (s.dashStyle) {
-            result.dashStyle = s.dashStyle;
-        }
-
         acc.push(result);
 
         return acc;

diff --git a/src/plugins/d3/renderer/hooks/useShapes/line/types.ts b/src/plugins/d3/renderer/hooks/useShapes/line/types.ts
@@ -1,5 +1,5 @@
 import {PreparedLineSeries} from '../../useSeries/types';
-import {DashStyle, LineSeriesData} from '../../../../../../types';
+import {DashStyle, LineCap, LineSeriesData} from '../../../../../../types';
 import {LabelData} from '../../../types';
 
 export type PointData = {
@@ -26,4 +26,5 @@ export type PreparedLineData = {
     active: boolean;
     labels: LabelData[];
     dashStyle: DashStyle;
+    linecap: LineCap;
 };
diff --git 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} from './series';
+import type {DashStyle, LineCap} from './series';
 
 export type LineSeriesData<T = any> = BaseSeriesData<T> & {
     /**
@@ -47,4 +47,5 @@ export type LineSeries<T = any> = BaseSeries & {
     /** Options for the point markers of line series */
     marker?: LineMarkerOptions;
     dashStyle?: DashStyle;
+    linecap?: LineCap;
 };
diff --git a/src/types/widget-data/series.ts b/src/types/widget-data/series.ts
@@ -41,7 +41,12 @@ export enum DashStyle {
     Solid = 'Solid',
 }
 
-export enum LineCap {}
+export enum LineCap {
+    Butt = 'butt',
+    Round = 'round',
+    Square = 'square',
+    None = 'none',
+}
 
 type BasicHoverState = {
     /**
@@ -195,6 +200,12 @@ export type ChartKitWidgetSeriesOptions = {
          * @default 'Solid'
          * */
         dashStyle?: DashStyle;
+
+        /** Options for line cap style
+         *
+         * @default 'round'
+         * */
+        linecap?: LineCap;
     };
     area?: {
         /** Pixel width of the graph line.