@lobehub/charts 1.1.0 → 1.2.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/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;

package/es/Heatmaps/ChartLabels.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { Labels, Week } from "../types";
+interface ChartLabelsProps {
+    blockMargin: number;
+    blockSize: number;
+    hideMonthLabels: boolean;
+    labelHeight: number;
+    labelMargin: number;
+    labels: Labels;
+    showWeekdayLabels: boolean;
+    weekStart: number;
+    weeks: Week[];
+}
+declare const ChartLabels: import("react").NamedExoticComponent<ChartLabelsProps>;
+export default ChartLabels;

package/es/Heatmaps/ChartLabels.js

@@ -0,0 +1,50 @@
+import { memo } from 'react';
+import { getMonthLabels } from "../utils/calendar";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ChartLabels = /*#__PURE__*/memo(function (_ref) {
+  var labels = _ref.labels,
+    blockSize = _ref.blockSize,
+    labelHeight = _ref.labelHeight,
+    blockMargin = _ref.blockMargin,
+    labelMargin = _ref.labelMargin,
+    showWeekdayLabels = _ref.showWeekdayLabels,
+    hideMonthLabels = _ref.hideMonthLabels,
+    weeks = _ref.weeks,
+    weekStart = _ref.weekStart;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showWeekdayLabels && weeks[0] && /*#__PURE__*/_jsx("g", {
+      className: cx('legend-weekday'),
+      children: weeks[0].map(function (_, index) {
+        var _labels$weekdays;
+        if (index % 2 === 0) {
+          return null;
+        }
+        var dayIndex = (index + weekStart) % 7;
+        return /*#__PURE__*/_jsx("text", {
+          dominantBaseline: "middle",
+          textAnchor: "end",
+          x: -labelMargin,
+          y: labelHeight + (blockSize + blockMargin) * index + blockSize / 2,
+          children: labels === null || labels === void 0 || (_labels$weekdays = labels.weekdays) === null || _labels$weekdays === void 0 ? void 0 : _labels$weekdays[dayIndex]
+        }, index);
+      })
+    }), !hideMonthLabels && /*#__PURE__*/_jsx("g", {
+      className: cx('legend-month'),
+      children: getMonthLabels(weeks, labels.months).map(function (_ref2) {
+        var label = _ref2.label,
+          weekIndex = _ref2.weekIndex;
+        return /*#__PURE__*/_jsx("text", {
+          dominantBaseline: "hanging",
+          x: (blockSize + blockMargin) * weekIndex,
+          children: label
+        }, weekIndex);
+      })
+    })]
+  });
+});
+export default ChartLabels;

package/es/Heatmaps/Footer.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+interface FooterProps {
+    blockRadius: number;
+    blockSize: number;
+    colorScale: string[];
+    hideColorLegend?: boolean;
+    hideTotalCount?: boolean;
+    labels: {
+        legend: {
+            less: string;
+            more: string;
+        };
+        totalCount?: string;
+    };
+    loading: boolean;
+    maxLevel: number;
+    totalCount: number;
+    weekdayLabelOffset?: number;
+    year: number;
+}
+declare const Footer: import("react").NamedExoticComponent<FooterProps>;
+export default Footer;

package/es/Heatmaps/Footer.js

@@ -0,0 +1,60 @@
+import { memo } from 'react';
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Footer = /*#__PURE__*/memo(function (_ref) {
+  var hideTotalCount = _ref.hideTotalCount,
+    hideColorLegend = _ref.hideColorLegend,
+    weekdayLabelOffset = _ref.weekdayLabelOffset,
+    loading = _ref.loading,
+    labels = _ref.labels,
+    year = _ref.year,
+    maxLevel = _ref.maxLevel,
+    blockSize = _ref.blockSize,
+    colorScale = _ref.colorScale,
+    blockRadius = _ref.blockRadius,
+    totalCount = _ref.totalCount;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs("footer", {
+    className: cx('footer', styles.footer),
+    style: {
+      marginLeft: weekdayLabelOffset
+    },
+    children: [loading && /*#__PURE__*/_jsx("div", {
+      children: "\xA0"
+    }), !loading && !hideTotalCount && /*#__PURE__*/_jsx("div", {
+      className: cx('count'),
+      children: labels.totalCount ? labels.totalCount.replace('{{count}}', String(totalCount)).replace('{{year}}', String(year)) : "".concat(totalCount, " activities in ").concat(year)
+    }), !loading && !hideColorLegend && /*#__PURE__*/_jsxs("div", {
+      className: cx('legend-colors', styles.legendColors),
+      children: [/*#__PURE__*/_jsx("span", {
+        style: {
+          marginRight: '0.4em'
+        },
+        children: labels.legend.less
+      }), Array.from({
+        length: maxLevel + 1
+      }).fill(null).map(function (_, level) {
+        return /*#__PURE__*/_jsx("svg", {
+          height: blockSize,
+          width: blockSize,
+          children: /*#__PURE__*/_jsx("rect", {
+            fill: colorScale[level],
+            height: blockSize,
+            rx: blockRadius,
+            ry: blockRadius,
+            width: blockSize
+          })
+        }, level);
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          marginLeft: '0.4em'
+        },
+        children: labels.legend.more
+      })]
+    })]
+  });
+});
+export default Footer;

