@lobehub/charts 1.4.0 → 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"];
+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,
@@ -84,9 +89,8 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$height = props.height,
     height = _props$height === void 0 ? '20rem' : _props$height,
     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],
@@ -99,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;
@@ -197,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),
@@ -221,6 +249,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               label = _ref.label;
             return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
               active: active,
+              customCategories: customCategories,
               label: label,
               payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
                 var _categoryColors$get;
@@ -231,6 +260,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
             }) : /*#__PURE__*/_jsx(ChartTooltip, {
               active: active,
               categoryColors: categoryColors,
+              customCategories: customCategories,
               label: label,
               payload: payload,
               valueFormatter: valueFormatter
@@ -254,7 +284,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload: payload
             }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
               return onCategoryClick(clickedLegendItem);
-            } : undefined, enableLegendSlider);
+            } : undefined, enableLegendSlider, customCategories);
           },
           height: legendHeight,
           verticalAlign: "top"

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", "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";
@@ -30,7 +33,10 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     data = _props$data === void 0 ? [] : _props$data,
     _props$categories = props.categories,
     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,
@@ -51,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,
@@ -76,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,
@@ -85,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();
@@ -236,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,
@@ -263,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,
@@ -291,6 +329,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
               label = _ref.label;
             return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
               active: active,
+              customCategories: customCategories,
               label: label,
               payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
                 var _categoryColors$get;
@@ -301,6 +340,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             }) : /*#__PURE__*/_jsx(ChartTooltip, {
               active: active,
               categoryColors: categoryColors,
+              customCategories: customCategories,
               label: label,
               payload: payload,
               valueFormatter: valueFormatter
@@ -323,7 +363,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload: payload
             }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
               return onCategoryClick(clickedLegendItem);
-            } : undefined, enableLegendSlider);
+            } : undefined, enableLegendSlider, customCategories);
           },
           height: legendHeight,
           verticalAlign: "top"

package/es/DonutChart/DonutChartTooltip.d.ts

@@ -1,7 +1,10 @@
 import { ValueFormatter } from "../types";
 export interface DonutChartTooltipProps {
     active: boolean | undefined;
+    customCategories?: {
+        [key: string]: string;
+    };
     payload: any;
     valueFormatter: ValueFormatter;
 }
-export declare const DonutChartTooltip: ({ active, payload, valueFormatter }: DonutChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DonutChartTooltip: ({ customCategories, active, payload, valueFormatter, }: DonutChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;

package/es/DonutChart/DonutChartTooltip.js

@@ -4,7 +4,8 @@ import ChartTooltipFrame from "../common/ChartTooltip/ChartTooltipFrame";
 import ChartTooltipRow from "../common/ChartTooltip/ChartTooltipRow";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var DonutChartTooltip = function DonutChartTooltip(_ref) {
-  var active = _ref.active,
+  var customCategories = _ref.customCategories,
+    active = _ref.active,
     payload = _ref.payload,
     valueFormatter = _ref.valueFormatter;
   if (active && payload !== null && payload !== void 0 && payload[0]) {
@@ -15,7 +16,7 @@ export var DonutChartTooltip = function DonutChartTooltip(_ref) {
         paddingInline: 16,
         children: /*#__PURE__*/_jsx(ChartTooltipRow, {
           color: payloadRow.payload.color,
-          name: payloadRow.name,
+          name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[payloadRow.name]) || payloadRow.name,
           value: valueFormatter(payloadRow.value)
         })
       })

package/es/DonutChart/index.d.ts

@@ -9,6 +9,9 @@ export interface DonutChartProps extends BaseAnimationTimingProps {
     category?: string;
     className?: string;
     colors?: string[];
+    customCategories?: {
+        [key: string]: string;
+    };
     customTooltip?: ComponentType<CustomTooltipProps>;
     data: any[];
     index?: string;

package/es/DonutChart/index.js

@@ -6,7 +6,7 @@ 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", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height", "style"];
+var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height", "style", "customCategories"];
 import { css } from 'antd-style';
 import { forwardRef, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -56,6 +56,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$height = props.height,
     height = _props$height === void 0 ? '10rem' : _props$height,
     style = props.style,
+    customCategories = props.customCategories,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var isDonut = variant === 'donut';
@@ -162,6 +163,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload = _ref.payload;
             return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
               active: active,
+              customCategories: customCategories,
               label: payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.name,
               payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
                 var _payload$0$payload$co, _payload$2;
@@ -171,6 +173,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
               })
             }) : /*#__PURE__*/_jsx(DonutChartTooltip, {
               active: active,
+              customCategories: customCategories,
               payload: payload,
               valueFormatter: valueFormatter
             });

