@gravity-ui/charts 0.6.0 → 0.7.0

package/dist/esm/components/index.d.ts

@@ -1,18 +1,19 @@
 import React from 'react';
 import type { ChartData } from '../types';
 export * from './Tooltip/ChartTooltipContent';
-export type ChartRef = {
+export interface ChartRef {
     reflow: () => void;
-};
-type ChartDimentions = {
+}
+export interface ChartDimentions {
     height: number;
     width: number;
-};
-export type ChartProps = {
+}
+export type ChartOnResize = (args: {
+    dimensions?: ChartDimentions;
+}) => void;
+export interface ChartProps {
     data: ChartData;
     lang?: string;
-    onResize?: (args: {
-        dimensions?: ChartDimentions;
-    }) => void;
-};
+    onResize?: ChartOnResize;
+}
 export declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;

package/dist/esm/hooks/useSeries/prepare-area.d.ts

@@ -5,9 +5,9 @@ export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
+    radius: number;
     borderColor: string;
     borderWidth: number;
-    radius: number;
 };
 type PrepareAreaSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

package/dist/esm/hooks/useSeries/prepare-line.d.ts

@@ -8,9 +8,9 @@ export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
+    radius: number;
     borderColor: string;
     borderWidth: number;
-    radius: number;
 };
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

package/dist/esm/hooks/useShapes/area/prepare-data.js

@@ -102,10 +102,14 @@ export const prepareAreaData = (args) => {
                 const labelItems = points.map((p) => getLabelData(p, s, xMax));
                 if (s.dataLabels.html) {
                     const htmlLabels = labelItems.map((l) => {
+                        var _a;
+                        const style = (_a = l.style) !== null && _a !== void 0 ? _a : s.dataLabels.style;
+                        const labelSize = getLabelsSize({ labels: [l.text], style, html: true });
                         return {
                             x: l.x - l.size.width / 2,
                             y: l.y,
                             content: l.text,
+                            size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
                         };
                     });
                     htmlElements.push(...htmlLabels);

package/dist/esm/hooks/useShapes/bar-x/prepare-data.js

@@ -136,6 +136,7 @@ export const prepareBarXData = (args) => {
                         x: label.x,
                         y: label.y,
                         content: label.text,
+                        size: label.size,
                     });
                 }
                 else {

package/dist/esm/hooks/useShapes/bar-y/prepare-data.js

@@ -69,6 +69,7 @@ function setLabel(prepared) {
             x,
             y: y - height / 2,
             content,
+            size: { width, height },
         });
     }
     else {

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -33,6 +33,7 @@ function getHtmlLabel(point, series, xMax) {
         x: Math.min(xMax - size.maxWidth, Math.max(0, point.x)),
         y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
         content,
+        size: { width: size.maxWidth, height: size.maxHeight },
     };
 }
 export const prepareLineData = (args) => {

package/dist/esm/hooks/useShapes/pie/index.js

@@ -165,7 +165,8 @@ export function PieSeriesShapes(args) {
             dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
+    const htmlElements = preparedData.map((d) => d.htmlLabels).flat();
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));
 }

package/dist/esm/hooks/useShapes/pie/prepare-data.js