package/es/Heatmaps/index.d.ts

@@ -0,0 +1,28 @@
+import type { Day as WeekDay } from 'date-fns';
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+import { NoDataProps } from "../common/NoData";
+import type { Activity, Labels } from "../types";
+export interface HeatmapsProps extends FlexboxProps {
+    blockMargin?: number;
+    blockRadius?: number;
+    blockSize?: number;
+    colors?: string[];
+    customTooltip?: (activity: Activity) => ReactNode;
+    data: Array<Activity>;
+    fontSize?: number;
+    hideColorLegend?: boolean;
+    hideMonthLabels?: boolean;
+    hideTotalCount?: boolean;
+    labels?: Labels;
+    loading?: boolean;
+    maxLevel?: number;
+    noDataText?: NoDataProps['noDataText'];
+    onValueChange?: (value: Activity) => void;
+    showTooltip?: boolean;
+    showWeekdayLabels?: boolean;
+    totalCount?: number;
+    weekStart?: WeekDay;
+}
+declare const Heatmaps: import("react").ForwardRefExoticComponent<HeatmapsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Heatmaps;

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/hooks/useOnWindowResize.js

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
+import { isOnSeverSide } from "../utils";
 export var useOnWindowResize = function useOnWindowResize(handler) {
   useEffect(function () {
-    if (window === undefined) return;
+    if (isOnSeverSide) return;
     var handleResize = function handleResize() {
       handler();
     };

package/es/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare const usePrefersReducedMotion: () => boolean;

package/es/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import { isOnSeverSide } from "../utils";
+var query = '(prefers-reduced-motion: reduce)';
+export var usePrefersReducedMotion = function usePrefersReducedMotion() {
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    prefersReducedMotion = _useState2[0],
+    setPrefersReducedMotion = _useState2[1];
+  useEffect(function () {
+    if (isOnSeverSide) return;
+    var mediaQuery = window.matchMedia(query);
+    setPrefersReducedMotion(mediaQuery.matches);
+    var onChange = function onChange(event) {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener('change', onChange);
+    return function () {
+      mediaQuery.removeEventListener('change', onChange);
+    };
+  }, []);
+  return prefersReducedMotion;
+};

package/es/index.d.ts

@@ -4,6 +4,7 @@ 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 Heatmaps, type HeatmapsProps } from './Heatmaps';
 export { default as LineChart, type LineChartProps } from './LineChart';
 export { default as ScatterChart, type ScatterChartProps } from './ScatterChart';
 export * from './SparkChart';

package/es/index.js

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

package/es/types.d.ts

@@ -1,3 +1,28 @@
+import type { AnimationEvent, ClipboardEvent, CompositionEvent, DOMAttributes, DragEvent, FocusEvent, FormEvent, HTMLAttributes, JSXElementConstructor, KeyboardEvent, MouseEvent, PointerEvent, ReactElement, SVGAttributes, SyntheticEvent, TouchEvent, TransitionEvent, UIEvent, WheelEvent } from 'react';
+export interface Activity {
+    count: number;
+    date: string;
+    level: number;
+}
+export type Week = Array<Activity | undefined>;
+export type Labels = Partial<{
+    legend: Partial<{
+        less: string;
+        more: string;
+    }>;
+    months: Array<string>;
+    tooltip: string;
+    totalCount: string;
+    weekdays: Array<string>;
+}>;
+interface BlockAttributes extends SVGAttributes<SVGRectElement>, HTMLAttributes<SVGRectElement> {
+}
+export type BlockElement = ReactElement<BlockAttributes, JSXElementConstructor<SVGRectElement>>;
+export type SVGRectEventHandler = Omit<DOMAttributes<SVGRectElement>, 'css' | 'children' | 'dangerouslySetInnerHTML'>;
+export type EventHandlerMap = {
+    [key in keyof SVGRectEventHandler]: (...event: Parameters<NonNullable<SVGRectEventHandler[keyof SVGRectEventHandler]>>) => (activity: Activity) => void;
+};
+export type ReactEvent<E extends Element> = AnimationEvent<E> & ClipboardEvent<E> & CompositionEvent<E> & DragEvent<E> & FocusEvent<E> & FormEvent<E> & KeyboardEvent<E> & MouseEvent<E> & PointerEvent<E> & SyntheticEvent<E> & TouchEvent<E> & TransitionEvent<E> & UIEvent<E> & WheelEvent<E>;
 type FixedProps = {
     categoryClicked: string;
     eventType: 'dot' | 'category' | 'bar' | 'slice' | 'bubble';

package/es/utils/calendar.d.ts

@@ -0,0 +1,29 @@
+import type { Day as WeekDay } from 'date-fns';
+import type { Activity, Week } from "../types";
+export declare const DEFAULT_MONTH_LABELS: string[];
+export declare const DEFAULT_LABELS: {
+    legend: {
+        less: string;
+        more: string;
+    };
+    months: string[];
+    tooltip: string;
+    totalCount: string;
+    weekdays: string[];
+};
+interface MonthLabel {
+    label: string;
+    weekIndex: number;
+}
+export declare const groupByWeeks: (activities: Array<Activity>, weekStart?: WeekDay) => Array<Week>;
+export declare const getMonthLabels: (weeks: Array<Week>, monthNames?: Array<string>) => Array<MonthLabel>;
+export declare const generateEmptyData: () => Array<Activity>;
+export declare const generateTestData: (args: {
+    interval?: {
+        end: Date;
+        start: Date;
+    } | undefined;
+    maxLevel?: number | undefined;
+}) => Array<Activity>;
+export declare const maxWeekdayLabelLength: (firstWeek: Week, weekStart: number, labels: string[], fontSize: number) => number;
+export {};

package/es/utils/calendar.js

@@ -0,0 +1,194 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { differenceInCalendarDays, eachDayOfInterval, endOfYear, formatISO, getDay, getMonth, nextDay, parseISO, startOfYear, subWeeks } from 'date-fns';
+import { isOnSeverSide } from "./index";
+export var DEFAULT_MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+export var DEFAULT_LABELS = {
+  legend: {
+    less: 'Less',
+    more: 'More'
+  },
+  months: DEFAULT_MONTH_LABELS,
+  tooltip: '{{count}} activities on {{date}}',
+  totalCount: '{{count}} activities in {{year}}',
+  weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+};
+var fillHoles = function fillHoles(activities) {
+  if (activities.length === 0) {
+    return [];
+  }
+  var calendar = new Map(activities.map(function (a) {
+    return [a.date, a];
+  }));
+  var firstActivity = activities[0];
+  var lastActivity = activities.at(-1);
+  return eachDayOfInterval({
+    end: parseISO(lastActivity.date),
+    start: parseISO(firstActivity.date)
+  }).map(function (day) {
+    var date = formatISO(day, {
+      representation: 'date'
+    });
+    if (calendar.has(date)) {
+      return calendar.get(date);
+    }
+    return {
+      count: 0,
+      date: date,
+      level: 0
+    };
+  });
+};
+var calcTextDimensions = function calcTextDimensions(text, fontSize) {
+  if (isOnSeverSide) return;
+  if (fontSize < 1) {
+    throw new RangeError('fontSize must be positive');
+  }
+  if (text.length === 0) {
+    return {
+      height: 0,
+      width: 0
+    };
+  }
+  var namespace = 'http://www.w3.org/2000/svg';
+  var svg = document.createElementNS(namespace, 'svg');
+  svg.style.position = 'absolute';
+  svg.style.visibility = 'hidden';
+  svg.style.fontFamily = window.getComputedStyle(document.body).fontFamily;
+  svg.style.fontSize = "".concat(fontSize, "px");
+  var textNode = document.createElementNS(namespace, 'text');
+  textNode.textContent = text;
+  svg.append(textNode);
+  document.body.append(svg);
+  var boundingBox = textNode.getBBox();
+  svg.remove();
+  return {
+    height: boundingBox.height,
+    width: boundingBox.width
+  };
+};
+export var groupByWeeks = function groupByWeeks(activities) {
+  var weekStart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (activities.length === 0) {
+    return [];
+  }
+  var normalizedActivities = fillHoles(activities);
+
+  // Determine the first date of the calendar. If the first date is not the
+  // set start weekday, the selected weekday one week earlier is used.
+  var firstActivity = normalizedActivities[0];
+  var firstDate = parseISO(firstActivity.date);
+  var firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1);
+
+  // To correctly group activities by week, it is necessary to left-pad the list
+  // because the first date might not be set start weekday.
+  var paddedActivities = [].concat(_toConsumableArray(Array.from({
+    length: differenceInCalendarDays(firstDate, firstCalendarDate)
+  }).fill(null)), _toConsumableArray(normalizedActivities));
+  var numberOfWeeks = Math.ceil(paddedActivities.length / 7);
+
+  // Finally, group activities by week
+  return Array.from({
+    length: numberOfWeeks
+  }).fill(null).map(function (_, weekIndex) {
+    return paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7);
+  });
+};
+export var getMonthLabels = function getMonthLabels(weeks) {
+  var monthNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_MONTH_LABELS;
+  return weeks.reduce(function (labels, week, weekIndex) {
+    var firstActivity = week.filter(Boolean).find(function (activity) {
+      return activity !== undefined;
+    });
+    if (!firstActivity) {
+      throw new Error("Unexpected error: Week ".concat(weekIndex + 1, " is empty: [").concat(week, "]."));
+    }
+    var month = monthNames[getMonth(parseISO(firstActivity.date))];
+    if (!month) {
+      var monthName = new Date(firstActivity.date).toLocaleString('en-US', {
+        month: 'short'
+      });
+      throw new Error("Unexpected error: undefined month label for ".concat(monthName, "."));
+    }
+    var prevLabel = labels.at(-1);
+    if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) {
+      return [].concat(_toConsumableArray(labels), [{
+        label: month,
+        weekIndex: weekIndex
+      }]);
+    }
+    return labels;
+  }, []).filter(function (_ref, index, labels) {
+    var weekIndex = _ref.weekIndex;
+    // Labels should only be shown if there is "enough" space (data).
+    // This is a naive implementation that does not take the block size,
+    // font size, etc. into account.
+    var minWeeks = 3;
+
+    // Skip the first month label if there is not enough space to the next one.
+    if (index === 0) {
+      return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks;
+    }
+
+    // Skip the last month label if there is not enough data in that month
+    // to avoid overflowing the calendar on the right.
+    if (index === labels.length - 1) {
+      return weeks.slice(weekIndex).length >= minWeeks;
+    }
+    return true;
+  });
+};
+export var generateEmptyData = function generateEmptyData() {
+  var year = new Date().getFullYear();
+  var days = eachDayOfInterval({
+    end: new Date(year, 11, 31),
+    start: new Date(year, 0, 1)
+  });
+  return days.map(function (date) {
+    return {
+      count: 0,
+      date: formatISO(date, {
+        representation: 'date'
+      }),
+      level: 0
+    };
+  });
+};
+export var generateTestData = function generateTestData(args) {
+  var _args$interval;
+  var maxCount = 20;
+  var maxLevel = args.maxLevel ? Math.max(1, args.maxLevel) : 4;
+  var now = new Date();
+  var days = eachDayOfInterval((_args$interval = args.interval) !== null && _args$interval !== void 0 ? _args$interval : {
+    end: endOfYear(now),
+    start: startOfYear(now)
+  });
+  return days.map(function (date) {
+    // The random activity count is shifted by up to 80% towards zero.
+    var c = Math.round(Math.random() * maxCount - Math.random() * (0.8 * maxCount));
+    var count = Math.max(0, c);
+    var level = Math.ceil(count / maxCount * maxLevel);
+    return {
+      count: count,
+      date: formatISO(date, {
+        representation: 'date'
+      }),
+      level: level
+    };
+  });
+};
+export var maxWeekdayLabelLength = function maxWeekdayLabelLength(firstWeek, weekStart, labels, fontSize) {
+  if (isOnSeverSide) return 0;
+  if (labels.length !== 7) {
+    throw new Error('Exactly 7 labels, one for each weekday must be passed.');
+  }
+  return firstWeek.reduce(function (maxLength, _, index) {
+    if (index % 2 !== 0) {
+      var dayIndex = (index + weekStart) % 7;
+      var label = labels[dayIndex];
+      // @ts-ignore
+      var curLength = Math.ceil(calcTextDimensions(label, fontSize).width);
+      return Math.max(maxLength, curLength);
+    }
+    return maxLength;
+  }, 0);
+};

package/es/utils/index.d.ts

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

package/es/utils/index.js

@@ -5,4 +5,5 @@ export var sumNumericArray = function sumNumericArray(arr) {
   return arr.reduce(function (prefixSum, num) {
     return prefixSum + num;
   }, 0);
-};
+};
+export var isOnSeverSide = typeof document === 'undefined' || typeof window === 'undefined';

