@gravity-ui/charts 0.1.0

package/dist/esm/hooks/useChartOptions/index.js

@@ -0,0 +1,21 @@
+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/dist/esm/hooks/useChartOptions/title.d.ts

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

package/dist/esm/hooks/useChartOptions/title.js

@@ -0,0 +1,18 @@
+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/dist/esm/hooks/useChartOptions/tooltip.d.ts

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

package/dist/esm/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/dist/esm/hooks/useChartOptions/types.d.ts

@@ -0,0 +1,47 @@
+import type { BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
+type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, '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<ChartAxis, 'type' | 'labels'> & {
+    type: ChartAxisType;
+    labels: PreparedAxisLabels;
+    title: {
+        height: number;
+        width: number;
+        text: string;
+        margin: number;
+        style: BaseTextStyle;
+        align: ChartAxisTitleAlignment;
+        maxRowCount: number;
+    };
+    min?: number;
+    grid: {
+        enabled: boolean;
+    };
+    maxPadding: number;
+    ticks: {
+        pixelInterval?: number;
+    };
+    position: 'left' | 'right' | 'top' | 'bottom';
+    plotIndex: number;
+};
+export type PreparedTitle = ChartData['title'] & {
+    height: number;
+};
+export type PreparedTooltip = ChartData['tooltip'] & {
+    enabled: boolean;
+};
+export type ChartOptions = {
+    chart: PreparedChart;
+    tooltip: PreparedTooltip;
+    title?: PreparedTitle;
+};
+export {};

package/dist/esm/hooks/useChartOptions/types.js

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

package/dist/esm/hooks/useChartOptions/x-axis.d.ts

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

package/dist/esm/hooks/useChartOptions/x-axis.js

@@ -0,0 +1,115 @@
+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) => {
+            // @ts-expect-error
+            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/dist/esm/hooks/useChartOptions/y-axis.d.ts

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

package/dist/esm/hooks/useChartOptions/y-axis.js

@@ -0,0 +1,117 @@
+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: {
+                    // @ts-expect-error
+                    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/dist/esm/hooks/useSeries/constants.d.ts

@@ -0,0 +1,8 @@
+import type { BaseTextStyle, Halo } from '../../types';
+import type { PointMarkerOptions } from '../../types/chart/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/dist/esm/hooks/useSeries/constants.js

@@ -0,0 +1,19 @@
+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/dist/esm/hooks/useSeries/index.d.ts

@@ -0,0 +1,29 @@
+import type { ChartData } 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: ChartData['legend'];
+    series: ChartData['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/dist/esm/hooks/useSeries/index.js

@@ -0,0 +1,82 @@
+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/dist/esm/hooks/useSeries/prepare-area.d.ts

@@ -0,0 +1,19 @@
+import type { ScaleOrdinal } from 'd3';
+import type { AreaSeries, ChartSeriesOptions } from '../../types';
+import type { PreparedAreaSeries, PreparedLegend } from './types';
+export declare const DEFAULT_LINE_WIDTH = 1;
+export declare const DEFAULT_MARKER: {
+    enabled: boolean;
+    symbol: `${import("../../constants").SymbolType}`;
+    borderColor: string;
+    borderWidth: number;
+    radius: number;
+};
+type PrepareAreaSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: AreaSeries[];
+    seriesOptions?: ChartSeriesOptions;
+    legend: PreparedLegend;
+};
+export declare function prepareArea(args: PrepareAreaSeriesArgs): PreparedAreaSeries[];
+export {};

package/dist/esm/hooks/useSeries/prepare-area.js

@@ -0,0 +1,63 @@
+import get from 'lodash/get';
+import merge from 'lodash/merge';
+import { getUniqId } 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 = getUniqId();
+        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;
+    }, []);
+}

package/dist/esm/hooks/useSeries/prepare-bar-x.d.ts

@@ -0,0 +1,10 @@
+import type { ScaleOrdinal } from 'd3';
+import type { BarXSeries } from '../../types';
+import type { PreparedLegend, PreparedSeries } from './types';
+type PrepareBarXSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: BarXSeries[];
+    legend: PreparedLegend;
+};
+export declare function prepareBarXSeries(args: PrepareBarXSeriesArgs): PreparedSeries[];
+export {};

package/dist/esm/hooks/useSeries/prepare-bar-x.js

@@ -0,0 +1,38 @@
+import get from 'lodash/get';
+import { getUniqId } from '../../utils';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { getSeriesStackId, prepareLegendSymbol } from './utils';
+export function prepareBarXSeries(args) {
+    const { colorScale, series: seriesList, legend } = args;
+    return seriesList.map((series) => {
+        var _a, _b, _c, _d, _e;
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        return {
+            type: series.type,
+            color,
+            name,
+            id: getUniqId(),
+            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,
+                inside: typeof ((_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.inside) === 'boolean'
+                    ? (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.inside
+                    : false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.style),
+                allowOverlap: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.allowOverlap) || false,
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                html: get(series, 'dataLabels.html', false),
+            },
+            cursor: get(series, 'cursor', null),
+            yAxis: get(series, 'yAxis', 0),
+        };
+    }, []);
+}

package/dist/esm/hooks/useSeries/prepare-bar-y.d.ts

@@ -0,0 +1,10 @@
+import type { ScaleOrdinal } from 'd3';
+import type { BarYSeries } from '../../types';
+import type { PreparedLegend, PreparedSeries } from './types';
+type PrepareBarYSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: BarYSeries[];
+    legend: PreparedLegend;
+};
+export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): PreparedSeries[];
+export {};