@@ -18,7 +18,7 @@ export function preparePieData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
-    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+    const prepareItem = (stackId, items) => {
         var _a, _b, _c;
         const series = items[0];
         const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
@@ -30,6 +30,7 @@ export function preparePieData(args) {
             radius,
             segments: [],
             labels: [],
+            htmlLabels: [],
             connectors: [],
             borderColor,
             borderWidth,
@@ -41,7 +42,6 @@ export function preparePieData(args) {
                 opacity: series.states.hover.halo.opacity,
                 size: series.states.hover.halo.size,
             },
-            htmlElements: [],
         };
         const segments = items.map((item) => {
             return {
@@ -55,132 +55,180 @@ export function preparePieData(args) {
             };
         });
         data.segments = pieGenerator(segments);
-        let line = lineGenerator();
-        const curveFactory = getCurveFactory(data);
-        if (curveFactory) {
-            line = line.curve(curveFactory);
-        }
         if (dataLabels.enabled) {
             const { style, connectorPadding, distance } = dataLabels;
             const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
-            const minSegmentRadius = maxRadius - connectorPadding - distance - labelHeight;
+            const minSegmentRadius = maxRadius - distance - connectorPadding - labelHeight;
             if (data.radius > minSegmentRadius) {
                 data.radius = minSegmentRadius;
                 data.innerRadius =
                     (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
             }
-            const connectorStartPointGenerator = arc()
-                .innerRadius(data.radius)
-                .outerRadius(data.radius);
-            const connectorMidPointRadius = data.radius + distance / 2;
-            const connectorMidPointGenerator = arc()
-                .innerRadius(connectorMidPointRadius)
-                .outerRadius(connectorMidPointRadius);
-            const connectorArcRadius = data.radius + distance;
-            const connectorEndPointGenerator = arc()
-                .innerRadius(connectorArcRadius)
-                .outerRadius(connectorArcRadius);
-            const labelArcRadius = connectorArcRadius + connectorPadding;
-            const labelArcGenerator = arc()
-                .innerRadius(labelArcRadius)
-                .outerRadius(labelArcRadius);
-            const labels = [];
-            items.forEach((d, index) => {
-                const prevLabel = labels[labels.length - 1];
-                const text = String(d.data.label || d.data.value);
-                const shouldUseHtml = dataLabels.html;
-                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
-                const labelWidth = labelSize.maxWidth;
-                const relatedSegment = data.segments[index];
-                const getLabelPosition = (angle) => {
-                    let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+        }
+        return data;
+    };
+    const prepareLabels = (prepareLabelsArgs) => {
+        const { data, series } = prepareLabelsArgs;
+        const { dataLabels } = series[0];
+        const labels = [];
+        const htmlLabels = [];
+        const connectors = [];
+        if (!dataLabels.enabled) {
+            return { labels, htmlLabels, connectors };
+        }
+        let line = lineGenerator();
+        const curveFactory = getCurveFactory(data);
+        if (curveFactory) {
+            line = line.curve(curveFactory);
+        }
+        const { style, connectorPadding, distance } = dataLabels;
+        const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
+        const connectorStartPointGenerator = arc()
+            .innerRadius(data.radius)
+            .outerRadius(data.radius);
+        const connectorMidPointRadius = data.radius + distance / 2;
+        const connectorMidPointGenerator = arc()
+            .innerRadius(connectorMidPointRadius)
+            .outerRadius(connectorMidPointRadius);
+        const connectorArcRadius = data.radius + distance;
+        const connectorEndPointGenerator = arc()
+            .innerRadius(connectorArcRadius)
+            .outerRadius(connectorArcRadius);
+        const labelArcRadius = connectorArcRadius + connectorPadding;
+        const labelArcGenerator = arc()
+            .innerRadius(labelArcRadius)
+            .outerRadius(labelArcRadius);
+        series.forEach((d, index) => {
+            const prevLabel = labels[labels.length - 1];
+            const text = String(d.data.label || d.data.value);
+            const shouldUseHtml = dataLabels.html;
+            const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
+            const labelWidth = labelSize.maxWidth;
+            const relatedSegment = data.segments[index];
+            const getLabelPosition = (angle) => {
+                let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (shouldUseHtml) {
+                    x = x < 0 ? x - labelWidth : x;
+                    y = y - labelSize.maxHeight;
+                }
+                else {
                     y = y < 0 ? y - labelHeight : y;
-                    if (shouldUseHtml) {
-                        x = x < 0 ? x - labelWidth : x;
-                    }
-                    x = Math.max(-boundsWidth / 2, x);
-                    return [x, y];
-                };
-                const getConnectorPoints = (angle) => {
-                    const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
-                    const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    if (dataLabels.connectorShape === 'straight-line') {
-                        return [connectorStartPoint, connectorEndPoint];
-                    }
-                    const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
-                    return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
-                };
-                const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
-                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
-                const [x, y] = getLabelPosition(midAngle);
-                const label = {
-                    text,
-                    x,
-                    y,
-                    style,
-                    size: { width: labelWidth, height: labelHeight },
-                    maxWidth: labelWidth,
-                    textAnchor: midAngle < Math.PI ? 'start' : 'end',
-                    series: { id: d.id },
-                    active: true,
-                    segment: relatedSegment.data,
-                    angle: midAngle,
-                };
-                let overlap = false;
-                if (prevLabel) {
-                    overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
-                    if (overlap) {
-                        let shouldAdjustAngle = true;
-                        const step = Math.PI / 180;
-                        while (shouldAdjustAngle) {
-                            const newAngle = label.angle + step;
-                            if (newAngle > FULL_CIRCLE &&
-                                newAngle % FULL_CIRCLE > labels[0].angle) {
+                }
+                x = Math.max(-boundsWidth / 2, x);
+                return [x, y];
+            };
+            const getConnectorPoints = (angle) => {
+                const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
+                const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (dataLabels.connectorShape === 'straight-line') {
+                    return [connectorStartPoint, connectorEndPoint];
+                }
+                const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
+                return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
+            };
+            const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
+                (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
+            const [x, y] = getLabelPosition(midAngle);
+            const label = {
+                text,
+                x,
+                y,
+                style,
+                size: { width: labelWidth, height: labelHeight },
+                maxWidth: labelWidth,
+                textAnchor: midAngle < Math.PI ? 'start' : 'end',
+                series: { id: d.id },
+                active: true,
+                segment: relatedSegment.data,
+                angle: midAngle,
+            };
+            let overlap = false;
+            if (prevLabel) {
+                overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                if (overlap) {
+                    let shouldAdjustAngle = true;
+                    const step = Math.PI / 180;
+                    while (shouldAdjustAngle) {
+                        const newAngle = label.angle + step;
+                        if (newAngle > FULL_CIRCLE && newAngle % FULL_CIRCLE > labels[0].angle) {
+                            shouldAdjustAngle = false;
+                        }
+                        else {
+                            label.angle = newAngle;
+                            const [newX, newY] = getLabelPosition(newAngle);
+                            label.x = newX;
+                            label.y = newY;
+                            if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
-                            }
-                            else {
-                                label.angle = newAngle;
-                                const [newX, newY] = getLabelPosition(newAngle);
-                                label.x = newX;
-                                label.y = newY;
-                                if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
-                                    shouldAdjustAngle = false;
-                                    overlap = false;
-                                }
+                                overlap = false;
                             }
                         }
                     }
                 }
-                if (dataLabels.allowOverlap || !overlap) {
-                    const left = getLeftPosition(label);
-                    if (Math.abs(left) > boundsWidth / 2) {
-                        label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
-                    }
-                    else {
-                        const right = left + label.size.width;
-                        if (right > boundsWidth / 2) {
-                            label.maxWidth = label.size.width - (right - boundsWidth / 2);
-                        }
-                    }
-                    if (shouldUseHtml) {
-                        data.htmlElements.push({
-                            x: boundsWidth / 2 + label.x,
-                            y: boundsHeight / 2 + label.y,
-                            content: label.text,
-                        });
-                    }
-                    else {
-                        labels.push(label);
+            }
+            if (dataLabels.allowOverlap || !overlap) {
+                const left = getLeftPosition(label);
+                if (Math.abs(left) > boundsWidth / 2) {
+                    label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                }
+                else {
+                    const right = left + label.size.width;
+                    if (right > boundsWidth / 2) {
+                        label.maxWidth = label.size.width - (right - boundsWidth / 2);
                     }
-                    const connector = {
-                        path: line(getConnectorPoints(midAngle)),
-                        color: relatedSegment.data.color,
-                    };
-                    data.connectors.push(connector);
                 }
-            });
-            data.labels = labels;
+                if (shouldUseHtml) {
+                    htmlLabels.push({
+                        x: boundsWidth / 2 + label.x,
+                        y: boundsHeight / 2 + label.y,
+                        content: label.text,
+                        size: label.size,
+                    });
+                }
+                else {
+                    labels.push(label);
+                }
+                const connector = {
+                    path: line(getConnectorPoints(midAngle)),
+                    color: relatedSegment.data.color,
+                };
+                connectors.push(connector);
+            }
+        });
+        return {
+            labels,
+            htmlLabels,
+            connectors,
+        };
+    };
+    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+        const data = prepareItem(stackId, items);
+        const preparedLabels = prepareLabels({
+            data,
+            series: items,
+        });
+        const allPreparedLabels = [...preparedLabels.labels, ...preparedLabels.htmlLabels];
+        const top = Math.min(data.center[1] - data.radius, ...allPreparedLabels.map((l) => l.y + data.center[1]));
+        const bottom = Math.max(data.center[1] + data.radius, ...allPreparedLabels.map((l) => data.center[1] + l.y + l.size.height));
+        const topAdjustment = Math.floor(top - data.halo.size);
+        if (topAdjustment > 0) {
+            // should adjust top position and height
+            data.radius += topAdjustment / 2;
+            data.center[1] -= topAdjustment / 2;
         }
+        const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
+        if (bottomAdjustment > 0) {
+            // should adjust position and radius
+            data.radius += bottomAdjustment / 2;
+            data.center[1] += bottomAdjustment / 2;
+        }
+        const { labels, htmlLabels, connectors } = prepareLabels({
+            data,
+            series: items,
+        });
+        data.labels = labels;
+        data.htmlLabels = htmlLabels;
+        data.connectors = connectors;
         return data;
     });
 }

package/dist/esm/hooks/useShapes/pie/types.d.ts

@@ -37,5 +37,5 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlElements: HtmlItem[];
+    htmlLabels: HtmlItem[];
 };

package/dist/esm/hooks/useShapes/treemap/prepare-data.js

@@ -33,6 +33,7 @@ function getLabels(args) {
                     content: text,
                     x,
                     y,
+                    size: { width, height: lineHeight },
                 }
                 : {
                     text,

package/dist/esm/types/chart/area.d.ts

@@ -3,7 +3,7 @@ import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
-export type AreaSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the point. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -35,12 +35,12 @@ export type AreaSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
             };
         };
     };
-};
+}
 export type AreaMarkerSymbol = 'circle' | 'square';
