@lobehub/charts 1.4.1 → 1.6.0

package/es/AreaChart/index.js

@@ -5,17 +5,20 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var _excluded = ["data", "categories", "index", "stack", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showAnimation", "animationDuration", "showTooltip", "showLegend", "showGridLines", "showGradient", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories"];
+var _excluded = ["data", "categories", "index", "stack", "colors", "valueFormatter", "xAxisLabelFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisAlign", "yAxisWidth", "intervalType", "showAnimation", "animationDuration", "showTooltip", "showLegend", "showGridLines", "showGradient", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories"];
+import { Skeleton } from 'antd';
 import { css } from 'antd-style';
-import { Fragment, forwardRef, useState } from 'react';
+import { Fragment, forwardRef, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { Area, CartesianGrid, Dot, Label, Legend, Line, AreaChart as ReChartsAreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import ChartLegend from "../common/ChartLegend";
 import ChartTooltip from "../common/ChartTooltip";
+import CustomYAxisTick from "../common/CustomYAxisTick";
 import NoData from "../common/NoData";
 import { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } from "../common/utils";
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter } from "../utils";
+import { getMaxLabelLength } from "../utils/getMaxLabelLength";
 import { useStyles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,14 +39,17 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
     _props$valueFormatter = props.valueFormatter,
     valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$xAxisLabelForm = props.xAxisLabelFormatter,
+    xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
     _props$startEndOnly = props.startEndOnly,
     startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
     _props$showXAxis = props.showXAxis,
     showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis,
     _props$showYAxis = props.showYAxis,
     showYAxis = _props$showYAxis === void 0 ? true : _props$showYAxis,
-    _props$yAxisWidth = props.yAxisWidth,
-    yAxisWidth = _props$yAxisWidth === void 0 ? 56 : _props$yAxisWidth,
+    _props$yAxisAlign = props.yAxisAlign,
+    yAxisAlign = _props$yAxisAlign === void 0 ? 'left' : _props$yAxisAlign,
+    yAxisWidth = props.yAxisWidth,
     _props$intervalType = props.intervalType,
     intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
     _props$showAnimation = props.showAnimation,
@@ -77,6 +83,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     rotateLabelX = props.rotateLabelX,
     _props$tickGap = props.tickGap,
     tickGap = _props$tickGap === void 0 ? 5 : _props$tickGap,
+    loading = props.loading,
     xAxisLabel = props.xAxisLabel,
     yAxisLabel = props.yAxisLabel,
     _props$width = props.width,
@@ -86,8 +93,6 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     style = props.style,
     customCategories = props.customCategories,
     rest = _objectWithoutProperties(props, _excluded);
-  var CustomTooltip = customTooltip;
-  var paddingValue = !showXAxis && !showYAxis || startEndOnly && !showYAxis ? 0 : 20;
   var _useState = useState(60),
     _useState2 = _slicedToArray(_useState, 2),
     legendHeight = _useState2[0],
@@ -100,6 +105,25 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     activeLegend = _useState6[0],
     setActiveLegend = _useState6[1];
+  var calculatedYAxisWidth = useMemo(function () {
+    if (yAxisWidth) return yAxisWidth;
+    return getMaxLabelLength({
+      data: data,
+      index: index,
+      margin: 16,
+      valueFormatter: valueFormatter
+    });
+  }, [yAxisWidth, data, valueFormatter, index]);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
+    active: true,
+    block: true,
+    style: {
+      height: height,
+      width: width
+    }
+  });
+  var CustomTooltip = customTooltip;
+  var paddingValue = !showXAxis && !showYAxis || startEndOnly && !showYAxis ? 0 : 20;
   var categoryColors = constructCategoryColors(categories, colors);
   var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   var hasOnValueChange = !!onValueChange;
@@ -182,6 +206,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
           tick: {
             transform: 'translate(0, 6)'
           },
+          tickFormatter: xAxisLabelFormatter,
           tickLine: false,
           ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
           children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
@@ -198,13 +223,18 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
           fill: "",
           hide: !showYAxis,
           stroke: "",
-          tick: {
-            transform: 'translate(-3, 0)'
+          tick: function tick(props) {
+            return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
+              align: yAxisAlign,
+              formatter: valueFormatter,
+              textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
+              yAxisLabel: Boolean(yAxisLabel)
+            }));
           },
           tickFormatter: valueFormatter,
           tickLine: false,
           type: "number",
