@gravity-ui/chartkit 3.1.3 → 3.2.0-beta.2

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

@@ -0,0 +1,13 @@
+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 };
+};

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

@@ -0,0 +1,5 @@
+export declare const useChartEvents: () => {
+    chartHovered: boolean;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export const useChartEvents = () => {
+    const [chartHovered, setChartHovered] = React.useState(false);
+    const handleMouseEnter = React.useCallback(() => {
+        setChartHovered(true);
+    }, []);
+    const handleMouseLeave = React.useCallback(() => {
+        setChartHovered(false);
+    }, []);
+    return {
+        chartHovered,
+        handleMouseEnter,
+        handleMouseLeave,
+    };
+};

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

@@ -0,0 +1,8 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedAxis, PreparedChart } from './types';
+export declare const getPreparedChart: (args: {
+    chart: ChartKitWidgetData['chart'];
+    series: ChartKitWidgetData['series'];
+    preparedXAxis: PreparedAxis;
+    preparedY1Axis: PreparedAxis;
+}) => PreparedChart;

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

@@ -0,0 +1,60 @@
+import { select, max } from 'd3';
+import get from 'lodash/get';
+import { formatAxisTickLabel, getDomainDataYBySeries } from '../../utils';
+import { getHorisontalSvgTextDimensions } from './utils';
+const AXIS_WIDTH = 1;
+const getAxisLabelMaxWidth = (args) => {
+    const { axis, series } = args;
+    let maxDomainValue;
+    let width = 0;
+    switch (axis.type) {
+        case 'category': {
+            const yCatigories = get(axis, 'categories', []);
+            maxDomainValue = [...yCatigories].sort((c1, c2) => c2.length - c1.length)[0];
+            break;
+        }
+        case 'datetime': {
+            const yTimestamps = get(axis, 'timestamps');
+            const domain = yTimestamps || getDomainDataYBySeries(series);
+            maxDomainValue = max(domain);
+            break;
+        }
+        case 'linear': {
+            const domain = getDomainDataYBySeries(series);
+            maxDomainValue = max(domain);
+        }
+    }
+    const formattedValue = formatAxisTickLabel({
+        axisType: axis.type,
+        value: maxDomainValue,
+        dateFormat: axis.labels.dateFormat,
+        numberFormat: axis.labels.numberFormat,
+    });
+    select(document.body)
+        .append('text')
+        .style('font-size', axis.labels.style.fontSize)
+        .text(formattedValue)
+        .each(function () {
+        width = this.getBoundingClientRect().width;
+    })
+        .remove();
+    return width;
+};
+export const getPreparedChart = (args) => {
+    const { chart, series, preparedXAxis, preparedY1Axis } = args;
+    const marginBottom = get(chart, 'margin.bottom', 0) +
+        preparedXAxis.labels.padding +
+        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedXAxis.labels.style });
+    const marginLeft = get(chart, 'margin.left', AXIS_WIDTH) +
+        preparedY1Axis.labels.padding +
+        getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
+        (preparedY1Axis.title.height || 0);
+    return {
+        margin: {
+            top: get(chart, 'margin.top', 0),
+            right: get(chart, 'margin.right', 0),
+            bottom: marginBottom,
+            left: marginLeft,
+        },
+    };
+};

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

@@ -0,0 +1,3 @@
+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/hooks/useChartOptions/constants.js

@@ -0,0 +1,3 @@
+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/useChartOptions/index.d.ts