package/es/Legend/LegendItem.d.ts

@@ -2,6 +2,7 @@
 export interface LegendItemProps {
     activeLegend?: string;
     color: string;
+    label: string;
     name: string;
     onClick?: (name: string, color: string) => void;
 }

package/es/Legend/LegendItem.js

@@ -18,7 +18,8 @@ var useStyles = createStyles(function (_ref) {
   };
 });
 var LegendItem = /*#__PURE__*/memo(function (_ref2) {
-  var name = _ref2.name,
+  var label = _ref2.label,
+    name = _ref2.name,
     color = _ref2.color,
     _onClick = _ref2.onClick,
     activeLegend = _ref2.activeLegend;
@@ -58,7 +59,7 @@ var LegendItem = /*#__PURE__*/memo(function (_ref2) {
         margin: 0,
         opacity: activeLegend && activeLegend !== name ? 0.4 : 1
       },
-      children: name
+      children: label
     })]
   });
 });

package/es/Legend/index.d.ts

@@ -4,6 +4,9 @@ export interface LegendProps extends FlexboxProps {
     activeLegend?: string;
     categories: string[];
     colors?: string[];
+    customCategories?: {
+        [key: string]: string;
+    };
     enableLegendSlider?: boolean;
     onClickLegendItem?: (category: string, color: string) => void;
 }

package/es/Legend/index.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["categories", "colors", "className", "onClickLegendItem", "activeLegend", "enableLegendSlider"];
+var _excluded = ["customCategories", "categories", "colors", "className", "onClickLegendItem", "activeLegend", "enableLegendSlider"];
 var _templateObject, _templateObject2, _templateObject3;
 import { createStyles } from 'antd-style';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
@@ -26,7 +26,8 @@ var Legend = /*#__PURE__*/forwardRef(function (props, ref) {
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   var themeColorRange = useThemeColorRange();
-  var categories = props.categories,
+  var customCategories = props.customCategories,
+    categories = props.categories,
     _props$colors = props.colors,
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
     className = props.className,
@@ -139,6 +140,7 @@ var Legend = /*#__PURE__*/forwardRef(function (props, ref) {
         return /*#__PURE__*/_jsx(LegendItem, {
           activeLegend: activeLegend,
           color: colors[idx % colors.length],
+          label: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[category]) || category,
           name: category,
           onClick: onClickLegendItem
         }, "item-".concat(idx));

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"];
+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,
@@ -80,9 +84,9 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$height = props.height,
     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],
@@ -95,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;
@@ -193,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),
@@ -217,6 +245,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
               label = _ref.label;
             return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
               active: active,
+              customCategories: customCategories,
               label: label,
               payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
                 var _categoryColors$get;
@@ -227,6 +256,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
             }) : /*#__PURE__*/_jsx(ChartTooltip, {
               active: active,
               categoryColors: categoryColors,
+              customCategories: customCategories,
               label: label,
               payload: payload,
               valueFormatter: valueFormatter
@@ -250,7 +280,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload: payload
             }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
               return onCategoryClick(clickedLegendItem);
-            } : undefined, enableLegendSlider);
+            } : undefined, enableLegendSlider, customCategories);
           },
           height: legendHeight,
           verticalAlign: "top"

