@gravity-ui/charts 0.1.0

package/dist/cjs/constants/defaults/axis.js

@@ -0,0 +1,18 @@
+export const axisLabelsDefaults = {
+    margin: 10,
+    padding: 10,
+    fontSize: 11,
+    maxWidth: 80,
+};
+const axisTitleDefaults = {
+    text: '',
+    margin: 0,
+    style: {
+        fontSize: '14px',
+    },
+    align: 'center',
+    maxRowCount: 1,
+};
+export const xAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 4 });
+export const yAxisTitleDefaults = Object.assign(Object.assign({}, axisTitleDefaults), { margin: 8 });
+export const DEFAULT_AXIS_TYPE = 'linear';

package/dist/cjs/constants/defaults/index.d.ts

@@ -0,0 +1,3 @@
+export * from './axis';
+export * from './legend';
+export * from './series-options';

package/dist/cjs/constants/defaults/index.js

@@ -0,0 +1,3 @@
+export * from './axis';
+export * from './legend';
+export * from './series-options';

package/dist/cjs/constants/defaults/legend.d.ts

@@ -0,0 +1,13 @@
+import type { ChartLegend } from '../../types';
+export declare const legendDefaults: {
+    align: Required<ChartLegend>["align"];
+    itemDistance: number;
+    margin: number;
+    itemStyle: {
+        fontSize: string;
+    };
+};
+export declare const CONTINUOUS_LEGEND_SIZE: {
+    height: number;
+    width: number;
+};

package/dist/cjs/constants/defaults/legend.js

@@ -0,0 +1,12 @@
+export const legendDefaults = {
+    align: 'center',
+    itemDistance: 20,
+    margin: 15,
+    itemStyle: {
+        fontSize: '12px',
+    },
+};
+export const CONTINUOUS_LEGEND_SIZE = {
+    height: 12,
+    width: 200,
+};

package/dist/cjs/constants/defaults/series-options.d.ts

@@ -0,0 +1,24 @@
+import type { ChartSeriesOptions } from '../../types';
+type DefaultBarXSeriesOptions = Partial<ChartSeriesOptions['bar-x']> & {
+    'bar-x': {
+        barMaxWidth: number;
+        barPadding: number;
+        groupPadding: number;
+    };
+};
+type DefaultBarYSeriesOptions = Partial<ChartSeriesOptions['bar-x']> & {
+    'bar-y': {
+        barMaxWidth: number;
+        barPadding: number;
+        groupPadding: number;
+    };
+};
+type DefaultWaterfallSeriesOptions = Partial<ChartSeriesOptions['waterfall']> & {
+    waterfall: {
+        barMaxWidth: number;
+        barPadding: number;
+    };
+};
+export type SeriesOptionsDefaults = Partial<ChartSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions & DefaultWaterfallSeriesOptions;
+export declare const seriesOptionsDefaults: SeriesOptionsDefaults;
+export {};

package/dist/cjs/constants/defaults/series-options.js