@@ -0,0 +1,3 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartOptions } from './types';
+export declare const useChartOptions: (args: ChartKitWidgetData) => ChartOptions;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { getPreparedChart } from './chart';
+import { getPreparedLegend } from './legend';
+import { getPreparedTitle } from './title';
+import { getPreparedTooltip } from './tooltip';
+import { getPreparedXAxis } from './x-axis';
+import { getPreparedYAxis } from './y-axis';
+export const useChartOptions = (args) => {
+    const { chart, series, legend, title, tooltip, xAxis, yAxis } = args;
+    const options = React.useMemo(() => {
+        const preparedTitle = getPreparedTitle({ title });
+        const preparedTooltip = getPreparedTooltip({ tooltip });
+        const preparedLegend = getPreparedLegend({ legend, series });
+        const preparedYAxis = getPreparedYAxis({ yAxis });
+        const preparedXAxis = getPreparedXAxis({ xAxis });
+        const preparedChart = getPreparedChart({
+            chart,
+            series,
+            preparedXAxis,
+            preparedY1Axis: preparedYAxis[0],
+        });
+        return {
+            chart: preparedChart,
+            legend: preparedLegend,
+            title: preparedTitle,
+            tooltip: preparedTooltip,
+            xAxis: preparedXAxis,
+            yAxis: preparedYAxis,
+        };
+    }, [chart, legend, title, tooltip, series, xAxis, yAxis]);
+    return options;
+};

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

@@ -0,0 +1,6 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedLegend } from './types';
+export declare const getPreparedLegend: (args: {
+    legend: ChartKitWidgetData['legend'];
+    series: ChartKitWidgetData['series'];
+}) => PreparedLegend;

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

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

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

@@ -0,0 +1,5 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedTitle } from './types';
+export declare const getPreparedTitle: ({ title, }: {
+    title: ChartKitWidgetData['title'];
+}) => PreparedTitle | undefined;

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

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

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

@@ -0,0 +1,5 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedTooltip } from './types';
+export declare const getPreparedTooltip: (args: {
+    tooltip: ChartKitWidgetData['tooltip'];
+}) => PreparedTooltip;

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

@@ -0,0 +1,5 @@
+import get from 'lodash/get';
+export const getPreparedTooltip = (args) => {
+    const { tooltip } = args;
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true) });
+};

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

@@ -0,0 +1,33 @@
+import type { BaseTextStyle, ChartKitWidgetData, ChartKitWidgetAxis, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels, ChartKitWidgetLegend, ChartMargin } from '../../../../../types/widget-data';
+type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding'>> & {
+    style: BaseTextStyle;
+};
+export type PreparedChart = {
+    margin: ChartMargin;
+};
+export type PreparedLegend = Required<ChartKitWidgetLegend>;
+export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
+    type: ChartKitWidgetAxisType;
+    labels: PreparedAxisLabels;
+    title: {
+        height: number;
+        text: string;
+        style: BaseTextStyle;
+    };
+    min?: number;
+};
+export type PreparedTitle = ChartKitWidgetData['title'] & {
+    height: number;
+};
+export type PreparedTooltip = ChartKitWidgetData['tooltip'] & {
+    enabled: boolean;
+};
+export type ChartOptions = {
+    chart: PreparedChart;
+    legend: PreparedLegend;
+    tooltip: PreparedTooltip;
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis[];
+    title?: PreparedTitle;
+};
+export {};

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

@@ -0,0 +1,5 @@
+import type { BaseTextStyle } from '../../../../../types/widget-data';
+export declare const getHorisontalSvgTextDimensions: (args: {
+    text: string;
+    style?: Partial<BaseTextStyle>;
+}) => number;

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

@@ -0,0 +1,18 @@
+import { select } from 'd3';
+import get from 'lodash/get';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE } from './constants';
+export const getHorisontalSvgTextDimensions = (args) => {
+    const { text, style } = args;
+    const textSelection = select(document.body).append('text').text(text);
+    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
+    let height = 0;
+    if (fontSize) {
+        textSelection.style('font-size', fontSize);
+    }
+    textSelection
+        .each(function () {
+        height = this.getBoundingClientRect().height;
+    })
+        .remove();
+    return height;
+};

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

@@ -0,0 +1,5 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedAxis } from './types';
+export declare const getPreparedXAxis: ({ xAxis }: {
+    xAxis: ChartKitWidgetData['xAxis'];
+}) => PreparedAxis;

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

