@lobehub/charts 1.0.0 → 1.1.0

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"];
+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"];
 import { css } from 'antd-style';
 import { Fragment, forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -83,6 +83,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? '20rem' : _props$height,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var paddingValue = !showXAxis && !showYAxis || startEndOnly && !showYAxis ? 0 : 20;
@@ -101,7 +102,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
   var categoryColors = constructCategoryColors(categories, colors);
   var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   var hasOnValueChange = !!onValueChange;
-  function onDotClick(itemData, event) {
+  var onDotClick = function onDotClick(itemData, event) {
     event.stopPropagation();
     if (!hasOnValueChange) return;
     if (itemData.index === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) && itemData.dataKey === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) || hasOnlyOneValueForThisKey(data, itemData.dataKey) && activeLegend && activeLegend === itemData.dataKey) {
@@ -119,8 +120,8 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
         eventType: 'dot'
       }, itemData.payload));
     }
-  }
-  function onCategoryClick(dataKey) {
+  };
+  var onCategoryClick = function onCategoryClick(dataKey) {
     if (!hasOnValueChange) return;
     if (dataKey === activeLegend && !activeDot || hasOnlyOneValueForThisKey(data, dataKey) && activeDot && activeDot.dataKey === dataKey) {
       setActiveLegend(undefined);
@@ -133,11 +134,14 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     setActiveDot(undefined);
-  }
+  };
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: className,
     height: height,
     ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
     width: width
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(ResponsiveContainer, {

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"];
+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"];
 import { css } from 'antd-style';
 import { forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -83,6 +83,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? '20rem' : _props$height,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
@@ -140,6 +141,9 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     className: className,
     height: height,
     ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
     width: width
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(ResponsiveContainer, {

package/es/BarList/index.d.ts

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { ValueFormatter } from "../types";
+export interface Bar {
+    [key: string]: any;
+    color?: string;
+    href?: string;
+    icon?: ReactNode;
+    key?: string;
+    name: ReactNode;
+    target?: string;
+    value: number;
+}
+export interface BarListProps extends HTMLAttributes<HTMLDivElement> {
+    color?: string;
+    data: Bar[];
+    leftLabel?: ReactNode;
+    onValueChange?: (payload: Bar) => void;
+    rightLabel?: ReactNode;
+    showAnimation?: boolean;
+    sortOrder?: 'ascending' | 'descending' | 'none';
+    valueFormatter?: ValueFormatter;
+}
+declare const BarList: React.ForwardRefExoticComponent<BarListProps & React.RefAttributes<HTMLDivElement>>;
+export default BarList;

package/es/BarList/index.js

@@ -0,0 +1,149 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["data", "color", "valueFormatter", "showAnimation", "onValueChange", "sortOrder", "className", "leftLabel", "rightLabel", "style"];
+import A from '@lobehub/ui/es/A';
+import React, { forwardRef, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { defaultValueFormatter } from "../utils";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BarList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$color = props.color,
+    color = _props$color === void 0 ? themeColorRange[0] : _props$color,
+    _props$valueFormatter = props.valueFormatter,
+    valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    onValueChange = props.onValueChange,
+    _props$sortOrder = props.sortOrder,
+    sortOrder = _props$sortOrder === void 0 ? 'descending' : _props$sortOrder,
+    className = props.className,
+    leftLabel = props.leftLabel,
+    rightLabel = props.rightLabel,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var sortedData = useMemo(function () {
+    if (sortOrder === 'none') {
+      return data;
+    }
+    return _toConsumableArray(data).sort(function (a, b) {
+      return sortOrder === 'ascending' ? a.value - b.value : b.value - a.value;
+    });
+  }, [data, sortOrder]);
+  var widths = useMemo(function () {
+    var maxValue = Math.max.apply(Math, _toConsumableArray(sortedData.map(function (item) {
+      return item.value;
+    })).concat([0]));
+    return sortedData.map(function (item) {
+      return item.value === 0 ? 0 : Math.max(item.value / maxValue * 100, 2);
+    });
+  }, [sortedData]);
+  var rowHeight = 32;
+  var labelHeight = 20;
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    "aria-sort": sortOrder,
+    className: className,
+    gap: 24,
+    horizontal: true,
+    justify: 'space-between',
+    ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style)
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      flex: 1,
+      gap: 8,
+      style: {
+        position: 'relative'
+      },
+      children: [(leftLabel || rightLabel) && /*#__PURE__*/_jsx(Flexbox, {
+        className: cx(styles.label, styles.emphasis),
+        height: labelHeight,
+        width: "100%",
+        children: leftLabel
+      }), sortedData.map(function (item, index) {
+        var _item$key, _item$color;
+        return /*#__PURE__*/_jsxs(Flexbox, {
+          align: 'center',
+          className: styles.barContainer,
+          height: rowHeight,
+          horizontal: true,
+          onClick: function onClick() {
+            onValueChange === null || onValueChange === void 0 || onValueChange(item);
+          },
+          style: {
+            cursor: onValueChange ? 'pointer' : 'default',
+            width: "".concat(widths[index], "%")
+          },
+          width: '100%',
+          children: [/*#__PURE__*/_jsx("div", {
+            className: cx(styles.bar, onValueChange && styles.barHover),
+            style: {
+              background: (_item$color = item.color) !== null && _item$color !== void 0 ? _item$color : color,
+              transition: showAnimation ? undefined : 'none',
+              width: "".concat(widths[index], "%"),
+              zIndex: 0
+            }
+          }), /*#__PURE__*/_jsxs(Flexbox, {
+            align: 'center',
+            gap: 8,
+            horizontal: true,
+            paddingInline: 8,
+            style: {
+              zIndex: 1
+            },
+            children: [item.icon, item.href ? /*#__PURE__*/_jsx(A, {
+              className: cx(styles.sourceALabel, styles.emphasis),
+              href: item.href,
+              onClick: function onClick(event) {
+                return event.stopPropagation();
+              },
+              target: item.target,
+              children: item.name
+            }) : /*#__PURE__*/_jsx("div", {
+              className: cx(styles.sourceLabel, styles.emphasis),
+              children: item.name
+            })]
+          })]
+        }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : index);
+      })]
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      gap: 8,
+      children: [(leftLabel || rightLabel) && /*#__PURE__*/_jsx(Flexbox, {
+        className: cx(styles.label, styles.emphasis),
+        height: labelHeight,
+        style: {
+          textAlign: 'right'
+        },
+        width: "100%",
+        children: rightLabel
+      }), sortedData.map(function (item, index) {
+        var _item$key2;
+        return /*#__PURE__*/_jsx(Flexbox, {
+          align: 'center',
+          height: rowHeight,
+          horizontal: true,
+          justify: 'flex-end',
+          children: /*#__PURE__*/_jsx("div", {
+            className: cx(styles.strongLabel, styles.emphasis),
+            children: valueFormatter(item.value)
+          })
+        }, (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : index);
+      })]
+    })]
+  }));
+});
+BarList.displayName = 'BarList';
+export default BarList;

