@gravity-ui/chartkit 4.13.0 → 4.14.0

package/build/i18n/keysets/en.json

@@ -28,7 +28,12 @@
   "error": {
     "label_no-data": "No data",
     "label_unknown-plugin": "Unknown plugin type \"{{type}}\"",
-    "label_unknown-error": "Unknown error"
+    "label_unknown-error": "Unknown error",
+    "label_invalid-axis-category-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"category\". Strings and numbers are allowed.",
+    "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}}]."
   },
   "highcharts": {
     "reset-zoom-title": "Reset zoom",

package/build/i18n/keysets/ru.json

@@ -30,7 +30,12 @@
   "error": {
     "label_no-data": "Нет данных",
     "label_unknown-plugin": "Неизвестный тип плагина \"{{type}}\"",
-    "label_unknown-error": "Неизвестная ошибка"
+    "label_unknown-error": "Неизвестная ошибка",
+    "label_invalid-axis-category-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"category\". Допускается использование строк и чисел.",
+    "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}}]."
   },
   "highcharts": {
     "reset-zoom-title": "Сбросить увеличение",

package/build/libs/chartkit-error/chartkit-error.d.ts

@@ -5,6 +5,7 @@ export type ChartKitErrorArgs = {
 };
 export declare const CHARTKIT_ERROR_CODE: {
     NO_DATA: string;
+    INVALID_DATA: string;
     UNKNOWN: string;
     UNKNOWN_PLUGIN: string;
     TOO_MANY_LINES: string;

package/build/libs/chartkit-error/chartkit-error.js

@@ -1,5 +1,6 @@
 export const CHARTKIT_ERROR_CODE = {
     NO_DATA: 'ERR.CK.NO_DATA',
+    INVALID_DATA: 'ERR.CK.INVALID_DATA',
     UNKNOWN: 'ERR.CK.UNKNOWN_ERROR',
     UNKNOWN_PLUGIN: 'ERR.CK.UNKNOWN_PLUGIN',
     TOO_MANY_LINES: 'ERR.CK.TOO_MANY_LINES',

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

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

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import nintendoGames from '../nintendoGames';
+function prepareData() {
+    const games = nintendoGames.filter((d) => {
+        return d.date && d.user_score && d.genres.includes('Puzzle');
+    });
+    return [
+        {
+            name: 'User score',
+            type: 'area',
+            data: games.map((d) => {
+                return {
+                    x: Number(d.date),
+                    y: Number(d.user_score),
+                };
+            }),
+        },
+    ];
+}
+export const Basic = () => {
+    const series = prepareData();
+    const widgetData = {
+        title: {
+            text: 'User score (puzzle genre)',
+        },
+        series: {
+            data: series,
+        },
+        xAxis: {
+            type: 'datetime',
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

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

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

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

@@ -0,0 +1,48 @@
+import { groups } from 'd3';
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+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 StackedArea = () => {
+    const { series } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'area',
+            stacking: 'normal',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        xAxis: {
+            type: 'category',
+            categories: years,
+            title: {
+                text: 'Release year',
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

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

@@ -2,14 +2,20 @@ import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
 import nintendoGames from '../nintendoGames';
 import { groups } from 'd3';
-function prepareData(field = 'platform') {
+function prepareData({ field, filterNulls } = {
+    field: 'platform',
+}) {
     const gamesByPlatform = groups(nintendoGames, (item) => item[field]);
-    const data = gamesByPlatform.map(([value, games]) => ({
+    let resultData = gamesByPlatform;
+    if (filterNulls) {
+        resultData = gamesByPlatform.filter(([value]) => typeof value === 'number');
+    }
+    const data = resultData.map(([value, games]) => ({
         x: value,
         y: games.length,
     }));
     return {
-        categories: gamesByPlatform.map(([key]) => key),
+        categories: resultData.map(([key]) => key),
         series: [
             {
                 data,
@@ -40,7 +46,7 @@ export const BasicBarXChart = () => {
     return React.createElement(ChartKit, { type: "d3", data: widgetData });
 };
 export const BasicLinearBarXChart = () => {
-    const { series } = prepareData('meta_score');
+    const { series } = prepareData({ field: 'meta_score' });
     const widgetData = {
         series: {
             data: series.map((s) => ({
@@ -58,7 +64,7 @@ export const BasicLinearBarXChart = () => {
     return React.createElement(ChartKit, { type: "d3", data: widgetData });
 };
 export const BasicDateTimeBarXChart = () => {
-    const { series } = prepareData('date');
+    const { series } = prepareData({ field: 'date', filterNulls: true });
     const widgetData = {
         series: {
             data: series.map((s) => ({

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/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,7 @@
-import { BaseTextStyle } from '../../../../../types';
+import type { BaseTextStyle } from '../../../../../types';
+import type { PointMarkerHalo } 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<PointMarkerHalo>;

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,
+    radius: 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.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_LEGEND_SYMBOL_PADDING, } 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;
@@ -31,11 +31,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: {

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);
@@ -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,4 +1,4 @@
-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';
 export type RectLegendSymbol = {
     shape: 'rect';
@@ -127,6 +127,43 @@ export type PreparedLineSeries = {
         };
     };
 } & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries;
+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: {
+                    enabled: boolean;
+                    opacity: number;
+                    radius: number;
+                };
+            };
+        };
+    };
+} & BasePreparedSeries;
+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;