package/es/utils/theme.d.ts

@@ -0,0 +1,2 @@
+export declare function createTheme(input?: string[], size?: number): string[];
+export declare const convertAlphaToSolid: (foreground: string, background: string) => string;

package/es/utils/theme.js

@@ -0,0 +1,49 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import chroma from 'chroma-js';
+var isstringScale = function isstringScale(colors, size) {
+  var invalidstring = colors.find(function (color) {
+    return !chroma.valid(color);
+  });
+  if (invalidstring) {
+    throw new Error("Invalid color \"".concat(String(invalidstring), "\" passed. All CSS color formats are accepted."));
+  }
+  return colors.length === size;
+};
+var createstringScale = function createstringScale(colors, size) {
+  return chroma.scale(colors).mode('lch').colors(size);
+};
+var validateTheme = function validateTheme(input, size) {
+  if (_typeof(input) !== 'object' || input === undefined) {
+    throw new Error("The theme object must contain at least one of the fields \"light\" and \"dark\" with exactly 2 or ".concat(size, " colors respectively."));
+  }
+  if (input) {
+    var length = input.length;
+    if (length !== 2 && length !== size) {
+      throw new Error("theme.light must contain exactly 2 or ".concat(size, " colors, ").concat(length, " passed."));
+    }
+  }
+};
+var createDefaultTheme = function createDefaultTheme(size) {
+  return createstringScale(['hsl(0, 0%, 20%)', 'hsl(0, 0%, 92%)'], size);
+};
+export function createTheme(input) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+  var defaultTheme = createDefaultTheme(size);
+  if (input) {
+    validateTheme(input, size);
+    var theme = input !== null && input !== void 0 ? input : defaultTheme;
+
+    // @ts-ignore
+    return isstringScale(theme, size) ? theme : createstringScale(theme, size);
+  }
+  return defaultTheme;
+}
+export var convertAlphaToSolid = function convertAlphaToSolid(foreground, background) {
+  var fgColor = chroma(foreground);
+  var bgColor = chroma(background);
+  var alpha = fgColor.alpha();
+  var alphaComplement = 1 - alpha;
+  var mixedColor = [fgColor.get('rgb.r') * alpha + bgColor.get('rgb.r') * alphaComplement, fgColor.get('rgb.g') * alpha + bgColor.get('rgb.g') * alphaComplement, fgColor.get('rgb.b') * alpha + bgColor.get('rgb.b') * alphaComplement];
+  var resultColor = chroma(mixedColor);
+  return resultColor.hex();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/charts",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React modern charts components built on recharts",
   "keywords": [
     "lobehub",
@@ -68,8 +68,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.8",
+    "date-fns": "^3.6.0",
     "polished": "^4.3.1",
-    "react-layout-kit": "^1.9.0",
     "recharts": "^2.12.7"
   },
   "devDependencies": {
@@ -78,6 +78,7 @@
     "@lobehub/lint": "^1.24.3",
     "@lobehub/ui": "^1.146.8",
     "@testing-library/react": "^14.3.1",
+    "@types/chroma-js": "^2.4.4",
     "@types/pangu": "^4.0.2",
     "@types/query-string": "^6.3.0",
     "@types/react": "18.2.40",
@@ -109,9 +110,11 @@
     "ahooks": ">=3",
     "antd": ">=5.13.0",
     "antd-style": ">=3",
+    "chroma-js": ">=2",
     "lucide-react": ">=0.396.0",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-layout-kit": ">=1"
   },
   "publishConfig": {
     "access": "public",