@gravity-ui/chartkit 5.17.1 → 5.18.0

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

@@ -1,32 +0,0 @@
-export const getBoundsWidth = (args) => {
-    const { chartWidth, chartMargin, preparedYAxis } = args;
-    return (chartWidth -
-        chartMargin.right -
-        chartMargin.left -
-        getWidthOccupiedByYAxis({ preparedAxis: preparedYAxis }));
-};
-export function getYAxisWidth(axis) {
-    let result = 0;
-    if (axis === null || axis === void 0 ? void 0 : axis.title.text) {
-        result += axis.title.height + axis.title.margin;
-    }
-    if (axis === null || axis === void 0 ? void 0 : axis.labels.enabled) {
-        result += axis.labels.margin + axis.labels.width;
-    }
-    return result;
-}
-export function getWidthOccupiedByYAxis(args) {
-    const { preparedAxis } = args;
-    let leftAxisWidth = 0;
-    let rightAxisWidth = 0;
-    preparedAxis === null || preparedAxis === void 0 ? void 0 : preparedAxis.forEach((axis) => {
-        const axisWidth = getYAxisWidth(axis);
-        if (axis.position === 'right') {
-            rightAxisWidth = Math.max(rightAxisWidth, axisWidth);
-        }
-        else {
-            leftAxisWidth = Math.max(leftAxisWidth, axisWidth);
-        }
-    });
-    return leftAxisWidth + rightAxisWidth;
-}

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

@@ -1,6 +0,0 @@
-import type { ChartKitWidgetData } from '../../../../../types';
-import type { PreparedChart, PreparedTitle } from './types';
-export declare const getPreparedChart: (args: {
-    chart: ChartKitWidgetData['chart'];
-    preparedTitle?: PreparedTitle;
-}) => PreparedChart;

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

@@ -1,28 +0,0 @@
-import get from 'lodash/get';
-const getMarginTop = (args) => {
-    const { chart, preparedTitle } = args;
-    let marginTop = get(chart, 'margin.top', 0);
-    if (preparedTitle === null || preparedTitle === void 0 ? void 0 : preparedTitle.height) {
-        marginTop += preparedTitle.height;
-    }
-    return marginTop;
-};
-const getMarginRight = (args) => {
-    const { chart } = args;
-    return get(chart, 'margin.right', 0);
-};
-export const getPreparedChart = (args) => {
-    const { chart, preparedTitle } = args;
-    const marginTop = getMarginTop({ chart, preparedTitle });
-    const marginBottom = get(chart, 'margin.bottom', 0);
-    const marginLeft = get(chart, 'margin.left', 0);
-    const marginRight = getMarginRight({ chart });
-    return {
-        margin: {
-            top: marginTop,
-            right: marginRight,
-            bottom: marginBottom,
-            left: marginLeft,
-        },
-    };
-};

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

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

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { getPreparedChart } from './chart';
-import { getPreparedTitle } from './title';
-import { getPreparedTooltip } from './tooltip';
-export const useChartOptions = (args) => {
-    const { data: { chart, title, tooltip }, } = args;
-    const options = React.useMemo(() => {
-        const preparedTitle = getPreparedTitle({ title });
-        const preparedTooltip = getPreparedTooltip({ tooltip });
-        const preparedChart = getPreparedChart({
-            chart,
-            preparedTitle,
-        });
-        return {
-            chart: preparedChart,
-            title: preparedTitle,
-            tooltip: preparedTooltip,
-        };
-    }, [chart, title, tooltip]);
-    return options;
-};

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

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

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