package/es/BarList/styles.d.ts

@@ -0,0 +1,10 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    bar: import("antd-style").SerializedStyles;
+    barContainer: import("antd-style").SerializedStyles;
+    barHover: import("antd-style").SerializedStyles;
+    emphasis: import("antd-style").SerializedStyles;
+    label: import("antd-style").SerializedStyles;
+    sourceALabel: import("antd-style").SerializedStyles;
+    sourceLabel: import("antd-style").SerializedStyles;
+    strongLabel: import("antd-style").SerializedStyles;
+}>;

package/es/BarList/styles.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    bar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    max-width: 100%;\n    height: 100%;\n\n    opacity: 0.25;\n    border-radius: ", "px;\n\n    transition: all 0.25s ", ";\n  "])), token.borderRadius, token.motionEaseInOut),
+    barContainer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n  "]))),
+    barHover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    &:hover {\n      opacity: 0.4;\n    }\n  "]))),
+    emphasis: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorTextDescription),
+    sourceALabel: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n  "])), token.colorText, token.colorLinkHover),
+    sourceLabel: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorText),
+    strongLabel: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorText)
+  };
+});

package/es/DonutChart/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { CSSProperties, ComponentType } from 'react';
 import type BaseAnimationTimingProps from "../common/BaseAnimationTimingProps";
 import { CustomTooltipProps } from "../common/CustomTooltipProps";
 import { type NoDataProps } from "../common/NoData";
