@lobehub/charts 1.0.0 → 1.2.0

package/es/Heatmaps/index.js

@@ -0,0 +1,181 @@
+'use client';
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["data", "blockMargin", "blockRadius", "blockSize", "onValueChange", "fontSize", "hideColorLegend", "hideMonthLabels", "hideTotalCount", "labels", "maxLevel", "loading", "showTooltip", "customTooltip", "showWeekdayLabels", "style", "colors", "totalCount", "weekStart", "className", "noDataText"];
+import { useThemeMode } from 'antd-style';
+import { getYear, parseISO } from 'date-fns';
+import { forwardRef, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import NoData from "../common/NoData";
+import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion";
+import { isOnSeverSide } from "../utils";
+import { DEFAULT_LABELS, generateEmptyData, groupByWeeks, maxWeekdayLabelLength } from "../utils/calendar";
+import { createTheme } from "../utils/theme";
+import Calendar from "./Calendar";
+import ChartLabels from "./ChartLabels";
+import Footer from "./Footer";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LABEL_MARGIN = 8;
+var Heatmaps = /*#__PURE__*/forwardRef(function (props, ref) {
+  var data = props.data,
+    _props$blockMargin = props.blockMargin,
+    blockMargin = _props$blockMargin === void 0 ? 4 : _props$blockMargin,
+    _props$blockRadius = props.blockRadius,
+    blockRadius = _props$blockRadius === void 0 ? 2 : _props$blockRadius,
+    _props$blockSize = props.blockSize,
+    blockSize = _props$blockSize === void 0 ? 12 : _props$blockSize,
+    onValueChange = props.onValueChange,
+    _props$fontSize = props.fontSize,
+    fontSize = _props$fontSize === void 0 ? 14 : _props$fontSize,
+    _props$hideColorLegen = props.hideColorLegend,
+    hideColorLegend = _props$hideColorLegen === void 0 ? false : _props$hideColorLegen,
+    _props$hideMonthLabel = props.hideMonthLabels,
+    hideMonthLabels = _props$hideMonthLabel === void 0 ? false : _props$hideMonthLabel,
+    _props$hideTotalCount = props.hideTotalCount,
+    hideTotalCount = _props$hideTotalCount === void 0 ? false : _props$hideTotalCount,
+    labelsProp = props.labels,
+    _props$maxLevel = props.maxLevel,
+    maxLevel = _props$maxLevel === void 0 ? Math.max(1, props.maxLevel || 4) : _props$maxLevel,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$showTooltip = props.showTooltip,
+    showTooltip = _props$showTooltip === void 0 ? true : _props$showTooltip,
+    customTooltip = props.customTooltip,
+    _props$showWeekdayLab = props.showWeekdayLabels,
+    showWeekdayLabels = _props$showWeekdayLab === void 0 ? false : _props$showWeekdayLab,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    colors = props.colors,
+    totalCountProp = props.totalCount,
+    _props$weekStart = props.weekStart,
+    weekStart = _props$weekStart === void 0 ? 0 : _props$weekStart,
+    className = props.className,
+    noDataText = props.noDataText,
+    rest = _objectWithoutProperties(props, _excluded);
+  var activities = useMemo(function () {
+    if (loading) return generateEmptyData();
+    return data.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        level: item.level > maxLevel ? maxLevel : item.level
+      });
+    });
+  }, [data, maxLevel, loading]);
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var defaultColors = useMemo(function () {
+    switch (maxLevel) {
+      case 1:
+        {
+          return [theme.colorFillSecondary, isDarkMode ? theme.lime8 : theme.green8];
+        }
+      case 2:
+        {
+          return [theme.colorFillSecondary, isDarkMode ? theme.lime4 : theme.green4, isDarkMode ? theme.lime8 : theme.green8];
+        }
+      case 3:
+        {
+          return [theme.colorFillSecondary, isDarkMode ? theme.lime3 : theme.green3, isDarkMode ? theme.lime6 : theme.green6, isDarkMode ? theme.lime9 : theme.green9];
+        }
+      case 4:
+        {
+          return [theme.colorFillSecondary, isDarkMode ? theme.lime4 : theme.green4, isDarkMode ? theme.lime6 : theme.green6, isDarkMode ? theme.lime8 : theme.green8, isDarkMode ? theme.lime10 : theme.green10];
+        }
+      default:
+        {
+          return [theme.colorFillSecondary, theme.colorSuccess];
+        }
+    }
+  }, [theme, isDarkMode, maxLevel]);
+  var useAnimation = !usePrefersReducedMotion();
+  if (activities.length === 0) return /*#__PURE__*/_jsx(NoData, {
+    noDataText: noDataText
+  });
+  if (showWeekdayLabels && isOnSeverSide) return null;
+  var colorScale = createTheme(colors || defaultColors, maxLevel + 1);
+  var firstActivity = activities[0];
+  var year = getYear(parseISO(firstActivity.date));
+  var weeks = groupByWeeks(activities, weekStart);
+  var firstWeek = weeks[0];
+  var labels = Object.assign({}, DEFAULT_LABELS, labelsProp);
+  var labelHeight = hideMonthLabels ? 0 : fontSize + LABEL_MARGIN;
+  var weekdayLabelOffset = showWeekdayLabels ? maxWeekdayLabelLength(firstWeek, weekStart, labels.weekdays, fontSize) + LABEL_MARGIN : undefined;
+  var getDimensions = function getDimensions() {
+    return {
+      height: labelHeight + (blockSize + blockMargin) * 7 - blockMargin,
+      width: weeks.length * (blockSize + blockMargin) - blockMargin
+    };
+  };
+  var _getDimensions = getDimensions(),
+    width = _getDimensions.width,
+    height = _getDimensions.height;
+  var zeroColor = colorScale[0];
+  var containerStyles = _objectSpread({
+    fontSize: fontSize
+  }, useAnimation && _defineProperty(_defineProperty({}, "--lobe-heatmaps-loading", zeroColor), "--lobe-heatmaps-loading-active", theme.colorFill));
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    ref: ref,
+    style: _objectSpread(_objectSpread({}, style), containerStyles)
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.scrollContainer,
+      children: /*#__PURE__*/_jsxs("svg", {
+        className: styles.calendar,
+        height: height,
+        style: {
+          marginLeft: weekdayLabelOffset
+        },
+        viewBox: "0 0 ".concat(width, " ").concat(height),
+        width: width,
+        children: [!loading && !showWeekdayLabels && hideMonthLabels ? undefined : /*#__PURE__*/_jsx(ChartLabels, {
+          blockMargin: blockMargin,
+          blockSize: blockSize,
+          hideMonthLabels: hideMonthLabels,
+          labelHeight: labelHeight,
+          labelMargin: LABEL_MARGIN,
+          labels: labels,
+          showWeekdayLabels: showWeekdayLabels,
+          weekStart: weekStart,
+          weeks: weeks
+        }), /*#__PURE__*/_jsx(Calendar, {
+          blockMargin: blockMargin,
+          blockRadius: blockRadius,
+          blockSize: blockSize,
+          colorScale: colorScale,
+          customTooltip: customTooltip,
+          enableAnimation: loading && useAnimation,
+          labelHeight: labelHeight,
+          labels: labels,
+          maxLevel: maxLevel,
+          onValueChange: onValueChange,
+          showTooltip: showTooltip,
+          weeks: weeks
+        })]
+      })
+    }), hideTotalCount && hideColorLegend ? undefined : /*#__PURE__*/_jsx(Footer, {
+      blockRadius: blockRadius,
+      blockSize: blockSize,
+      colorScale: colorScale,
+      hideColorLegend: hideColorLegend,
+      hideTotalCount: hideTotalCount,
+      labels: labels,
+      loading: loading,
+      maxLevel: maxLevel,
+      totalCount: typeof totalCountProp === 'number' ? totalCountProp : activities.reduce(function (sum, activity) {
+        return sum + activity.count;
+      }, 0),
+      weekdayLabelOffset: weekdayLabelOffset,
+      year: year
+    })]
+  }));
+});
+Heatmaps.displayName = 'Heatmaps';
+export default Heatmaps;

package/es/Heatmaps/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    calendar: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    footer: import("antd-style").SerializedStyles;
+    legendColors: import("antd-style").SerializedStyles;
+    scrollContainer: import("antd-style").SerializedStyles;
+}>;

package/es/Heatmaps/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 {
+    calendar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: visible;\n    display: block;\n\n    text {\n      fill: currentcolor;\n    }\n  "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    width: max-content;\n    max-width: 100%;\n\n    rect {\n      stroke: ", ";\n      stroke-width: 1px;\n      shape-rendering: geometricprecision;\n    }\n  "])), token.colorFillTertiary),
+    footer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px 16px;\n    white-space: nowrap;\n  "]))),
+    legendColors: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 3px;\n    align-items: center;\n    margin-left: auto;\n  "]))),
+    scrollContainer: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    overflow: auto hidden;\n    max-width: 100%;\n  "])))
+  };
+});

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;