@gravity-ui/chartkit 3.1.2 → 3.2.0-beta.1

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;
+    }, []);
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ChartOptions } from '../useChartOptions/types';
+import type { ChartScale } from '../useScales';
+import type { ChartSeries } from '../useSeries';
+import type { OnSeriesMouseMove, OnSeriesMouseLeave } from '../useTooltip/types';
+type Args = {
+    series: ChartSeries[];
+    xAxis: ChartOptions['xAxis'];
+    xScale: ChartScale;
+    yAxis: ChartOptions['yAxis'];
+    yScale: ChartScale;
+    svgContainer: SVGSVGElement | null;
+    onSeriesMouseMove?: OnSeriesMouseMove;
+    onSeriesMouseLeave?: OnSeriesMouseLeave;
+};
+export declare const useShapes: (args: Args) => {
+    shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+};
+export {};

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { group } from 'd3';
+import { getOnlyVisibleSeries } from '../../utils';
+import { prepareBarSeries } from './bar';
+import { prepareScatterSeries } from './scatter';
+export const useShapes = (args) => {
+    const { series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
+    const shapes = React.useMemo(() => {
+        const visibleSeries = getOnlyVisibleSeries(series);
+        const groupedSeries = group(visibleSeries, (item) => item.type);
+        return Array.from(groupedSeries).reduce((acc, item) => {
+            const [seriesType, chartSeries] = item;
+            switch (seriesType) {
+                case 'bar': {
+                    acc.push(...prepareBarSeries({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        onSeriesMouseMove,
+                        onSeriesMouseLeave,
+                    }));
+                    break;
+                }
+                case 'scatter': {
+                    acc.push(...prepareScatterSeries({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        onSeriesMouseMove,
+                        onSeriesMouseLeave,
+                        svgContainer,
+                    }));
+                    break;
+                }
+            }
+            return acc;
+        }, []);
+    }, [series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave]);
+    return { shapes };
+};

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

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

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

@@ -0,0 +1,62 @@
+import { pointer } from 'd3';
+import React from 'react';
+import block from 'bem-cn-lite';
+const b = block('chartkit-d3-scatter');
+const DEFAULT_SCATTER_POINT_RADIUS = 4;
+const prepareCategoricalScatterData = (data) => {
+    return data.filter((d) => typeof d.category === 'string');
+};
+const prepareLinearScatterData = (data) => {
+    return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
+};
+const getPointProperties = (args) => {
+    const { point, xAxis, xScale, yAxis, yScale } = args;
+    const r = point.radius || DEFAULT_SCATTER_POINT_RADIUS;
+    let cx;
+    let cy;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        cx = (xBandScale(point.category) || 0) + xBandScale.step() / 2;
+    }
+    else {
+        const xLinearScale = xScale;
+        cx = xLinearScale(point.x);
+    }
+    if (yAxis[0].type === 'category') {
+        const yBandScale = yScale;
+        cy = (yBandScale(point.category) || 0) + yBandScale.step() / 2;
+    }
+    else {
+        const yLinearScale = yScale;
+        cy = yLinearScale(point.y);
+    }
+    return { r, cx, cy };
+};
+export function prepareScatterSeries(args) {
+    const { series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, key, svgContainer, } = args;
+    return series.reduce((result, s) => {
+        var _a;
+        const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
+            ? prepareCategoricalScatterData(s.data)
+            : prepareLinearScatterData(s.data);
+        result.push(...preparedData.map((point, i) => {
+            const pointProps = getPointProperties({
+                point,
+                xAxis,
+                xScale,
+                yAxis,
+                yScale,
+            });
+            return (React.createElement("circle", Object.assign({ key: `${i}-${key}`, className: b('point'), fill: s.color }, pointProps, { onMouseMove: function (e) {
+                    onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
+                        hovered: {
+                            data: point,
+                            series: s,
+                        },
+                        pointerPosition: pointer(e, svgContainer),
+                    });
+                }, onMouseLeave: onSeriesMouseLeave })));
+        }));
+        return result;
+    }, []);
+}

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