@@ -18,6 +18,7 @@ export interface DonutChartProps extends BaseAnimationTimingProps {
     showAnimation?: boolean;
     showLabel?: boolean;
     showTooltip?: boolean;
+    style?: CSSProperties;
     valueFormatter?: ValueFormatter;
     variant?: DonutChartVariant;
 }

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"];
+var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height", "style"];
 import { css } from 'antd-style';
 import { forwardRef, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -55,6 +55,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? '10rem' : _props$height,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var isDonut = variant === 'donut';
@@ -64,7 +65,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     activeIndex = _useState2[0],
     setActiveIndex = _useState2[1];
   var hasOnValueChange = !!onValueChange;
-  function onShapeClick(data, index, event) {
+  var onShapeClick = function onShapeClick(data, index, event) {
     event.stopPropagation();
     if (!hasOnValueChange) return;
     if (activeIndex === index) {
@@ -76,7 +77,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
         eventType: 'slice'
       }, data.payload.payload));
     }
-  }
+  };
   useEffect(function () {
     var pieSectors = document.querySelectorAll('.recharts-pie-sector');
     if (pieSectors) {
@@ -108,6 +109,9 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     className: className,
     height: height,
     ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
     width: width
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(ResponsiveContainer, {

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"];
+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"];
 import { css } from 'antd-style';
 import { Fragment, forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -79,6 +79,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? '20rem' : _props$height,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
@@ -97,7 +98,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
   var categoryColors = constructCategoryColors(categories, colors);
   var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   var hasOnValueChange = !!onValueChange;
-  function onDotClick(itemData, event) {
+  var onDotClick = function onDotClick(itemData, event) {
     event.stopPropagation();
     if (!hasOnValueChange) return;
     if (itemData.index === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) && itemData.dataKey === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) || hasOnlyOneValueForThisKey(data, itemData.dataKey) && activeLegend && activeLegend === itemData.dataKey) {
@@ -115,8 +116,8 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
         eventType: 'dot'
       }, itemData.payload));
     }
-  }
-  function onCategoryClick(dataKey) {
+  };
+  var onCategoryClick = function onCategoryClick(dataKey) {
     if (!hasOnValueChange) return;
     if (dataKey === activeLegend && !activeDot || hasOnlyOneValueForThisKey(data, dataKey) && activeDot && activeDot.dataKey === dataKey) {
       setActiveLegend(undefined);
@@ -129,11 +130,14 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     setActiveDot(undefined);
-  }
+  };
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: className,
     height: height,
     ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
     width: width
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(ResponsiveContainer, {
@@ -229,7 +233,7 @@ var LineChart = /*#__PURE__*/forwardRef(function (props, ref) {
             });
           } : undefined,
           cursor: {
-            stroke: '#d1d5db',
+            stroke: theme.colorTextSecondary,
             strokeWidth: 1
           },
           isAnimationActive: false,

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"];
+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"];
 import { css } from 'antd-style';
 import { forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -89,6 +89,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? '20rem' : _props$height,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var _useState = useState(60),
@@ -104,7 +105,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     activeLegend = _useState6[0],
     setActiveLegend = _useState6[1];
   var hasOnValueChange = !!onValueChange;
-  function onNodeClick(data, index, event) {
+  var onNodeClick = function onNodeClick(data, index, event) {
     event.stopPropagation();
     if (!hasOnValueChange) return;
     if (deepEqual(activeNode, data.node)) {
@@ -119,8 +120,8 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
         eventType: 'bubble'
       }, data.payload));
     }
-  }
-  function onCategoryClick(dataKey) {
+  };
+  var onCategoryClick = function onCategoryClick(dataKey) {
     if (!hasOnValueChange) return;
     if (dataKey === activeLegend && !activeNode) {
       setActiveLegend(undefined);
@@ -133,7 +134,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     setActiveNode(undefined);
-  }
+  };
   var categories = constructCategories(data, category);
   var categoryColors = constructCategoryColors(categories, colors);
 
@@ -144,6 +145,9 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
     className: className,
     height: height,
     ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
     width: width
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(ResponsiveContainer, {
@@ -250,7 +254,7 @@ var ScatterChart = /*#__PURE__*/forwardRef(function (props, ref) {
             });
           } : undefined,
           cursor: {
-            stroke: '#d1d5db',
+            stroke: theme.colorTextSecondary,
             strokeWidth: 1
           },
           isAnimationActive: false,

package/es/SparkChart/SparkAreaChart.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import BaseSparkChartProps from "../common/BaseSparkChartProps";
+import { CurveType } from "../types";
+export interface SparkAreaChartProps extends BaseSparkChartProps {
+    connectNulls?: boolean;
+    curveType?: CurveType;
+    showGradient?: boolean;
+    stack?: boolean;
+}
+declare const SparkAreaChart: import("react").ForwardRefExoticComponent<SparkAreaChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SparkAreaChart;

package/es/SparkChart/SparkAreaChart.js

@@ -0,0 +1,140 @@
+'use client';
+
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+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"];
+import { css } from 'antd-style';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Area, AreaChart as ReChartsAreaChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { useStyles } from "../AreaChart/styles";
+import NoData from "../common/NoData";
+import { constructCategoryColors, getYAxisDomain } from "../common/utils";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SparkAreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$categories = props.categories,
+    categories = _props$categories === void 0 ? [] : _props$categories,
+    index = props.index,
+    _props$stack = props.stack,
+    stack = _props$stack === void 0 ? false : _props$stack,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    _props$animationDurat = props.animationDuration,
+    animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
+    _props$showGradient = props.showGradient,
+    showGradient = _props$showGradient === void 0 ? true : _props$showGradient,
+    _props$curveType = props.curveType,
+    curveType = _props$curveType === void 0 ? 'linear' : _props$curveType,
+    _props$connectNulls = props.connectNulls,
+    connectNulls = _props$connectNulls === void 0 ? false : _props$connectNulls,
+    _props$noDataText = props.noDataText,
+    noDataText = _props$noDataText === void 0 ? /*#__PURE__*/_jsx("div", {}) : _props$noDataText,
+    _props$autoMinValue = props.autoMinValue,
+    autoMinValue = _props$autoMinValue === void 0 ? false : _props$autoMinValue,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 112 : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 48 : _props$height,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var categoryColors = constructCategoryColors(categories, colors);
+  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    height: height,
+    ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+      children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsAreaChart, {
+        data: data,
+        margin: {
+          bottom: 1,
+          left: 1,
+          right: 1,
+          top: 1
+        },
+        children: [/*#__PURE__*/_jsx(YAxis, {
+          domain: yAxisDomain,
+          hide: true
+        }), /*#__PURE__*/_jsx(XAxis, {
+          dataKey: index,
+          hide: true
+        }), categories.map(function (category) {
+          var _categoryColors$get, _categoryColors$get2;
+          return /*#__PURE__*/_jsx("defs", {
+            children: showGradient ? /*#__PURE__*/_jsxs("linearGradient", {
+              className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary)),
+              id: categoryColors.get(category),
+              x1: "0",
+              x2: "0",
+              y1: "0",
+              y2: "1",
+              children: [/*#__PURE__*/_jsx("stop", {
+                offset: "5%",
+                stopColor: "currentColor",
+                stopOpacity: 0.4
+              }), /*#__PURE__*/_jsx("stop", {
+                offset: "95%",
+                stopColor: "currentColor",
+                stopOpacity: 0
+              })]
+            }) : /*#__PURE__*/_jsx("linearGradient", {
+              className: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        color: ", ";\n                      "])), (_categoryColors$get2 = categoryColors.get(category)) !== null && _categoryColors$get2 !== void 0 ? _categoryColors$get2 : theme.colorPrimary)),
+              id: categoryColors.get(category),
+              x1: "0",
+              x2: "0",
+              y1: "0",
+              y2: "1",
+              children: /*#__PURE__*/_jsx("stop", {
+                stopColor: "currentColor",
+                stopOpacity: 0.3
+              })
+            })
+          }, category);
+        }), categories.map(function (category) {
+          var _categoryColors$get3;
+          return /*#__PURE__*/_jsx(Area, {
+            animationDuration: animationDuration,
+            className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get3 = categoryColors.get(category)) !== null && _categoryColors$get3 !== void 0 ? _categoryColors$get3 : theme.colorPrimary)),
+            connectNulls: connectNulls,
+            dataKey: category,
+            dot: false,
+            fill: "url(#".concat(categoryColors.get(category), ")"),
+            isAnimationActive: showAnimation,
+            name: category,
+            stackId: stack ? 'a' : undefined,
+            stroke: "",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeOpacity: 1,
+            strokeWidth: 2,
+            type: curveType
+          }, category);
+        })]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+SparkAreaChart.displayName = 'AreaChart';
+export default SparkAreaChart;

