@gravity-ui/chartkit 4.12.0 → 4.14.0

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

@@ -1,8 +1,16 @@
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_LEGEND_SYMBOL_PADDING, } from './constants';
+import merge from 'lodash/merge';
+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_MARKER = {
+    enabled: false,
+    symbol: 'circle',
+    radius: 4,
+    borderWidth: 0,
+    borderColor: '',
+};
 function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
@@ -14,6 +22,24 @@ function prepareLineLegendSymbol(series, seriesOptions) {
         strokeWidth: get(series, 'lineWidth', defaultLineWidth),
     };
 }
+function prepareMarker(series, seriesOptions) {
+    var _a;
+    const seriesHoverState = get(seriesOptions, 'line.states.hover');
+    const markerNormalState = Object.assign({}, DEFAULT_MARKER, (_a = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.line) === 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 prepareLineSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
@@ -22,7 +48,7 @@ export function prepareLineSeries(args) {
         const id = getRandomCKId();
         const name = series.name || '';
         const color = series.color || colorScale(name);
-        return {
+        const prepared = {
             type: series.type,
             color,
             lineWidth: get(series, 'lineWidth', defaultLineWidth),
@@ -40,6 +66,8 @@ export function prepareLineSeries(args) {
                 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/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';
@@ -104,7 +104,66 @@ export type PreparedLineSeries = {
         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 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;
+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 {};

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

@@ -0,0 +1,194 @@
+import React from 'react';
+import { color, line as lineGenerator, area as areaGenerator, select, symbol, symbolCircle, symbolSquare, } from 'd3';
+import get from 'lodash/get';
+import { block } from '../../../../../../utils/cn';
+import { filterOverlappingLabels } from '../../../utils';
+import { setActiveState } from '../utils';
+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);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'area.states.hover');
+        const inactiveOptions = get(seriesOptions, 'area.states.inactive');
+        const line = lineGenerator()
+            .x((d) => d.x)
+            .y((d) => d.y);
+        svgElement.selectAll('*').remove();
+        const shapeSelection = svgElement
+            .selectAll('shape')
+            .data(preparedData)
+            .join('g')
+            .attr('class', b('series'));
+        shapeSelection
+            .append('path')
+            .attr('class', b('line'))
+            .attr('d', (d) => line(d.points))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', (d) => d.width)
+            .attr('stroke-linejoin', 'round')
+            .attr('stroke-linecap', 'round');
+        const area = areaGenerator()
+            .x((d) => d.x)
+            .y0((d) => d.y0)
+            .y1((d) => d.y);
+        shapeSelection
+            .append('path')
+            .attr('class', b('region'))
+            .attr('d', (d) => area(d.points))
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => d.opacity);
+        let dataLabels = preparedData.reduce((acc, d) => {
+            return acc.concat(d.labels);
+        }, []);
+        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+            dataLabels = filterOverlappingLabels(dataLabels);
+        }
+        const labelsSelection = svgElement
+            .selectAll('text')
+            .data(dataLabels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null);
+        const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
+        const markerSelection = svgElement
+            .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);
+        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) => {
+            var _a;
+            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'area');
+            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
+            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
+            shapeSelection.datum((d, index, list) => {
+                var _a;
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.id === selectedSeriesId);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    let strokeColor = d.color || '';
+                    if (d.hovered) {
+                        strokeColor =
+                            ((_a = color(strokeColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
+                                strokeColor;
+                    }
+                    elementSelection.selectAll(`.${b('line')}`).attr('stroke', strokeColor);
+                    elementSelection.selectAll(`.${b('region')}`).attr('fill', strokeColor);
+                }
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.id),
+                    datum: d,
+                });
+            });
+            labelsSelection.datum((d, index, list) => {
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                    datum: d,
+                });
+            });
+            markerSelection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                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');
+                }
+                if (d.point.series.marker.states.normal.enabled) {
+                    const isActive = Boolean(!inactiveEnabled ||
+                        !selectedSeriesId ||
+                        selectedSeriesId === d.point.series.id);
+                    setActiveState({
+                        element: list[index],
+                        state: inactiveOptions,
+                        active: isActive,
+                        datum: d,
+                    });
+                }
+                return d;
+            });
+        });
+        return () => {
+            dispatcher.on('hover-shape.area', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return React.createElement("g", { ref: ref, className: b() });
+};

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

@@ -0,0 +1,11 @@
+import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAreaData } from './types';
+export declare const prepareAreaData: (args: {
+    series: PreparedAreaSeries[];
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale;
+}) => PreparedAreaData[];

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

