@gravity-ui/chartkit 4.14.0 → 4.16.0

package/build/constants/index.d.ts

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

package/build/constants/index.js

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

package/build/constants/widget-data.d.ts

@@ -0,0 +1,34 @@
+export declare const SeriesType: {
+    readonly Area: "area";
+    readonly BarX: "bar-x";
+    readonly BarY: "bar-y";
+    readonly Line: "line";
+    readonly Pie: "pie";
+    readonly Scatter: "scatter";
+};
+export declare 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 declare enum SymbolType {
+    Circle = "circle",
+    Diamond = "diamond",
+    Square = "square",
+    Triangle = "triangle",
+    TriangleDown = "triangle-down"
+}
+export declare enum LineCap {
+    Butt = "butt",
+    Round = "round",
+    Square = "square",
+    None = "none"
+}

package/build/constants/widget-data.js

@@ -0,0 +1,37 @@
+export const SeriesType = {
+    Area: 'area',
+    BarX: 'bar-x',
+    BarY: 'bar-y',
+    Line: 'line',
+    Pie: 'pie',
+    Scatter: 'scatter',
+};
+export var DashStyle;
+(function (DashStyle) {
+    DashStyle["Dash"] = "Dash";
+    DashStyle["DashDot"] = "DashDot";
+    DashStyle["Dot"] = "Dot";
+    DashStyle["LongDash"] = "LongDash";
+    DashStyle["LongDashDot"] = "LongDashDot";
+    DashStyle["LongDashDotDot"] = "LongDashDotDot";
+    DashStyle["ShortDash"] = "ShortDash";
+    DashStyle["ShortDashDot"] = "ShortDashDot";
+    DashStyle["ShortDashDotDot"] = "ShortDashDotDot";
+    DashStyle["ShortDot"] = "ShortDot";
+    DashStyle["Solid"] = "Solid";
+})(DashStyle || (DashStyle = {}));
+export var SymbolType;
+(function (SymbolType) {
+    SymbolType["Circle"] = "circle";
+    SymbolType["Diamond"] = "diamond";
+    SymbolType["Square"] = "square";
+    SymbolType["Triangle"] = "triangle";
+    SymbolType["TriangleDown"] = "triangle-down";
+})(SymbolType || (SymbolType = {}));
+export var LineCap;
+(function (LineCap) {
+    LineCap["Butt"] = "butt";
+    LineCap["Round"] = "round";
+    LineCap["Square"] = "square";
+    LineCap["None"] = "none";
+})(LineCap || (LineCap = {}));

package/build/plugins/d3/examples/ExampleWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    children?: React.ReactNode;
+    styles?: React.CSSProperties;
+};
+export declare const ExampleWrapper: (props: Props) => React.JSX.Element;
+export {};

package/build/plugins/d3/examples/ExampleWrapper.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const ExampleWrapper = (props) => {
+    const styles = Object.assign({ height: 280 }, props.styles);
+    return React.createElement("div", { style: styles }, props.children);
+};

