@gravity-ui/chartkit 4.14.0 → 4.15.0

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

@@ -1,5 +1,6 @@
 import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, AreaSeries, AreaSeriesData } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
+import { DashStyle, LineCap } from '../../../../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -22,6 +23,7 @@ export type LegendItem = {
     symbol: PreparedLegendSymbol;
     textWidth: number;
     visible?: boolean;
+    dashStyle?: DashStyle;
 };
 export type LegendConfig = {
     offset: {
@@ -33,6 +35,11 @@ export type LegendConfig = {
         maxPage: number;
     };
 };
+export type PreparedHaloOptions = {
+    enabled: boolean;
+    opacity: number;
+    size: number;
+};
 type BasePreparedSeries = {
     color: string;
     name: string;
@@ -93,6 +100,11 @@ export type PreparedPieSeries = {
         distance: number;
         connectorCurve: ConnectorCurve;
     };
+    states: {
+        hover: {
+            halo: PreparedHaloOptions;
+        };
+    };
 } & BasePreparedSeries;
 export type PreparedLineSeries = {
     type: LineSeries['type'];
@@ -118,14 +130,12 @@ export type PreparedLineSeries = {
                 radius: number;
                 borderWidth: number;
                 borderColor: string;
-                halo: {
-                    enabled: boolean;
-                    opacity: number;
-                    radius: number;
-                };
+                halo: PreparedHaloOptions;
             };
         };
     };
+    dashStyle: DashStyle;
+    linecap: LineCap;
 } & BasePreparedSeries;
 export type PreparedAreaSeries = {
     type: AreaSeries['type'];
@@ -154,11 +164,7 @@ export type PreparedAreaSeries = {
                 radius: number;
                 borderWidth: number;
                 borderColor: string;
-                halo: {
-                    enabled: boolean;
-                    opacity: number;
-                    radius: number;
-                };
+                halo: PreparedHaloOptions;
             };
         };
     };

package/build/plugins/d3/renderer/hooks/useShapes/area/index.js

@@ -1,43 +1,11 @@
 import React from 'react';