-          width: yAxisWidth,
+          width: calculatedYAxisWidth,
           children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
             angle: -90,
             className: cx(styles.strongLabel, styles.emphasis),
@@ -217,6 +247,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
           content: showTooltip ? function (_ref) {
+            var _ref2;
             var active = _ref.active,
               payload = _ref.payload,
               label = _ref.label;
@@ -224,7 +255,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               active: active,
               customCategories: customCategories,
               label: label,
-              payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
+              payload: (_ref2 = stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload) === null || _ref2 === void 0 ? void 0 : _ref2.map(function (payloadItem) {
                 var _categoryColors$get;
                 return _objectSpread(_objectSpread({}, payloadItem), {}, {
                   color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
@@ -235,7 +266,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               categoryColors: categoryColors,
               customCategories: customCategories,
               label: label,
-              payload: payload,
+              payload: stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload,
               valueFormatter: valueFormatter
             });
           } : undefined,
@@ -251,8 +282,8 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
             outline: 'none'
           }
         }), showLegend ? /*#__PURE__*/_jsx(Legend, {
-          content: function content(_ref2) {
-            var payload = _ref2.payload;
+          content: function content(_ref3) {
+            var payload = _ref3.payload;
             return ChartLegend({
               payload: payload
             }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {

package/es/BarChart/index.d.ts

@@ -3,7 +3,6 @@ import BaseChartProps from "../common/BaseChartProps";
 export interface BarChartProps extends BaseChartProps {
     barCategoryGap?: string | number;
     layout?: 'vertical' | 'horizontal';
-    relative?: boolean;
     stack?: boolean;
 }
 declare const BarChart: import("react").ForwardRefExoticComponent<BarChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/es/BarChart/index.js

@@ -5,17 +5,20 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["data", "categories", "customCategories", "index", "colors", "valueFormatter", "layout", "stack", "relative", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "xAxisLabel", "yAxisLabel", "className", "width", "height", "style"];
+var _excluded = ["data", "categories", "customCategories", "index", "yAxisAlign", "colors", "valueFormatter", "xAxisLabelFormatter", "layout", "stack", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "className", "width", "height", "style"];
+import { Skeleton } from 'antd';
 import { css } from 'antd-style';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { Bar, CartesianGrid, Label, Legend, BarChart as ReChartsBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import ChartLegend from "../common/ChartLegend";
 import ChartTooltip from "../common/ChartTooltip";
+import CustomYAxisTick from "../common/CustomYAxisTick";
 import NoData from "../common/NoData";
 import { constructCategoryColors, deepEqual, getYAxisDomain } from "../common/utils";
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter } from "../utils";
+import { getMaxLabelLength } from "../utils/getMaxLabelLength";
 import { renderShape } from "./renderShape";
 import { useStyles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,16 +35,18 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     categories = _props$categories === void 0 ? [] : _props$categories,
     customCategories = props.customCategories,
     index = props.index,
+    _props$yAxisAlign = props.yAxisAlign,
+    yAxisAlign = _props$yAxisAlign === void 0 ? 'left' : _props$yAxisAlign,
     _props$colors = props.colors,
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
     _props$valueFormatter = props.valueFormatter,
     valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$xAxisLabelForm = props.xAxisLabelFormatter,
+    xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
     _props$stack = props.stack,
     stack = _props$stack === void 0 ? false : _props$stack,
-    _props$relative = props.relative,
-    relative = _props$relative === void 0 ? false : _props$relative,
     _props$startEndOnly = props.startEndOnly,
     startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
     _props$animationDurat = props.animationDuration,
@@ -52,8 +57,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis,
     _props$showYAxis = props.showYAxis,
     showYAxis = _props$showYAxis === void 0 ? true : _props$showYAxis,
-    _props$yAxisWidth = props.yAxisWidth,
-    yAxisWidth = _props$yAxisWidth === void 0 ? 56 : _props$yAxisWidth,
+    yAxisWidth = props.yAxisWidth,
     _props$intervalType = props.intervalType,
     intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
     _props$showTooltip = props.showTooltip,
@@ -77,6 +81,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     barCategoryGap = props.barCategoryGap,
     _props$tickGap = props.tickGap,
     tickGap = _props$tickGap === void 0 ? 5 : _props$tickGap,
+    loading = props.loading,
     xAxisLabel = props.xAxisLabel,
     yAxisLabel = props.yAxisLabel,
     className = props.className,
@@ -86,21 +91,38 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     height = _props$height === void 0 ? '20rem' : _props$height,
     style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
-  var CustomTooltip = customTooltip;
-  var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
-  var _useState = useState(60),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
-    legendHeight = _useState2[0],
-    setLegendHeight = _useState2[1];
-  var categoryColors = constructCategoryColors(categories, colors);
+    activeBar = _useState2[0],
+    setActiveBar = _useState2[1];
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    activeBar = _useState4[0],
-    setActiveBar = _useState4[1];
-  var _useState5 = useState(),
+    activeLegend = _useState4[0],
+    setActiveLegend = _useState4[1];
+  var _useState5 = useState(60),
     _useState6 = _slicedToArray(_useState5, 2),
-    activeLegend = _useState6[0],
-    setActiveLegend = _useState6[1];
+    legendHeight = _useState6[0],
+    setLegendHeight = _useState6[1];
+  var calculatedYAxisWidth = useMemo(function () {
+    if (yAxisWidth) return yAxisWidth;
+    return getMaxLabelLength({
+      data: data,
+      index: index,
+      layout: layout,
+      valueFormatter: valueFormatter
+    });
+  }, [yAxisWidth, layout, data, valueFormatter, index]);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
+    active: true,
+    block: true,
+    style: {
+      height: height,
+      width: width
+    }
+  });
+  var CustomTooltip = customTooltip;
+  var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
+  var categoryColors = constructCategoryColors(categories, colors);
   var hasOnValueChange = !!onValueChange;
   var onBarClick = function onBarClick(data, idx, event) {
     event.stopPropagation();
@@ -163,7 +185,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           setActiveLegend(undefined);
           onValueChange === null || onValueChange === void 0 || onValueChange(null);
         } : undefined,
-        stackOffset: stack ? 'sign' : relative ? 'expand' : 'none',
+        stackOffset: stack ? 'sign' : 'none',
         children: [showGridLines ? /*#__PURE__*/_jsx(CartesianGrid, {
           className: styles.gridLines,
           horizontal: layout !== 'vertical',
@@ -216,6 +238,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           tick: {
             transform: 'translate(0, 6)'
           },
+          tickFormatter: xAxisLabelFormatter,
           tickLine: false,
           ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
           children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
@@ -237,13 +260,19 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           hide: !showYAxis,
           interval: "preserveStartEnd",
           stroke: "",
-          tick: {
-            transform: 'translate(0, 6)'
+          tick: function tick(props) {
+            return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
+              align: yAxisAlign,
+              formatter: xAxisLabelFormatter,
+              textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
+              yAxisLabel: Boolean(yAxisLabel)
+            }));
           },
+          tickFormatter: xAxisLabelFormatter,
           tickLine: false,
           ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
           type: "category",
-          width: yAxisWidth,
+          width: calculatedYAxisWidth,
           children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
             angle: -90,
             className: styles.emphasis,
@@ -264,15 +293,18 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           fill: "",
           hide: !showYAxis,
           stroke: "",
-          tick: {
-            transform: 'translate(-3, 0)'
+          tick: function tick(props) {
+            return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
+              align: yAxisAlign,
+              formatter: valueFormatter,
+              textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
+              yAxisLabel: Boolean(yAxisLabel)
+            }));
           },
-          tickFormatter: relative ? function (value) {
-            return "".concat((value * 100).toString(), " %");
-          } : valueFormatter,
+          tickFormatter: valueFormatter,
           tickLine: false,
           type: "number",
-          width: yAxisWidth,
+          width: calculatedYAxisWidth,
           children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
             angle: -90,
             className: styles.emphasis,
@@ -287,6 +319,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
           content: showTooltip ? function (_ref) {
+            var _ref2;
             var active = _ref.active,
               payload = _ref.payload,
               label = _ref.label;
@@ -294,7 +327,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
               active: active,
               customCategories: customCategories,
               label: label,
-              payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
+              payload: (_ref2 = stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload) === null || _ref2 === void 0 ? void 0 : _ref2.map(function (payloadItem) {
                 var _categoryColors$get;
                 return _objectSpread(_objectSpread({}, payloadItem), {}, {
                   color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
@@ -305,7 +338,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
               categoryColors: categoryColors,
               customCategories: customCategories,
               label: label,
-              payload: payload,
+              payload: stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload,
               valueFormatter: valueFormatter
             });
           } : undefined,
@@ -320,8 +353,8 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             outline: 'none'
           }
         }), showLegend ? /*#__PURE__*/_jsx(Legend, {
-          content: function content(_ref2) {
-            var payload = _ref2.payload;
+          content: function content(_ref3) {
+            var payload = _ref3.payload;
             return ChartLegend({
               payload: payload
             }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
@@ -343,7 +376,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             shape: function shape(props) {
               return renderShape(props, activeBar, activeLegend, layout);
             },
-            stackId: stack || relative ? 'a' : undefined,
+            stackId: stack ? 'a' : undefined,
             style: {
               cursor: onValueChange ? 'pointer' : undefined
             },

package/es/LineChart/index.js

@@ -5,17 +5,20 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories"];
+var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "xAxisLabelFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "yAxisAlign", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories", "loading"];
+import { Skeleton } from 'antd';
 import { css } from 'antd-style';
-import { Fragment, forwardRef, useState } from 'react';
+import { Fragment, forwardRef, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { CartesianGrid, Dot, Label, Legend, Line, LineChart as ReChartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import ChartLegend from "../common/ChartLegend";
 import ChartTooltip from "../common/ChartTooltip";
+import CustomYAxisTick from "../common/CustomYAxisTick";
 import NoData from "../common/NoData";
 import { constructCategoryColors, getYAxisDomain, hasOnlyOneValueForThisKey } from "../common/utils";
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter } from "../utils";
+import { getMaxLabelLength } from "../utils/getMaxLabelLength";
 import { useStyles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,20 +37,23 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
     _props$valueFormatter = props.valueFormatter,
     valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$xAxisLabelForm = props.xAxisLabelFormatter,
+    xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
     _props$startEndOnly = props.startEndOnly,
     startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
     _props$showXAxis = props.showXAxis,
     showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis,
     _props$showYAxis = props.showYAxis,
     showYAxis = _props$showYAxis === void 0 ? true : _props$showYAxis,
-    _props$yAxisWidth = props.yAxisWidth,
-    yAxisWidth = _props$yAxisWidth === void 0 ? 56 : _props$yAxisWidth,
+    yAxisWidth = props.yAxisWidth,
     _props$intervalType = props.intervalType,
     intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
     _props$animationDurat = props.animationDuration,
     animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
     _props$showAnimation = props.showAnimation,
     showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    _props$yAxisAlign = props.yAxisAlign,
+    yAxisAlign = _props$yAxisAlign === void 0 ? 'left' : _props$yAxisAlign,
     _props$showTooltip = props.showTooltip,
     showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip,
     _props$showLegend = props.showLegend,
@@ -81,9 +87,8 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
     height = _props$height === void 0 ? '20rem' : _props$height,
     style = props.style,
     customCategories = props.customCategories,
+    loading = props.loading,
     rest = _objectWithoutProperties(props, _excluded);
-  var CustomTooltip = customTooltip;
-  var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
   var _useState = useState(60),
     _useState2 = _slicedToArray(_useState, 2),
     legendHeight = _useState2[0],
@@ -96,6 +101,25 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     activeLegend = _useState6[0],
     setActiveLegend = _useState6[1];
+  var calculatedYAxisWidth = useMemo(function () {
+    if (yAxisWidth) return yAxisWidth;
+    return getMaxLabelLength({
+      data: data,
+      index: index,
+      margin: 16,
+      valueFormatter: valueFormatter
+    });
+  }, [yAxisWidth, data, valueFormatter, index]);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
+    active: true,
+    block: true,
+    style: {
+      height: height,
+      width: width
+    }
+  });
+  var CustomTooltip = customTooltip;
+  var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
   var categoryColors = constructCategoryColors(categories, colors);
   var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   var hasOnValueChange = !!onValueChange;
@@ -178,6 +202,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
           tick: {
             transform: 'translate(0, 6)'
           },
+          tickFormatter: xAxisLabelFormatter,
           tickLine: false,
           ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
           children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
@@ -194,13 +219,18 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
           fill: "",
           hide: !showYAxis,
           stroke: "",
-          tick: {
-            transform: 'translate(-3, 0)'
+          tick: function tick(props) {
+            return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
+              align: yAxisAlign,
+              formatter: valueFormatter,
+              textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
+              yAxisLabel: Boolean(yAxisLabel)
+            }));
           },
           tickFormatter: valueFormatter,
           tickLine: false,
           type: "number",
-          width: yAxisWidth,
+          width: calculatedYAxisWidth,
           children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
             angle: -90,
             className: cx(styles.strongLabel, styles.emphasis),

package/es/ScatterChart/index.d.ts

@@ -22,6 +22,7 @@ export interface ScatterChartProps extends BaseAnimationTimingProps, HTMLAttribu
     data: any[];
     enableLegendSlider?: boolean;
     intervalType?: IntervalType;
+    loading?: boolean;
     maxXValue?: number;
     maxYValue?: number;
     minXValue?: number;
@@ -47,6 +48,7 @@ export interface ScatterChartProps extends BaseAnimationTimingProps, HTMLAttribu
     x: string;
     xAxisLabel?: string;
     y: string;
+    yAxisAlign?: 'left' | 'right';
     yAxisLabel?: string;
     yAxisWidth?: number;
 }

package/es/ScatterChart/index.js

@@ -5,16 +5,19 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject, _templateObject2;
-var _excluded = ["data", "x", "y", "size", "category", "colors", "showOpacity", "sizeRange", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "showTooltip", "showLegend", "showGridLines", "autoMinXValue", "minXValue", "maxXValue", "autoMinYValue", "minYValue", "maxYValue", "allowDecimals", "noDataText", "onValueChange", "customTooltip", "rotateLabelX", "className", "enableLegendSlider", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories"];
+var _excluded = ["data", "x", "y", "size", "category", "colors", "showOpacity", "yAxisAlign", "sizeRange", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "showTooltip", "showLegend", "loading", "showGridLines", "autoMinXValue", "minXValue", "maxXValue", "autoMinYValue", "minYValue", "maxYValue", "allowDecimals", "noDataText", "onValueChange", "customTooltip", "rotateLabelX", "className", "enableLegendSlider", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories"];
+import { Skeleton } from 'antd';
 import { css } from 'antd-style';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { CartesianGrid, Label, Legend, ScatterChart as ReChartsScatterChart, ResponsiveContainer, Scatter, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';
 import { renderShape } from "./renderShape";
 import ChartLegend from "../common/ChartLegend";
+import CustomYAxisTick from "../common/CustomYAxisTick";
 import { constructCategories, constructCategoryColors, deepEqual, getYAxisDomain } from "../common/utils";
 import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import { defaultValueFormatter } from "../utils";
+import { getMaxLabelLength } from "../utils/getMaxLabelLength";
 import NoData from "../common/NoData";
 import ScatterChartTooltip from "./ScatterChartTooltip";
 import { useStyles } from "./styles";
@@ -36,6 +39,8 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
     _props$showOpacity = props.showOpacity,
     showOpacity = _props$showOpacity === void 0 ? false : _props$showOpacity,
+    _props$yAxisAlign = props.yAxisAlign,
+    yAxisAlign = _props$yAxisAlign === void 0 ? 'left' : _props$yAxisAlign,
     _props$sizeRange = props.sizeRange,
     sizeRange = _props$sizeRange === void 0 ? [1, 1000] : _props$sizeRange,
     _props$valueFormatter = props.valueFormatter,
@@ -50,8 +55,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     showXAxis = _props$showXAxis === void 0 ? true : _props$showXAxis,
     _props$showYAxis = props.showYAxis,
     showYAxis = _props$showYAxis === void 0 ? true : _props$showYAxis,
-    _props$yAxisWidth = props.yAxisWidth,
-    yAxisWidth = _props$yAxisWidth === void 0 ? 56 : _props$yAxisWidth,
+    yAxisWidth = props.yAxisWidth,
     _props$intervalType = props.intervalType,
     intervalType = _props$intervalType === void 0 ? 'equidistantPreserveStart' : _props$intervalType,
     _props$animationDurat = props.animationDuration,
@@ -62,6 +66,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip,
     _props$showLegend = props.showLegend,
     showLegend = _props$showLegend === void 0 ? true : _props$showLegend,
+    loading = props.loading,
     _props$showGridLines = props.showGridLines,
     showGridLines = _props$showGridLines === void 0 ? true : _props$showGridLines,
     _props$autoMinXValue = props.autoMinXValue,
@@ -92,7 +97,6 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     style = props.style,
     customCategories = props.customCategories,
     rest = _objectWithoutProperties(props, _excluded);
-  var CustomTooltip = customTooltip;
   var _useState = useState(60),
     _useState2 = _slicedToArray(_useState, 2),
     legendHeight = _useState2[0],
@@ -105,6 +109,25 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     activeLegend = _useState6[0],
     setActiveLegend = _useState6[1];
+  var calculatedYAxisWidth = useMemo(function () {
+    if (yAxisWidth) return yAxisWidth;
+    return getMaxLabelLength({
+      data: data,
+      index: y,
+      isScatterChart: true,
+      margin: 0,
+      valueFormatter: valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter.y
+    });
+  }, [yAxisWidth, data, valueFormatter, y]);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
+    active: true,
+    block: true,
+    style: {
+      height: height,
+      width: width
+    }
+  });
+  var CustomTooltip = customTooltip;
   var hasOnValueChange = !!onValueChange;
   var onNodeClick = function onNodeClick(data, index, event) {
     event.stopPropagation();
@@ -207,13 +230,18 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
           hide: !showYAxis,
           name: y,
           stroke: "",
-          tick: {
-            transform: 'translate(-3, 0)'
+          tick: function tick(props) {
+            return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
+              align: yAxisAlign,
+              formatter: valueFormatter.y,
+              textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
+              yAxisLabel: Boolean(yAxisLabel)
+            }));
           },
           tickFormatter: valueFormatter.y,
           tickLine: false,
           type: "number",
-          width: yAxisWidth,
+          width: calculatedYAxisWidth,
           children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
             angle: -90,
             className: cx(styles.strongLabel, styles.emphasis),

package/es/SparkChart/SparkAreaChart.d.ts

@@ -4,6 +4,7 @@ import { CurveType } from "../types";
 export interface SparkAreaChartProps extends BaseSparkChartProps {
     connectNulls?: boolean;
     curveType?: CurveType;
+    loading?: boolean;
     showGradient?: boolean;
     stack?: boolean;
 }

package/es/SparkChart/SparkAreaChart.js

@@ -4,7 +4,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject, _templateObject2, _templateObject3;
-var _excluded = ["data", "categories", "index", "stack", "colors", "showAnimation", "animationDuration", "showGradient", "curveType", "connectNulls", "noDataText", "autoMinValue", "minValue", "maxValue", "className", "width", "height", "style"];
+var _excluded = ["data", "categories", "index", "stack", "colors", "showAnimation", "animationDuration", "showGradient", "curveType", "connectNulls", "noDataText", "autoMinValue", "loading", "minValue", "maxValue", "className", "width", "height", "style"];
+import { Skeleton } from 'antd';
 import { css } from 'antd-style';
 import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -43,6 +44,7 @@ var SparkAreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     noDataText = _props$noDataText === void 0 ? /*#__PURE__*/_jsx("div", {}) : _props$noDataText,
     _props$autoMinValue = props.autoMinValue,
     autoMinValue = _props$autoMinValue === void 0 ? false : _props$autoMinValue,
+    loading = props.loading,
     minValue = props.minValue,
     maxValue = props.maxValue,
     className = props.className,
@@ -52,6 +54,14 @@ var SparkAreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     height = _props$height === void 0 ? 48 : _props$height,
     style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
+    active: true,
+    block: true,
+    style: {
+      height: height,
+      width: width
+    }
+  });
   var categoryColors = constructCategoryColors(categories, colors);
   var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({

package/es/SparkChart/SparkBarChart.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import BaseSparkChartProps from "../common/BaseSparkChartProps";
 export interface SparkBarChartProps extends BaseSparkChartProps {
+    loading?: boolean;
     relative?: boolean;
     stack?: boolean;
 }

package/es/SparkChart/SparkBarChart.js

@@ -4,7 +4,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["data", "categories", "index", "colors", "stack", "relative", "animationDuration", "showAnimation", "noDataText", "autoMinValue", "minValue", "maxValue", "className", "width", "height", "style"];
+var _excluded = ["data", "categories", "index", "colors", "stack", "relative", "animationDuration", "showAnimation", "noDataText", "loading", "autoMinValue", "minValue", "maxValue", "className", "width", "height", "style"];
+import { Skeleton } from 'antd';
 import { css } from 'antd-style';
 import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -37,6 +38,7 @@ var SparkBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
     _props$noDataText = props.noDataText,
     noDataText = _props$noDataText === void 0 ? /*#__PURE__*/_jsx("div", {}) : _props$noDataText,
+    loading = props.loading,
     _props$autoMinValue = props.autoMinValue,
     autoMinValue = _props$autoMinValue === void 0 ? false : _props$autoMinValue,
     minValue = props.minValue,
@@ -48,6 +50,14 @@ var SparkBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     height = _props$height === void 0 ? 48 : _props$height,
     style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
+    active: true,
+    block: true,
+    style: {
+      height: height,
+      width: width
+    }
+  });
   var categoryColors = constructCategoryColors(categories, colors);
   var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({

package/es/SparkChart/SparkLineChart.d.ts

@@ -4,6 +4,7 @@ import { CurveType } from "../types";
 export interface SparkLineChartProps extends BaseSparkChartProps {
     connectNulls?: boolean;
     curveType?: CurveType;
+    loading?: boolean;
 }
 declare const SparkLineChart: import("react").ForwardRefExoticComponent<SparkLineChartProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SparkLineChart;

package/es/SparkChart/SparkLineChart.js

@@ -4,7 +4,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["data", "categories", "index", "colors", "animationDuration", "showAnimation", "curveType", "connectNulls", "noDataText", "autoMinValue", "minValue", "maxValue", "className", "width", "height", "style"];
+var _excluded = ["data", "categories", "index", "colors", "animationDuration", "showAnimation", "curveType", "connectNulls", "noDataText", "autoMinValue", "minValue", "maxValue", "className", "width", "height", "style", "loading"];
+import { Skeleton } from 'antd';
 import { css } from 'antd-style';
 import { forwardRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -47,7 +48,16 @@ var SparkLineChart = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$height = props.height,
     height = _props$height === void 0 ? 48 : _props$height,
     style = props.style,
+    loading = props.loading,
     rest = _objectWithoutProperties(props, _excluded);
+  if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
+    active: true,
+    block: true,
+    style: {
+      height: height,
+      width: width
+    }
+  });
   var categoryColors = constructCategoryColors(categories, colors);
   var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({

package/es/common/BaseChartProps.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType, HTMLAttributes } from 'react';
 import type { NoDataProps } from "./NoData";
-import { IntervalType, ValueFormatter } from "../types";
+import { IntervalType, LabelFormatter, ValueFormatter } from "../types";
 import type BaseAnimationTimingProps from './BaseAnimationTimingProps';
 import { CustomTooltipProps } from './CustomTooltipProps';
 type FixedProps = {
@@ -25,6 +25,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDi
     height?: string | number;
     index: string;
     intervalType?: IntervalType;
+    loading?: boolean;
     maxValue?: number;
     minValue?: number;
     noDataText?: NoDataProps['noDataText'];
@@ -44,6 +45,8 @@ interface BaseChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDi
     valueFormatter?: ValueFormatter;
     width?: string | number;
     xAxisLabel?: string;
+    xAxisLabelFormatter?: LabelFormatter;
+    yAxisAlign?: 'left' | 'right';
     yAxisLabel?: string;
     yAxisWidth?: number;
 }

package/es/common/CustomYAxisTick.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ValueFormatter } from "../types";
+interface CustomYAxisTickProps {
+    align: 'left' | 'right';
+    formatter: ValueFormatter;
+    payload: {
+        value: number;
+    };
+    x: number;
+    y: number;
+    yAxisLabel?: boolean;
+}
+declare const CustomYAxisTick: React.NamedExoticComponent<CustomYAxisTickProps>;
+export default CustomYAxisTick;

package/es/common/CustomYAxisTick.js

@@ -0,0 +1,26 @@
+import { useTheme } from 'antd-style';
+import React, { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var CustomYAxisTick = /*#__PURE__*/memo(function (_ref) {
+  var yAxisLabel = _ref.yAxisLabel,
+    x = _ref.x,
+    y = _ref.y,
+    payload = _ref.payload,
+    align = _ref.align,
+    formatter = _ref.formatter;
+  var theme = useTheme();
+  var yAxisLabelWidth = yAxisLabel ? 24 : 0;
+  return /*#__PURE__*/_jsx("g", {
+    transform: "translate(".concat(align === 'left' ? yAxisLabelWidth : x + yAxisLabelWidth, ",").concat(y, ")"),
+    children: /*#__PURE__*/_jsx("text", {
+      dy: 4,
+      fill: theme.colorTextDescription,
+      fontSize: 14,
+      textAnchor: align === 'left' ? 'start' : 'end',
+      x: 0,
+      y: 0,
+      children: formatter(payload.value)
+    })
+  });
+});
+export default CustomYAxisTick;

package/es/types.d.ts

@@ -37,6 +37,9 @@ export type CurveType = 'linear' | 'natural' | 'monotone' | 'step';
 export type ValueFormatter = {
     (value: number): string;
 };
+export type LabelFormatter = {
+    (value: number | string): string;
+};
 export type ScatterChartValueFormatter = {
     size?: ValueFormatter;
     x?: ValueFormatter;

package/es/utils/getMaxLabelLength.d.ts

@@ -0,0 +1,10 @@
+import { ValueFormatter } from "../types";
+export declare const getTextWidth: (text: string) => number;
+export declare const getMaxLabelLength: ({ data, valueFormatter, index, layout, margin, isScatterChart, }: {
+    data: Array<Record<string, any>>;
+    index: string;
+    isScatterChart?: boolean | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
+    margin?: number | undefined;
+    valueFormatter?: ValueFormatter | undefined;
+}) => number;

package/es/utils/getMaxLabelLength.js

@@ -0,0 +1,107 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import { defaultValueFormatter } from "./index";
+export var getTextWidth = function getTextWidth(text) {
+  // 创建临时 span 元素
+  var span = document.createElement('span');
+
+  // 设置样式使其不可见
+  span.style.fontSize = '14px';
+  span.style.position = 'absolute';
+  span.style.visibility = 'hidden';
+  span.style.whiteSpace = 'nowrap';
+
+  // 设置文本内容
+  span.textContent = text;
+
+  // 添加到 body
+  document.body.append(span);
+
+  // 获取宽度
+  var width = span.getBoundingClientRect().width;
+
+  // 移除临时元素
+  span.remove();
+  return width;
+};
+export var getMaxLabelLength = function getMaxLabelLength(_ref) {
+  var data = _ref.data,
+    _ref$valueFormatter = _ref.valueFormatter,
+    valueFormatter = _ref$valueFormatter === void 0 ? defaultValueFormatter : _ref$valueFormatter,
+    index = _ref.index,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 24 : _ref$margin,
+    isScatterChart = _ref.isScatterChart;
+  var maxLength = 0;
+  var maxLabel = '';
+  if (isScatterChart) {
+    var _iterator = _createForOfIteratorHelper(data),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        var formattedValue = valueFormatter(item[index]);
+        if (formattedValue.length > maxLength) {
+          maxLength = formattedValue.length;
+          maxLabel = formattedValue;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  } else if (layout === 'vertical') {
+    var _iterator2 = _createForOfIteratorHelper(data),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _item = _step2.value;
+        if (_item[index].length > maxLength) {
+          maxLength = _item[index].length;
+          maxLabel = _item[index];
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  } else {
+    var _iterator3 = _createForOfIteratorHelper(data),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var _item2 = _step3.value;
+        var categories = Object.keys(_item2).filter(function (key) {
+          return key !== index;
+        });
+        var _iterator4 = _createForOfIteratorHelper(categories),
+          _step4;
+        try {
+          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+            var category = _step4.value;
+            var value = _item2[category];
+            if (value === undefined) continue; // Skip null or undefined values
+            var _formattedValue = valueFormatter(value);
+            if (_formattedValue.length > maxLength) {
+              maxLength = _formattedValue.length;
+              maxLabel = _formattedValue;
+            }
+          }
+        } catch (err) {
+          _iterator4.e(err);
+        } finally {
+          _iterator4.f();
+        }
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+  }
+  console.log(maxLabel);
+  return getTextWidth(maxLabel) + margin;
+};

package/es/utils/index.js

@@ -1,7 +1,5 @@
 import { DeltaTypes } from "../types";
-export var defaultValueFormatter = function defaultValueFormatter(value) {
-  return value.toString();
-};
+export var defaultValueFormatter = String;
 export var sumNumericArray = function sumNumericArray(arr) {
   return arr.reduce(function (prefixSum, num) {
     return prefixSum + num;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",
@@ -88,6 +88,7 @@
     "commitlint": "^19.3.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
+    "dayjs": "^1.11.13",
     "dumi": "2.2.17",
     "dumi-theme-lobehub": "^1.8.1",
     "eslint": "^8.57.0",