package/es/SparkChart/SparkBarChart.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import BaseSparkChartProps from "../common/BaseSparkChartProps";
+export interface SparkBarChartProps extends BaseSparkChartProps {
+    relative?: boolean;
+    stack?: boolean;
+}
+declare const SparkBarChart: import("react").ForwardRefExoticComponent<SparkBarChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SparkBarChart;

package/es/SparkChart/SparkBarChart.js

@@ -0,0 +1,98 @@
+'use client';
+
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+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"];
+import { css } from 'antd-style';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Bar, BarChart as ReChartsBarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { useStyles } from "../BarChart/styles";
+import NoData from "../common/NoData";
+import { constructCategoryColors, getYAxisDomain } from "../common/utils";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SparkBarChart = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$categories = props.categories,
+    categories = _props$categories === void 0 ? [] : _props$categories,
+    index = props.index,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _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$animationDurat = props.animationDuration,
+    animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    _props$noDataText = props.noDataText,
+    noDataText = _props$noDataText === void 0 ? /*#__PURE__*/_jsx("div", {}) : _props$noDataText,
+    _props$autoMinValue = props.autoMinValue,
+    autoMinValue = _props$autoMinValue === void 0 ? false : _props$autoMinValue,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 112 : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 48 : _props$height,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var categoryColors = constructCategoryColors(categories, colors);
+  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    height: height,
+    ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+      children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsBarChart, {
+        data: data,
+        margin: {
+          bottom: 0,
+          left: -1.5,
+          right: -1.5,
+          top: 0
+        },
+        stackOffset: relative ? 'expand' : 'none',
+        children: [/*#__PURE__*/_jsx(YAxis, {
+          domain: yAxisDomain,
+          hide: true
+        }), /*#__PURE__*/_jsx(XAxis, {
+          dataKey: index,
+          hide: true
+        }), categories.map(function (category) {
+          var _categoryColors$get;
+          return /*#__PURE__*/_jsx(Bar, {
+            animationDuration: animationDuration,
+            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                  fill: ", ";\n                "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary)),
+            dataKey: category,
+            fill: "",
+            isAnimationActive: showAnimation,
+            name: category,
+            stackId: stack || relative ? 'a' : undefined,
+            type: "linear"
+          }, category);
+        })]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+SparkBarChart.displayName = 'SparkBarChart';
+export default SparkBarChart;

package/es/SparkChart/SparkLineChart.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import BaseSparkChartProps from "../common/BaseSparkChartProps";
+import { CurveType } from "../types";
+export interface SparkLineChartProps extends BaseSparkChartProps {
+    connectNulls?: boolean;
+    curveType?: CurveType;
+}
+declare const SparkLineChart: import("react").ForwardRefExoticComponent<SparkLineChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SparkLineChart;

package/es/SparkChart/SparkLineChart.js

@@ -0,0 +1,102 @@
+'use client';
+
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+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"];
+import { css } from 'antd-style';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Line, LineChart as ReChartsLineChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { useStyles } from "../LineChart/styles";
+import NoData from "../common/NoData";
+import { constructCategoryColors, getYAxisDomain } from "../common/utils";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SparkLineChart = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$categories = props.categories,
+    categories = _props$categories === void 0 ? [] : _props$categories,
+    index = props.index,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _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$curveType = props.curveType,
+    curveType = _props$curveType === void 0 ? 'linear' : _props$curveType,
+    _props$connectNulls = props.connectNulls,
+    connectNulls = _props$connectNulls === void 0 ? false : _props$connectNulls,
+    _props$noDataText = props.noDataText,
+    noDataText = _props$noDataText === void 0 ? /*#__PURE__*/_jsx("div", {}) : _props$noDataText,
+    _props$autoMinValue = props.autoMinValue,
+    autoMinValue = _props$autoMinValue === void 0 ? false : _props$autoMinValue,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 112 : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 48 : _props$height,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var categoryColors = constructCategoryColors(categories, colors);
+  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    height: height,
+    ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+      children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsLineChart, {
+        data: data,
+        margin: {
+          bottom: 1,
+          left: 1,
+          right: 1,
+          top: 1
+        },
+        children: [/*#__PURE__*/_jsx(YAxis, {
+          domain: yAxisDomain,
+          hide: true
+        }), /*#__PURE__*/_jsx(XAxis, {
+          dataKey: index,
+          hide: true
+        }), categories.map(function (category) {
+          var _categoryColors$get;
+          return /*#__PURE__*/_jsx(Line, {
+            animationDuration: animationDuration,
+            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary)),
+            connectNulls: connectNulls,
+            dataKey: category,
+            dot: false,
+            isAnimationActive: showAnimation,
+            name: category,
+            stroke: "",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeOpacity: 1,
+            strokeWidth: 2,
+            type: curveType
+          }, category);
+        })]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+SparkLineChart.displayName = 'SparkLineChart';
+export default SparkLineChart;