package/es/ScatterChart/ScatterChartTooltip.d.ts

@@ -5,6 +5,9 @@ export interface ScatterChartTooltipProps {
     axis: any;
     category?: string;
     categoryColors: Map<string, string>;
+    customCategories?: {
+        [key: string]: string;
+    };
     label: string;
     payload: any;
     valueFormatter: ScatterChartValueFormatter;

package/es/ScatterChart/ScatterChartTooltip.js

@@ -20,7 +20,8 @@ var useStyles = createStyles(function (_ref) {
 });
 var ScatterChartTooltip = /*#__PURE__*/memo(function (_ref2) {
   var _categoryColors$get, _payload$;
-  var label = _ref2.label,
+  var customCategories = _ref2.customCategories,
+    label = _ref2.label,
     active = _ref2.active,
     payload = _ref2.payload,
     valueFormatter = _ref2.valueFormatter,
@@ -71,7 +72,7 @@ var ScatterChartTooltip = /*#__PURE__*/memo(function (_ref2) {
           })) !== null && _Object$keys$find !== void 0 ? _Object$keys$find : '';
           var valueFormatterFn = (_valueFormatter = valueFormatter[valueFormatterKey]) !== null && _valueFormatter !== void 0 ? _valueFormatter : defaultValueFormatter;
           return /*#__PURE__*/_jsx(ScatterChartTooltipRow, {
-            name: name,
+            name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[name]) || name,
             value: valueFormatter && valueFormatterFn ? valueFormatterFn(value) : "".concat(value)
           }, "id-".concat(idx));
         })

package/es/ScatterChart/index.d.ts

@@ -15,10 +15,14 @@ export interface ScatterChartProps extends BaseAnimationTimingProps, HTMLAttribu
     autoMinYValue?: boolean;
     category: string;
     colors?: string[];
+    customCategories?: {
+        [key: string]: string;
+    };
     customTooltip?: ComponentType<CustomTooltipProps>;
     data: any[];
     enableLegendSlider?: boolean;
     intervalType?: IntervalType;
+    loading?: boolean;
     maxXValue?: number;
     maxYValue?: number;
     minXValue?: number;
@@ -44,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"];
+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,
@@ -90,8 +95,8 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$height = props.height,
     height = _props$height === void 0 ? '20rem' : _props$height,
     style = props.style,
+    customCategories = props.customCategories,
     rest = _objectWithoutProperties(props, _excluded);
-  var CustomTooltip = customTooltip;
   var _useState = useState(60),
     _useState2 = _slicedToArray(_useState, 2),
     legendHeight = _useState2[0],
@@ -104,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();
@@ -206,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),
@@ -232,6 +261,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
             var color = category ? payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 || (_payload$ = _payload$.payload) === null || _payload$ === void 0 ? void 0 : _payload$[category] : label;
             return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
               active: active,
+              customCategories: customCategories,
               label: color,
               payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
                 var _categoryColors$get;
@@ -248,6 +278,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
               },
               category: category,
               categoryColors: categoryColors,
+              customCategories: customCategories,
               label: color,
               payload: payload,
               valueFormatter: valueFormatter
@@ -293,7 +324,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
               payload: payload
             }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
               return onCategoryClick(clickedLegendItem);
-            } : undefined, enableLegendSlider);
+            } : undefined, enableLegendSlider, customCategories);
           },
           height: legendHeight,
           verticalAlign: "top"

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

@@ -16,6 +16,9 @@ interface BaseChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDi
     autoMinValue?: boolean;
     categories: string[];
     colors?: string[];
+    customCategories?: {
+        [key: string]: string;
+    };
     customTooltip?: ComponentType<CustomTooltipProps>;
     data: any[];
     enableLegendSlider?: boolean;

package/es/common/ChartLegend.d.ts