@@ -0,0 +1,114 @@
+import { group, sort } from 'd3';
+import { getXValue, getYValue } from '../utils';
+import { getLabelsSize, getLeftPosition } from '../../../utils';
+function getLabelData(point, series, xMax) {
+    const text = String(point.data.label || point.data.y);
+    const style = series.dataLabels.style;
+    const size = getLabelsSize({ labels: [text], style });
+    const labelData = {
+        text,
+        x: point.x,
+        y: point.y - series.dataLabels.padding,
+        style,
+        size: { width: size.maxWidth, height: size.maxHeight },
+        textAnchor: 'middle',
+        series: series,
+        active: true,
+    };
+    const left = getLeftPosition(labelData);
+    if (left < 0) {
+        labelData.x = labelData.x + Math.abs(left);
+    }
+    else {
+        const right = left + labelData.size.width;
+        if (right > xMax) {
+            labelData.x = labelData.x - xMax - right;
+        }
+    }
+    return labelData;
+}
+function getXValues(series, xAxis, xScale) {
+    const xValues = series.reduce((acc, s) => {
+        s.data.forEach((d) => {
+            const key = String(d.x);
+            if (!acc.has(key)) {
+                acc.set(key, getXValue({ point: d, xAxis, xScale }));
+            }
+        });
+        return acc;
+    }, new Map());
+    if (xAxis.type === 'category') {
+        return (xAxis.categories || []).reduce((acc, category) => {
+            const xValue = xValues.get(category);
+            if (typeof xValue === 'number') {
+                acc.push([category, xValue]);
+            }
+            return acc;
+        }, []);
+    }
+    return sort(Array.from(xValues), ([_x, xValue]) => xValue);
+}
+export const prepareAreaData = (args) => {
+    const { series, xAxis, xScale, yScale } = args;
+    const yAxis = args.yAxis[0];
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax / (1 - xAxis.maxPadding);
+    const [yMin, _yMax] = yScale.range();
+    return Array.from(group(series, (s) => s.stackId)).reduce((result, [_stackId, seriesStack]) => {
+        const xValues = getXValues(seriesStack, xAxis, xScale);
+        const accumulatedYValues = new Map();
+        xValues.forEach(([key]) => {
+            accumulatedYValues.set(key, 0);
+        });
+        const seriesStackData = seriesStack.reduce((acc, s) => {
+            const seriesData = s.data.reduce((m, d) => {
+                return m.set(String(d.x), d);
+            }, new Map());
+            const points = xValues.reduce((pointsAcc, [x, xValue]) => {
+                const accumulatedYValue = accumulatedYValues.get(x) || 0;
+                const d = seriesData.get(x) ||
+                    {
+                        x,
+                        // FIXME: think about how to break the series into separate areas(null Y values)
+                        y: 0,
+                    };
+                const yValue = getYValue({ point: d, yAxis, yScale }) - accumulatedYValue;
+                accumulatedYValues.set(x, yMin - yValue);
+                pointsAcc.push({
+                    y0: yMin - accumulatedYValue,
+                    x: xValue,
+                    y: yValue,
+                    data: d,
+                    series: s,
+                });
+                return pointsAcc;
+            }, []);
+            let labels = [];
+            if (s.dataLabels.enabled) {
+                labels = points.map((p) => getLabelData(p, s, xMax));
+            }
+            let markers = [];
+            if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
+                markers = points.map((p) => ({
+                    point: p,
+                    active: true,
+                    hovered: false,
+                }));
+            }
+            acc.push({
+                points,
+                markers,
+                labels,
+                color: s.color,
+                opacity: s.opacity,
+                width: s.lineWidth,
+                series: s,
+                hovered: false,
+                active: true,
+                id: s.id,
+            });
+            return acc;
+        }, []);
+        return result.concat(seriesStackData);
+    }, []);
+};

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

@@ -0,0 +1,27 @@
+import { PreparedAreaSeries } from '../../useSeries/types';
+import { AreaSeriesData } from '../../../../../../types';
+import { LabelData } from '../../../types';
+export type PointData = {
+    y0: number;
+    x: number;
+    y: number;
+    data: AreaSeriesData;
+    series: PreparedAreaSeries;
+};
+export type MarkerData = {
+    point: PointData;
+    active: boolean;
+    hovered: boolean;
+};
+export type PreparedAreaData = {
+    id: string;
+    points: PointData[];
+    markers: MarkerData[];
+    color: string;
+    opacity: number;
+    width: number;
+    series: PreparedAreaSeries;
+    hovered: boolean;
+    active: boolean;
+    labels: LabelData[];
+};

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

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

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

@@ -10,8 +10,9 @@ import type { PreparedLineData } from './line/types';
 import type { PreparedBarYData } from './bar-y/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter';
+import type { PreparedAreaData } from './area/types';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

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

@@ -8,6 +8,8 @@ import { preparePieData } from './pie/prepare-data';
 import { prepareLineData } from './line/prepare-data';
 import { LineSeriesShapes } from './line';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
+import { AreaSeriesShapes } from './area';
+import { prepareAreaData } from './area/prepare-data';
 import './styles.css';
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, } = args;
@@ -62,6 +64,20 @@ export const useShapes = (args) => {
                     }
                     break;
                 }
+                case 'area': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareAreaData({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
                 case 'scatter': {
                     if (xScale && yScale) {
                         const preparedData = prepareScatterData({