package/es/SparkChart/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SparkAreaChart, type SparkAreaChartProps } from './SparkAreaChart';
+export { default as SparkBarChart, type SparkBarChartProps } from './SparkBarChart';
+export { default as SparkLineChart, type SparkLineChartProps } from './SparkLineChart';

package/es/SparkChart/index.js

@@ -0,0 +1,3 @@
+export { default as SparkAreaChart } from "./SparkAreaChart";
+export { default as SparkBarChart } from "./SparkBarChart";
+export { default as SparkLineChart } from "./SparkLineChart";

package/es/Tracker/TrackerBlock.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface TrackerBlockProps {
+    color?: 'success' | 'warning' | 'error' | string;
+    key?: string | number;
+    tooltip?: ReactNode;
+}
+declare const TrackerBlock: import("react").ForwardRefExoticComponent<TrackerBlockProps & import("react-layout-kit/lib/FlexBasic").FlexBasicProps & import("react-layout-kit").CommonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TrackerBlock;

package/es/Tracker/TrackerBlock.js

@@ -0,0 +1,62 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["color", "tooltip", "width", "style"];
+var _templateObject;
+import { Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { forwardRef, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n\n    &:first-child {\n      border-top-left-radius: ", "px;\n      border-bottom-left-radius: ", "px;\n    }\n\n    &:last-child {\n      border-top-right-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n    }\n\n    &:hover {\n      opacity: 0.5;\n    }\n  "])), token.colorFill, token.borderRadiusSM, token.borderRadiusSM, token.borderRadiusSM, token.borderRadiusSM)
+  };
+});
+var TrackerBlock = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var color = _ref2.color,
+    tooltip = _ref2.tooltip,
+    width = _ref2.width,
+    style = _ref2.style,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var blockColor = useMemo(function () {
+    switch (color) {
+      case 'success':
+        {
+          return theme.colorSuccess;
+        }
+      case 'warning':
+        {
+          return theme.colorWarning;
+        }
+      case 'error':
+        {
+          return theme.colorError;
+        }
+      default:
+        {
+          return color;
+        }
+    }
+  }, [color]);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: tooltip,
+    children: /*#__PURE__*/_jsx(Flexbox, _objectSpread({
+      className: styles.block,
+      height: '100%',
+      ref: ref,
+      style: _objectSpread({
+        background: blockColor
+      }, style),
+      width: width || '100%'
+    }, rest))
+  });
+});
+export default TrackerBlock;