@@ -1,3 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-declare const ChartLegend: ({ payload }: any, categoryColors: Map<string, string>, setLegendHeight: Dispatch<SetStateAction<number>>, activeLegend: string | undefined, onClick?: ((category: string, color: string) => void) | undefined, enableLegendSlider?: boolean) => import("react/jsx-runtime").JSX.Element;
+declare const ChartLegend: ({ payload }: any, categoryColors: Map<string, string>, setLegendHeight: Dispatch<SetStateAction<number>>, activeLegend: string | undefined, onClick?: ((category: string, color: string) => void) | undefined, enableLegendSlider?: boolean, customCategories?: {
+    [key: string]: string;
+} | undefined) => import("react/jsx-runtime").JSX.Element;
 export default ChartLegend;

package/es/common/ChartLegend.js

@@ -8,7 +8,7 @@ var calculateHeight = function calculateHeight(height) {
   : 60;
 }; // default height
 
-var ChartLegend = function ChartLegend(_ref, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider) {
+var ChartLegend = function ChartLegend(_ref, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, customCategories) {
   var payload = _ref.payload;
   var legendRef = useRef(null);
   useOnWindowResize(function () {
@@ -31,6 +31,7 @@ var ChartLegend = function ChartLegend(_ref, categoryColors, setLegendHeight, ac
       colors: filteredPayload.map(function (entry) {
         return categoryColors.get(entry.value);
       }),
+      customCategories: customCategories,
       enableLegendSlider: enableLegendSlider,
       onClickLegendItem: onClick
     })

package/es/common/ChartTooltip/index.d.ts

@@ -2,9 +2,12 @@ import { ValueFormatter } from "../../types";
 export interface ChartTooltipProps {
     active: boolean | undefined;
     categoryColors: Map<string, string>;
+    customCategories?: {
+        [key: string]: string;
+    };
     label: string;
     payload: any;
     valueFormatter: ValueFormatter;
 }
-declare const ChartTooltip: ({ active, payload, label, categoryColors, valueFormatter, }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltip: ({ active, payload, label, categoryColors, valueFormatter, customCategories, }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ChartTooltip;

package/es/common/ChartTooltip/index.js

@@ -19,7 +19,8 @@ var ChartTooltip = function ChartTooltip(_ref2) {
     payload = _ref2.payload,
     label = _ref2.label,
     categoryColors = _ref2.categoryColors,
-    valueFormatter = _ref2.valueFormatter;
+    valueFormatter = _ref2.valueFormatter,
+    customCategories = _ref2.customCategories;
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     theme = _useStyles.theme,
@@ -53,7 +54,7 @@ var ChartTooltip = function ChartTooltip(_ref2) {
             name = _ref3.name;
           return /*#__PURE__*/_jsx(ChartTooltipRow, {
             color: (_categoryColors$get = categoryColors.get(name)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary,
-            name: name,
+            name: (customCategories === null || customCategories === void 0 ? void 0 : customCategories[name]) || name,
             value: valueFormatter(value)
           }, "id-".concat(idx));
         })

package/es/common/CustomTooltipProps.d.ts

@@ -1,6 +1,9 @@
 import { NameType, Payload } from 'recharts/types/component/DefaultTooltipContent';
 export type CustomTooltipProps = {
     active: boolean | undefined;
+    customCategories?: {
+        [key: string]: string;
+    };
     label: NameType | undefined;
     payload: Payload<string | number | (string | number)[], string | number>[] | undefined;
 };

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.0",
+  "version": "1.5.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",
@@ -83,8 +83,8 @@
     "@types/query-string": "^6.3.0",
     "@types/react": "18.2.40",
     "@types/react-dom": "^18.3.0",
-    "@vitest/coverage-v8": "latest",
-    "babel-plugin-antd-style": "latest",
+    "@vitest/coverage-v8": "~1.2.2",
+    "babel-plugin-antd-style": "^1.0.4",
     "commitlint": "^19.3.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",