@@ -1,18 +0,0 @@
-import get from 'lodash/get';
-import { getHorisontalSvgTextHeight } 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),
-        fontWeight: get(title, 'style.fontWeight'),
-    };
-    const titleHeight = titleText
-        ? getHorisontalSvgTextHeight({ 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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,47 +0,0 @@
-import type { BaseTextStyle, ChartKitWidgetAxis, ChartKitWidgetAxisLabels, ChartKitWidgetAxisTitleAlignment, ChartKitWidgetAxisType, ChartKitWidgetData, ChartMargin } from '../../../../../types';
-type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
-    style: BaseTextStyle;
-    rotation: number;
-    height: number;
-    width: number;
-    lineHeight: number;
-    maxWidth: number;
-};
-export type PreparedChart = {
-    margin: ChartMargin;
-};
-export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
-    type: ChartKitWidgetAxisType;
-    labels: PreparedAxisLabels;
-    title: {
-        height: number;
-        width: number;
-        text: string;
-        margin: number;
-        style: BaseTextStyle;
-        align: ChartKitWidgetAxisTitleAlignment;
-        maxRowCount: number;
-    };
-    min?: number;
-    grid: {
-        enabled: boolean;
-    };
-    maxPadding: number;
-    ticks: {
-        pixelInterval?: number;
-    };
-    position: 'left' | 'right' | 'top' | 'bottom';
-    plotIndex: number;
-};
-export type PreparedTitle = ChartKitWidgetData['title'] & {
-    height: number;
-};
-export type PreparedTooltip = ChartKitWidgetData['tooltip'] & {
-    enabled: boolean;
-};
-export type ChartOptions = {
-    chart: PreparedChart;
-    tooltip: PreparedTooltip;
-    title?: PreparedTitle;
-};
-export {};

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

@@ -1,7 +0,0 @@
-import type { ChartKitWidgetSeries, ChartKitWidgetXAxis } from '../../../../../types';
-import type { PreparedAxis } from './types';
-export declare const getPreparedXAxis: ({ xAxis, series, width, }: {
-    xAxis?: import("../../../../../types").ChartKitWidgetAxis | undefined;
-    series: ChartKitWidgetSeries[];
-    width: number;
-}) => PreparedAxis;

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

@@ -1,114 +0,0 @@
-import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
-import { createXScale } from '../useAxisScales';
-function getLabelSettings({ axis, series, width, autoRotation = true, }) {
-    const scale = createXScale(axis, series, width);
-    const tickCount = getTicksCount({ axis, range: width });
-    const ticks = getXAxisItems({
-        scale: scale,
-        count: tickCount,
-        maxCount: getMaxTickCount({ width, axis }),
-    });
-    const step = getClosestPointsRange(axis, ticks);
-    const labels = ticks.map((value) => {
-        return formatAxisTickLabel({
-            axis,
-            value,
-            step,
-        });
-    });
-    const overlapping = hasOverlappingLabels({
-        width,
-        labels,
-        padding: axis.labels.padding,
-        style: axis.labels.style,
-    });
-    const defaultRotation = overlapping && autoRotation ? -45 : 0;
-    const rotation = axis.labels.rotation || defaultRotation;
-    const labelsHeight = rotation
-        ? getLabelsSize({
-            labels,
-            style: axis.labels.style,
-            rotation,
-        }).maxHeight
-        : axis.labels.lineHeight;
-    const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
-    return { height: Math.min(maxHeight, labelsHeight), rotation };
-}
-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) => CHART_SERIES_WITH_VOLUME_ON_X_AXIS.includes(s.type)))) {
-        return series.reduce((minValue, s) => {
-            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'x', 0)), 0);
-            return Math.min(minValue, minYValue);
-        }, 0);
-    }
-    return min;
-}
-export const getPreparedXAxis = ({ xAxis, series, width, }) => {
-    var _a;
-    const titleText = get(xAxis, 'title.text', '');
-    const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
-    const titleMaxRowsCount = get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount);
-    const estimatedTitleRows = wrapText({
-        text: titleText,
-        style: titleStyle,
-        width,
-    }).slice(0, titleMaxRowsCount);
-    const titleSize = getLabelsSize({
-        labels: [titleText],
-        style: titleStyle,
-    });
-    const labelsStyle = {
-        fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
-    };
-    const preparedXAxis = {
-        type: get(xAxis, 'type', 'linear'),
-        labels: {
-            enabled: get(xAxis, 'labels.enabled', true),
-            margin: get(xAxis, 'labels.margin', axisLabelsDefaults.margin),
-            padding: get(xAxis, 'labels.padding', axisLabelsDefaults.padding),
-            dateFormat: get(xAxis, 'labels.dateFormat'),
-            numberFormat: get(xAxis, 'labels.numberFormat'),
-            rotation: get(xAxis, 'labels.rotation', 0),
-            style: labelsStyle,
-            width: 0,
-            height: 0,
-            lineHeight: getHorisontalSvgTextHeight({ text: 'Tmp', style: labelsStyle }),
-            maxWidth: get(xAxis, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
-        },
-        lineColor: get(xAxis, 'lineColor'),
-        categories: get(xAxis, 'categories'),
-        timestamps: get(xAxis, 'timestamps'),
-        title: {
-            text: titleText,
-            style: titleStyle,
-            margin: get(xAxis, 'title.margin', xAxisTitleDefaults.margin),
-            height: titleSize.maxHeight * estimatedTitleRows.length,
-            width: titleSize.maxWidth,
-            align: get(xAxis, 'title.align', xAxisTitleDefaults.align),
-            maxRowCount: get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount),
-        },
-        min: getAxisMin(xAxis, series),
-        maxPadding: get(xAxis, 'maxPadding', 0.01),
-        grid: {
-            enabled: get(xAxis, 'grid.enabled', true),
-        },
-        ticks: {
-            pixelInterval: get(xAxis, 'ticks.pixelInterval'),
-        },
-        position: 'bottom',
-        plotIndex: 0,
-    };
-    const { height, rotation } = getLabelSettings({
-        axis: preparedXAxis,
-        series,
-        width,
-        autoRotation: (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _a === void 0 ? void 0 : _a.autoRotation,
-    });
-    preparedXAxis.labels.height = height;
-    preparedXAxis.labels.rotation = rotation;
-    return preparedXAxis;
-};

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

