@gravity-ui/chartkit 4.13.0 → 4.15.0

package/build/plugins/d3/renderer/D3Widget.js

@@ -4,35 +4,13 @@ import debounce from 'lodash/debounce';
 import afterFrame from 'afterframe';
 import { getRandomCKId, measurePerformance } from '../../../utils';
 import { Chart } from './components';
+import { validateData } from './validation';
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     const { data, onLoad, onRender, onChartLoad } = props;
     const ref = React.useRef(null);
     const debounced = React.useRef();
     const [dimensions, setDimensions] = React.useState();
     const performanceMeasure = React.useRef(measurePerformance());
-    React.useLayoutEffect(() => {
-        if (onChartLoad) {
-            onChartLoad({});
-        }
-    }, [onChartLoad]);
-    React.useLayoutEffect(() => {
-        if (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) {
-            if (!performanceMeasure.current) {
-                performanceMeasure.current = measurePerformance();
-            }
-            afterFrame(() => {
-                var _a;
-                const renderTime = (_a = performanceMeasure.current) === null || _a === void 0 ? void 0 : _a.end();
-                onRender === null || onRender === void 0 ? void 0 : onRender({
-                    renderTime,
-                });
-                onLoad === null || onLoad === void 0 ? void 0 : onLoad({
-                    widgetRendering: renderTime,
-                });
-                performanceMeasure.current = null;
-            });
-        }
-    }, [data, onRender, onLoad, dimensions]);
     const handleResize = React.useCallback(() => {
         var _a;
         const parentElement = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -66,6 +44,32 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
         // dimensions initialize
         handleResize();
     }, [handleResize]);
