@gravity-ui/chartkit 4.17.0 → 4.18.1

package/build/i18n/keysets/en.json

@@ -33,7 +33,8 @@
     "label_invalid-axis-datetime-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"datetime\". Only numbers are allowed.",
     "label_invalid-axis-linear-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"linear\". Numbers and nulls are allowed.",
     "label_invalid-pie-data-value": "It seems you are trying to use inappropriate data type for \"value\" value. Only numbers are allowed.",
-    "label_invalid-series-type": "It seems you haven't defined \"series.type\" property, or defined it incorrectly. Available values: [{{types}}]."
+    "label_invalid-series-type": "It seems you haven't defined \"series.type\" property, or defined it incorrectly. Available values: [{{types}}].",
+    "label_invalid-series-property": "It seems you are trying to use inappropriate value for \"{{key}}\", or defined it incorrectly. Available values: [{{values}}]."
   },
   "highcharts": {
     "reset-zoom-title": "Reset zoom",

package/build/i18n/keysets/ru.json

@@ -35,7 +35,8 @@
     "label_invalid-axis-datetime-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"datetime\". Допускается только использование чисел.",
     "label_invalid-axis-linear-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"linear\". Допускается использование чисел и значений null.",
     "label_invalid-pie-data-value": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"value\". Допускается только использование чисел.",
-    "label_invalid-series-type": "Похоже, что вы не указали значение \"series.type\" или указали его неверно. Доступные значения: [{{types}}]."
+    "label_invalid-series-type": "Похоже, что вы не указали значение \"series.type\" или указали его неверно. Доступные значения: [{{types}}].",
+    "label_invalid-series-property": "Похоже, что вы пытаетесь использовать недопустимое значение для \"{{key}}\", или указали его неверно. Доступные значения: [{{values}}]."
   },
   "highcharts": {
     "reset-zoom-title": "Сбросить увеличение",

package/build/plugins/d3/examples/area/PercentStacking.d.ts

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

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

@@ -0,0 +1,47 @@
+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() {
+    const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? String(new Date(d.date).getFullYear()) : 'unknown'));
+    const series = grouped.map(([platform, gamesByYear]) => {
+        const platformGames = Object.fromEntries(gamesByYear) || {};
+        return {
+            name: platform,
+            data: years.reduce((acc, year) => {
+                if (year in platformGames) {
+                    acc.push({
+                        x: year,
+                        y: platformGames[year].length,
+                    });
+                }
+                return acc;
+            }, []),
+        };
+    });
+    return { series };
+}
+export const PercentStackingArea = () => {
+    const { series } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'area',
+            stacking: 'percent',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        xAxis: {
+            type: 'category',
+            categories: years,
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/examples/bar-x/PercentStack.d.ts

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

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { groups } from 'd3';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
+function prepareData() {
+    const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown'));
+    const categories = [];
+    const series = grouped.map(([platform, years]) => {
+        return {
+            name: platform,
+            data: years.map(([year, list]) => {
+                categories.push(String(year));
+                return {
+                    x: String(year),
+                    y: list.length,
+                };
+            }),
+        };
+    });
+    return { categories, series };
+}
+export const PercentStackColumns = () => {
+    const { series, categories } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'bar-x',
+            stacking: 'percent',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        xAxis: {
+            type: 'category',
+            categories: categories.sort(),
+            title: {
+                text: 'Release year',
+            },
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/examples/bar-y/PercentStacking.d.ts

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

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { groups } from 'd3';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
+function prepareData() {
+    const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown'));
+    const categories = [];
+    const series = grouped.map(([platform, years]) => {
+        return {
+            name: platform,
+            data: years.map(([year, list]) => {
+                categories.push(String(year));
+                return {
+                    y: String(year),
+                    x: list.length,
+                };
+            }),
+        };
+    });
+    return { categories, series };
+}
+export const PercentStackingBars = () => {
+    const { series, categories } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'bar-y',
+            stacking: 'percent',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        yAxis: [
+            {
+                type: 'category',
+                categories: categories.sort(),
+                title: {
+                    text: 'Release year',
+                },
+            },
+        ],
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/examples/pie/DonutWithTotals.d.ts

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { groups } from 'd3';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
+import { CustomShapeRenderer } from '../../utils';
+function prepareData() {
+    const gamesByPlatform = groups(nintendoGames, (d) => d.esrb_rating || 'unknown');
+    return gamesByPlatform.map(([value, games]) => ({
+        name: value,
+        value: games.length,
+    }));
+}
+export const DonutWithTotals = () => {
+    const data = prepareData();
+    const totals = data.reduce((sum, d) => sum + d.value, 0);
+    const widgetData = {
+        series: {
+            data: [
+                {
+                    type: 'pie',
+                    innerRadius: '50%',
+                    data: data,
+                    renderCustomShape: CustomShapeRenderer.pieCenterText(`${totals}`),
+                },
+            ],
+        },
+        legend: { enabled: true },
+        title: {
+            text: 'ESRB ratings',
+            style: { fontSize: '12px', fontWeight: 'normal' },
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
 import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
@@ -42,26 +41,6 @@ export const Basic = () => {
                 text: 'Release dates',
             },
         },
-        tooltip: {
-            renderer: (d) => {
-                var _a;
-                const point = (_a = d.hovered[0]) === null || _a === void 0 ? void 0 : _a.data;
-                if (!point) {
-                    return null;
-                }
-                const title = point.custom.title;
-                const score = point.custom.user_score;
-                const date = dateTime({ input: point.custom.date }).format('DD MMM YYYY');
-                return (React.createElement(React.Fragment, null,
-                    React.createElement("b", null, title),
-                    React.createElement("br", null),
-                    "Release date: ",
-                    date,
-                    React.createElement("br", null),
-                    "User score: ",
-                    score));
-            },
-        },
     };
     return (React.createElement(ExampleWrapper, null,
         React.createElement(ChartKit, { type: "d3", data: widgetData })));

package/build/plugins/d3/index.d.ts

@@ -1,5 +1,6 @@
 import { ChartKitPlugin } from '../../types';
 export * from './types';
+export * from './utils';
 /**
  * It is an experemental plugin
  *

package/build/plugins/d3/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 export * from './types';
+export * from './utils';
 /**
  * It is an experemental plugin
  *

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

@@ -7,6 +7,7 @@ import { Chart } from './components';
 import { validateData } from './validation';
 const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     const { data, onLoad, onRender, onChartLoad } = props;
+    const validatedData = React.useRef();
     const ref = React.useRef(null);
     const debounced = React.useRef();
     const [dimensions, setDimensions] = React.useState();
@@ -44,9 +45,10 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
         // dimensions initialize
         handleResize();
     }, [handleResize]);
-    React.useEffect(() => {
+    if (validatedData.current !== data) {
         validateData(data);
-    }, [data]);
+        validatedData.current = data;
+    }
     React.useLayoutEffect(() => {
         if (onChartLoad) {
             onChartLoad({});

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

@@ -2,6 +2,7 @@ import React from 'react';
 import throttle from 'lodash/throttle';
 import { bisector, pointer, sort, group } from 'd3';
 import { extractD3DataFromNode, isNodeContainsD3Data } from '../../utils';
+import get from 'lodash/get';
 const THROTTLE_DELAY = 50;
 const isNodeContainsData = (node) => {
     return isNodeContainsD3Data(node);
@@ -66,7 +67,7 @@ export const TooltipTriggerArea = (args) => {
     const rectRef = React.useRef(null);
     const xBarData = React.useMemo(() => {
         const result = shapesData
-            .filter((sd) => sd.series.type === 'bar-x')
+            .filter((sd) => get(sd, 'series.type') === 'bar-x')
             .map((sd) => ({ x: sd.x, data: sd }));
         return sort(result, (item) => item.x);
     }, [shapesData]);
@@ -77,13 +78,13 @@ export const TooltipTriggerArea = (args) => {
             return acc.concat(sd.points.map((d) => ({
                 x: d.x,
                 data: d.data,
-                series: sd.series,
+                series: d.series,
             })));
         }, []);
         return sort(result, (item) => item.x);
     }, [shapesData]);
     const barYData = React.useMemo(() => {
-        const barYShapeData = shapesData.filter((sd) => sd.series.type === 'bar-y');
+        const barYShapeData = shapesData.filter((sd) => get(sd, 'series.type') === 'bar-y');
         const result = Array.from(group(barYShapeData, (sd) => sd.y)).map(([y, shapes]) => {
             const yValue = y + shapes[0].height / 2;
             return {
@@ -93,7 +94,7 @@ export const TooltipTriggerArea = (args) => {
                     return {
                         x: preparedData.x + preparedData.width,
                         data: preparedData.data,
-                        series: shape.series,
+                        series: preparedData.series,
                     };
                 }), (item) => item.x),
             };

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

@@ -1,6 +1,8 @@
 import type { BaseTextStyle, Halo } from '../../../../../types';
+import { PointMarkerOptions } from '../../../../../types/widget-data/marker';
 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>;
+export declare const DEFAULT_POINT_MARKER_OPTIONS: Omit<Required<PointMarkerOptions>, 'enabled'>;

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

@@ -9,5 +9,11 @@ export const DEFAULT_DATALABELS_STYLE = {
 export const DEFAULT_HALO_OPTIONS = {
     enabled: true,
     opacity: 0.25,
-    size: 10,
+    size: 6,
+};
+export const DEFAULT_POINT_MARKER_OPTIONS = {
+    radius: 4,
+    borderColor: '',
+    borderWidth: 0,
+    symbol: 'circle',
 };

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

@@ -4,10 +4,10 @@ import { PreparedAreaSeries, PreparedLegend } from './types';
 export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
-    symbol: string;
+    symbol: "circle" | "diamond" | "square" | "triangle" | "triangle-down";
     radius: number;
-    borderWidth: number;
     borderColor: string;
+    borderWidth: number;
 };
 type PrepareAreaSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

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

@@ -1,16 +1,10 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, } from './constants';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_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: '',
-};
+export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: false });
 function prepareMarker(series, seriesOptions) {
     var _a;
     const seriesHoverState = get(seriesOptions, 'area.states.hover');

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

@@ -7,10 +7,10 @@ export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
-    symbol: string;
+    symbol: "circle" | "diamond" | "square" | "triangle" | "triangle-down";
     radius: number;
-    borderWidth: number;
     borderColor: string;
+    borderWidth: number;
 };
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

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

@@ -1,18 +1,12 @@
 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 { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_POINT_MARKER_OPTIONS, } 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',
-    radius: 4,
-    borderWidth: 0,
-    borderColor: '',
-};
+export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: false });
 function prepareLinecap(dashStyle, series, seriesOptions) {
     const defaultLineCap = dashStyle === DashStyle.Solid ? LineCap.Round : LineCap.None;
     const lineCapFromSeriesOptions = get(seriesOptions, 'line.linecap', defaultLineCap);

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

@@ -51,6 +51,7 @@ export function preparePieSeries(args) {
                     },
                 },
             },
+            renderCustomShape: series.renderCustomShape,
         };
         return result;
     });

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

@@ -0,0 +1,11 @@
+import { ScaleOrdinal } from 'd3';
+import type { PreparedLegend, PreparedScatterSeries } from './types';
+import type { ChartKitWidgetSeriesOptions, ScatterSeries } from '../../../../../types';
+interface PrepareScatterSeriesArgs {
+    colorScale: ScaleOrdinal<string, string>;
+    series: ScatterSeries[];
+    legend: PreparedLegend;
+    seriesOptions?: ChartKitWidgetSeriesOptions;
+}
+export declare function prepareScatterSeries(args: PrepareScatterSeriesArgs): PreparedScatterSeries[];
+export {};

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

@@ -0,0 +1,45 @@
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import { getSymbolType } from '../../utils';
+import { prepareLegendSymbol } from './utils';
+import { DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS } from './constants';
+import { getRandomCKId } from '../../../../../utils';
+function prepareMarker(series, seriesOptions, index) {
+    const seriesHoverState = get(seriesOptions, 'scatter.states.hover');
+    const markerNormalState = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: true, symbol: series.symbolType || getSymbolType(index) });
+    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 prepareScatterSeries(args) {
+    const { colorScale, series, seriesOptions, legend } = args;
+    return series.map((s, index) => {
+        const id = getRandomCKId();
+        const name = 'name' in s && s.name ? s.name : '';
+        const symbolType = s.symbolType || getSymbolType(index);
+        const prepared = {
+            id,
+            type: s.type,
+            name,
+            color: get(s, 'color', colorScale(name)),
+            visible: get(s, 'visible', true),
+            legend: {
+                enabled: get(s, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(s, symbolType),
+            },
+            data: s.data,
+            marker: prepareMarker(s, seriesOptions, index),
+        };
+        return prepared;
+    }, []);
+}

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

@@ -1,28 +1,10 @@
-import cloneDeep from 'lodash/cloneDeep';
-import get from 'lodash/get';
-import { getSymbolType } from '../../utils';
-import { prepareLineSeries } from './prepare-line-series';
+import { prepareLineSeries } from './prepare-line';
 import { prepareBarXSeries } from './prepare-bar-x';
 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, index } = args;
-    const preparedSeries = cloneDeep(series);
-    const name = 'name' in series && series.name ? series.name : '';
-    const symbolType = (series.symbolType || getSymbolType(index));
-    preparedSeries.symbolType = symbolType;
-    preparedSeries.color = 'color' in series && series.color ? series.color : colorScale(name);
-    preparedSeries.name = name;
-    preparedSeries.visible = get(preparedSeries, 'visible', true);
-    preparedSeries.legend = {
-        enabled: get(preparedSeries, 'legend.enabled', legend.enabled),
-        symbol: prepareLegendSymbol(series, symbolType),
-    };
-    return [preparedSeries];
-}
+import { prepareScatterSeries } from './prepare-scatter';
 export function prepareSeries(args) {
     const { type, series, seriesOptions, legend, colorScale } = args;
     switch (type) {
@@ -39,10 +21,7 @@ export function prepareSeries(args) {
             return prepareBarYSeries({ series: series, legend, colorScale });
         }
         case 'scatter': {
-            return series.reduce((acc, singleSeries, index) => {
-                acc.push(...prepareAxisRelatedSeries({ series: singleSeries, legend, colorScale, index }));
-                return acc;
-            }, []);
+            return prepareScatterSeries({ series: series, legend, colorScale });
         }
         case 'line': {
             return prepareLineSeries({

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

@@ -10,7 +10,7 @@ export type PathLegendSymbol = {
 } & Required<PathLegendSymbolOptions>;
 export type SymbolLegendSymbol = {
     shape: 'symbol';
-    symbolType: SymbolType;
+    symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
 export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
 export type PreparedLegend = Required<ChartKitWidgetLegend> & {
@@ -57,12 +57,30 @@ type BasePreparedSeries = {
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];
     data: ScatterSeriesData[];
-    symbolType: SymbolType;
+    marker: {
+        states: {
+            normal: {
+                symbol: `${SymbolType}`;
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderWidth: number;
+                borderColor: string;
+                halo: PreparedHaloOptions;
+            };
+        };
+    };
 } & BasePreparedSeries;
 export type PreparedBarXSeries = {
     type: BarXSeries['type'];
     data: BarXSeriesData[];
     stackId: string;
+    stacking: BarXSeries['stacking'];
     dataLabels: {
         enabled: boolean;
         inside: boolean;
@@ -75,6 +93,7 @@ export type PreparedBarYSeries = {
     type: BarYSeries['type'];
     data: BarYSeriesData[];
     stackId: string;
+    stacking: BarYSeries['stacking'];
     dataLabels: {
         enabled: boolean;
         inside: boolean;
@@ -110,6 +129,7 @@ export type PreparedPieSeries = {
             halo: PreparedHaloOptions;
         };
     };
+    renderCustomShape?: PieSeries['renderCustomShape'];
 } & BasePreparedSeries;
 export type PreparedLineSeries = {
     type: LineSeries['type'];
@@ -124,7 +144,7 @@ export type PreparedLineSeries = {
     marker: {
         states: {
             normal: {
-                symbol: string;
+                symbol: `${SymbolType}`;
                 enabled: boolean;
                 radius: number;
                 borderWidth: number;
@@ -158,7 +178,7 @@ export type PreparedAreaSeries = {
     marker: {
         states: {
             normal: {
-                symbol: string;
+                symbol: `${SymbolType}`;
                 enabled: boolean;
                 radius: number;
                 borderWidth: number;

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

@@ -3,5 +3,5 @@ import { ChartKitWidgetSeries } from '../../../../../types';
 import { SymbolType } from '../../../../../constants';
 export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
 export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
-export declare function prepareLegendSymbol(series: ChartKitWidgetSeries, symbolType?: SymbolType): PreparedLegendSymbol;
+export declare function prepareLegendSymbol(series: ChartKitWidgetSeries, symbolType?: `${SymbolType}`): PreparedLegendSymbol;
 export declare function getSeriesStackId(series: StackedSeries): string;

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

@@ -27,7 +27,7 @@ const getCommonStackId = memoize(getRandomCKId);
 export function getSeriesStackId(series) {
     let stackId = series.stackId;
     if (!stackId) {
-        stackId = series.stacking === 'normal' ? getCommonStackId() : getRandomCKId();
+        stackId = series.stacking ? getCommonStackId() : getRandomCKId();
     }
     return stackId;
 }