@@ -1,7 +0,0 @@
-import type { ChartKitWidgetSeries, ChartKitWidgetYAxis } from '../../../../../types';
-import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ series, yAxis, height, }: {
-    series: ChartKitWidgetSeries[];
-    yAxis: ChartKitWidgetYAxis[] | undefined;
-    height: number;
-}) => PreparedAxis[];

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

@@ -1,116 +0,0 @@
-import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, wrapText, } from '../../utils';
-import { createYScale } from '../useAxisScales';
-const getAxisLabelMaxWidth = (args) => {
-    const { axis, series } = args;
-    if (!axis.labels.enabled) {
-        return 0;
-    }
-    const scale = createYScale(axis, series, 1);
-    const ticks = getScaleTicks(scale);
-    // FIXME: it is necessary to filter data, since we do not draw overlapping ticks
-    const step = getClosestPointsRange(axis, ticks);
-    const labels = ticks.map((tick) => formatAxisTickLabel({
-        axis,
-        value: tick,
-        step,
-    }));
-    return getLabelsSize({
-        labels,
-        style: axis.labels.style,
-        rotation: axis.labels.rotation,
-    }).maxWidth;
-};
-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) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type)))) {
-        return series.reduce((minValue, s) => {
-            switch (s.type) {
-                case 'waterfall': {
-                    const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
-                    return Math.min(minValue, minSubTotal);
-                }
-                default: {
-                    const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
-                    return Math.min(minValue, minYValue);
-                }
-            }
-        }, 0);
-    }
-    return min;
-}
-export const getPreparedYAxis = ({ series, yAxis, height, }) => {
-    const axisByPlot = [];
-    const axisItems = yAxis || [{}];
-    return axisItems.map((axisItem) => {
-        const plotIndex = get(axisItem, 'plotIndex', 0);
-        const firstPlotAxis = !axisByPlot[plotIndex];
-        if (firstPlotAxis) {
-            axisByPlot[plotIndex] = [];
-        }
-        axisByPlot[plotIndex].push(axisItem);
-        const defaultAxisPosition = firstPlotAxis ? 'left' : 'right';
-        const labelsEnabled = get(axisItem, 'labels.enabled', true);
-        const labelsStyle = {
-            fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
-        };
-        const titleText = get(axisItem, 'title.text', '');
-        const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
-        const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
-        const estimatedTitleRows = wrapText({
-            text: titleText,
-            style: titleStyle,
-            width: height,
-        }).slice(0, titleMaxRowsCount);
-        const titleSize = getLabelsSize({ labels: [titleText], style: titleStyle });
-        const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
-        const preparedAxis = {
-            type: axisType,
-            labels: {
-                enabled: labelsEnabled,
-                margin: labelsEnabled
-                    ? get(axisItem, 'labels.margin', axisLabelsDefaults.margin)
-                    : 0,
-                padding: labelsEnabled
-                    ? get(axisItem, 'labels.padding', axisLabelsDefaults.padding)
-                    : 0,
-                dateFormat: get(axisItem, 'labels.dateFormat'),
-                numberFormat: get(axisItem, 'labels.numberFormat'),
-                style: labelsStyle,
-                rotation: get(axisItem, 'labels.rotation', 0),
-                width: 0,
-                height: 0,
-                lineHeight: getHorisontalSvgTextHeight({ text: 'TmpLabel', style: labelsStyle }),
-                maxWidth: get(axisItem, 'labels.maxWidth', axisLabelsDefaults.maxWidth),
-            },
-            lineColor: get(axisItem, 'lineColor'),
-            categories: get(axisItem, 'categories'),
-            timestamps: get(axisItem, 'timestamps'),
-            title: {
-                text: titleText,
-                margin: get(axisItem, 'title.margin', yAxisTitleDefaults.margin),
-                style: titleStyle,
-                width: titleSize.maxWidth,
-                height: titleSize.maxHeight * estimatedTitleRows.length,
-                align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
-                maxRowCount: titleMaxRowsCount,
-            },
-            min: getAxisMin(axisItem, series),
-            maxPadding: get(axisItem, 'maxPadding', 0.05),
-            grid: {
-                enabled: get(axisItem, 'grid.enabled', firstPlotAxis),
-            },
-            ticks: {
-                pixelInterval: get(axisItem, 'ticks.pixelInterval'),
-            },
-            position: get(axisItem, 'position', defaultAxisPosition),
-            plotIndex: get(axisItem, 'plotIndex', 0),
-        };
-        if (labelsEnabled) {
-            preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });
-        }
-        return preparedAxis;
-    });
-};

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