package/es/Tracker/index.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+import { TrackerBlockProps } from './TrackerBlock';
+interface DataItem extends TrackerBlockProps {
+    [key: string]: any;
+}
+export interface TrackerProps extends FlexboxProps {
+    blockGap?: number | string;
+    blockHeight?: number | string;
+    blockWidth?: number | string;
+    customTooltip?: (payload: DataItem) => ReactNode;
+    data: DataItem[];
+    leftLabel?: ReactNode;
+    onValueChange?: (payload: DataItem) => void;
+    rightLabel?: ReactNode;
+}
+declare const Tracker: import("react").ForwardRefExoticComponent<TrackerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tracker;

package/es/Tracker/index.js

@@ -0,0 +1,98 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["data", "className", "height", "width", "blockWidth", "blockHeight", "blockGap", "customTooltip", "onValueChange", "leftLabel", "rightLabel", "style"];
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import TrackerBlock from "./TrackerBlock";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Tracker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    className = props.className,
+    height = props.height,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 'fit-content' : _props$width,
+    _props$blockWidth = props.blockWidth,
+    blockWidth = _props$blockWidth === void 0 ? 12 : _props$blockWidth,
+    _props$blockHeight = props.blockHeight,
+    blockHeight = _props$blockHeight === void 0 ? 40 : _props$blockHeight,
+    _props$blockGap = props.blockGap,
+    blockGap = _props$blockGap === void 0 ? 4 : _props$blockGap,
+    customTooltip = props.customTooltip,
+    onValueChange = props.onValueChange,
+    leftLabel = props.leftLabel,
+    rightLabel = props.rightLabel,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var content = data.map(function (item, idx) {
+    var _item$key;
+    return /*#__PURE__*/_jsx(TrackerBlock, {
+      color: item.color,
+      height: blockHeight,
+      onClick: function onClick() {
+        return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(item);
+      },
+      style: {
+        cursor: onValueChange ? 'pointer' : 'default'
+      },
+      tooltip: customTooltip ? customTooltip(item) : item.tooltip,
+      width: blockWidth
+    }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : idx);
+  });
+  if (leftLabel || rightLabel) {
+    return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+      className: className,
+      gap: 8,
+      height: height,
+      ref: ref,
+      style: _objectSpread({
+        position: 'relative'
+      }, style),
+      width: width
+    }, rest), {}, {
+      children: [/*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        horizontal: true,
+        justify: 'space-between',
+        width: '100%',
+        children: [/*#__PURE__*/_jsx("div", {
+          className: cx(styles.strongLabel, styles.emphasis),
+          children: leftLabel
+        }), /*#__PURE__*/_jsx("div", {
+          className: cx(styles.label, styles.emphasis),
+          style: {
+            textAlign: 'right'
+          },
+          children: rightLabel
+        })]
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        gap: blockGap,
+        height: blockHeight,
+        horizontal: true,
+        width: '100%',
+        children: content
+      })]
+    }));
+  }
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: className,
+    gap: blockGap,
+    height: height || blockHeight,
+    horizontal: true,
+    ref: ref,
+    width: width
+  }, rest), {}, {
+    children: content
+  }));
+});
+Tracker.displayName = 'Tracker';
+export default Tracker;

