@gravity-ui/charts 0.6.0 → 0.7.0

package/README.md

@@ -6,7 +6,7 @@
 ## Install
 
 ```shell
-npm install --save-dev @gravity-ui/uikit @gravity-ui/charts
+npm install @gravity-ui/uikit @gravity-ui/charts
 ```
 
 ## Development

package/dist/cjs/components/Tooltip/ChartTooltipContent.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
-export type ChartTooltipContentProps = {
+export interface ChartTooltipContentProps {
     hovered?: TooltipDataChunk[];
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis;
     renderer?: ChartTooltip['renderer'];
-};
+}
 export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

package/dist/cjs/components/Tooltip/index.js

@@ -1,19 +1,19 @@
 import React from 'react';
-import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
+import { Popup, useVirtualElement } from '@gravity-ui/uikit';
 import { useTooltip } from '../../hooks';
 import { block } from '../../utils';
 import { ChartTooltipContent } from './ChartTooltipContent';
 import './styles.css';
-const b = block('d3-tooltip');
+const b = block('tooltip');
 export const Tooltip = (props) => {
     const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
     const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
     const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
-    const anchorRef = useVirtualElementRef({ rect: { left, top } });
-    const handleOutsideClick = (e) => {
-        if (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.contains(e.target)) {
+    const { anchor } = useVirtualElement({ left, top });
+    const handleOnOpenChange = (_open, e) => {
+        if (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.contains(e === null || e === void 0 ? void 0 : e.target)) {
             return;
         }
         onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick();
@@ -21,7 +21,7 @@ export const Tooltip = (props) => {
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
-    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
+    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('content') },
             React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
 };

package/dist/cjs/components/Tooltip/styles.css

@@ -1,28 +1,17 @@
-.gcharts-d3-tooltip[class] {
-  --g-popup-border-width: 0;
-  pointer-events: none;
-}
-.gcharts-d3-tooltip[class] > div {
-  animation-duration: unset;
-  animation-timing-function: unset;
-  animation-fill-mode: unset;
-}
-.gcharts-d3-tooltip[class].gcharts-d3-tooltip_pinned {
-  pointer-events: inherit;
+.gcharts-tooltip {
+  box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
-.gcharts-d3-tooltip__content {
-  padding: 10px 14px;
+.gcharts-tooltip__content {
+  padding: 8px 14px;
   text-wrap: nowrap;
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: 3px;
+  border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
-  box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
-.gcharts-d3-tooltip__content-row {
+.gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
 }
-.gcharts-d3-tooltip__color {
+.gcharts-tooltip__color {
   display: inline-block;
   width: 16px;
   height: 8px;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/hooks/useShapes/pie/types.d.ts

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

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

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

package/dist/cjs/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/cjs/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/cjs/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;
-};
+}