@@ -1,8 +0,0 @@
-import type { BaseTextStyle, Halo } from '../../../../../types';
-import { PointMarkerOptions } from '../../../../../types/widget-data/marker';
-export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
-export declare const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
-export declare const DEFAULT_DATALABELS_PADDING = 5;
-export declare const DEFAULT_DATALABELS_STYLE: BaseTextStyle;
-export declare const DEFAULT_HALO_OPTIONS: Required<Halo>;
-export declare const DEFAULT_POINT_MARKER_OPTIONS: Omit<Required<PointMarkerOptions>, 'enabled'>;

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

@@ -1,19 +0,0 @@
-export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
-export const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
-export const DEFAULT_DATALABELS_PADDING = 5;
-export const DEFAULT_DATALABELS_STYLE = {
-    fontSize: '11px',
-    fontWeight: 'bold',
-    fontColor: 'var(--d3-data-labels)',
-};
-export const DEFAULT_HALO_OPTIONS = {
-    enabled: true,
-    opacity: 0.25,
-    size: 6,
-};
-export const DEFAULT_POINT_MARKER_OPTIONS = {
-    radius: 4,
-    borderColor: '',
-    borderWidth: 0,
-    symbol: 'circle',
-};

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

@@ -1,29 +0,0 @@
-import type { ChartKitWidgetData } from '../../../../../types';
-import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
-import type { OnLegendItemClick, PreparedSeries } from './types';
-type Args = {
-    chartWidth: number;
-    chartHeight: number;
-    chartMargin: PreparedChart['margin'];
-    legend: ChartKitWidgetData['legend'];
-    series: ChartKitWidgetData['series'];
-    preparedYAxis: PreparedAxis[];
-};
-export declare const useSeries: (args: Args) => {
-    legendItems: import("./types").LegendItem[][];
-    legendConfig: {
-        offset: {
-            left: number;
-            top: number;
-        };
-        pagination: {
-            limit: number;
-            maxPage: number;
-        } | undefined;
-    };
-    preparedLegend: import("./types").PreparedLegend;
-    preparedSeries: PreparedSeries[];
-    preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
-    handleLegendItemClick: OnLegendItemClick;
-};
-export {};

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