-export type AreaMarkerOptions = PointMarkerOptions & {
+export interface AreaMarkerOptions extends PointMarkerOptions {
     symbol?: AreaMarkerSymbol;
-};
-export type AreaSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.Area;
     data: AreaSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
@@ -73,4 +73,4 @@ export type AreaSeries<T = MeaningfulAny> = BaseSeries & {
     marker?: AreaMarkerOptions;
     /** Y-axis index (when using two axes) */
     yAxis?: number;
-};
+}

package/dist/esm/types/chart/axis.d.ts

@@ -2,7 +2,7 @@ import type { FormatNumberOptions } from '../formatter';
 import type { BaseTextStyle } from './base';
 export type ChartAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
 export type ChartAxisTitleAlignment = 'left' | 'center' | 'right';
-export type ChartAxisLabels = {
+export interface ChartAxisLabels {
     /** Enable or disable the axis labels. */
     enabled?: boolean;
     /** The label's pixel distance from the perimeter of the plot area.
@@ -27,8 +27,8 @@ export type ChartAxisLabels = {
      * @default: 0
      */
     rotation?: number;
-};
-export type ChartAxis = {
+}
+export interface ChartAxis {
     categories?: string[];
     timestamps?: number[];
     type?: ChartAxisType;
@@ -72,9 +72,10 @@ export type ChartAxis = {
      * Defaults to 0.05 for Y axis and to 0.01 for X axis.
      * */
     maxPadding?: number;
-};
-export type ChartXAxis = ChartAxis;
-export type ChartYAxis = ChartAxis & {
+}
+export interface ChartXAxis extends ChartAxis {
+}
+export interface ChartYAxis extends ChartAxis {
     /** Axis location.
      * Possible values - 'left' and 'right'.
      * */
@@ -82,4 +83,4 @@ export type ChartYAxis = ChartAxis & {
     /** Property for splitting charts. Determines which area the axis is located in.
      * */
     plotIndex?: number;
-};
+}

package/dist/esm/types/chart/bar-x.d.ts

@@ -3,7 +3,7 @@ import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
 import type { ChartSeriesOptions } from './series';
-export type BarXSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the bar. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -28,8 +28,8 @@ export type BarXSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
     label?: string | number;
     /** Individual opacity for the bar-x column. */
     opacity?: number;
-};
-export type BarXSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.BarX;
     data: BarXSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
@@ -64,4 +64,4 @@ export type BarXSeries<T = MeaningfulAny> = BaseSeries & {
     };
     /** Y-axis index (when using two axes) */
     yAxis?: number;
-};
+}

