@lobehub/charts 1.2.0 → 1.4.0

package/es/BarChart/index.js

@@ -329,7 +329,6 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
           verticalAlign: "top"
         }) : undefined, categories.map(function (category) {
           var _categoryColors$get2;
-          console.log(categoryColors.get(category));
           return /*#__PURE__*/_jsx(Bar, {
             animationDuration: animationDuration,
             className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    fill: ", ";\n                  "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),

package/es/DataBars/CategoryBar.d.ts

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

package/es/DataBars/CategoryBar.js

@@ -0,0 +1,191 @@
+'use client';
+
+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"];
+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 { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getMarkerBgColor = function getMarkerBgColor(markerValue, values, colors) {
+  if (markerValue === undefined) return '';
+  var prefixSum = 0;
+  var _iterator = _createForOfIteratorHelper(values.entries()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+        i = _step$value[0],
+        currentWidthPercentage = _step$value[1];
+      var currentBgColor = colors[i];
+      prefixSum += currentWidthPercentage;
+      if (prefixSum >= markerValue) return currentBgColor;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return '';
+};
+var getPositionLeft = function getPositionLeft(value, maxValue) {
+  return value ? value / maxValue * 100 : 0;
+};
+var BarLabels = /*#__PURE__*/memo(function (_ref) {
+  var values = _ref.values;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var sumValues = useMemo(function () {
+    return sumNumericArray(values);
+  }, [values]);
+  var prefixSum = 0;
+  var sumConsecutiveHiddenLabels = 0;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: cx(styles.label, styles.emphasis),
+    horizontal: true,
+    style: {
+      position: 'relative'
+    },
+    children: [values.slice(0, values.length).map(function (widthPercentage, idx) {
+      prefixSum += widthPercentage;
+      var showLabel = (widthPercentage >= 0.1 * sumValues || sumConsecutiveHiddenLabels >= 0.09 * sumValues) && sumValues - prefixSum >= 0.15 * sumValues && prefixSum >= 0.1 * sumValues;
+      sumConsecutiveHiddenLabels = showLabel ? 0 : sumConsecutiveHiddenLabels += widthPercentage;
+      var widthPositionLeft = getPositionLeft(widthPercentage, sumValues);
+      if (prefixSum === sumValues) return null;
+      return /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        horizontal: true,
+        justify: 'flex-end',
+        style: {
+          width: "".concat(widthPositionLeft, "%")
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          style: {
+            display: showLabel ? 'block' : 'hidden',
+            left: '50%',
+            transform: 'translateX(50%)'
+          },
+          children: prefixSum
+        })
+      }, "item-".concat(idx));
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      horizontal: true,
+      style: {
+        bottom: 0,
+        left: 0,
+        position: 'absolute'
+      },
+      children: "0"
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      horizontal: true,
+      style: {
+        bottom: 0,
+        position: 'absolute',
+        right: 0
+      },
+      children: sumValues
+    })]
+  });
+});
+var CategoryBar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles2 = useStyles(),
+    cx = _useStyles2.cx,
+    styles = _useStyles2.styles,
+    theme = _useStyles2.theme;
+  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,
+    markerValue = props.markerValue,
+    _props$showLabels = props.showLabels,
+    showLabels = _props$showLabels === void 0 ? true : _props$showLabels,
+    tooltip = props.tooltip,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$size = props.size,
+    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 markerBgColor = useMemo(function () {
+    return getMarkerBgColor(markerValue, values, colorGroup);
+  }, [markerValue, values, colorGroup]);
+  var maxValue = useMemo(function () {
+    return sumNumericArray(values);
+  }, [values]);
+  var markerPositionLeft = useMemo(function () {
+    return getPositionLeft(markerValue, maxValue);
+  }, [markerValue, maxValue]);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: tooltip,
+    children: /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+      className: className,
+      gap: 8,
+      ref: ref,
+      style: _objectSpread({
+        position: 'relative'
+      }, style),
+      width: width
+    }, rest), {}, {
+      children: [showLabels && /*#__PURE__*/_jsx(BarLabels, {
+        values: values
+      }), /*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        className: cx('relative w-full flex items-center h-2'),
+        height: size,
+        horizontal: true,
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/_jsx(Flexbox, {
+          align: 'center',
+          height: '100%',
+          horizontal: true,
+          style: {
+            borderRadius: size / 2,
+            overflow: 'hidden'
+          },
+          width: '100%',
+          children: values.map(function (value, idx) {
+            var _colorGroup$idx;
+            var baseColor = (_colorGroup$idx = colorGroup[idx]) !== null && _colorGroup$idx !== void 0 ? _colorGroup$idx : theme.colorPrimary;
+            var percentage = value / maxValue * 100;
+            return /*#__PURE__*/_jsx(Flexbox, {
+              height: '100%',
+              style: {
+                background: baseColor,
+                width: "".concat(percentage, "%")
+              }
+            }, "item-".concat(idx));
+          })
+        }), markerValue === undefined ? undefined : /*#__PURE__*/_jsx("div", {
+          className: cx(styles.markerWrapper, showAnimation && styles.showAnimation),
+          style: {
+            left: "".concat(markerPositionLeft, "%")
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.marker,
+            style: {
+              background: markerBgColor || theme.colorPrimary,
+              height: size + 8
+            }
+          })
+        })]
+      })]
+    }))
+  });
+});
+CategoryBar.displayName = 'CategoryBar';
+export default CategoryBar;