@@ -0,0 +1,13 @@
+import type { TooltipHoveredData } from '../../../../../types/widget-data';
+import { PreparedTooltip } from '../useChartOptions/types';
+import type { PointerPosition, OnSeriesMouseMove, OnSeriesMouseLeave } from './types';
+type Args = {
+    tooltip: PreparedTooltip;
+};
+export declare const useTooltip: ({ tooltip }: Args) => {
+    hovered: TooltipHoveredData<any> | undefined;
+    pointerPosition: PointerPosition | undefined;
+    handleSeriesMouseMove: OnSeriesMouseMove | undefined;
+    handleSeriesMouseLeave: OnSeriesMouseLeave | undefined;
+};
+export {};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export const useTooltip = ({ tooltip }) => {
+    const [hovered, setTooltipHoveredData] = React.useState();
+    const [pointerPosition, setPointerPosition] = React.useState();
+    const handleSeriesMouseMove = React.useCallback(({ pointerPosition: nextPointerPosition, hovered: nextHovered }) => {
+        setTooltipHoveredData(nextHovered);
+        setPointerPosition(nextPointerPosition);
+    }, []);
+    const handleSeriesMouseLeave = React.useCallback(() => {
+        setTooltipHoveredData(undefined);
+        setPointerPosition(undefined);
+    }, []);
+    return {
+        hovered,
+        pointerPosition,
+        handleSeriesMouseMove: tooltip.enabled ? handleSeriesMouseMove : undefined,
+        handleSeriesMouseLeave: tooltip.enabled ? handleSeriesMouseLeave : undefined,
+    };
+};

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

@@ -0,0 +1,7 @@
+import type { TooltipHoveredData } from '../../../../../types/widget-data';
+export type PointerPosition = [number, number];
+export type OnSeriesMouseMove = (args: {
+    hovered: TooltipHoveredData;
+    pointerPosition?: PointerPosition;
+}) => void;
+export type OnSeriesMouseLeave = () => void;

package/build/plugins/d3/renderer/hooks/useTooltip/types.js

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

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

@@ -0,0 +1,18 @@
+import type { AxisDomain } from 'd3';
+import type { ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
+export declare const isAxisRelatedSeries: (series: ChartKitWidgetSeries) => boolean;
+export declare const getDomainDataXBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
+export declare const getDomainDataYBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
+export declare const getSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
+export declare const getVisibleSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
+export declare const getOnlyVisibleSeries: <T extends ChartKitWidgetSeries<any>>(series: T[]) => T[];
+export declare const parseTransformStyle: (style: string | null) => {
+    x?: number | undefined;
+    y?: number | undefined;
+};
+export declare const formatAxisTickLabel: (args: {
+    axisType: ChartKitWidgetAxisType;
+    value: AxisDomain;
+    dateFormat?: ChartKitWidgetAxisLabels['dateFormat'];
+    numberFormat?: ChartKitWidgetAxisLabels['numberFormat'];
+}) => string;

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

@@ -0,0 +1,71 @@
+import { dateTime } from '@gravity-ui/date-utils';
+import { formatNumber } from '../../../shared';
+const CHARTS_WITHOUT_AXIS = ['pie'];
+// Сhecks whether the series should be drawn with axes
+export const isAxisRelatedSeries = (series) => {
+    return !CHARTS_WITHOUT_AXIS.includes(series.type);
+};
+export const getDomainDataXBySeries = (series) => {
+    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
+        acc.push(...s.data.map((d) => 'x' in d && d.x));
+        return acc;
+    }, []);
+};
+export const getDomainDataYBySeries = (series) => {
+    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
+        acc.push(...s.data.map((d) => 'y' in d && d.y));
+        return acc;
+    }, []);
+};
+// Uses to get all series names array (except `pie` charts)
+export const getSeriesNames = (series) => {
+    return series.reduce((acc, s) => {
+        if ('name' in s && typeof s.name === 'string') {
+            acc.push(s.name);
+        }
+        return acc;
+    }, []);
+};
+// Uses to get all visible series names array (except `pie` charts)
+export const getVisibleSeriesNames = (series) => {
+    return series.reduce((acc, s) => {
+        var _a;
+        const visible = (_a = s.visible) !== null && _a !== void 0 ? _a : true;
+        if ('name' in s && typeof s.name === 'string' && visible) {
+            acc.push(s.name);
+        }
+        return acc;
+    }, []);
+};
+export const getOnlyVisibleSeries = (series) => {
+    return series.filter((s) => s.visible);
+};
+export const parseTransformStyle = (style) => {
+    var _a;
+    if (!style) {
+        return {};
+    }
+    const stringifiedValue = ((_a = style.match(/\((.*?)\)/)) === null || _a === void 0 ? void 0 : _a[1]) || '';
+    const [xString, yString] = stringifiedValue.split(',');
+    const x = Number.isNaN(Number(xString)) ? undefined : Number(xString);
+    const y = Number.isNaN(Number(yString)) ? undefined : Number(yString);
+    return { x, y };
+};
+const defaultFormatNumberOptions = {
+    precision: 0,
+};
+export const formatAxisTickLabel = (args) => {
+    const { axisType, value, dateFormat = 'DD.MM.YY', numberFormat = defaultFormatNumberOptions, } = args;
+    switch (axisType) {
+        case 'category': {
+            return value;
+        }
+        case 'datetime': {
+            return dateTime({ input: value }).format(dateFormat);
+        }
+        case 'linear':
+        default: {
+            return formatNumber(value, numberFormat);
+        }
+    }
+};