package/build/plugins/d3/examples/area/Basic.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
 function prepareData() {
     const games = nintendoGames.filter((d) => {
@@ -21,9 +22,6 @@ function prepareData() {
 export const Basic = () => {
     const series = prepareData();
     const widgetData = {
-        title: {
-            text: 'User score (puzzle genre)',
-        },
         series: {
             data: series,
         },
@@ -31,5 +29,6 @@ export const Basic = () => {
             type: 'datetime',
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/area/StackedArea.js

@@ -1,6 +1,7 @@
 import { groups } from 'd3';
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
 const years = Array.from(new Set(nintendoGames.map((d) => d.date ? String(new Date(d.date).getFullYear()) : 'unknown'))).sort();
 function prepareData() {
@@ -39,10 +40,8 @@ export const StackedArea = () => {
         xAxis: {
             type: 'category',
             categories: years,
-            title: {
-                text: 'Release year',
-            },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-x/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData({ field, filterNulls } = {
     field: 'platform',
 }) {
@@ -43,7 +44,8 @@ export const BasicBarXChart = () => {
         },
         yAxis: [{ title: { text: 'Number of games released' } }],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };
 export const BasicLinearBarXChart = () => {
     const { series } = prepareData({ field: 'meta_score' });
@@ -61,7 +63,8 @@ export const BasicLinearBarXChart = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };
 export const BasicDateTimeBarXChart = () => {
     const { series } = prepareData({ field: 'date', filterNulls: true });
@@ -80,5 +83,6 @@ export const BasicDateTimeBarXChart = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-x/DataLabels.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups, sort } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups, sort } from 'd3';
 const years = Array.from(new Set(nintendoGames.map((g) => g.date ? new Date(g.date).getFullYear().toString() : 'unknown')));
 function prepareData() {
     const games = sort(nintendoGames.filter((d) => {
@@ -42,5 +43,6 @@ export const DataLabels = () => {
             ticks: { pixelInterval: 200 },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-x/GroupedColumns.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const displayedYears = [2015, 2016, 2017, 2018, 2019];
     const games = nintendoGames.filter((ng) => displayedYears.includes(new Date(ng.date).getFullYear()));
@@ -42,5 +43,6 @@ export const GroupedColumns = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-x/StackedColumns.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown'));
     const categories = [];
@@ -41,5 +42,6 @@ export const StackedColumns = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-y/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData(field = 'platform') {
     const gamesByPlatform = groups(nintendoGames, (item) => item[field]);
     const data = gamesByPlatform.map(([value, games]) => ({
@@ -39,5 +40,6 @@ export const Basic = () => {
             },
         ],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-y/GroupedColumns.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const displayedYears = [2015, 2016, 2017, 2018, 2019];
     const games = nintendoGames.filter((ng) => displayedYears.includes(new Date(ng.date).getFullYear()));
@@ -44,5 +45,6 @@ export const GroupedColumns = () => {
             },
         ],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-y/StackedColumns.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown'));
     const categories = [];
@@ -43,5 +44,6 @@ export const StackedColumns = () => {
             },
         ],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/combined/LineAndBarX.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { ChartKit } from '../../../../components/ChartKit';
-import nintendoGames from '../../examples/nintendoGames';
 import { groups, max, min, median } from 'd3';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
 export const LineAndBarXCombinedChart = () => {
     const gamesByPlatform = groups(nintendoGames, (item) => item.platform || 'unknown');
     const widgetData = {
@@ -57,5 +58,6 @@ export const LineAndBarXCombinedChart = () => {
             },
         ],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/line/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { dateTime } from '@gravity-ui/date-utils';
 function prepareData() {
     const dataset = nintendoGames.filter((d) => d.date && d.user_score);
     const data = dataset.map((d) => ({
@@ -62,5 +63,6 @@ export const Basic = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/line/DataLabels.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { dateTime } from '@gravity-ui/date-utils';
 function prepareData() {
     const games = nintendoGames.filter((d) => {
         return d.date && d.user_score;
@@ -85,5 +86,6 @@ export const DataLabels = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/line/LineWithMarkers.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { dateTime } from '@gravity-ui/date-utils';
 function prepareData() {
     const dataset = nintendoGames.filter((d) => d.date && d.user_score && new Date(d.date) > new Date(2022, 0, 1));
     const data = dataset.map((d) => ({
@@ -63,5 +64,6 @@ export const LineWithMarkers = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/line/Shapes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LinesWithShapes: () => React.JSX.Element;

package/build/plugins/d3/examples/line/Shapes.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { DashStyle } from '../../../../constants';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
+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 = () => Object.values(DashStyle);
+const getShapesOrder = () => selectShapes().sort((a, b) => SHAPES[a] - SHAPES[b]);
+const SHAPES_IN_ORDER = getShapesOrder();
+function prepareData() {
+    const games = nintendoGames.filter((d) => {
+        return d.date && d.user_score;
+    });
+    const byGenre = (genre) => {
+        return games
+            .filter((d) => d.genres.includes(genre))
+            .map((d) => {
+            return {
+                x: d.date,
+                y: d.user_score,
+                label: d.title,
+            };
+        });
+    };
+    return {
+        series: {
+            options: {
+                line: {
+                    lineWidth: 2,
+                },
+            },
+            data: [
+                {
+                    name: '3D',
+                    type: 'line',
+                    data: byGenre('3D'),
+                },
+                {
+                    name: '2D',
+                    type: 'line',
+                    data: byGenre('2D'),
+                },
+                {
+                    name: 'Strategy',
+                    type: 'line',
+                    data: byGenre('Strategy'),
+                },
+                {
+                    name: 'Shooter',
+                    type: 'line',
+                    data: byGenre('Shooter'),
+                },
+            ],
+        },
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Release date',
+            },
+        },
+        yAxis: [
+            {
+                title: { text: 'User score' },
+                labels: {
+                    enabled: true,
+                },
+                ticks: {
+                    pixelInterval: 120,
+                },
+            },
+        ],
+    };
+}
+export const LinesWithShapes = () => {
+    const data = prepareData();
+    data.series.data.forEach((graph, i) => {
+        graph.dashStyle = SHAPES_IN_ORDER[i % SHAPES_IN_ORDER.length];
+    });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: data })));
+};

package/build/plugins/d3/examples/pie/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const gamesByPlatform = groups(nintendoGames, (item) => item.platform);
     return gamesByPlatform.map(([platform, games]) => ({
@@ -26,5 +27,6 @@ export const BasicPie = () => {
             style: { fontSize: '12px', fontWeight: 'normal' },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/pie/Donut.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const gamesByPlatform = groups(nintendoGames, (d) => d.esrb_rating || 'unknown');
     return gamesByPlatform.map(([value, games]) => ({
@@ -27,5 +28,6 @@ export const Donut = () => {
             style: { fontSize: '12px', fontWeight: 'normal' },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/scatter/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { dateTime } from '@gravity-ui/date-utils';
 function prepareData() {
     const dataset = nintendoGames.filter((d) => d.date && d.user_score);
     const data = dataset.map((d) => ({
@@ -62,5 +63,6 @@ export const Basic = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/renderer/components/Legend.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import { select, line as lineGenerator } from 'd3';
+import { symbol, select, line as lineGenerator } from 'd3';
+import { getSymbol } from '../utils';
 import { block } from '../../../../utils/cn';
+import { getLineDashArray } from '../hooks/useShapes/utils';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
     const { align, offsetWidth, width, contentWidth } = args;
@@ -90,6 +92,9 @@ function renderLegendSymbol(args) {
                     .attr('stroke-width', d.symbol.strokeWidth)
                     .attr('class', className)
                     .style('stroke', color);
+                if (d.dashStyle) {
+                    element.attr('stroke-dasharray', getLineDashArray(d.dashStyle, d.symbol.strokeWidth));
+                }
                 break;
             }
             case 'rect': {
@@ -105,6 +110,23 @@ function renderLegendSymbol(args) {
                     .style('fill', color);
                 break;
             }
+            case 'symbol': {
+                const y = legend.lineHeight / 2;
+                element
+                    .append('svg:path')
+                    .attr('d', () => {
+                    const scatterSymbol = getSymbol(d.symbol.symbolType);
+                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
+                    // https://d3js.org/d3-shape/symbol#symbol
+                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
+                })
+                    .attr('transform', () => {
+                    return 'translate(' + x + ',' + y + ')';
+                })
+                    .attr('class', className)
+                    .style('fill', color);
+                break;
+            }
         }
     });
 }

package/build/plugins/d3/renderer/components/styles.css

@@ -29,6 +29,10 @@
   stroke: var(--g-color-text-hint);
 }
 
+.chartkit-d3-legend__item-symbol_shape_symbol.chartkit-d3-legend__item-symbol_unselected {
+  fill: var(--g-color-text-hint);
+}
+
 .chartkit-d3-legend__item-text {
   fill: var(--g-color-text-secondary);
   alignment-baseline: before-edge;

package/build/plugins/d3/renderer/hooks/useSeries/constants.d.ts

@@ -1,7 +1,6 @@
-import type { BaseTextStyle } from '../../../../../types';
-import type { PointMarkerHalo } from '../../../../../types/widget-data/marker';
+import type { BaseTextStyle, Halo } from '../../../../../types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
 export declare const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export declare const DEFAULT_DATALABELS_PADDING = 5;
 export declare const DEFAULT_DATALABELS_STYLE: BaseTextStyle;
-export declare const DEFAULT_HALO_OPTIONS: Required<PointMarkerHalo>;
+export declare const DEFAULT_HALO_OPTIONS: Required<Halo>;

package/build/plugins/d3/renderer/hooks/useSeries/constants.js

@@ -9,5 +9,5 @@ export const DEFAULT_DATALABELS_STYLE = {
 export const DEFAULT_HALO_OPTIONS = {
     enabled: true,
     opacity: 0.25,
-    radius: 10,
+    size: 10,
 };

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line-series.d.ts

@@ -1,8 +1,10 @@
 import { ScaleOrdinal } from 'd3';
+import { DashStyle } from '../../../../../constants';
 import { ChartKitWidgetSeriesOptions, LineSeries } from '../../../../../types';
 import { PreparedLineSeries, PreparedLegend } from './types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
 export declare const DEFAULT_LINE_WIDTH = 1;
+export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: string;

package/build/plugins/d3/renderer/hooks/useSeries/prepare-line-series.js

@@ -1,9 +1,11 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
+import { DashStyle, LineCap } from '../../../../../constants';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, } from './constants';
 import { getRandomCKId } from '../../../../../utils';
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
 export const DEFAULT_LINE_WIDTH = 1;
+export const DEFAULT_DASH_STYLE = DashStyle.Solid;
 export const DEFAULT_MARKER = {
     enabled: false,
     symbol: 'circle',
@@ -11,6 +13,11 @@ export const DEFAULT_MARKER = {
     borderWidth: 0,
     borderColor: '',
 };
+function prepareLinecap(dashStyle, series, seriesOptions) {
+    const defaultLineCap = dashStyle === DashStyle.Solid ? LineCap.Round : LineCap.None;
+    const lineCapFromSeriesOptions = get(seriesOptions, 'line.linecap', defaultLineCap);
+    return get(series, 'linecap', lineCapFromSeriesOptions);
+}
 function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
@@ -43,11 +50,13 @@ function prepareMarker(series, seriesOptions) {
 export function prepareLineSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    const defaultDashStyle = get(seriesOptions, 'line.dashStyle', DEFAULT_DASH_STYLE);
     return seriesList.map((series) => {
         var _a, _b;
         const id = getRandomCKId();
         const name = series.name || '';
         const color = series.color || colorScale(name);
+        const dashStyle = get(series, 'dashStyle', defaultDashStyle);
         const prepared = {
             type: series.type,
             color,
@@ -67,6 +76,8 @@ export function prepareLineSeries(args) {
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
             },
             marker: prepareMarker(series, seriesOptions),
+            dashStyle: dashStyle,
+            linecap: prepareLinecap(dashStyle, series, seriesOptions),
         };
         return prepared;
     }, []);