@lobehub/charts 1.5.0 → 1.6.1

package/es/AreaChart/index.d.ts

@@ -4,10 +4,8 @@ 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,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", "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"];
+var _excluded = ["data", "categories", "index", "stack", "colors", "valueFormatter", "xAxisLabelFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisAlign", "yAxisWidth", "intervalType", "showAnimation", "animationDuration", "showTooltip", "showLegend", "showGridLines", "showGradient", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories"];
 import { Skeleton } from 'antd';
 import { css } from 'antd-style';
 import { Fragment, forwardRef, useMemo, useState } from 'react';
@@ -39,6 +39,8 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
     _props$valueFormatter = props.valueFormatter,
     valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$xAxisLabelForm = props.xAxisLabelFormatter,
+    xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
     _props$startEndOnly = props.startEndOnly,
     startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
     _props$showXAxis = props.showXAxis,
@@ -204,6 +206,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
           tick: {
             transform: 'translate(0, 6)'
           },
+          tickFormatter: xAxisLabelFormatter,
           tickLine: false,
           ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
           children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
@@ -244,6 +247,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
           content: showTooltip ? function (_ref) {
+            var _ref2;
             var active = _ref.active,
               payload = _ref.payload,
               label = _ref.label;
@@ -251,7 +255,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               active: active,
               customCategories: customCategories,
               label: label,
-              payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
+              payload: (_ref2 = stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload) === null || _ref2 === void 0 ? void 0 : _ref2.map(function (payloadItem) {
                 var _categoryColors$get;
                 return _objectSpread(_objectSpread({}, payloadItem), {}, {
                   color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
@@ -262,7 +266,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
               categoryColors: categoryColors,
               customCategories: customCategories,
               label: label,
-              payload: payload,
+              payload: stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload,
               valueFormatter: valueFormatter
             });
           } : undefined,
@@ -278,8 +282,8 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
             outline: 'none'
           }
         }), showLegend ? /*#__PURE__*/_jsx(Legend, {
-          content: function content(_ref2) {
-            var payload = _ref2.payload;
+          content: function content(_ref3) {
+            var payload = _ref3.payload;
             return ChartLegend({
               payload: payload
             }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {

package/es/BarChart/index.d.ts

@@ -3,10 +3,7 @@ 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,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", "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"];
+var _excluded = ["data", "categories", "customCategories", "index", "yAxisAlign", "colors", "valueFormatter", "xAxisLabelFormatter", "layout", "stack", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "loading", "xAxisLabel", "yAxisLabel", "className", "width", "height", "style"];
 import { Skeleton } from 'antd';
 import { css } from 'antd-style';
 import { forwardRef, useMemo, useState } from 'react';
@@ -41,12 +41,12 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
     _props$valueFormatter = props.valueFormatter,
     valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$xAxisLabelForm = props.xAxisLabelFormatter,
+    xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
     _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
     _props$stack = props.stack,
     stack = _props$stack === void 0 ? false : _props$stack,
-    _props$relative = props.relative,
-    relative = _props$relative === void 0 ? false : _props$relative,
     _props$startEndOnly = props.startEndOnly,
     startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
     _props$animationDurat = props.animationDuration,
@@ -109,10 +109,9 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
       data: data,
       index: index,
       layout: layout,
-      relative: relative,
       valueFormatter: valueFormatter
     });
-  }, [yAxisWidth, layout, data, valueFormatter, relative, index]);
+  }, [yAxisWidth, layout, data, valueFormatter, index]);
   if (loading || !data) return /*#__PURE__*/_jsx(Skeleton.Button, {
     active: true,
     block: true,
@@ -186,7 +185,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           setActiveLegend(undefined);
           onValueChange === null || onValueChange === void 0 || onValueChange(null);
         } : undefined,
-        stackOffset: stack ? 'sign' : relative ? 'expand' : 'none',
+        stackOffset: stack ? 'sign' : 'none',
         children: [showGridLines ? /*#__PURE__*/_jsx(CartesianGrid, {
           className: styles.gridLines,
           horizontal: layout !== 'vertical',
@@ -239,6 +238,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           tick: {
             transform: 'translate(0, 6)'
           },
+          tickFormatter: xAxisLabelFormatter,
           tickLine: false,
           ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
           children: xAxisLabel && /*#__PURE__*/_jsx(Label, {
@@ -263,13 +263,12 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           tick: function tick(props) {
             return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
               align: yAxisAlign,
-              formatter: function formatter(v) {
-                return v;
-              },
+              formatter: xAxisLabelFormatter,
               textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
               yAxisLabel: Boolean(yAxisLabel)
             }));
           },
+          tickFormatter: xAxisLabelFormatter,
           tickLine: false,
           ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
           type: "category",
@@ -297,16 +296,12 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           tick: function tick(props) {
             return /*#__PURE__*/_jsx(CustomYAxisTick, _objectSpread(_objectSpread({}, props), {}, {
               align: yAxisAlign,
-              formatter: relative ? function (value) {
-                return "".concat(Number(value) * 100, "%");
-              } : valueFormatter,
+              formatter: valueFormatter,
               textAnchor: yAxisAlign === 'left' ? 'start' : 'end',
               yAxisLabel: Boolean(yAxisLabel)
             }));
           },
-          tickFormatter: relative ? function (value) {
-            return "".concat((value * 100).toString(), " %");
-          } : valueFormatter,
+          tickFormatter: valueFormatter,
           tickLine: false,
           type: "number",
           width: calculatedYAxisWidth,
@@ -324,6 +319,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
           content: showTooltip ? function (_ref) {
+            var _ref2;
             var active = _ref.active,
               payload = _ref.payload,
               label = _ref.label;
@@ -331,7 +327,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
               active: active,
               customCategories: customCategories,
               label: label,
-              payload: payload === null || payload === void 0 ? void 0 : payload.map(function (payloadItem) {
+              payload: (_ref2 = stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload) === null || _ref2 === void 0 ? void 0 : _ref2.map(function (payloadItem) {
                 var _categoryColors$get;
                 return _objectSpread(_objectSpread({}, payloadItem), {}, {
                   color: (_categoryColors$get = categoryColors.get(payloadItem.dataKey)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary
@@ -342,7 +338,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
               categoryColors: categoryColors,
               customCategories: customCategories,
               label: label,
-              payload: payload,
+              payload: stack ? payload === null || payload === void 0 ? void 0 : payload.reverse() : payload,
               valueFormatter: valueFormatter
             });
           } : undefined,
@@ -357,8 +353,8 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             outline: 'none'
           }
         }), showLegend ? /*#__PURE__*/_jsx(Legend, {
-          content: function content(_ref2) {
-            var payload = _ref2.payload;
+          content: function content(_ref3) {
+            var payload = _ref3.payload;
             return ChartLegend({
               payload: payload
             }, categoryColors, setLegendHeight, activeLegend, hasOnValueChange ? function (clickedLegendItem) {
@@ -380,7 +376,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
             shape: function shape(props) {
               return renderShape(props, activeBar, activeLegend, layout);
             },
-            stackId: stack || relative ? 'a' : undefined,
+            stackId: stack ? 'a' : undefined,
             style: {
               cursor: onValueChange ? 'pointer' : undefined
             },

package/es/LineChart/index.d.ts

@@ -4,8 +4,6 @@ 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,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", "yAxisAlign", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories", "loading"];
+var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "xAxisLabelFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "animationDuration", "showAnimation", "yAxisAlign", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style", "customCategories", "loading"];
 import { Skeleton } from 'antd';
 import { css } from 'antd-style';
 import { Fragment, forwardRef, useMemo, useState } from 'react';
@@ -37,6 +37,8 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
     colors = _props$colors === void 0 ? themeColorRange : _props$colors,
     _props$valueFormatter = props.valueFormatter,
     valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$xAxisLabelForm = props.xAxisLabelFormatter,
+    xAxisLabelFormatter = _props$xAxisLabelForm === void 0 ? defaultValueFormatter : _props$xAxisLabelForm,
     _props$startEndOnly = props.startEndOnly,
     startEndOnly = _props$startEndOnly === void 0 ? false : _props$startEndOnly,
     _props$showXAxis = props.showXAxis,
@@ -200,6 +202,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
           tick: {
             transform: 'translate(0, 6)'
           },
+          tickFormatter: xAxisLabelFormatter,
           tickLine: false,
           ticks: startEndOnly ? [data[0][index], data.at(-1)[index]] : undefined,
           children: xAxisLabel && /*#__PURE__*/_jsx(Label, {

package/es/common/BaseChartProps.d.ts

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

package/es/types.d.ts

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

package/es/utils/getMaxLabelLength.d.ts

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

package/es/utils/getMaxLabelLength.js

@@ -27,7 +27,6 @@ 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,
@@ -85,7 +84,7 @@ export var getMaxLabelLength = function getMaxLabelLength(_ref) {
             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);
+            var _formattedValue = valueFormatter(value);
             if (_formattedValue.length > maxLength) {
               maxLength = _formattedValue.length;
               maxLabel = _formattedValue;
@@ -103,6 +102,5 @@ export var getMaxLabelLength = function getMaxLabelLength(_ref) {
       _iterator3.f();
     }
   }
-  console.log(maxLabel);
   return getTextWidth(maxLabel) + margin;
 };

package/package.json

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