@@ -1,82 +0,0 @@
-import React from 'react';
-import { group, scaleOrdinal } from 'd3';
-import { DEFAULT_PALETTE } from '../../constants';
-import { getSeriesNames } from '../../utils';
-import { getLegendComponents, getPreparedLegend } from './prepare-legend';
-import { getPreparedOptions } from './prepare-options';
-import { prepareSeries } from './prepareSeries';
-import { getActiveLegendItems, getAllLegendItems } from './utils';
-export const useSeries = (args) => {
-    const { chartWidth, chartHeight, chartMargin, legend, preparedYAxis, series: { data: series, options: seriesOptions }, } = args;
-    const preparedLegend = React.useMemo(() => getPreparedLegend({ legend, series }), [legend, series]);
-    const preparedSeries = React.useMemo(() => {
-        const seriesNames = getSeriesNames(series);
-        const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
-        const groupedSeries = group(series, (item) => item.type);
-        return Array.from(groupedSeries).reduce((acc, [seriesType, seriesList]) => {
-            acc.push(...prepareSeries({
-                type: seriesType,
-                series: seriesList,
-                seriesOptions,
-                legend: preparedLegend,
-                colorScale,
-            }));
-            return acc;
-        }, []);
-    }, [series, seriesOptions, preparedLegend]);
-    const preparedSeriesOptions = React.useMemo(() => {
-        return getPreparedOptions(seriesOptions);
-    }, [seriesOptions]);
-    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;
-        });
-    }, [preparedSeries, activeLegendItems]);
-    const { legendConfig, legendItems } = React.useMemo(() => {
-        return getLegendComponents({
-            chartHeight,
-            chartMargin,
-            chartWidth,
-            series: chartSeries,
-            preparedLegend,
-            preparedYAxis,
-        });
-    }, [chartWidth, chartHeight, chartMargin, chartSeries, preparedLegend, preparedYAxis]);
-    const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
-        const allItems = getAllLegendItems(preparedSeries);
-        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 && allItems.length === 1) {
-            nextActiveLegendItems = [];
-        }
-        else if (onlyItemSelected) {
-            nextActiveLegendItems = allItems;
-        }
-        else {
-            nextActiveLegendItems = [name];
-        }
-        setActiveLegendItems(nextActiveLegendItems);
-    }, [preparedSeries, activeLegendItems]);
-    // FIXME: remove effect. It initiates extra rerender
-    React.useEffect(() => {
-        setActiveLegendItems(getActiveLegendItems(preparedSeries));
-    }, [preparedSeries]);
-    return {
-        legendItems,
-        legendConfig,
-        preparedLegend,
-        preparedSeries: chartSeries,
-        preparedSeriesOptions,
-        handleLegendItemClick,
-    };
-};

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

@@ -1,19 +0,0 @@
-import { ScaleOrdinal } from 'd3';
-import { AreaSeries, ChartKitWidgetSeriesOptions } from '../../../../../types';
-import { PreparedAreaSeries, PreparedLegend } from './types';
-export declare const DEFAULT_LINE_WIDTH = 1;
-export declare const DEFAULT_MARKER: {
-    enabled: boolean;
-    symbol: "circle" | "diamond" | "square" | "triangle" | "triangle-down";
-    borderColor: string;
-    borderWidth: number;
-    radius: number;
-};
-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

@@ -1,63 +0,0 @@
-import get from 'lodash/get';
-import merge from 'lodash/merge';
-import { getRandomCKId } from '../../../../../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
-import { getSeriesStackId, prepareLegendSymbol } from './utils';
-export const DEFAULT_LINE_WIDTH = 1;
-export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: false });
-function prepareMarker(series, seriesOptions) {
-    var _a;
-    const seriesHoverState = get(seriesOptions, 'area.states.hover');
-    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),
-                html: get(series, 'dataLabels.html', false),
-            },
-            marker: prepareMarker(series, seriesOptions),
-            cursor: get(series, 'cursor', null),
-            yAxis: get(series, 'yAxis', 0),
-        };
-        return prepared;
-    }, []);
-}