package/dist/esm/types/chart/bar-y.d.ts

@@ -2,8 +2,7 @@ import type { SeriesType } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
-import type { ChartSeriesOptions } from './series';
-export type BarYSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
+export interface BarYSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the bar. Depending on the context , it may represents:
      * - numeric value (for `linear` x axis)
@@ -22,8 +21,8 @@ export type BarYSeriesData<T = MeaningfulAny> = BaseSeriesData<T> & {
     label?: string | number;
     /** Individual opacity for the bar. */
     opacity?: number;
-};
-export type BarYSeries<T = MeaningfulAny> = BaseSeries & {
+}
+export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SeriesType.BarY;
     data: BarYSeriesData<T>[];
     /** The name of the series (used in legend, tooltip etc) */
@@ -44,7 +43,7 @@ export type BarYSeries<T = MeaningfulAny> = BaseSeries & {
      * @default true
      * */
     grouping?: boolean;
-    dataLabels?: ChartSeriesOptions['dataLabels'] & {
+    dataLabels?: BaseSeries['dataLabels'] & {
         /**
          * Whether to align the data label inside or outside the box.
          * For charts with a percentage stack, it is always true.
@@ -57,4 +56,4 @@ export type BarYSeries<T = MeaningfulAny> = BaseSeries & {
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;
     };
-};
+}

package/dist/esm/types/chart/base.d.ts

@@ -1,5 +1,5 @@
 import type { MeaningfulAny } from '../misc';
-export type BaseSeries = {
+export interface BaseSeries {
     /** Initial visibility of the series */
     visible?: boolean;
     /**
@@ -30,8 +30,8 @@ export type BaseSeries = {
     };
     /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
     cursor?: string;
-};
-export type BaseSeriesData<T = MeaningfulAny> = {
+}
+export interface BaseSeriesData<T = MeaningfulAny> {
     /**
      * A reserved subspace to store options and values for customized functionality
      *
@@ -40,9 +40,9 @@ export type BaseSeriesData<T = MeaningfulAny> = {
     custom?: T;
     /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
     color?: string;
-};
-export type BaseTextStyle = {
+}
+export interface BaseTextStyle {
     fontSize: string;
     fontWeight?: string;
     fontColor?: string;
-};
+}

package/dist/esm/types/chart/chart.d.ts

@@ -1,12 +1,12 @@
 import type { MeaningfulAny } from '../misc';
 import type { ChartTooltipRendererArgs } from './tooltip';
-export type ChartMargin = {
+export interface ChartMargin {
     top: number;
     right: number;
     bottom: number;
     left: number;
-};
-export type ChartOptions = {
+}
+export interface ChartOptions {
     margin?: Partial<ChartMargin>;
     events?: {
         click?: (data: {
@@ -15,4 +15,4 @@ export type ChartOptions = {
         }, event: PointerEvent) => void;
         pointermove?: (data: ChartTooltipRendererArgs | undefined, event: PointerEvent) => void;
     };
-};
+}

package/dist/esm/types/chart/halo.d.ts

@@ -1,9 +1,9 @@
 /** The halo appearing around the hovered part of series(point in line-type series or slice in pie charts) */
-export type Halo = {
+export interface Halo {
     /** Enable or disable the halo */
     enabled?: boolean;
     /** The opacity of halo */
     opacity?: number;
     /** The pixel size of the halo. Radius for point markers or width of the outside slice in pie charts. */
     size?: number;
-};
+}