package/es/DataBars/DeltaBar.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+export interface DeltaBarProps extends FlexboxProps {
+    bgColors?: string;
+    color?: string;
+    isIncreasePositive?: boolean;
+    showAnimation?: boolean;
+    size?: number;
+    tooltip?: ReactNode;
+    value: number;
+}
+declare const DeltaBar: import("react").ForwardRefExoticComponent<DeltaBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DeltaBar;

package/es/DataBars/DeltaBar.js

@@ -0,0 +1,115 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "bgColors", "color", "isIncreasePositive", "showAnimation", "className", "tooltip", "width", "size", "style"];
+import { Tooltip } from '@lobehub/ui';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { DeltaTypes } from "../types";
+import { mapInputsToDeltaType } from "../utils";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getDeltaType = function getDeltaType(value) {
+  return value >= 0 ? DeltaTypes.Increase : DeltaTypes.Decrease;
+};
+var DeltaBar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var value = props.value,
+    bgColors = props.bgColors,
+    color = props.color,
+    _props$isIncreasePosi = props.isIncreasePositive,
+    isIncreasePositive = _props$isIncreasePosi === void 0 ? true : _props$isIncreasePosi,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    className = props.className,
+    tooltip = props.tooltip,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 8 : _props$size,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var deltaType = mapInputsToDeltaType(getDeltaType(value), isIncreasePositive);
+  var colors = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DeltaTypes.Increase, theme.colorSuccess), DeltaTypes.ModerateIncrease, theme.colorSuccess), DeltaTypes.Decrease, theme.colorError), DeltaTypes.ModerateDecrease, theme.colorError), DeltaTypes.Unchanged, theme.colorWarning);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: tooltip,
+    children: /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+      align: 'center',
+      className: className,
+      height: size,
+      horizontal: true,
+      ref: ref,
+      style: _objectSpread({
+        position: 'relative'
+      }, style),
+      width: width
+    }, rest), {}, {
+      children: [/*#__PURE__*/_jsx(Flexbox, {
+        height: '100%',
+        style: {
+          background: bgColors || theme.colorFillTertiary,
+          borderRadius: size / 2,
+          inset: 0,
+          opacity: bgColors ? 0.2 : 1,
+          position: 'absolute',
+          zIndex: 0
+        },
+        width: '100%'
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        flex: 1,
+        height: '100%',
+        horizontal: true,
+        justify: 'flex-end',
+        style: {
+          position: 'relative'
+        },
+        children: value < 0 ? /*#__PURE__*/_jsx("div", {
+          className: cx(showAnimation && styles.showAnimation),
+          style: {
+            background: colors[deltaType],
+            borderBottomLeftRadius: size / 2,
+            borderTopLeftRadius: size / 2,
+            height: '100%',
+            width: "".concat(Math.abs(value), "%")
+          }
+        }) : undefined
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        className: styles.marker,
+        flex: 'none',
+        style: {
+          background: color || theme.colorPrimary,
+          height: size + 8,
+          zIndex: 2
+        }
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        flex: 1,
+        height: '100%',
+        horizontal: true,
+        justify: 'flex-start',
+        style: {
+          position: 'relative'
+        },
+        children: value >= 0 ? /*#__PURE__*/_jsx("div", {
+          className: cx(showAnimation && styles.showAnimation),
+          style: {
+            background: colors[deltaType],
+            borderBottomRightRadius: size / 2,
+            borderTopRightRadius: size / 2,
+            height: '100%',
+            width: "".concat(Math.abs(value), "%")
+          }
+        }) : undefined
+      })]
+    }))
+  });
+});
+DeltaBar.displayName = 'DeltaBar';
+export default DeltaBar;