package/es/Tracker/styles.d.ts

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

package/es/Tracker/styles.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+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    color: ", ";\n  "])), token.colorTextDescription),
+    strongLabel: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+  };
+});

package/es/common/BaseSparkChartProps.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import BaseAnimationTimingProps from './BaseAnimationTimingProps';
+interface BaseSparkChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDivElement> {
+    autoMinValue?: boolean;
+    categories: string[];
+    colors?: string[];
+    data: any[];
+    index: string;
+    maxValue?: number;
+    minValue?: number;
+    noDataText?: string;
+}
+export default BaseSparkChartProps;

package/es/common/BaseSparkChartProps.js

@@ -0,0 +1 @@
+export {};

package/es/common/utils.d.ts

@@ -1,5 +1,5 @@
 export declare const constructCategoryColors: (categories: string[], colors: string[]) => Map<string, string>;
 export declare const getYAxisDomain: (autoMinValue: boolean, minValue: number | undefined, maxValue: number | undefined) => (string | number)[];
 export declare const constructCategories: (data: any[], color?: string) => string[];
-export declare function deepEqual(obj1: any, obj2: any): boolean;
-export declare function hasOnlyOneValueForThisKey(array: any[], keyToCheck: string): boolean;
+export declare const deepEqual: (obj1: any, obj2: any) => boolean;
+export declare const hasOnlyOneValueForThisKey: (array: any[], keyToCheck: string) => boolean;