@@ -0,0 +1,29 @@
+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';
+export const getPreparedXAxis = ({ xAxis }) => {
+    const titleText = get(xAxis, 'title.text', '');
+    const titleStyle = {
+        fontSize: get(xAxis, 'title.style.fontSize', DEFAULT_AXIS_TITLE_FONT_SIZE),
+    };
+    const preparedXAxis = {
+        type: get(xAxis, 'type', 'linear'),
+        labels: {
+            enabled: get(xAxis, 'labels.enabled', true),
+            padding: get(xAxis, 'labels.padding', DEFAULT_AXIS_LABEL_PADDING),
+            dateFormat: get(xAxis, 'labels.dateFormat'),
+            numberFormat: get(xAxis, 'labels.numberFormat'),
+            style: { fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE) },
+        },
+        categories: get(xAxis, 'categories'),
+        timestamps: get(xAxis, 'timestamps'),
+        title: {
+            text: titleText,
+            style: titleStyle,
+            height: titleText
+                ? getHorisontalSvgTextDimensions({ text: titleText, style: titleStyle })
+                : 0,
+        },
+    };
+    return preparedXAxis;
+};

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

@@ -0,0 +1,5 @@
+import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { PreparedAxis } from './types';
+export declare const getPreparedYAxis: ({ yAxis }: {
+    yAxis: ChartKitWidgetData['yAxis'];
+}) => PreparedAxis[];

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

@@ -0,0 +1,35 @@
+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';
+export const getPreparedYAxis = ({ yAxis }) => {
+    // FIXME: add support for n axises
+    const yAxis1 = yAxis === null || yAxis === void 0 ? void 0 : yAxis[0];
+    const y1LabelsStyle = {
+        fontSize: get(yAxis1, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
+    };
+    const y1TitleText = get(yAxis1, 'title.text', '');
+    const y1TitleStyle = {
+        fontSize: get(yAxis1, 'title.style.fontSize', DEFAULT_AXIS_TITLE_FONT_SIZE),
+    };
+    const preparedY1Axis = {
+        type: get(yAxis1, 'type', 'linear'),
+        labels: {
+            enabled: get(yAxis1, 'labels.enabled', true),
+            padding: get(yAxis1, 'labels.padding', DEFAULT_AXIS_LABEL_PADDING),
+            dateFormat: get(yAxis1, 'labels.dateFormat'),
+            numberFormat: get(yAxis1, 'labels.numberFormat'),
+            style: y1LabelsStyle,
+        },
+        categories: get(yAxis1, 'categories'),
+        timestamps: get(yAxis1, 'timestamps'),
+        title: {
+            text: y1TitleText,
+            style: y1TitleStyle,
+            height: y1TitleText
+                ? getHorisontalSvgTextDimensions({ text: y1TitleText, style: y1TitleStyle })
+                : 0,
+        },
+        min: get(yAxis1, 'min'),
+    };
+    return [preparedY1Axis];
+};

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

@@ -0,0 +1,13 @@
+import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
+export type OnLegendItemClick = (data: {
+    name: string;
+    metaKey: boolean;
+}) => void;
+type Args = {
+    series: ChartKitWidgetSeries[];
+};
+export declare const useLegend: (args: Args) => {
+    activeLegendItems: string[];
+    handleLegendItemClick: OnLegendItemClick;
+};
+export {};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { getVisibleSeriesNames } from '../../utils';
+export const useLegend = (args) => {
+    const { series } = args;
+    const [activeLegendItems, setActiveLegendItems] = React.useState(getVisibleSeriesNames(series));
+    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 = getVisibleSeriesNames(series);
+        }
+        else {
+            nextActiveLegendItems = [name];
+        }
+        setActiveLegendItems(nextActiveLegendItems);
+    }, [series, activeLegendItems]);
+    // FIXME: remove effect. It initiates extra rerender
+    React.useEffect(() => {
+        setActiveLegendItems(getVisibleSeriesNames(series));
+    }, [series]);
+    return { activeLegendItems, handleLegendItemClick };
+};

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