package/build/plugins/d3/types.d.ts

@@ -0,0 +1,4 @@
+import type { ChartKitWidgetData } from '../../types/widget-data';
+export type D3WidgetData = {
+    data: ChartKitWidgetData;
+};

package/build/plugins/d3/types.js

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

package/build/types/widget-data/axis.d.ts

@@ -0,0 +1,24 @@
+import type { FormatNumberOptions } from '../../plugins/shared';
+import type { BaseTextStyle } from './base';
+export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear';
+export type ChartKitWidgetAxisLabels = {
+    /** Enable or disable the axis labels */
+    enabled?: boolean;
+    /** The pixel padding for axis labels */
+    padding?: number;
+    dateFormat?: string;
+    numberFormat?: FormatNumberOptions;
+    style?: Partial<BaseTextStyle>;
+};
+export type ChartKitWidgetAxis = {
+    categories?: string[];
+    timestamps?: number[];
+    type?: ChartKitWidgetAxisType;
+    /** The axis labels show the number or category for each tick */
+    labels?: ChartKitWidgetAxisLabels;
+    title?: {
+        text?: string;
+    };
+    /** The minimum value of the axis. If undefined the min value is automatically calculate */
+    min?: number;
+};

package/build/types/widget-data/axis.js

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

package/build/types/widget-data/bar.d.ts

@@ -0,0 +1,31 @@
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetSeriesOptions } from './series';
+export type BarSeriesData<T = any> = BaseSeriesData<T> & {
+    /** The x value of the point */
+    x?: number;
+    /** The y value of the point */
+    y?: number;
+    /** Corresponding value of axis category */
+    category?: string;
+};
+export type BarSeries<T = any> = BaseSeries & {
+    type: 'bar';
+    data: BarSeriesData<T>[];
+    /** The name of the series (used in legend) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    stacking?: 'normal' | 'percent';
+    /** This option allows grouping series in a stacked chart */
+    stackId?: string;
+    /** Whether to group non-stacked columns or to let them render independent of each other.
+     * When false columns will be laid out individually and overlap each other.
+     *
+     * @default true
+     * */
+    grouping?: boolean;
+    dataLabels?: ChartKitWidgetSeriesOptions['dataLabels'] & {
+        /** Whether to align the data label inside the box or to the actual value point */
+        inside?: boolean;
+    };
+};

package/build/types/widget-data/bar.js

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

package/build/types/widget-data/base.d.ts

@@ -0,0 +1,15 @@
+export type BaseSeries = {
+    /** Initial visibility of the series */
+    visible?: boolean;
+};
+export type BaseSeriesData<T = any> = {
+    /**
+     * A reserved subspace to store options and values for customized functionality
+     *
+     * Here you can add additional data for your own event callbacks and formatter callbacks
+     */
+    custom?: T;
+};
+export type BaseTextStyle = {
+    fontSize: string;
+};

package/build/types/widget-data/base.js

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

package/build/types/widget-data/chart.d.ts

@@ -0,0 +1,9 @@
+export type ChartMargin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type ChartKitWidgetChart = {
+    margin?: Partial<ChartMargin>;
+};

package/build/types/widget-data/chart.js

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

package/build/types/widget-data/index.d.ts

@@ -0,0 +1,28 @@
+import type { ChartKitWidgetAxis } from './axis';
+import type { ChartKitWidgetChart } from './chart';
+import type { ChartKitWidgetLegend } from './legend';
+import type { ChartKitWidgetSeries, ChartKitWidgetSeriesOptions } from './series';
+import type { ChartKitWidgetTitle } from './title';
+import type { ChartKitWidgetTooltip } from './tooltip';
+export * from './axis';
+export * from './base';
+export * from './chart';
+export * from './legend';
+export * from './pie';
+export * from './scatter';
+export * from './bar';
+export * from './series';
+export * from './title';
+export * from './tooltip';
+export type ChartKitWidgetData<T = any> = {
+    chart?: ChartKitWidgetChart;
+    legend?: ChartKitWidgetLegend;
+    series: {
+        data: ChartKitWidgetSeries<T>[];
+        options?: ChartKitWidgetSeriesOptions;
+    };
+    title?: ChartKitWidgetTitle;
+    tooltip?: ChartKitWidgetTooltip<T>;
+    xAxis?: ChartKitWidgetAxis;
+    yAxis?: ChartKitWidgetAxis[];
+};