@lobehub/charts 1.4.1 → 1.5.0

package/es/AreaChart/index.d.ts

@@ -4,8 +4,10 @@ import { CurveType } from "../types";
 export interface AreaChartProps extends BaseChartProps {
     connectNulls?: boolean;
     curveType?: CurveType;
+    loading?: boolean;
     showGradient?: boolean;
     stack?: boolean;
+    yAxisAlign?: 'left' | 'right';
 }
 declare const AreaChart: import("react").ForwardRefExoticComponent<AreaChartProps & import("react").RefAttributes<HTMLDivElement>>;
 export default AreaChart;

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", "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";
@@ -42,8 +45,9 @@ var AreaChart = /*#__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,
+    _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 +81,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 +91,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 +103,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;
@@ -198,13 +220,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),

package/es/BarChart/index.d.ts

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

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", "layout", "stack", "relative", "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,6 +35,8 @@ 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,
@@ -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,39 @@ 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,
+      relative: relative,
+      valueFormatter: valueFormatter
+    });
+  }, [yAxisWidth, layout, data, valueFormatter, relative, 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();
@@ -237,13 +260,20 @@ 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: function formatter(v) {
+                return v;
+              },
+              textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
+              yAxisLabel: Boolean(yAxisLabel)
+            }));
           },
           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 +294,22 @@ 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: relative ? function (value) {
+                return "".concat(Number(value) * 100, "%");
+              } : valueFormatter,
+              textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
+              yAxisLabel: Boolean(yAxisLabel)
+            }));
           },
           tickFormatter: relative ? function (value) {
             return "".concat((value * 100).toString(), " %");
           } : valueFormatter,
           tickLine: false,
           type: "number",
-          width: yAxisWidth,
+          width: calculatedYAxisWidth,
           children: yAxisLabel && /*#__PURE__*/_jsx(Label, {
             angle: -90,
             className: styles.emphasis,

package/es/LineChart/index.d.ts

@@ -4,6 +4,8 @@ import { CurveType } from "../types";
 export interface LineChartProps extends BaseChartProps {
     connectNulls?: boolean;
     curveType?: CurveType;
+    loading?: boolean;
+    yAxisAlign?: 'left' | 'right';
 }
 declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<HTMLDivElement>>;
 export default LineChart;

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", "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";
@@ -40,14 +43,15 @@ var LineChart = /*#__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,
     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 +85,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 +99,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;
@@ -194,13 +216,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/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/utils/getMaxLabelLength.d.ts

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

package/es/utils/getMaxLabelLength.js

@@ -0,0 +1,108 @@
+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,
+    relative = _ref.relative,
+    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 = relative ? "".concat((value * 100).toFixed(2), "%") : 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.5.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",