@lobehub/charts 1.3.0 → 1.4.1

package/es/AreaChart/index.js

@@ -5,7 +5,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, _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", "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"];
 import { css } from 'antd-style';
 import { Fragment, forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -84,6 +84,7 @@ 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;
@@ -221,6 +222,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 +233,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 +257,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.js

@@ -5,7 +5,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", "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", "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"];
 import { css } from 'antd-style';
 import { forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -30,6 +30,7 @@ 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$colors = props.colors,
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
@@ -291,6 +292,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 +303,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 +326,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';
@@ -22,12 +22,12 @@ var useStyles = createStyles(function (_ref) {
   };
 });
 var Legend = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _hasScroll$left, _hasScroll$right;
   var _useStyles = useStyles(),
     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,
@@ -117,6 +117,8 @@ var Legend = /*#__PURE__*/forwardRef(function (props, ref) {
       scrollable === null || scrollable === void 0 || scrollable.removeEventListener('keyup', keyUp);
     };
   }, [checkScroll, enableLegendSlider]);
+
+  // @ts-ignore
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     gap: 8,
@@ -138,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));
@@ -152,14 +155,14 @@ var Legend = /*#__PURE__*/forwardRef(function (props, ref) {
       justify: 'center',
       ref: scrollButtonsRef,
       children: [/*#__PURE__*/_jsx(ScrollButton, {
-        disabled: (_hasScroll$left = !(hasScroll !== null && hasScroll !== void 0 && hasScroll.left)) !== null && _hasScroll$left !== void 0 ? _hasScroll$left : true,
+        disabled: !(hasScroll !== null && hasScroll !== void 0 && hasScroll.left),
         icon: ChevronLeft,
         onClick: function onClick() {
           setIsKeyDowned(null);
           scrollToTest('left');
         }
       }), /*#__PURE__*/_jsx(ScrollButton, {
-        disabled: (_hasScroll$right = !(hasScroll !== null && hasScroll !== void 0 && hasScroll.right)) !== null && _hasScroll$right !== void 0 ? _hasScroll$right : true,
+        disabled: !(hasScroll !== null && hasScroll !== void 0 && hasScroll.right),
         icon: ChevronRight,
         onClick: function onClick() {
           setIsKeyDowned(null);

package/es/LineChart/index.js

@@ -5,7 +5,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, _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", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories"];
 import { css } from 'antd-style';
 import { Fragment, forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -80,6 +80,7 @@ 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,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
@@ -217,6 +218,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 +229,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 +253,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,6 +15,9 @@ export interface ScatterChartProps extends BaseAnimationTimingProps, HTMLAttribu
     autoMinYValue?: boolean;
     category: string;
     colors?: string[];
+    customCategories?: {
+        [key: string]: string;
+    };
     customTooltip?: ComponentType<CustomTooltipProps>;
     data: any[];
     enableLegendSlider?: boolean;

package/es/ScatterChart/index.js

@@ -5,7 +5,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, _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", "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"];
 import { css } from 'antd-style';
 import { forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -90,6 +90,7 @@ 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),
@@ -232,6 +233,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 +250,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
               },
               category: category,
               categoryColors: categoryColors,
+              customCategories: customCategories,
               label: color,
               payload: payload,
               valueFormatter: valueFormatter
@@ -293,7 +296,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "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",