package/es/common/utils.js

@@ -42,7 +42,7 @@ export var constructCategories = function constructCategories(data, color) {
   }
   return _toConsumableArray(categories);
 };
-export function deepEqual(obj1, obj2) {
+export var deepEqual = function deepEqual(obj1, obj2) {
   if (obj1 === obj2) return true;
   if (_typeof(obj1) !== 'object' || _typeof(obj2) !== 'object' || obj1 === null || obj2 === null) return false;
   var keys1 = Object.keys(obj1);
@@ -53,8 +53,8 @@ export function deepEqual(obj1, obj2) {
     if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) return false;
   }
   return true;
-}
-export function hasOnlyOneValueForThisKey(array, keyToCheck) {
+};
+export var hasOnlyOneValueForThisKey = function hasOnlyOneValueForThisKey(array, keyToCheck) {
   var val = [];
   var _iterator3 = _createForOfIteratorHelper(array),
     _step3;
@@ -74,4 +74,4 @@ export function hasOnlyOneValueForThisKey(array, keyToCheck) {
     _iterator3.f();
   }
   return true;
-}
+};

package/es/index.d.ts

@@ -1,8 +1,11 @@
 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 { default as DonutChart, type DonutChartProps } from './DonutChart';
 export { default as LineChart, type LineChartProps } from './LineChart';
 export { default as ScatterChart, type ScatterChartProps } from './ScatterChart';
+export * from './SparkChart';
+export { default as Tracker, type TrackerProps } from './Tracker';
 export type * from './types';

package/es/index.js

@@ -1,7 +1,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 { default as DonutChart } from "./DonutChart";
 export { default as LineChart } from "./LineChart";
-export { default as ScatterChart } from "./ScatterChart";
+export { default as ScatterChart } from "./ScatterChart";
+export * from "./SparkChart";
+export { default as Tracker } from "./Tracker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",
@@ -74,6 +74,7 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
+    "@icons-pack/react-simple-icons": "^9.6.0",
     "@lobehub/lint": "^1.24.3",
     "@lobehub/ui": "^1.146.8",
     "@testing-library/react": "^14.3.1",