@@ -0,0 +1,106 @@
+export const seriesOptionsDefaults = {
+    'bar-x': {
+        barMaxWidth: 50,
+        barPadding: 0.1,
+        groupPadding: 0.2,
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+    'bar-y': {
+        barMaxWidth: 50,
+        barPadding: 0.1,
+        groupPadding: 0.2,
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+    pie: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+    scatter: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+    line: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+    area: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+    treemap: {
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+    waterfall: {
+        barMaxWidth: 50,
+        barPadding: 0.1,
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
+};

package/dist/cjs/constants/index.d.ts

@@ -0,0 +1,46 @@
+export * from './defaults';
+export declare const SeriesType: {
+    readonly Area: "area";
+    readonly BarX: "bar-x";
+    readonly BarY: "bar-y";
+    readonly Line: "line";
+    readonly Pie: "pie";
+    readonly Scatter: "scatter";
+    readonly Treemap: "treemap";
+    readonly Waterfall: "waterfall";
+};
+export declare enum DashStyle {
+    Dash = "Dash",
+    DashDot = "DashDot",
+    Dot = "Dot",
+    LongDash = "LongDash",
+    LongDashDot = "LongDashDot",
+    LongDashDotDot = "LongDashDotDot",
+    ShortDash = "ShortDash",
+    ShortDashDot = "ShortDashDot",
+    ShortDashDotDot = "ShortDashDotDot",
+    ShortDot = "ShortDot",
+    Solid = "Solid"
+}
+export declare enum SymbolType {
+    Circle = "circle",
+    Diamond = "diamond",
+    Square = "square",
+    Triangle = "triangle",
+    TriangleDown = "triangle-down"
+}
+export declare enum LineCap {
+    Butt = "butt",
+    Round = "round",
+    Square = "square",
+    None = "none"
+}
+export declare enum LayoutAlgorithm {
+    Binary = "binary",
+    Dice = "dice",
+    Slice = "slice",
+    SliceDice = "slice-dice",
+    Squarify = "squarify"
+}
+export declare const DEFAULT_PALETTE: string[];
+export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";

package/dist/cjs/constants/index.js

@@ -0,0 +1,71 @@
+export * from './defaults';
+export const SeriesType = {
+    Area: 'area',
+    BarX: 'bar-x',
+    BarY: 'bar-y',
+    Line: 'line',
+    Pie: 'pie',
+    Scatter: 'scatter',
+    Treemap: 'treemap',
+    Waterfall: 'waterfall',
+};
+export var DashStyle;
+(function (DashStyle) {
+    DashStyle["Dash"] = "Dash";
+    DashStyle["DashDot"] = "DashDot";
+    DashStyle["Dot"] = "Dot";
+    DashStyle["LongDash"] = "LongDash";
+    DashStyle["LongDashDot"] = "LongDashDot";
+    DashStyle["LongDashDotDot"] = "LongDashDotDot";
+    DashStyle["ShortDash"] = "ShortDash";
+    DashStyle["ShortDashDot"] = "ShortDashDot";
+    DashStyle["ShortDashDotDot"] = "ShortDashDotDot";
+    DashStyle["ShortDot"] = "ShortDot";
+    DashStyle["Solid"] = "Solid";
+})(DashStyle || (DashStyle = {}));
+export var SymbolType;
+(function (SymbolType) {
+    SymbolType["Circle"] = "circle";
+    SymbolType["Diamond"] = "diamond";
+    SymbolType["Square"] = "square";
+    SymbolType["Triangle"] = "triangle";
+    SymbolType["TriangleDown"] = "triangle-down";
+})(SymbolType || (SymbolType = {}));
+export var LineCap;
+(function (LineCap) {
+    LineCap["Butt"] = "butt";
+    LineCap["Round"] = "round";
+    LineCap["Square"] = "square";
+    LineCap["None"] = "none";
+})(LineCap || (LineCap = {}));
+export var LayoutAlgorithm;
+(function (LayoutAlgorithm) {
+    LayoutAlgorithm["Binary"] = "binary";
+    LayoutAlgorithm["Dice"] = "dice";
+    LayoutAlgorithm["Slice"] = "slice";
+    LayoutAlgorithm["SliceDice"] = "slice-dice";
+    LayoutAlgorithm["Squarify"] = "squarify";
+})(LayoutAlgorithm || (LayoutAlgorithm = {}));
+export const DEFAULT_PALETTE = [
+    '#4DA2F1',
+    '#FF3D64',
+    '#8AD554',
+    '#FFC636',
+    '#FFB9DD',
+    '#84D1EE',
+    '#FF91A1',
+    '#54A520',
+    '#DB9100',
+    '#BA74B3',
+    '#1F68A9',
+    '#ED65A9',
+    '#0FA08D',
+    '#FF7E00',
+    '#E8B0A4',
+    '#52A6C5',
+    '#BE2443',
+    '#70C1AF',
+    '#FFB46C',
+    '#DCA3D7',
+];
+export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';

package/dist/cjs/hooks/index.d.ts

@@ -0,0 +1,10 @@
+export * from './useChartDimensions';
+export * from './useChartOptions';
+export * from './useChartOptions/types';
+export * from './useAxisScales';
+export * from './useSeries';
+export * from './useSeries/types';
+export * from './useShapes';
+export * from './useTooltip';
+export * from './useTooltip/types';
+export * from './useSplit/types';

package/dist/cjs/hooks/index.js

@@ -0,0 +1,10 @@
+export * from './useChartDimensions';
+export * from './useChartOptions';
+export * from './useChartOptions/types';
+export * from './useAxisScales';
+export * from './useSeries';
+export * from './useSeries/types';
+export * from './useShapes';
+export * from './useTooltip';
+export * from './useTooltip/types';
+export * from './useSplit/types';

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -0,0 +1,25 @@
+import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
+import type { ChartAxis, ChartSeries } from '../../types';
+import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedSeries } from '../useSeries/types';
+import type { PreparedSplit } from '../useSplit/types';
+export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
+type Args = {
+    boundsWidth: number;
+    boundsHeight: number;
+    series: PreparedSeries[];
+    xAxis: PreparedAxis;
+    yAxis: PreparedAxis[];
+    split: PreparedSplit;
+};
+type ReturnValue = {
+    xScale?: ChartScale;
+    yScale?: ChartScale[];
+};
+export declare function createYScale(axis: PreparedAxis, series: PreparedSeries[], boundsHeight: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+export declare function createXScale(axis: PreparedAxis | ChartAxis, series: (PreparedSeries | ChartSeries)[], boundsWidth: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+/**
+ * Uses to create scales for axis related series
+ */
+export declare const useAxisScales: (args: Args) => ReturnValue;
+export {};

package/dist/cjs/hooks/useAxisScales/index.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
+import get from 'lodash/get';
+import { DEFAULT_AXIS_TYPE } from '../../constants';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+const isNumericalArrayData = (data) => {
+    return data.every((d) => typeof d === 'number' || d === null);
+};
+const filterCategoriesByVisibleSeries = (args) => {
+    const { axisDirection, categories, series } = args;
+    const visibleCategories = new Set();
+    series.forEach((s) => {
+        if (isSeriesWithCategoryValues(s)) {
+            s.data.forEach((d) => {
+                visibleCategories.add(getDataCategoryValue({ axisDirection, categories, data: d }));
+            });
+        }
+    });
+    return categories.filter((c) => visibleCategories.has(c));
+};
+export function createYScale(axis, series, boundsHeight) {
+    const yType = get(axis, 'type', DEFAULT_AXIS_TYPE);
+    const yMin = get(axis, 'min');
+    const yCategories = get(axis, 'categories');
+    const yTimestamps = get(axis, 'timestamps');
+    switch (yType) {
+        case 'linear':
+        case 'logarithmic': {
+            const domain = getDomainDataYBySeries(series);
+            const range = [boundsHeight, boundsHeight * axis.maxPadding];
+            if (isNumericalArrayData(domain)) {
+                const [domainYMin, domainMax] = extent(domain);
+                const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
+                let yMaxValue = domainMax;
+                if (series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
+                    yMaxValue = Math.max(yMaxValue, 0);
+                }
+                const scaleFn = yType === 'logarithmic' ? scaleLog : scaleLinear;
+                return scaleFn().domain([yMinValue, yMaxValue]).range(range).nice();
+            }
+            break;
+        }
+        case 'category': {
+            if (yCategories) {
+                const filteredCategories = filterCategoriesByVisibleSeries({
+                    axisDirection: 'y',
+                    categories: yCategories,
+                    series: series,
+                });
+                return scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
+            }
+            break;
+        }
+        case 'datetime': {
+            const range = [boundsHeight, boundsHeight * axis.maxPadding];
+            if (yTimestamps) {
+                const [yMin, yMax] = extent(yTimestamps);
+                return scaleUtc().domain([yMin, yMax]).range(range).nice();
+            }
+            else {
+                const domain = getDomainDataYBySeries(series);
+                if (isNumericalArrayData(domain)) {
+                    const [yMin, yMax] = extent(domain);
+                    return scaleUtc().domain([yMin, yMax]).range(range).nice();
+                }
+            }
+            break;
+        }
+    }
+    throw new Error('Failed to create yScale');
+}
+function calculateXAxisPadding(series) {
+    let result = 0;
+    series.forEach((s) => {
+        switch (s.type) {
+            case 'bar-y': {
+                // Since labels can be located to the right of the bar, need to add an additional space
+                const inside = get(s, 'dataLabels.inside');
+                if (!inside) {
+                    const labelsMaxWidth = get(s, 'dataLabels.maxWidth', 0);
+                    result = Math.max(result, labelsMaxWidth);
+                }
+                break;
+            }
+        }
+    });
+    return result;
+}
+export function createXScale(axis, series, boundsWidth) {
+    const xMin = get(axis, 'min');
+    const xMax = getDefaultMaxXAxisValue(series);
+    const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
+    const xCategories = get(axis, 'categories');
+    const xTimestamps = get(axis, 'timestamps');
+    const maxPadding = get(axis, 'maxPadding', 0);
+    const xAxisMinPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
+    const xRange = [0, boundsWidth - xAxisMinPadding];
+    switch (xType) {
+        case 'linear':
+        case 'logarithmic': {
+            const domain = getDomainDataXBySeries(series);
+            if (isNumericalArrayData(domain)) {
+                const [domainXMin, domainXMax] = extent(domain);
+                const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
+                const xMaxValue = typeof xMax === 'number' ? Math.max(xMax, domainXMax) : domainXMax;
+                const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
+                return scaleFn().domain([xMinValue, xMaxValue]).range(xRange).nice();
+            }
+            break;
+        }
+        case 'category': {
+            if (xCategories) {
+                const filteredCategories = filterCategoriesByVisibleSeries({
+                    axisDirection: 'x',
+                    categories: xCategories,
+                    series: series,
+                });
+                const xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
+                if (xScale.step() / 2 < xAxisMinPadding) {
+                    xScale.range(xRange);
+                }
+                return xScale;
+            }
+            break;
+        }
+        case 'datetime': {
+            if (xTimestamps) {
+                const [xMin, xMax] = extent(xTimestamps);
+                return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
+            }
+            else {
+                const domain = getDomainDataXBySeries(series);
+                if (isNumericalArrayData(domain)) {
+                    const [xMin, xMax] = extent(domain);
+                    return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
+                }
+            }
+            break;
+        }
+    }
+    throw new Error('Failed to create xScale');
+}
+const createScales = (args) => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
+    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;
+    return {
+        xScale: createXScale(xAxis, visibleSeries, boundsWidth),
+        yScale: yAxis.map((axis, index) => {
+            const axisSeries = series.filter((s) => {
+                const seriesAxisIndex = get(s, 'yAxis', 0);
+                return seriesAxisIndex === index;
+            });
+            const visibleAxisSeries = getOnlyVisibleSeries(axisSeries);
+            const axisHeight = getAxisHeight({ boundsHeight, split });
+            return createYScale(axis, visibleAxisSeries.length ? visibleAxisSeries : axisSeries, axisHeight);
+        }),
+    };
+};
+/**
+ * Uses to create scales for axis related series
+ */
+export const useAxisScales = (args) => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
+    return React.useMemo(() => {
+        let xScale;
+        let yScale;
+        const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+        if (hasAxisRelatedSeries) {
+            ({ xScale, yScale } = createScales({
+                boundsWidth,
+                boundsHeight,
+                series,
+                xAxis,
+                yAxis,
+                split,
+            }));
+        }
+        return { xScale, yScale };
+    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split]);
+};

package/dist/cjs/hooks/useChartDimensions/index.d.ts

@@ -0,0 +1,16 @@
+import type { PreparedAxis, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { ChartMargin } from '../../types';
+export { getBoundsWidth } from './utils';
+type Args = {
+    width: number;
+    height: number;
+    margin: ChartMargin;
+    preparedLegend: PreparedLegend;
+    preparedXAxis: PreparedAxis;
+    preparedYAxis: PreparedAxis[];
+    preparedSeries: PreparedSeries[];
+};
+export declare const useChartDimensions: (args: Args) => {
+    boundsWidth: number;
+    boundsHeight: number;
+};

package/dist/cjs/hooks/useChartDimensions/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { isAxisRelatedSeries } from '../../utils';
+import { getBoundsWidth } from './utils';
+export { getBoundsWidth } from './utils';
+const getBottomOffset = (args) => {
+    const { hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
+    let result = 0;
+    if (preparedLegend.enabled) {
+        result += preparedLegend.height + preparedLegend.margin;
+    }
+    if (hasAxisRelatedSeries) {
+        if (preparedXAxis.title.text) {
+            result += preparedXAxis.title.height + preparedXAxis.title.margin;
+        }
+        if (preparedXAxis.labels.enabled) {
+            result += preparedXAxis.labels.margin + preparedXAxis.labels.height;
+        }
+    }
+    return result;
+};
+export const useChartDimensions = (args) => {
+    const { margin, width, height, preparedLegend, preparedXAxis, preparedYAxis, preparedSeries } = args;
+    return React.useMemo(() => {
+        const hasAxisRelatedSeries = preparedSeries.some(isAxisRelatedSeries);
+        const boundsWidth = getBoundsWidth({ chartWidth: width, chartMargin: margin, preparedYAxis });
+        const bottomOffset = getBottomOffset({
+            hasAxisRelatedSeries,
+            preparedLegend,
+            preparedXAxis,
+        });
+        const boundsHeight = height - margin.top - margin.bottom - bottomOffset;
+        return { boundsWidth, boundsHeight };
+    }, [margin, width, height, preparedLegend, preparedXAxis, preparedYAxis, preparedSeries]);
+};

package/dist/cjs/hooks/useChartDimensions/utils.d.ts

@@ -0,0 +1,10 @@
+import type { PreparedAxis, PreparedChart } from '../../hooks';
+export declare const getBoundsWidth: (args: {
+    chartWidth: number;
+    chartMargin: PreparedChart["margin"];
+    preparedYAxis: PreparedAxis[];
+}) => number;
+export declare function getYAxisWidth(axis: PreparedAxis | undefined): number;
+export declare function getWidthOccupiedByYAxis(args: {
+    preparedAxis: PreparedAxis[];
+}): number;

package/dist/cjs/hooks/useChartDimensions/utils.js

@@ -0,0 +1,32 @@
+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/dist/cjs/hooks/useChartOptions/chart.d.ts

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

package/dist/cjs/hooks/useChartOptions/chart.js

@@ -0,0 +1,28 @@
+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/dist/cjs/hooks/useChartOptions/index.d.ts

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