@@ -0,0 +1,17 @@
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
+import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
+import type { ChartOptions } from '../useChartOptions/types';
+export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
+type Args = {
+    boundsWidth: number;
+    boundsHeight: number;
+    series: ChartKitWidgetSeries[];
+    xAxis: ChartOptions['xAxis'];
+    yAxis: ChartOptions['yAxis'];
+};
+type ReturnValue = {
+    xScale: ChartScale;
+    yScale: ChartScale;
+};
+export declare const useScales: (args: Args) => ReturnValue;
+export {};

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
+import get from 'lodash/get';
+import { getOnlyVisibleSeries, getDomainDataXBySeries, getDomainDataYBySeries } 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);
+        });
+    });
+};
+export const useScales = (args) => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
+    const scales = React.useMemo(() => {
+        const xType = get(xAxis, 'type', 'linear');
+        const xCategories = get(xAxis, 'categories');
+        const xTimestamps = get(xAxis, 'timestamps');
+        const yType = get(yAxis[0], 'type', 'linear');
+        const yMin = get(yAxis[0], 'min');
+        const yCategories = get(yAxis[0], 'categories');
+        const yTimestamps = get(xAxis, 'timestamps');
+        let visibleSeries = getOnlyVisibleSeries(series);
+        // Reassign to all series in case of all series unselected,
+        // otherwise we will get an empty space without grid
+        visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
+        let xScale;
+        let yScale;
+        switch (xType) {
+            case 'linear': {
+                const domain = getDomainDataXBySeries(visibleSeries);
+                if (isNumericalArrayData(domain)) {
+                    const [xMin, xMax] = extent(domain);
+                    xScale = scaleLinear().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                }
+                break;
+            }
+            case 'category': {
+                if (xCategories) {
+                    const filteredCategories = filterCategoriesByVisibleSeries(xCategories, visibleSeries);
+                    xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
+                }
+                break;
+            }
+            case 'datetime': {
+                if (xTimestamps) {
+                    const [xMin, xMax] = extent(xTimestamps);
+                    xScale = scaleUtc().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                }
+                else {
+                    const domain = getDomainDataXBySeries(visibleSeries);
+                    if (isNumericalArrayData(domain)) {
+                        const [xMin, xMax] = extent(domain);
+                        xScale = scaleUtc().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                    }
+                }
+                break;
+            }
+        }
+        if (!xScale) {
+            throw new Error('Failed to create xScale');
+        }
+        switch (yType) {
+            case 'linear': {
+                const domain = getDomainDataYBySeries(visibleSeries);
+                if (isNumericalArrayData(domain)) {
+                    const [domainYMin, yMax] = extent(domain);
+                    const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
+                    yScale = scaleLinear()
+                        .domain([yMinValue, yMax])
+                        .range([boundsHeight, 0])
+                        .nice();
+                }
+                break;
+            }
+            case 'category': {
+                if (yCategories) {
+                    const filteredCategories = filterCategoriesByVisibleSeries(yCategories, visibleSeries);
+                    yScale = scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
+                }
+                break;
+            }
+            case 'datetime': {
+                if (yTimestamps) {
+                    const [yMin, yMax] = extent(yTimestamps);
+                    yScale = scaleUtc().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                }
+                else {
+                    const domain = getDomainDataYBySeries(visibleSeries);
+                    if (isNumericalArrayData(domain)) {
+                        const [yMin, yMax] = extent(domain);
+                        yScale = scaleUtc().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                    }
+                }
+                break;
+            }
+        }
+        if (!yScale) {
+            throw new Error('Failed to create yScale');
+        }
+        return { xScale, yScale };
+    }, [boundsWidth, boundsHeight, series, xAxis, yAxis]);
+    return scales;
+};

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