package/es/DataBars/MarkerBar.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+export interface MarkerBarProps extends FlexboxProps {
+    bgColors?: string;
+    color?: string;
+    markerTooltip?: ReactNode;
+    maxValue?: number;
+    minValue?: number;
+    rangeColors?: string;
+    rangeTooltip?: ReactNode;
+    showAnimation?: boolean;
+    size?: number;
+    value: number;
+}
+declare const MarkerBar: import("react").ForwardRefExoticComponent<MarkerBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MarkerBar;

package/es/DataBars/MarkerBar.js

@@ -0,0 +1,91 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "minValue", "maxValue", "markerTooltip", "rangeTooltip", "showAnimation", "color", "bgColors", "rangeColors", "className", "width", "style", "size"];
+import { Tooltip } from '@lobehub/ui';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MarkerBar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
+    markerTooltip = props.markerTooltip,
+    rangeTooltip = props.rangeTooltip,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    color = props.color,
+    bgColors = props.bgColors,
+    rangeColors = props.rangeColors,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    style = props.style,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 8 : _props$size,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: className,
+    height: size,
+    horizontal: true,
+    ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
+    width: width
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      height: '100%',
+      style: {
+        background: bgColors || theme.colorFillTertiary,
+        borderRadius: size / 2,
+        inset: 0,
+        opacity: bgColors ? 0.2 : 1,
+        position: 'absolute',
+        zIndex: 0
+      },
+      width: '100%'
+    }), minValue !== undefined && maxValue !== undefined ? /*#__PURE__*/_jsx(Tooltip, {
+      title: rangeTooltip,
+      children: /*#__PURE__*/_jsx(Flexbox, {
+        className: cx(showAnimation && styles.showAnimation),
+        height: '100%',
+        style: {
+          background: rangeColors || theme.colorFill,
+          borderRadius: size / 2,
+          inset: 0,
+          left: "".concat(minValue, "%"),
+          opacity: rangeColors ? 0.2 : 1,
+          position: 'absolute',
+          zIndex: 0
+        },
+        width: "".concat(maxValue - minValue, "%")
+      })
+    }) : null, /*#__PURE__*/_jsx(Tooltip, {
+      title: markerTooltip,
+      children: /*#__PURE__*/_jsx("div", {
+        className: cx(styles.markerWrapper, showAnimation && styles.showAnimation),
+        style: {
+          left: "".concat(value, "%")
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: styles.marker,
+          style: {
+            background: color || theme.colorPrimary,
+            height: size + 8
+          }
+        })
+      })
+    })]
+  }));
+});
+MarkerBar.displayName = 'MarkerBar';
+export default MarkerBar;

package/es/DataBars/ProgressBar.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+export interface ProgressBarProps extends FlexboxProps {
+    bgColors?: string;
+    color?: string;
+    showAnimation?: boolean;
+    size?: number;
+    tooltip?: ReactNode;
+    value: number;
+}
+declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ProgressBar;

package/es/DataBars/ProgressBar.js

