@gravity-ui/chartkit 3.5.0 → 4.0.0-beta.1

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

@@ -5,19 +5,16 @@ import { AxisX } from './AxisX';
 import { Legend } from './Legend';
 import { Title } from './Title';
 import { Tooltip } from './Tooltip';
-import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useAxisScales, useSeries, useShapes, useTooltip, } from '../hooks';
-import { isAxisRelatedSeries } from '../utils';
+import { useChartDimensions, useChartEvents, useChartOptions, useAxisScales, useSeries, useShapes, useTooltip, } from '../hooks';
 import './styles.css';
 const b = block('d3');
 export const Chart = (props) => {
     const { top, left, width, height, data } = props;
     // FIXME: add data validation
-    const { series } = data;
     const svgRef = React.createRef();
-    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
     const { chartHovered, handleMouseEnter, handleMouseLeave } = useChartEvents();
     const { chart, legend, title, tooltip, xAxis, yAxis } = useChartOptions(data);
-    const { boundsWidth, boundsHeight, legendHeight } = useChartDimensions({
+    const { boundsWidth, boundsHeight } = useChartDimensions({
         width,
         height,
         margin: chart.margin,
@@ -26,12 +23,11 @@ export const Chart = (props) => {
         xAxis,
         yAxis,
     });
-    const { activeLegendItems, handleLegendItemClick } = useLegend({ series: series.data });
-    const { chartSeries } = useSeries({ activeLegendItems, series: series.data });
+    const { preparedSeries, handleLegendItemClick } = useSeries({ series: data.series, legend });
     const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
-        series: chartSeries,
+        series: preparedSeries,
         xAxis,
         yAxis,
     });
@@ -43,7 +39,7 @@ export const Chart = (props) => {
         left,
         boundsWidth,
         boundsHeight,
-        series: chartSeries,
+        series: preparedSeries,
         xAxis,
         xScale,
         yAxis,
@@ -59,11 +55,11 @@ export const Chart = (props) => {
                     chart.margin.left,
                     chart.margin.top + ((title === null || title === void 0 ? void 0 : title.height) || 0),
                 ].join(',')})` },
-                hasAxisRelatedSeries && xScale && yScale && (React.createElement(React.Fragment, null,
+                xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
                 shapes),
-            legend.enabled && (React.createElement(Legend, { width: boundsWidth, offsetWidth: chart.margin.left, height: legendHeight, offsetHeight: height - legendHeight / 2, chartSeries: chartSeries, onItemClick: handleLegendItemClick }))),
+            legend.enabled && (React.createElement(Legend, { width: boundsWidth, offsetWidth: chart.margin.left, height: legend.height, legend: legend, offsetHeight: height - legend.height / 2, chartSeries: preparedSeries, onItemClick: handleLegendItemClick }))),
         React.createElement(Tooltip, { hovered: hovered, pointerPosition: pointerPosition, tooltip: tooltip, xAxis: xAxis, yAxis: yAxis[0] })));
 };

package/build/plugins/d3/renderer/components/Legend.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import type { ChartSeries, OnLegendItemClick } from '../hooks';
+import type { OnLegendItemClick, PreparedLegend, PreparedSeries } from '../hooks';
 type Props = {
     width: number;
     height: number;
+    legend: PreparedLegend;
     offsetWidth: number;
     offsetHeight: number;
-    chartSeries: ChartSeries[];
+    chartSeries: PreparedSeries[];
     onItemClick: OnLegendItemClick;
 };
 export declare const Legend: (props: Props) => React.JSX.Element;

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

@@ -1,31 +1,36 @@
 import React from 'react';
-import { select } from 'd3';
+import { select, sum } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../utils/cn';
-import { isAxisRelatedSeries } from '../utils';
 const b = block('d3-legend');
 const getLegendItems = (series) => {
     return series.reduce((acc, s) => {
-        const isAxisRelated = isAxisRelatedSeries(s);
         const legendEnabled = get(s, 'legend.enabled', true);
-        if (isAxisRelated) {
-            acc.push(s);
-        }
-        else if (!isAxisRelated && legendEnabled) {
-            acc.push(...s.data);
+        if (legendEnabled) {
+            acc.push(Object.assign(Object.assign({}, s), { symbol: s.legend.symbol }));
         }
         return acc;
     }, []);
 };
+function getLegendPosition(args) {
+    const { align, offsetWidth, width, contentWidth } = args;
+    const top = 0;
+    if (align === 'left') {
+        return { top, left: offsetWidth };
+    }
+    if (align === 'right') {
+        return { top, left: offsetWidth + width - contentWidth };
+    }
+    return { top, left: offsetWidth + width / 2 - contentWidth / 2 };
+}
 export const Legend = (props) => {
-    const { width, offsetWidth, height, offsetHeight, chartSeries, onItemClick } = props;
+    const { width, offsetWidth, height, offsetHeight, chartSeries, legend, onItemClick } = props;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return;
         }
         const legendItems = getLegendItems(chartSeries);
-        const size = 10;
         const textWidths = [0];
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
@@ -51,24 +56,30 @@ export const Legend = (props) => {
             .remove();
         legendItemTemplate
             .append('rect')
-            .attr('x', function (_d, i) {
-            return (offsetWidth +
-                i * size +
+            .attr('x', function (legendItem, i) {
+            return (i * legendItem.symbol.width +
+                i * legend.itemDistance +
+                i * legendItem.symbol.padding +
                 textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
         })
-            .attr('y', offsetHeight - size / 2)
-            .attr('width', size)
-            .attr('height', size)
+            .attr('y', (legendItem) => offsetHeight - legendItem.symbol.height / 2)
+            .attr('width', (legendItem) => {
+            return legendItem.symbol.width;
+        })
+            .attr('height', (legendItem) => legendItem.symbol.height)
+            .attr('rx', (legendItem) => legendItem.symbol.radius)
             .attr('class', b('item-shape'))
             .style('fill', function (d) {
             return d.color;
         });
         legendItemTemplate
             .append('text')
-            .attr('x', function (_d, i) {
-            return (offsetWidth +
-                i * size +
-                size +
+            .attr('x', function (legendItem, i) {
+            return (i * legendItem.symbol.width +
+                i * legend.itemDistance +
+                i * legendItem.symbol.padding +
+                legendItem.symbol.width +
+                legendItem.symbol.padding +
                 textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
         })
             .attr('y', offsetHeight)
@@ -80,6 +91,16 @@ export const Legend = (props) => {
             return ('name' in d && d.name);
         })
             .style('alignment-baseline', 'middle');
-    }, [width, offsetWidth, height, offsetHeight, chartSeries, onItemClick]);
+        const contentWidth = sum(textWidths) +
+            sum(legendItems, (item) => item.symbol.width + item.symbol.padding) +
+            legend.itemDistance * (legendItems.length - 1);
+        const { left } = getLegendPosition({
+            align: legend.align,
+            width,
+            offsetWidth,
+            contentWidth,
+        });
+        svgElement.attr('transform', `translate(${[left, 0].join(',')})`);
+    }, [width, offsetWidth, height, offsetHeight, chartSeries, onItemClick, legend]);
     return React.createElement("g", { ref: ref, width: width, height: height });
 };

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

@@ -1 +1,4 @@
 export declare const DEFAULT_PALETTE: string[];
+export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
+export declare const DEFAULT_AXIS_LABEL_PADDING = 10;
+export declare const DEFAULT_AXIS_TITLE_FONT_SIZE = "14px";

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

@@ -20,3 +20,6 @@ export const DEFAULT_PALETTE = [
     '#FFB46C',
     '#DCA3D7',
 ];
+export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
+export const DEFAULT_AXIS_LABEL_PADDING = 10;
+export const DEFAULT_AXIS_TITLE_FONT_SIZE = '14px';

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

@@ -2,9 +2,9 @@ export * from './useChartDimensions';
 export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
-export * from './useLegend';
 export * from './useAxisScales';
 export * from './useSeries';
+export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
 export * from './useTooltip/types';

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

@@ -2,9 +2,9 @@ export * from './useChartDimensions';
 export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
-export * from './useLegend';
 export * from './useAxisScales';
 export * from './useSeries';
+export * from './useSeries/types';
 export * from './useShapes';
 export * from './useTooltip';
 export * from './useTooltip/types';

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

@@ -1,11 +1,11 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
-import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
 import type { ChartOptions } from '../useChartOptions/types';
+import { PreparedSeries } from '../useSeries/types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
-    series: ChartKitWidgetSeries[];
+    series: PreparedSeries[];
     xAxis: ChartOptions['xAxis'];
     yAxis: ChartOptions['yAxis'];
 };

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
 import get from 'lodash/get';
-import { getOnlyVisibleSeries, getDomainDataXBySeries, getDomainDataYBySeries, isAxisRelatedSeries, } from '../../utils';
+import { getOnlyVisibleSeries, getDomainDataYBySeries, isAxisRelatedSeries, getDomainDataXBySeries, isSeriesWithCategoryValues, } from '../../utils';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
 const filterCategoriesByVisibleSeries = (categories, series) => {
     return categories.filter((category) => {
         return series.some((s) => {
-            return s.data.some((d) => 'category' in d && d.category === category);
+            return isSeriesWithCategoryValues(s) && s.data.some((d) => d.category === category);
         });
     });
 };

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

@@ -1,10 +1,10 @@
 import type { ChartMargin } from '../../../../../types/widget-data';
-import type { ChartOptions, PreparedAxis, PreparedTitle } from '../useChartOptions/types';
+import type { PreparedAxis, PreparedLegend, PreparedTitle } from '../useChartOptions/types';
 type Args = {
     width: number;
     height: number;
     margin: ChartMargin;
-    legend: ChartOptions['legend'];
+    legend: PreparedLegend;
     title?: PreparedTitle;
     xAxis?: PreparedAxis;
     yAxis?: PreparedAxis[];

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

@@ -1,13 +1,11 @@
-const LEGEND_LINE_HEIGHT = 15;
 export const useChartDimensions = (args) => {
     const { margin, legend, title, width, height, xAxis, yAxis } = args;
-    const legendHeight = legend.enabled ? LEGEND_LINE_HEIGHT : 0;
     const titleHeight = (title === null || title === void 0 ? void 0 : title.height) || 0;
     const xAxisTitleHeight = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.title.height) || 0;
     const yAxisTitleHeight = (yAxis === null || yAxis === void 0 ? void 0 : yAxis.reduce((acc, axis) => {
         return acc + (axis.title.height || 0);
     }, 0)) || 0;
     const boundsWidth = width - margin.right - margin.left - yAxisTitleHeight;
-    const boundsHeight = height - margin.top - margin.bottom - legendHeight - titleHeight - xAxisTitleHeight;
-    return { boundsWidth, boundsHeight, legendHeight };
+    const boundsHeight = height - margin.top - margin.bottom - legend.height - titleHeight - xAxisTitleHeight;
+    return { boundsWidth, boundsHeight, legendHeight: legend.height };
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -1,7 +1,6 @@
 import { select, max } from 'd3';
 import get from 'lodash/get';
-import { formatAxisTickLabel, getDomainDataYBySeries, isAxisRelatedSeries } from '../../utils';
-import { getHorisontalSvgTextDimensions } from './utils';
+import { formatAxisTickLabel, getDomainDataYBySeries, getHorisontalSvgTextHeight, isAxisRelatedSeries, } from '../../utils';
 const AXIS_WIDTH = 1;
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -9,8 +8,8 @@ const getAxisLabelMaxWidth = (args) => {
     let width = 0;
     switch (axis.type) {
         case 'category': {
-            const yCatigories = get(axis, 'categories', []);
-            maxDomainValue = [...yCatigories].sort((c1, c2) => c2.length - c1.length)[0];
+            const yCategories = get(axis, 'categories', []);
+            maxDomainValue = [...yCategories].sort((c1, c2) => c2.length - c1.length)[0];
             break;
         }
         case 'datetime': {
@@ -53,14 +52,14 @@ export const getPreparedChart = (args) => {
     if (hasAxisRelatedSeries) {
         marginBottom +=
             preparedXAxis.labels.padding +
-                getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedXAxis.labels.style });
+                getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedXAxis.labels.style });
         marginLeft +=
             AXIS_WIDTH +
                 preparedY1Axis.labels.padding +
                 getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
                 (preparedY1Axis.title.height || 0);
         marginTop +=
-            getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+            getHorisontalSvgTextHeight({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
         marginRight += getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
     }
     return {

package/build/plugins/d3/renderer/hooks/useChartOptions/legend.js

@@ -1,7 +1,12 @@
+const LEGEND_LINE_HEIGHT = 15;
 export const getPreparedLegend = (args) => {
     const { legend, series } = args;
-    const enabled = legend === null || legend === void 0 ? void 0 : legend.enabled;
+    const enabled = typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.data.length > 1;
+    const height = enabled ? LEGEND_LINE_HEIGHT : 0;
     return {
-        enabled: typeof enabled === 'boolean' ? enabled : series.data.length > 1,
+        align: (legend === null || legend === void 0 ? void 0 : legend.align) || 'center',
+        enabled,
+        itemDistance: (legend === null || legend === void 0 ? void 0 : legend.itemDistance) || 20,
+        height,
     };
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/title.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { getHorisontalSvgTextDimensions } from './utils';
+import { getHorisontalSvgTextHeight } from '../../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_PADDINGS = 8 * 2;
 export const getPreparedTitle = ({ title, }) => {
@@ -8,7 +8,7 @@ export const getPreparedTitle = ({ title, }) => {
         fontSize: get(title, 'style.fontSize', DEFAULT_TITLE_FONT_SIZE),
     };
     const titleHeight = titleText
-        ? getHorisontalSvgTextDimensions({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
+        ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
         : 0;
     const preparedTitle = titleText
         ? { text: titleText, style: titleStyle, height: titleHeight }

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

@@ -5,7 +5,9 @@ type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' |
 export type PreparedChart = {
     margin: ChartMargin;
 };
-export type PreparedLegend = Required<ChartKitWidgetLegend>;
+export type PreparedLegend = Required<ChartKitWidgetLegend> & {
+    height: number;
+};
 export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
     type: ChartKitWidgetAxisType;
     labels: PreparedAxisLabels;

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from './constants';
-import { getHorisontalSvgTextDimensions } from './utils';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
+import { getHorisontalSvgTextHeight } from '../../utils';
 export const getPreparedXAxis = ({ xAxis }) => {
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = {
@@ -21,7 +21,7 @@ export const getPreparedXAxis = ({ xAxis }) => {
             text: titleText,
             style: titleStyle,
             height: titleText
-                ? getHorisontalSvgTextDimensions({ text: titleText, style: titleStyle })
+                ? getHorisontalSvgTextHeight({ text: titleText, style: titleStyle })
                 : 0,
         },
         min: get(xAxis, 'min'),

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from './constants';
-import { getHorisontalSvgTextDimensions } from './utils';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_LABEL_PADDING, DEFAULT_AXIS_TITLE_FONT_SIZE, } from '../../constants';
+import { getHorisontalSvgTextHeight } from '../../utils';
 export const getPreparedYAxis = ({ yAxis }) => {
     // FIXME: add support for n axises
     const yAxis1 = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
@@ -26,7 +26,7 @@ export const getPreparedYAxis = ({ yAxis }) => {
             text: y1TitleText,
             style: y1TitleStyle,
             height: y1TitleText
-                ? getHorisontalSvgTextDimensions({ text: y1TitleText, style: y1TitleStyle })
+                ? getHorisontalSvgTextHeight({ text: y1TitleText, style: y1TitleStyle })
                 : 0,
         },
         min: get(yAxis1, 'min'),

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

@@ -0,0 +1 @@
+export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 10;

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

@@ -0,0 +1 @@
+export const DEFAULT_LEGEND_SYMBOL_SIZE = 10;

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

@@ -1,14 +1,16 @@
-import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
-export type ChartSeries = ChartKitWidgetSeries & {
-    color: string;
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import { PreparedLegend } from '../useChartOptions/types';
+import { PreparedSeries } from './types';
+export type OnLegendItemClick = (data: {
     name: string;
-    visible: boolean;
-};
+    metaKey: boolean;
+}) => void;
 type Args = {
-    activeLegendItems: string[];
-    series: ChartKitWidgetSeries[];
+    legend: PreparedLegend;
+    series: ChartKitWidgetData['series'];
 };
 export declare const useSeries: (args: Args) => {
-    chartSeries: ChartSeries[];
+    preparedSeries: PreparedSeries[];
+    handleLegendItemClick: OnLegendItemClick;
 };
 export {};

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

@@ -1,61 +1,52 @@
 import React from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import get from 'lodash/get';
 import { scaleOrdinal } from 'd3';
 import { DEFAULT_PALETTE } from '../../constants';
-import { getSeriesNames, isAxisRelatedSeries } from '../../utils';
-const prepareAxisRelatedSeries = (args) => {
-    const { activeLegendItems, colorScale, series } = args;
-    const preparedSeries = cloneDeep(series);
-    const legendEnabled = get(preparedSeries, 'legend.enabled', true);
-    const defaultVisible = get(preparedSeries, 'visible', true);
-    const name = 'name' in series && series.name ? series.name : '';
-    const color = 'color' in series && series.color ? series.color : colorScale(name);
-    preparedSeries.color = color;
-    preparedSeries.name = name;
-    preparedSeries.visible = legendEnabled ? activeLegendItems.includes(name) : defaultVisible;
-    return preparedSeries;
-};
-const preparePieSeries = (args) => {
-    const { activeLegendItems, series } = args;
-    const preparedSeries = cloneDeep(series);
-    const legendEnabled = get(preparedSeries, 'legend.enabled', true);
-    const dataNames = series.data.map((d) => d.name);
-    const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
-    preparedSeries.data = preparedSeries.data.map((d) => {
-        const defaultVisible = get(d, 'visible', true);
-        d.color = d.color || colorScale(d.name);
-        d.visible = legendEnabled ? activeLegendItems.includes(d.name) : defaultVisible;
-        return d;
-    });
-    // Not axis related series manages their own data visibility inside their data
-    preparedSeries.visible = true;
-    return preparedSeries;
-};
-const prepareNotAxisRelatedSeries = (args) => {
-    const { activeLegendItems, series } = args;
-    switch (series.type) {
-        case 'pie': {
-            return preparePieSeries({ activeLegendItems, series });
-        }
-        default: {
-            throw new Error(`Series type ${series.type} does not support data preparation for series that do not support the presence of axes`);
-        }
-    }
-};
+import { getSeriesNames } from '../../utils';
+import { getActiveLegendItems, getAllLegendItems } from './utils';
+import { prepareSeries } from './prepareSeries';
 export const useSeries = (args) => {
-    const { activeLegendItems, series } = args;
-    const chartSeries = React.useMemo(() => {
+    const { series: { data: series }, legend, } = args;
+    const preparedSeries = React.useMemo(() => {
         const seriesNames = getSeriesNames(series);
         const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
-        return series.map((s) => {
-            return isAxisRelatedSeries(s)
-                ? prepareAxisRelatedSeries({ activeLegendItems, colorScale, series: s })
-                : prepareNotAxisRelatedSeries({
-                    activeLegendItems,
-                    series: s,
-                });
+        return series.reduce((acc, singleSeries) => {
+            acc.push(...prepareSeries({
+                series: singleSeries,
+                legend,
+                colorScale,
+            }));
+            return acc;
+        }, []);
+    }, [series, legend]);
+    const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(preparedSeries));
+    const chartSeries = React.useMemo(() => {
+        return preparedSeries.map((singleSeries) => {
+            if (singleSeries.legend.enabled) {
+                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
+            }
+            return singleSeries;
         });
-    }, [activeLegendItems, series]);
-    return { chartSeries };
+    }, [preparedSeries, activeLegendItems]);
+    // FIXME: remove effect. It initiates extra rerender
+    React.useEffect(() => {
+        setActiveLegendItems(getActiveLegendItems(preparedSeries));
+    }, [preparedSeries]);
+    const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
+        const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
+        let nextActiveLegendItems;
+        if (metaKey && activeLegendItems.includes(name)) {
+            nextActiveLegendItems = activeLegendItems.filter((item) => item !== name);
+        }
+        else if (metaKey && !activeLegendItems.includes(name)) {
+            nextActiveLegendItems = activeLegendItems.concat(name);
+        }
+        else if (onlyItemSelected) {
+            nextActiveLegendItems = getAllLegendItems(preparedSeries);
+        }
+        else {
+            nextActiveLegendItems = [name];
+        }
+        setActiveLegendItems(nextActiveLegendItems);
+    }, [preparedSeries, activeLegendItems]);
+    return { preparedSeries: chartSeries, handleLegendItemClick };
 };

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

@@ -0,0 +1,9 @@
+import type { ScaleOrdinal } from 'd3';
+import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
+import type { PreparedLegend } from '../useChartOptions/types';
+import type { PreparedSeries } from './types';
+export declare function prepareSeries(args: {
+    series: ChartKitWidgetSeries;
+    legend: PreparedLegend;
+    colorScale: ScaleOrdinal<string, string>;
+}): PreparedSeries[];

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

@@ -0,0 +1,85 @@
+import { scaleOrdinal } from 'd3';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import { DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+import { getRandomCKId } from '../../../../../utils';
+function prepareLegendSymbol(series) {
+    var _a;
+    switch (series.type) {
+        default: {
+            const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+            const symbolHeight = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.height) || DEFAULT_LEGEND_SYMBOL_SIZE;
+            return {
+                shape: 'rect',
+                width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+                height: symbolHeight,
+                radius: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.radius) || symbolHeight / 2,
+                padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || 5,
+            };
+        }
+    }
+}
+function prepareAxisRelatedSeries(args) {
+    const { colorScale, series, legend } = args;
+    const preparedSeries = cloneDeep(series);
+    const name = 'name' in series && series.name ? series.name : '';
+    const color = 'color' in series && series.color ? series.color : colorScale(name);
+    preparedSeries.color = color;
+    preparedSeries.name = name;
+    preparedSeries.visible = get(preparedSeries, 'visible', true);
+    preparedSeries.legend = {
+        enabled: get(preparedSeries, 'legend.enabled', legend.enabled),
+        symbol: prepareLegendSymbol(series),
+    };
+    return [preparedSeries];
+}
+function preparePieSeries(args) {
+    const { series, legend } = args;
+    const dataNames = series.data.map((d) => d.name);
+    const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
+    const stackId = getRandomCKId();
+    const preparedSeries = series.data.map((dataItem) => {
+        var _a, _b;
+        const result = {
+            type: 'pie',
+            data: dataItem.value,
+            dataLabels: {
+                enabled: get(series, 'dataLabels.enabled', true),
+            },
+            label: dataItem.label,
+            visible: typeof dataItem.visible === 'boolean' ? dataItem.visible : true,
+            name: dataItem.name,
+            color: dataItem.color || colorScale(dataItem.name),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            center: series.center || ['50%', '50%'],
+            borderColor: series.borderColor || '',
+            borderRadius: (_a = series.borderRadius) !== null && _a !== void 0 ? _a : 0,
+            borderWidth: (_b = series.borderWidth) !== null && _b !== void 0 ? _b : 1,
+            radius: series.radius || '100%',
+            innerRadius: series.innerRadius || 0,
+            stackId,
+        };
+        return result;
+    });
+    return preparedSeries;
+}
+export function prepareSeries(args) {
+    const { series, legend, colorScale } = args;
+    switch (series.type) {
+        case 'pie': {
+            return preparePieSeries({ series, legend });
+        }
+        case 'scatter':
+        case 'bar-x': {
+            return prepareAxisRelatedSeries({ series, legend, colorScale });
+        }
+        default: {
+            const seriesType = get(series, 'type');
+            throw new Error(`Series type ${seriesType} does not support data preparation for series that do not support the presence of axes`);
+        }
+    }
+}