-import { color, line as lineGenerator, area as areaGenerator, select, symbol, symbolCircle, symbolSquare, } from 'd3';
+import { color, line as lineGenerator, area as areaGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
 import { setActiveState } from '../utils';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 const b = block('d3-area');
-function setMarker(selection, state) {
-    selection
-        .attr('d', (d) => {
-        const radius = d.point.series.marker.states[state].radius +
-            d.point.series.marker.states[state].borderWidth;
-        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
-    })
-        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
-        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
-}
-function getMarkerSymbol(type, radius) {
-    switch (type) {
-        case 'square': {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolSquare, size)();
-        }
-        case 'circle':
-        default: {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolCircle, size)();
-        }
-    }
-}
-const getMarkerVisibility = (d) => {
-    const markerStates = d.point.series.marker.states;
-    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
-    return enabled ? '' : 'hidden';
-};
-const getMarkerHaloVisibility = (d) => {
-    const markerStates = d.point.series.marker.states;
-    const enabled = markerStates.hover.halo.enabled && d.hovered;
-    return enabled ? '' : 'hidden';
-};
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
@@ -100,28 +68,7 @@ export const AreaSeriesShapes = (args) => {
             .selectAll('marker')
             .data(markers)
             .join('g')
-            .attr('class', b('marker'))
-            .attr('visibility', getMarkerVisibility)
-            .attr('transform', (d) => {
-            return `translate(${d.point.x},${d.point.y})`;
-        });
-        markerSelection
-            .append('path')
-            .attr('class', b('marker-halo'))
-            .attr('d', (d) => {
-            const type = d.point.series.marker.states.normal.symbol;
-            const radius = d.point.series.marker.states.hover.halo.radius;
-            return getMarkerSymbol(type, radius);
-        })
-            .attr('fill', (d) => d.point.series.color)
-            .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
-            .attr('z-index', -1)
-            .attr('visibility', getMarkerHaloVisibility);
-        markerSelection
-            .append('path')
-            .attr('class', b('marker-symbol'))
-            .call(setMarker, 'normal')
-            .attr('fill', (d) => d.point.series.color);
+            .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         dispatcher.on('hover-shape.area', (data) => {
@@ -165,12 +112,8 @@ export const AreaSeriesShapes = (args) => {
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
-                    elementSelection
-                        .select(`.${b('marker-halo')}`)
-                        .attr('visibility', getMarkerHaloVisibility);
-                    elementSelection
-                        .select(`.${b('marker-symbol')}`)
-                        .call(setMarker, hovered ? 'hover' : 'normal');
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
                 }
                 if (d.point.series.marker.states.normal.enabled) {
                     const isActive = Boolean(!inactiveEnabled ||

package/build/plugins/d3/renderer/hooks/useShapes/line/index.js

@@ -1,43 +1,11 @@
 import React from 'react';
-import { color, line as lineGenerator, select, symbol, symbolCircle, symbolSquare } from 'd3';
+import { color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
-import { setActiveState } from '../utils';
+import { getLineDashArray, setActiveState } from '../utils';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 const b = block('d3-line');
-function setMarker(selection, state) {
-    selection
-        .attr('d', (d) => {
-        const radius = d.point.series.marker.states[state].radius +
-            d.point.series.marker.states[state].borderWidth;
-        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
-    })
-        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
-        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
-}
-function getMarkerSymbol(type, radius) {
-    switch (type) {
-        case 'square': {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolSquare, size)();
-        }
-        case 'circle':
-        default: {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolCircle, size)();
-        }
-    }
-}
-const getMarkerVisibility = (d) => {
-    const markerStates = d.point.series.marker.states;
-    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
-    return enabled ? '' : 'hidden';
-};
-const getMarkerHaloVisibility = (d) => {
-    const markerStates = d.point.series.marker.states;
-    const enabled = markerStates.hover.halo.enabled && d.hovered;
-    return enabled ? '' : 'hidden';
-};
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
@@ -61,8 +29,9 @@ export const LineSeriesShapes = (args) => {
             .attr('fill', 'none')
             .attr('stroke', (d) => d.color)
             .attr('stroke-width', (d) => d.width)
-            .attr('stroke-linejoin', 'round')
-            .attr('stroke-linecap', 'round');
+            .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) => {
             return acc.concat(d.labels);
         }, []);
@@ -86,28 +55,7 @@ export const LineSeriesShapes = (args) => {
             .selectAll('marker')
             .data(markers)
             .join('g')
-            .attr('class', b('marker'))
-            .attr('visibility', getMarkerVisibility)
-            .attr('transform', (d) => {
-            return `translate(${d.point.x},${d.point.y})`;
-        });
-        markerSelection
-            .append('path')
-            .attr('class', b('marker-halo'))
-            .attr('d', (d) => {
-            const type = d.point.series.marker.states.normal.symbol;
-            const radius = d.point.series.marker.states.hover.halo.radius;
-            return getMarkerSymbol(type, radius);
-        })
-            .attr('fill', (d) => d.point.series.color)
-            .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
-            .attr('z-index', -1)
-            .attr('visibility', getMarkerHaloVisibility);
-        markerSelection
-            .append('path')
-            .attr('class', b('marker-symbol'))
-            .call(setMarker, 'normal')
-            .attr('fill', (d) => d.point.series.color);
+            .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         dispatcher.on('hover-shape.line', (data) => {
@@ -150,12 +98,8 @@ export const LineSeriesShapes = (args) => {
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
-                    elementSelection
-                        .select(`.${b('marker-halo')}`)
-                        .attr('visibility', getMarkerHaloVisibility);
-                    elementSelection
-                        .select(`.${b('marker-symbol')}`)
-                        .call(setMarker, hovered ? 'hover' : 'normal');
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
                 }
                 if (d.point.series.marker.states.normal.enabled) {
                     const isActive = Boolean(!inactiveEnabled ||

package/build/plugins/d3/renderer/hooks/useShapes/line/prepare-data.js

@@ -51,7 +51,7 @@ export const prepareLineData = (args) => {
                 hovered: false,
             }));
         }
-        acc.push({
+        const result = {
             points,
             markers,
             labels,
@@ -61,7 +61,10 @@ export const prepareLineData = (args) => {
             hovered: false,
             active: true,
             id: s.id,
-        });
+            dashStyle: s.dashStyle,
+            linecap: s.linecap,
+        };
+        acc.push(result);
         return acc;
     }, []);
 };

package/build/plugins/d3/renderer/hooks/useShapes/line/types.d.ts

@@ -1,6 +1,7 @@
 import { PreparedLineSeries } from '../../useSeries/types';
 import { LineSeriesData } from '../../../../../../types';
 import { LabelData } from '../../../types';
+import { DashStyle, LineCap } from '../../../../../../constants';
 export type PointData = {
     x: number;
     y: number;
@@ -22,4 +23,6 @@ export type PreparedLineData = {
     hovered: boolean;
     active: boolean;
     labels: LabelData[];
+    dashStyle: DashStyle;
+    linecap: LineCap;
 };

package/build/plugins/d3/renderer/hooks/useShapes/marker.d.ts

@@ -0,0 +1,12 @@
+import { BaseType, Selection } from 'd3';
+import { MarkerData as LineMarkerData } from './line/types';
+import { MarkerData as AreaMarkerData } from './area/types';
+type MarkerData = LineMarkerData | AreaMarkerData;
+export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType | SVGGElement, T, SVGGElement, unknown>): Selection<SVGGElement | BaseType, T, SVGGElement, unknown>;
+export declare function getMarkerVisibility(d: MarkerData): "" | "hidden";
+export declare function getMarkerHaloVisibility(d: MarkerData): "" | "hidden";
+export declare function setMarker<T extends BaseType, D extends MarkerData>(selection: Selection<T, D, BaseType | null, unknown>, state: 'normal' | 'hover'): void;
+export declare function getMarkerSymbol(type: string, radius: number): string | null;
+export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
+export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/marker.js

@@ -0,0 +1,70 @@
+import { symbol, symbolCircle, symbolSquare } from 'd3';
+import { block } from '../../../../../utils/cn';
+const b = block('d3-marker');
+const haloClassName = b('halo');
+const symbolClassName = b('symbol');
+export function renderMarker(selection) {
+    const markerSelection = selection
+        .attr('class', b('wrapper'))
+        .attr('visibility', getMarkerVisibility)
+        .attr('transform', (d) => {
+        return `translate(${d.point.x},${d.point.y})`;
+    });
+    markerSelection
+        .append('path')
+        .attr('class', haloClassName)
+        .attr('d', (d) => {
+        const type = d.point.series.marker.states.normal.symbol;
+        const radius = d.point.series.marker.states.hover.halo.size;
+        return getMarkerSymbol(type, radius);
+    })
+        .attr('fill', (d) => d.point.series.color)
+        .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
+        .attr('z-index', -1)
+        .attr('visibility', getMarkerHaloVisibility);
+    markerSelection
+        .append('path')
+        .attr('class', symbolClassName)
+        .call(setMarker, 'normal')
+        .attr('fill', (d) => d.point.series.color);
+    return markerSelection;
+}
+export function getMarkerVisibility(d) {
+    const markerStates = d.point.series.marker.states;
+    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
+    return enabled ? '' : 'hidden';
+}
+export function getMarkerHaloVisibility(d) {
+    const markerStates = d.point.series.marker.states;
+    const enabled = markerStates.hover.halo.enabled && d.hovered;
+    return enabled ? '' : 'hidden';
+}
+export function setMarker(selection, state) {
+    selection
+        .attr('d', (d) => {
+        const radius = d.point.series.marker.states[state].radius +
+            d.point.series.marker.states[state].borderWidth;
+        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
+    })
+        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
+        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
+}
+export function getMarkerSymbol(type, radius) {
+    switch (type) {
+        case 'square': {
+            const size = Math.pow(radius, 2) * Math.PI;
+            return symbol(symbolSquare, size)();
+        }
+        case 'circle':
+        default: {
+            const size = Math.pow(radius, 2) * Math.PI;
+            return symbol(symbolCircle, size)();
+        }
+    }
+}
+export function selectMarkerHalo(parentSelection) {
+    return parentSelection.select(`.${haloClassName}`);
+}
+export function selectMarkerSymbol(parentSelection) {
+    return parentSelection.select(`.${symbolClassName}`);
+}

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import type { Dispatch } from 'd3';
+import type { Dispatch, PieArcDatum } from 'd3';
 import { PreparedSeriesOptions } from '../../useSeries/types';
-import { PreparedPieData } from './types';
+import { PreparedPieData, SegmentData } from './types';
 type PreparePieSeriesArgs = {
     dispatcher: Dispatch<object>;
     preparedData: PreparedPieData[];
     seriesOptions: PreparedSeriesOptions;
     svgContainer: SVGSVGElement | null;
 };
+export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
 export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.js

@@ -7,6 +7,10 @@ import { line as lineGenerator } from 'd3-shape';
 import { setEllipsisForOverflowTexts } from '../../../utils';
 import { getCurveFactory } from './utils';
 const b = block('d3-pie');
+export function getHaloVisibility(d) {
+    const enabled = d.data.pie.halo.enabled && d.data.hovered;
+    return enabled ? '' : 'hidden';
+}
 export function PieSeriesShapes(args) {
     const { dispatcher, preparedData, seriesOptions, svgContainer } = args;
     const ref = React.useRef(null);
@@ -30,6 +34,27 @@ export function PieSeriesShapes(args) {
         })
             .style('stroke', (pieData) => pieData.borderColor)
             .style('stroke-width', (pieData) => pieData.borderWidth);
+        shapesSelection
+            .selectAll('halo')
+            .data((pieData) => {
+            if (pieData.halo.enabled) {
+                return pieData.segments;
+            }
+            return [];
+        })
+            .join('path')
+            .attr('d', (d) => {
+            const arcGenerator = arc()
+                .innerRadius(d.data.pie.innerRadius)
+                .outerRadius(d.data.pie.radius + d.data.pie.halo.size)
+                .cornerRadius(d.data.pie.borderRadius);
+            return arcGenerator(d);
+        })
+            .attr('class', b('halo'))
+            .attr('fill', (d) => d.data.color)
+            .attr('opacity', (d) => d.data.pie.halo.opacity)
+            .attr('z-index', -1)
+            .attr('visibility', getHaloVisibility);
         shapesSelection
             .selectAll(segmentSelector)
             .data((pieData) => pieData.segments)
@@ -108,6 +133,7 @@ export function PieSeriesShapes(args) {
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             shapesSelection.datum((_d, index, list) => {
                 const pieSelection = select(list[index]);
+                const haloSelection = pieSelection.selectAll(`.${b('halo')}`);
                 pieSelection
                     .selectAll(segmentSelector)
                     .datum((d, i, elements) => {
@@ -122,6 +148,8 @@ export function PieSeriesShapes(args) {
                             }
                             return initialColor;
                         });
+                        const currentSegmentHalo = haloSelection.nodes()[i];
+                        select(currentSegmentHalo).attr('visibility', getHaloVisibility);
                     }
                     setActiveState({
                         element: elements[i],

package/build/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.js

@@ -15,12 +15,13 @@ const getCenter = (boundsWidth, boundsHeight, center) => {
     return [resultX, resultY];
 };
 export function preparePieData(args) {
-    const { series: prepapredSeries, boundsWidth, boundsHeight } = args;
+    const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
-    const groupedPieSeries = group(prepapredSeries, (pieSeries) => pieSeries.stackId);
+    const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
     return Array.from(groupedPieSeries).map(([stackId, items]) => {
         var _a, _b, _c;
-        const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = items[0];
+        const series = items[0];
+        const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
         const radius = (_a = calculateNumericProperty({ value: seriesRadius, base: maxRadius })) !== null && _a !== void 0 ? _a : maxRadius;
         const data = {
             id: stackId,
@@ -34,6 +35,11 @@ export function preparePieData(args) {
             borderRadius,
             series: items[0],
             connectorCurve: dataLabels.connectorCurve,
+            halo: {
+                enabled: series.states.hover.halo.enabled,
+                opacity: series.states.hover.halo.opacity,
+                size: series.states.hover.halo.size,
+            },
         };
         const segments = items.map((item) => {
             return {

package/build/plugins/d3/renderer/hooks/useShapes/pie/types.d.ts

@@ -31,4 +31,9 @@ export type PreparedPieData = {
     borderColor: string;
     series: PreparedPieSeries;
     connectorCurve: ConnectorCurve;
+    halo: {
+        enabled: boolean;
+        opacity: number;
+        size: number;
+    };
 };

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -22,7 +22,7 @@ export function ScatterSeriesShape(props) {
         const hoverOptions = get(seriesOptions, 'scatter.states.hover');
         const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
         const selection = svgElement
-            .selectAll(`circle`)
+            .selectAll('circle')
             .data(preparedData, shapeKey)
             .join((enter) => enter.append('circle').attr('class', b('point')), (update) => update, (exit) => exit.remove())
             .attr('fill', (d) => d.data.color || d.series.color || '')

package/build/plugins/d3/renderer/hooks/useShapes/utils.d.ts

@@ -2,6 +2,7 @@ import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../../../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
+import { DashStyle } from '../../../../../constants';
 export declare function getXValue(args: {
     point: {
         x?: number | string;
@@ -25,3 +26,4 @@ export declare function setActiveState<T extends {
     state: BasicInactiveState | undefined;
     active: boolean;
 }): T;
+export declare const getLineDashArray: (dashStyle: DashStyle, strokeWidth?: number) => string;

package/build/plugins/d3/renderer/hooks/useShapes/utils.js

@@ -34,3 +34,20 @@ export function setActiveState(args) {
     }
     return datum;
 }
+export const getLineDashArray = (dashStyle, strokeWidth = 2) => {
+    const value = dashStyle.toLowerCase();
+    const arrayValue = value
+        .replace('shortdashdotdot', '3,1,1,1,1,1,')
+        .replace('shortdashdot', '3,1,1,1')
+        .replace('shortdot', '1,1,')
+        .replace('shortdash', '3,1,')
+        .replace('longdash', '8,3,')
+        .replace(/dot/g, '1,3,')
+        .replace('dash', '4,3,')
+        .replace(/,$/, '')
+        .split(',')
+        .map((part) => {
+        return `${parseInt(part, 10) * strokeWidth}`;
+    });
+    return arrayValue.join(',').replace(/NaN/g, 'none');
+};

package/build/plugins/d3/renderer/validation/index.js

@@ -1,16 +1,10 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
+import { SeriesType } from '../../../../constants';
 import { ChartKitError, CHARTKIT_ERROR_CODE } from '../../../../libs';
 import { i18n } from '../../../../i18n';
 import { DEFAULT_AXIS_TYPE } from '../constants';
-const AVAILABLE_SERIES_TYPES = [
-    'area',
-    'bar-x',
-    'bar-y',
-    'line',
-    'pie',
-    'scatter',
-];
+const AVAILABLE_SERIES_TYPES = Object.values(SeriesType);
 const validateXYSeries = (args) => {
     const { series, xAxis, yAxis } = args;
     const xType = get(xAxis, 'type', DEFAULT_AXIS_TYPE);

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -1155,9 +1155,6 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     var _a;
                     if (chartType === 'column' || chartType === 'bar') {
                         this.series.forEach((seriesItem) => {
-                            if (!seriesItem.legendItem) {
-                                return;
-                            }
                             const color = seriesItem.color;
                             // The update method updates all series, and therefore,
                             // after working out the handleLegendItemMouseOverAndOut,

package/build/types/widget-data/area.d.ts

@@ -1,3 +1,4 @@
+import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
@@ -24,7 +25,7 @@ export type AreaMarkerOptions = PointMarkerOptions & {
     symbol?: AreaMarkerSymbol;
 };
 export type AreaSeries<T = any> = BaseSeries & {
-    type: 'area';
+    type: typeof SeriesType.Area;
     data: AreaSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;

package/build/types/widget-data/bar-x.d.ts

@@ -1,3 +1,4 @@
+import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetSeriesOptions } from './series';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
@@ -26,7 +27,7 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     label?: string | number;
 };
 export type BarXSeries<T = any> = BaseSeries & {
-    type: 'bar-x';
+    type: typeof SeriesType.BarX;
     data: BarXSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;

package/build/types/widget-data/bar-y.d.ts

@@ -1,3 +1,4 @@
+import { SeriesType } from '../../constants';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetSeriesOptions } from './series';
 import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
@@ -20,7 +21,7 @@ export type BarYSeriesData<T = any> = BaseSeriesData<T> & {
     label?: string | number;
 };
 export type BarYSeries<T = any> = BaseSeries & {
-    type: 'bar-y';
+    type: typeof SeriesType.BarY;
     data: BarYSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
     name: string;

package/build/types/widget-data/halo.d.ts

@@ -0,0 +1,9 @@
+/** The halo appearing around the hovered part of series(point in line-type series or slice in pie charts) */
+export type Halo = {
+    /** Enable or disable the halo */
+    enabled?: boolean;
+    /** The opacity of halo */
+    opacity?: number;
+    /** The pixel size of the halo. Radius for point markers or width of the outside slice in pie charts. */
+    size?: number;
+};

package/build/types/widget-data/halo.js

@@ -0,0 +1 @@
+export {};

package/build/types/widget-data/index.d.ts

@@ -17,6 +17,7 @@ export * from './line';
 export * from './series';
 export * from './title';
 export * from './tooltip';
+export * from './halo';
 export type ChartKitWidgetData<T = any> = {
     chart?: ChartKitWidgetChart;
     legend?: ChartKitWidgetLegend;

package/build/types/widget-data/index.js

@@ -11,3 +11,4 @@ export * from './line';
 export * from './series';
 export * from './title';
 export * from './tooltip';
+export * from './halo';