@@ -0,0 +1,68 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "color", "bgColors", "tooltip", "showAnimation", "className", "width", "size", "style"];
+import { Tooltip } from '@lobehub/ui';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ProgressBar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var value = props.value,
+    color = props.color,
+    bgColors = props.bgColors,
+    tooltip = props.tooltip,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 8 : _props$size,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: tooltip,
+    children: /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+      align: 'center',
+      className: className,
+      height: size,
+      horizontal: true,
+      ref: ref,
+      style: _objectSpread({
+        position: 'relative'
+      }, style),
+      width: width
+    }, rest), {}, {
+      children: [/*#__PURE__*/_jsx(Flexbox, {
+        height: '100%',
+        style: {
+          background: bgColors || theme.colorFillTertiary,
+          borderRadius: size / 2,
+          inset: 0,
+          opacity: bgColors ? 0.2 : 1,
+          position: 'absolute',
+          zIndex: 0
+        },
+        width: '100%'
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        className: cx(showAnimation && styles.showAnimation),
+        height: '100%',
+        style: {
+          background: color || theme.colorPrimary,
+          borderRadius: size / 2,
+          zIndex: 1
+        },
+        width: "".concat(value, "%")
+      })]
+    }))
+  });
+});
+ProgressBar.displayName = 'ProgressBar';
+export default ProgressBar;

package/es/DataBars/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CategoryBar, type CategoryBarProps } from './CategoryBar';
+export { default as DeltaBar, type DeltaBarProps } from './DeltaBar';
+export { default as MarkerBar, type MarkerBarProps } from './MarkerBar';
+export { default as ProgressBar, type ProgressBarProps } from './ProgressBar';

package/es/DataBars/index.js

@@ -0,0 +1,4 @@
+export { default as CategoryBar } from "./CategoryBar";
+export { default as DeltaBar } from "./DeltaBar";
+export { default as MarkerBar } from "./MarkerBar";
+export { default as ProgressBar } from "./ProgressBar";

package/es/DataBars/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    emphasis: import("antd-style").SerializedStyles;
+    label: import("antd-style").SerializedStyles;
+    marker: import("antd-style").SerializedStyles;
+    markerWrapper: import("antd-style").SerializedStyles;
+    showAnimation: import("antd-style").SerializedStyles;
+}>;

package/es/DataBars/styles.js

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    label: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextDescription),
+    marker: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 4px;\n    border-radius: 4px;\n    box-shadow: 0 0 0 3px ", ";\n  "])), token.colorBgContainer),
+    markerWrapper: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    right: 50%;\n    width: 1.25rem;\n  "]))),
+    showAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    transition: all 0.25s ", ";\n  "])), token.motionEaseInOut)
+  };
+});

package/es/{components/Legend → Legend}/index.js

@@ -8,7 +8,7 @@ import { createStyles } from 'antd-style';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useThemeColorRange } from "../../hooks/useThemeColorRange";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
 import LegendItem from "./LegendItem";
 import ScrollButton from "./ScrollButton";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,7 +22,6 @@ 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;
@@ -117,6 +116,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,
@@ -152,14 +153,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/common/ChartLegend.js

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import Legend from "../components/Legend";
+import Legend from "../Legend";
 import { useOnWindowResize } from "../hooks/useOnWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 var calculateHeight = function calculateHeight(height) {

package/es/index.d.ts

@@ -2,9 +2,10 @@ export { default as AreaChart, type AreaChartProps } from './AreaChart';
 export { default as BarChart, type BarChartProps } from './BarChart';
 export { type Bar, default as BarList, type BarListProps } from './BarList';
 export { default as ChartTooltipFrame } from './common/ChartTooltip/ChartTooltipFrame';
-export { default as Legend, type LegendProps } from './components/Legend';
+export * from './DataBars';
 export { default as DonutChart, type DonutChartProps } from './DonutChart';
 export { default as Heatmaps, type HeatmapsProps } from './Heatmaps';
+export { default as Legend, type LegendProps } from './Legend';
 export { default as LineChart, type LineChartProps } from './LineChart';
 export { default as ScatterChart, type ScatterChartProps } from './ScatterChart';
 export * from './SparkChart';

package/es/index.js

@@ -2,9 +2,10 @@ export { default as AreaChart } from "./AreaChart";
 export { default as BarChart } from "./BarChart";
 export { default as BarList } from "./BarList";
 export { default as ChartTooltipFrame } from "./common/ChartTooltip/ChartTooltipFrame";
