@lobehub/charts 1.8.0 → 1.9.0

package/es/DataBars/CategoryBar.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { FlexboxProps } from 'react-layout-kit';
+import { ValueFormatter } from "../types";
 export interface CategoryBarProps extends FlexboxProps {
     colors?: string[];
     markerValue?: number;
@@ -7,6 +8,7 @@ export interface CategoryBarProps extends FlexboxProps {
     showLabels?: boolean;
     size?: number;
     tooltip?: string;
+    valueFormatter?: ValueFormatter;
     values: number[];
 }
 declare const CategoryBar: import("react").ForwardRefExoticComponent<CategoryBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/es/DataBars/CategoryBar.js

@@ -4,12 +4,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-var _excluded = ["values", "colors", "markerValue", "showLabels", "tooltip", "showAnimation", "className", "width", "size", "style"];
+var _excluded = ["values", "colors", "valueFormatter", "markerValue", "showLabels", "tooltip", "showAnimation", "className", "width", "size", "style"];
 import { Tooltip } from '@lobehub/ui';
-import chroma from 'chroma-js';
 import { forwardRef, memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { sumNumericArray } from "../utils";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { defaultValueFormatter, sumNumericArray } from "../utils";
 import { useStyles } from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,7 +38,8 @@ var getPositionLeft = function getPositionLeft(value, maxValue) {
   return value ? value / maxValue * 100 : 0;
 };
 var BarLabels = /*#__PURE__*/memo(function (_ref) {
-  var values = _ref.values;
+  var values = _ref.values,
+    valueFormatter = _ref.valueFormatter;
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -72,7 +73,7 @@ var BarLabels = /*#__PURE__*/memo(function (_ref) {
             left: '50%',
             transform: 'translateX(50%)'
           },
-          children: prefixSum
+          children: valueFormatter ? valueFormatter(prefixSum) : prefixSum
         })
       }, "item-".concat(idx));
     }), /*#__PURE__*/_jsx(Flexbox, {
@@ -83,7 +84,7 @@ var BarLabels = /*#__PURE__*/memo(function (_ref) {
         left: 0,
         position: 'absolute'
       },
-      children: "0"
+      children: valueFormatter ? valueFormatter(0) : 0
     }), /*#__PURE__*/_jsx(Flexbox, {
       align: 'center',
       horizontal: true,
@@ -92,7 +93,7 @@ var BarLabels = /*#__PURE__*/memo(function (_ref) {
         position: 'absolute',
         right: 0
       },
-      children: sumValues
+      children: valueFormatter ? valueFormatter(sumValues) : sumValues
     })]
   });
 });
@@ -101,10 +102,13 @@ var CategoryBar = /*#__PURE__*/forwardRef(function (props, ref) {
     cx = _useStyles2.cx,
     styles = _useStyles2.styles,
     theme = _useStyles2.theme;
+  var themeColorRange = useThemeColorRange();
   var _props$values = props.values,
     values = _props$values === void 0 ? [] : _props$values,
     _props$colors = props.colors,
-    colors = _props$colors === void 0 ? [theme.colorSuccess, theme.colorWarning, theme.colorError] : _props$colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _props$valueFormatter = props.valueFormatter,
+    valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
     markerValue = props.markerValue,
     _props$showLabels = props.showLabels,
     showLabels = _props$showLabels === void 0 ? true : _props$showLabels,
@@ -118,7 +122,7 @@ var CategoryBar = /*#__PURE__*/forwardRef(function (props, ref) {
     size = _props$size === void 0 ? 8 : _props$size,
     style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
-  var colorGroup = colors.length === values.length ? colors : chroma.scale(colors).mode('lch').colors(values.length);
+  var colorGroup = colors.concat(themeColorRange);
   var markerBgColor = useMemo(function () {
     return getMarkerBgColor(markerValue, values, colorGroup);
   }, [markerValue, values, colorGroup]);
@@ -140,6 +144,7 @@ var CategoryBar = /*#__PURE__*/forwardRef(function (props, ref) {
       width: width
     }, rest), {}, {
       children: [showLabels && /*#__PURE__*/_jsx(BarLabels, {
+        valueFormatter: valueFormatter,
         values: values
       }), /*#__PURE__*/_jsxs(Flexbox, {
         align: 'center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",