@@ -0,0 +1,14 @@
+import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
+export type ChartSeries = ChartKitWidgetSeries & {
+    color: string;
+    name: string;
+    visible: boolean;
+};
+type Args = {
+    activeLegendItems: string[];
+    series: ChartKitWidgetSeries[];
+};
+export declare const useSeries: (args: Args) => {
+    chartSeries: ChartSeries[];
+};
+export {};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import clone from 'lodash/clone';
+import { scaleOrdinal } from 'd3';
+import { DEFAULT_PALETTE } from '../../constants';
+import { getSeriesNames } from '../../utils';
+export const useSeries = (args) => {
+    const { activeLegendItems, series } = args;
+    // FIXME: handle case with one pie chart series
+    const chartSeries = React.useMemo(() => {
+        const seriesNames = getSeriesNames(series);
+        const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
+        return series.map((s) => {
+            const preparedSeries = clone(s);
+            const name = 'name' in s ? s.name : '';
+            const color = 'color' in s && s.color ? s.color : colorScale(name);
+            preparedSeries.color = color;
+            preparedSeries.name = name;
+            preparedSeries.visible = activeLegendItems.includes(name);
+            return preparedSeries;
+        });
+    }, [activeLegendItems, series]);
+    return { chartSeries };
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ChartOptions } from '../useChartOptions/types';
+import { ChartScale } from '../useScales';
+import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
+import { BarSeries } from '../../../../../types/widget-data';
+type Args = {
+    series: BarSeries[];
+    xAxis: ChartOptions['xAxis'];
+    xScale: ChartScale;
+    yAxis: ChartOptions['yAxis'];
+    yScale: ChartScale;
+    onSeriesMouseMove?: OnSeriesMouseMove;
+    onSeriesMouseLeave?: OnSeriesMouseLeave;
+};
+export declare function prepareBarSeries(args: Args): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export {};

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+const DEFAULT_BAR_RECT_WIDTH = 50;
+const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
+const MIN_RECT_GAP = 1;
+const b = block('chartkit-d3-bar');
+const getRectProperties = (args) => {
+    const { point, xAxis, xScale, yAxis, yScale, minPointDistance } = args;
+    let cx;
+    let cy;
+    let width;
+    let height;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        const maxWidth = xBandScale.bandwidth() - MIN_RECT_GAP;
+        width = Math.min(maxWidth, DEFAULT_BAR_RECT_WIDTH);
+        cx = (xBandScale(point.category) || 0) + xBandScale.step() / 2 - width / 2;
+    }
+    else {
+        const xLinearScale = xScale;
+        const [min, max] = xLinearScale.domain();
+        const range = xLinearScale.range();
+        const maxWidth = ((range[1] - range[0]) * minPointDistance) / (Number(max) - Number(min)) - MIN_RECT_GAP;
+        width = Math.min(Math.max(maxWidth, 1), DEFAULT_LINEAR_BAR_RECT_WIDTH);
+        cx = xLinearScale(point.x) - width / 2;
+    }
+    if (yAxis[0].type === 'linear') {
+        const yLinearScale = yScale;
+        cy = yLinearScale(point.y);
+        height = yLinearScale(yLinearScale.domain()[0]) - cy;
+    }
+    else {
+        throw Error(`The "${yAxis[0].type}" type for the Y axis is not supported`);
+    }
+    return { x: cx, y: cy, width, height };
+};
+function minDiff(arr) {
+    let result = Infinity;
+    for (let i = 0; i < arr.length - 1; i++) {
+        for (let j = i + 1; j < arr.length; j++) {
+            const diff = Math.abs(arr[i] - arr[j]);
+            if (diff < result) {
+                result = diff;
+            }
+        }
+    }
+    return result;
+}
+export function prepareBarSeries(args) {
+    const { series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave } = args;
+    const seriesData = series.map(({ data }) => data).flat(2);
+    const minPointDistance = minDiff(seriesData.map((item) => Number(item.x)));
+    return series.reduce((result, item) => {
+        const randomKey = Math.random().toString();
+        item.data.forEach((point, i) => {
+            const rectProps = getRectProperties({
+                point,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+                minPointDistance,
+            });
+            result.push(React.createElement("rect", Object.assign({ key: `${i}-${randomKey}`, className: b('rect'), fill: item.color }, rectProps, { onMouseMove: function () {
+                    onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
+                        hovered: {
+                            data: point,
+                            series: item,
+                        },
+                    });
+                }, onMouseLeave: onSeriesMouseLeave })));
+        });
+        return result;
+    }, []);
+}