-export { default as Legend } from "./components/Legend";
+export * from "./DataBars";
 export { default as DonutChart } from "./DonutChart";
 export { default as Heatmaps } from "./Heatmaps";
+export { default as Legend } from "./Legend";
 export { default as LineChart } from "./LineChart";
 export { default as ScatterChart } from "./ScatterChart";
 export * from "./SparkChart";

package/es/types.d.ts

@@ -42,4 +42,9 @@ export type ScatterChartValueFormatter = {
     x?: ValueFormatter;
     y?: ValueFormatter;
 };
+declare const deltaTypeValues: readonly ["increase", "moderateIncrease", "decrease", "moderateDecrease", "unchanged"];
+export type DeltaType = (typeof deltaTypeValues)[number];
+export declare const DeltaTypes: {
+    [key: string]: DeltaType;
+};
 export {};

package/es/types.js

@@ -1 +1,8 @@
-export {};
+var deltaTypeValues = ['increase', 'moderateIncrease', 'decrease', 'moderateDecrease', 'unchanged'];
+export var DeltaTypes = {
+  Decrease: 'decrease',
+  Increase: 'increase',
+  ModerateDecrease: 'moderateDecrease',
+  ModerateIncrease: 'moderateIncrease',
+  Unchanged: 'unchanged'
+};

package/es/utils/index.d.ts

@@ -2,3 +2,4 @@ import { ValueFormatter } from "../types";
 export declare const defaultValueFormatter: ValueFormatter;
 export declare const sumNumericArray: (arr: number[]) => number;
 export declare const isOnSeverSide: boolean;
+export declare const mapInputsToDeltaType: (deltaType: string, isIncreasePositive: boolean) => string;

package/es/utils/index.js

@@ -1,3 +1,4 @@
+import { DeltaTypes } from "../types";
 export var defaultValueFormatter = function defaultValueFormatter(value) {
   return value.toString();
 };
@@ -6,4 +7,28 @@ export var sumNumericArray = function sumNumericArray(arr) {
     return prefixSum + num;
   }, 0);
 };
-export var isOnSeverSide = typeof document === 'undefined' || typeof window === 'undefined';
+export var isOnSeverSide = typeof document === 'undefined' || typeof window === 'undefined';
+export var mapInputsToDeltaType = function mapInputsToDeltaType(deltaType, isIncreasePositive) {
+  if (isIncreasePositive || deltaType === DeltaTypes.Unchanged) {
+    return deltaType;
+  }
+  switch (deltaType) {
+    case DeltaTypes.Increase:
+      {
+        return DeltaTypes.Decrease;
+      }
+    case DeltaTypes.ModerateIncrease:
+      {
+        return DeltaTypes.ModerateDecrease;
+      }
+    case DeltaTypes.Decrease:
+      {
+        return DeltaTypes.Increase;
+      }
+    case DeltaTypes.ModerateDecrease:
+      {
+        return DeltaTypes.ModerateIncrease;
+      }
+  }
+  return '';
+};

package/es/utils/theme.js

@@ -14,12 +14,12 @@ var createstringScale = function createstringScale(colors, size) {
 };
 var validateTheme = function validateTheme(input, size) {
   if (_typeof(input) !== 'object' || input === undefined) {
-    throw new Error("The theme object must contain at least one of the fields \"light\" and \"dark\" with exactly 2 or ".concat(size, " colors respectively."));
+    throw new Error("The theme object must contain at least 2 or ".concat(size, " colors respectively."));
   }
   if (input) {
     var length = input.length;
     if (length !== 2 && length !== size) {
-      throw new Error("theme.light must contain exactly 2 or ".concat(size, " colors, ").concat(length, " passed."));
+      throw new Error("theme must contain exactly 2 or ".concat(size, " colors, ").concat(length, " passed."));
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",
@@ -92,7 +92,7 @@
     "dumi-theme-lobehub": "^1.8.1",
     "eslint": "^8.57.0",
     "father": "4.3.1",
-    "husky": "^9.0.11",
+    "husky": "9.0.11",
     "jsdom": "^23.2.0",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.3",