@lobehub/charts 1.1.0 → 1.3.0

package/README.md

@@ -156,6 +156,7 @@ Every bit counts and your one-time donation sparkles in our galaxy of support! Y
 
 - **recharts** - <https://github.com/recharts/recharts>
 - **tremor** - <https://github.com/tremorlabs/tremor>
+- **react-activity-calendar** - <https://github.com/grubersjoe/react-activity-calendar>
 
 <div align="right">
 

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/Heatmaps/Calendar.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import type { Activity, Labels, Week } from "../types";
+interface CalendarProps {
+    blockMargin: number;
+    blockRadius: number;
+    blockSize: number;
+    colorScale: string[];
+    customTooltip?: (activity: Activity) => ReactNode;
+    enableAnimation: boolean;
+    labelHeight: number;
+    labels: Labels;
+    maxLevel: number;
+    onValueChange?: (value: Activity) => void;
+    showTooltip: boolean;
+    weeks: Week[];
+}
+declare const Calendar: import("react").NamedExoticComponent<CalendarProps>;
+export default Calendar;

package/es/Heatmaps/Calendar.js

@@ -0,0 +1,67 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { Tooltip } from '@lobehub/ui';
+import { keyframes } from 'antd-style';
+import { Fragment, memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Calendar = /*#__PURE__*/memo(function (_ref) {
+  var weeks = _ref.weeks,
+    maxLevel = _ref.maxLevel,
+    enableAnimation = _ref.enableAnimation,
+    colorScale = _ref.colorScale,
+    blockSize = _ref.blockSize,
+    blockRadius = _ref.blockRadius,
+    blockMargin = _ref.blockMargin,
+    labelHeight = _ref.labelHeight,
+    showTooltip = _ref.showTooltip,
+    customTooltip = _ref.customTooltip,
+    labels = _ref.labels,
+    onValueChange = _ref.onValueChange;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: weeks.map(function (week, weekIndex) {
+      return week.map(function (activity, dayIndex) {
+        if (!activity) {
+          return null;
+        }
+        if (activity.level < 0 || activity.level > maxLevel) {
+          throw new RangeError("Provided activity level ".concat(activity.level, " for ").concat(activity.date, " is out of range. It must be between 0 and ").concat(maxLevel, "."));
+        }
+        var style = enableAnimation ? {
+          animation: "".concat(keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                      0% {\n                        fill: var(--lobe-heatmaps-loading);\n                      }\n                      50% {\n                        fill: var(--lobe-heatmaps-loading-active);\n                      }\n                      100% {\n                        fill: var(--lobe-heatmaps-loading);\n                      }\n                    "]))), " 1.75s ease-in-out infinite"),
+          animationDelay: "".concat(weekIndex * 20 + dayIndex * 20, "ms")
+        } : undefined;
+        var block = /*#__PURE__*/_jsx("rect", {
+          "data-date": activity.date,
+          "data-level": activity.level,
+          fill: colorScale[activity.level],
+          height: blockSize,
+          onClick: function onClick() {
+            return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(activity);
+          },
+          rx: blockRadius,
+          ry: blockRadius,
+          style: _objectSpread({
+            cursor: onValueChange ? 'pointer' : undefined
+          }, style),
+          width: blockSize,
+          x: 0,
+          y: labelHeight + (blockSize + blockMargin) * dayIndex
+        });
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: showTooltip ? /*#__PURE__*/_jsx(Tooltip, {
+            title: customTooltip ? customTooltip(activity) : labels.tooltip ? labels.tooltip.replace('{{count}}', String(activity.count)).replace('{{date}}', String(activity.date)) : "".concat(activity.count, " activities on ").concat(activity.date),
+            children: block
+          }) : block
+        }, activity.date);
+      });
+    }).map(function (week, x) {
+      return /*#__PURE__*/_jsx("g", {
+        transform: "translate(".concat((blockSize + blockMargin) * x, ", 0)"),
+        children: week
+      }, x);
+    })
+  });
+});
+export default Calendar;