+    React.useEffect(() => {
+        validateData(data);
+    }, [data]);
+    React.useLayoutEffect(() => {
+        if (onChartLoad) {
+            onChartLoad({});
+        }
+    }, [onChartLoad]);
+    React.useLayoutEffect(() => {
+        if (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) {
+            if (!performanceMeasure.current) {
+                performanceMeasure.current = measurePerformance();
+            }
+            afterFrame(() => {
+                var _a;
+                const renderTime = (_a = performanceMeasure.current) === null || _a === void 0 ? void 0 : _a.end();
+                onRender === null || onRender === void 0 ? void 0 : onRender({
+                    renderTime,
+                });
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad({
+                    widgetRendering: renderTime,
+                });
+                performanceMeasure.current = null;
+            });
+        }
+    }, [data, onRender, onLoad, dimensions]);
     return (React.createElement("div", { ref: ref, style: {
             width: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || '100%',
             height: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || '100%',

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { select, line as lineGenerator } from 'd3';
 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 +91,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': {

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -32,6 +32,7 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
         switch (series.type) {
             case 'scatter':
             case 'line':
+            case 'area':
             case 'bar-x': {
                 const xRow = getXRowData(xAxis, data);
                 const yRow = getYRowData(yAxis, data);

package/build/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.js

@@ -72,7 +72,7 @@ export const TooltipTriggerArea = (args) => {
     }, [shapesData]);
     const xLineData = React.useMemo(() => {
         const result = shapesData
-            .filter((sd) => sd.series.type === 'line')
+            .filter((sd) => ['line', 'area'].includes(sd.series.type))
             .reduce((acc, sd) => {
             return acc.concat(sd.points.map((d) => ({
                 x: d.x,

package/build/plugins/d3/renderer/constants/defaults/axis.d.ts

@@ -1,3 +1,4 @@
+import { ChartKitWidgetAxisType } from '../../../../../types';
 export declare const axisLabelsDefaults: {
     margin: number;
     padding: number;
@@ -12,3 +13,4 @@ export declare const yAxisTitleDefaults: {
     margin: number;
     fontSize: string;
 };
+export declare const DEFAULT_AXIS_TYPE: ChartKitWidgetAxisType;

package/build/plugins/d3/renderer/constants/defaults/axis.js

@@ -9,3 +9,4 @@ const axisTitleDefaults = {
 };
 export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
 export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });
+export const DEFAULT_AXIS_TYPE = 'linear';

package/build/plugins/d3/renderer/constants/defaults/series-options.js

@@ -9,7 +9,7 @@ export const seriesOptionsDefaults = {
                 brightness: 0.3,
             },
             inactive: {
-                enabled: true,
+                enabled: false,
                 opacity: 0.5,
             },
         },
@@ -24,7 +24,7 @@ export const seriesOptionsDefaults = {
                 brightness: 0.3,
             },
             inactive: {
-                enabled: true,
+                enabled: false,
                 opacity: 0.5,
             },
         },
@@ -36,7 +36,7 @@ export const seriesOptionsDefaults = {
                 brightness: 0.3,
             },
             inactive: {
-                enabled: true,
+                enabled: false,
                 opacity: 0.5,
             },
         },
@@ -48,7 +48,7 @@ export const seriesOptionsDefaults = {
                 brightness: 0.3,
             },
             inactive: {
-                enabled: true,
+                enabled: false,
                 opacity: 0.5,
             },
         },
@@ -60,7 +60,19 @@ export const seriesOptionsDefaults = {
                 brightness: 0.3,
             },
             inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+    area: {
+        states: {
+            hover: {
                 enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
                 opacity: 0.5,
             },
         },

package/build/plugins/d3/renderer/hooks/useAxisScales/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
 import get from 'lodash/get';
 import { getOnlyVisibleSeries, getDataCategoryValue, getDomainDataYBySeries, getDomainDataXBySeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+import { DEFAULT_AXIS_TYPE } from '../../constants';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
@@ -18,7 +19,7 @@ const filterCategoriesByVisibleSeries = (args) => {
     return categories.filter((c) => visibleCategories.has(c));
 };
 export function createYScale(axis, series, boundsHeight) {
-    const yType = get(axis, 'type', 'linear');
+    const yType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const yMin = get(axis, 'min');
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
@@ -78,7 +79,7 @@ function calculateXAxisPadding(series) {
 }
 export function createXScale(axis, series, boundsWidth) {
     const xMin = get(axis, 'min');
-    const xType = get(axis, 'type', 'linear');
+    const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const xCategories = get(axis, 'categories');
     const xTimestamps = get(axis, 'timestamps');
     const maxPadding = get(axis, 'maxPadding', 0);

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -24,7 +24,8 @@ const getAxisLabelMaxWidth = (args) => {
 };
 function getAxisMin(axis, series) {
     const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    if (typeof min === 'undefined' && (series === null || series === void 0 ? void 0 : series.some((s) => s.type === 'bar-x'))) {
+    const seriesWithVolume = ['bar-x', 'area'];
+    if (typeof min === 'undefined' && (series === null || series === void 0 ? void 0 : series.some((s) => seriesWithVolume.includes(s.type)))) {
         return 0;
     }
     return min;

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

@@ -1,5 +1,6 @@
-import { BaseTextStyle } from '../../../../../types';
+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<Halo>;

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

@@ -6,3 +6,8 @@ export const DEFAULT_DATALABELS_STYLE = {
     fontWeight: 'bold',
     fontColor: 'var(--d3-data-labels)',
 };
+export const DEFAULT_HALO_OPTIONS = {
+    enabled: true,
+    opacity: 0.25,
+    size: 10,
+};

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

@@ -0,0 +1,19 @@
+import { ScaleOrdinal } from 'd3';
+import { ChartKitWidgetSeriesOptions, AreaSeries } from '../../../../../types';
+import { PreparedAreaSeries, PreparedLegend } from './types';
+export declare const DEFAULT_LINE_WIDTH = 1;
+export declare const DEFAULT_MARKER: {
+    enabled: boolean;
+    symbol: string;
+    radius: number;
+    borderWidth: number;
+    borderColor: string;
+};
+type PrepareAreaSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: AreaSeries[];
+    seriesOptions?: ChartKitWidgetSeriesOptions;
+    legend: PreparedLegend;
+};
+export declare function prepareArea(args: PrepareAreaSeriesArgs): PreparedAreaSeries[];
+export {};

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

@@ -0,0 +1,66 @@
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, } from './constants';
+import { getRandomCKId } from '../../../../../utils';
+import { getSeriesStackId, prepareLegendSymbol } from './utils';
+export const DEFAULT_LINE_WIDTH = 1;
+export const DEFAULT_MARKER = {
+    enabled: false,
+    symbol: 'circle',
+    radius: 4,
+    borderWidth: 0,
+    borderColor: '',
+};
+function prepareMarker(series, seriesOptions) {
+    var _a;
+    const seriesHoverState = get(seriesOptions, 'area.states.hover');
+    const markerNormalState = Object.assign({}, DEFAULT_MARKER, (_a = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.area) === null || _a === void 0 ? void 0 : _a.marker, series.marker);
+    const hoveredMarkerDefaultOptions = {
+        enabled: true,
+        radius: markerNormalState.radius,
+        borderWidth: 1,
+        borderColor: '#ffffff',
+        halo: DEFAULT_HALO_OPTIONS,
+    };
+    return {
+        states: {
+            normal: markerNormalState,
+            hover: merge(hoveredMarkerDefaultOptions, seriesHoverState === null || seriesHoverState === void 0 ? void 0 : seriesHoverState.marker),
+        },
+    };
+}
+export function prepareArea(args) {
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
+    const defaultAreaWidth = get(seriesOptions, 'area.lineWidth', DEFAULT_LINE_WIDTH);
+    const defaultOpacity = get(seriesOptions, 'area.opacity', 0.75);
+    return seriesList.map((series) => {
+        var _a, _b;
+        const id = getRandomCKId();
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        const prepared = {
+            type: series.type,
+            color,
+            opacity: get(series, 'opacity', defaultOpacity),
+            lineWidth: get(series, 'lineWidth', defaultAreaWidth),
+            name,
+            id,
+            visible: get(series, 'visible', true),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            data: series.data,
+            stacking: series.stacking,
+            stackId: getSeriesStackId(series),
+            dataLabels: {
+                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                allowOverlap: get(series, 'dataLabels.allowOverlap', false),
+            },
+            marker: prepareMarker(series, seriesOptions),
+        };
+        return prepared;
+    }, []);
+}

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-x.js

@@ -1,18 +1,13 @@
 import get from 'lodash/get';
 import { getRandomCKId } from '../../../../../utils';
-import { prepareLegendSymbol } from './utils';
+import { getSeriesStackId, prepareLegendSymbol } from './utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 export function prepareBarXSeries(args) {
     const { colorScale, series: seriesList, legend } = args;
-    const commonStackId = getRandomCKId();
     return seriesList.map((series) => {
         var _a, _b, _c, _d, _e;
         const name = series.name || '';
         const color = series.color || colorScale(name);
-        let stackId = series.stackId;
-        if (!stackId) {
-            stackId = series.stacking === 'normal' ? commonStackId : getRandomCKId();
-        }
         return {
             type: series.type,
             color,
@@ -25,7 +20,7 @@ export function prepareBarXSeries(args) {
             },
             data: series.data,
             stacking: series.stacking,
-            stackId,
+            stackId: getSeriesStackId(series),
             dataLabels: {
                 enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
                 inside: typeof ((_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.inside) === 'boolean'

package/build/plugins/d3/renderer/hooks/useSeries/prepare-bar-y.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { getRandomCKId } from '../../../../../utils';
-import { prepareLegendSymbol } from './utils';
+import { getSeriesStackId, prepareLegendSymbol } from './utils';
 import { DEFAULT_DATALABELS_STYLE } from './constants';
 import { getLabelsSize } from '../../utils';
 function prepareDataLabels(series) {
@@ -23,14 +23,9 @@ function prepareDataLabels(series) {
 }
 export function prepareBarYSeries(args) {
     const { colorScale, series: seriesList, legend } = args;
-    const commonStackId = getRandomCKId();
     return seriesList.map((series) => {
         const name = series.name || '';
         const color = series.color || colorScale(name);
-        let stackId = series.stackId;
-        if (!stackId) {
-            stackId = series.stacking === 'normal' ? commonStackId : getRandomCKId();
-        }
         return {
             type: series.type,
             color,
@@ -43,7 +38,7 @@ export function prepareBarYSeries(args) {
             },
             data: series.data,
             stacking: series.stacking,
-            stackId,
+            stackId: getSeriesStackId(series),
             dataLabels: prepareDataLabels(series),
         };
     }, []);

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 { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_LEGEND_SYMBOL_PADDING, } from './constants';
+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) || {};
@@ -31,11 +38,7 @@ function prepareMarker(series, seriesOptions) {
         radius: markerNormalState.radius,
         borderWidth: 1,
         borderColor: '#ffffff',
-        halo: {
-            enabled: true,
-            opacity: 0.25,
-            radius: 10,
-        },
+        halo: DEFAULT_HALO_OPTIONS,
     };
     return {
         states: {
@@ -47,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,
@@ -71,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;
     }, []);

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

@@ -1,7 +1,8 @@
-import { PieSeries } from '../../../../../types';
+import { ChartKitWidgetSeriesOptions, PieSeries } from '../../../../../types';
 import { PreparedLegend, PreparedSeries } from './types';
 type PreparePieSeriesArgs = {
     series: PieSeries;
+    seriesOptions?: ChartKitWidgetSeriesOptions;
     legend: PreparedLegend;
 };
 export declare function preparePieSeries(args: PreparePieSeriesArgs): PreparedSeries[];

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

@@ -5,10 +5,11 @@ import get from 'lodash/get';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function preparePieSeries(args) {
-    const { series, legend } = args;
+    const { series, seriesOptions, legend } = args;
     const dataNames = series.data.map((d) => d.name);
     const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
     const stackId = getRandomCKId();
+    const seriesHoverState = get(seriesOptions, 'pie.states.hover');
     const preparedSeries = series.data.map((dataItem) => {
         var _a, _b, _c;
         const result = {
@@ -41,6 +42,15 @@ export function preparePieSeries(args) {
             radius: series.radius || '100%',
             innerRadius: series.innerRadius || 0,
             stackId,
+            states: {
+                hover: {
+                    halo: {
+                        enabled: get(seriesHoverState, 'halo.enabled', true),
+                        opacity: get(seriesHoverState, 'halo.opacity', 0.25),
+                        size: get(seriesHoverState, 'halo.size', 10),
+                    },
+                },
+            },
         };
         return result;
     });

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

@@ -6,6 +6,7 @@ import { prepareBarYSeries } from './prepare-bar-y';
 import { prepareLegendSymbol } from './utils';
 import { ChartKitError } from '../../../../../libs';
 import { preparePieSeries } from './prepare-pie';
+import { prepareArea } from './prepare-area';
 function prepareAxisRelatedSeries(args) {
     const { colorScale, series, legend } = args;
     const preparedSeries = cloneDeep(series);
@@ -24,7 +25,7 @@ export function prepareSeries(args) {
     switch (type) {
         case 'pie': {
             return series.reduce((acc, singleSeries) => {
-                acc.push(...preparePieSeries({ series: singleSeries, legend }));
+                acc.push(...preparePieSeries({ series: singleSeries, seriesOptions, legend }));
                 return acc;
             }, []);
         }
@@ -48,6 +49,14 @@ export function prepareSeries(args) {
                 colorScale,
             });
         }
+        case 'area': {
+            return prepareArea({
+                series: series,
+                seriesOptions,
+                legend,
+                colorScale,
+            });
+        }
         default: {
             throw new ChartKitError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

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 } from '../../../../../types';
+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,15 +130,46 @@ 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'];
+    data: AreaSeriesData[];
+    stacking: AreaSeries['stacking'];
+    stackId: string;
+    lineWidth: number;
+    opacity: number;
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+        allowOverlap: boolean;
+    };
+    marker: {
+        states: {
+            normal: {
+                symbol: string;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: PreparedHaloOptions;
             };
         };
     };
 } & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
+export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

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

@@ -1,5 +1,6 @@
-import { PreparedLegendSymbol, PreparedSeries } from './types';
+import { PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
 import { ChartKitWidgetSeries } from '../../../../../types';
 export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
 export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
 export declare function prepareLegendSymbol(series: ChartKitWidgetSeries): PreparedLegendSymbol;
+export declare function getSeriesStackId(series: StackedSeries): string;

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

@@ -1,4 +1,6 @@
+import memoize from 'lodash/memoize';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+import { getRandomCKId } from '../../../../../utils';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
@@ -22,3 +24,11 @@ export function prepareLegendSymbol(series) {
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }
+const getCommonStackId = memoize(getRandomCKId);
+export function getSeriesStackId(series) {
+    let stackId = series.stackId;
+    if (!stackId) {
+        stackId = series.stacking === 'normal' ? getCommonStackId() : getRandomCKId();
+    }
+    return stackId;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedAreaData } from './types';
+type Args = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedAreaData[];
+    seriesOptions: PreparedSeriesOptions;
+};
+export declare const AreaSeriesShapes: (args: Args) => React.JSX.Element;
+export {};