@lobehub/charts/es/Heatmaps/Calendar.js

React modern charts components built on recharts

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _templateObject;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Tooltip } from '@lobehub/ui';
import { keyframes } from 'antd-style';
import isEqual from 'fast-deep-equal';
import { memo, useMemo } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
// Move keyframes outside component to avoid recreation on each render
var loadingAnimation = 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"])));

// Helper function to generate tooltip title (moved outside component)
var getTooltipTitle = function getTooltipTitle(activity, customTooltip, labels) {
  if (customTooltip) {
    return customTooltip(activity);
  }
  if (labels !== null && labels !== void 0 && labels.tooltip) {
    return labels.tooltip.replace('{{count}}', String(activity.count)).replace('{{date}}', String(activity.date));
  }
  return "".concat(activity.count, " activities on ").concat(activity.date);
};
// Memoized block component - only re-renders when its own props change
var CalendarBlock = /*#__PURE__*/memo(function (_ref) {
  var activity = _ref.activity,
    blockSize = _ref.blockSize,
    blockRadius = _ref.blockRadius,
    color = _ref.color,
    labelHeight = _ref.labelHeight,
    blockMargin = _ref.blockMargin,
    dayIndex = _ref.dayIndex,
    enableAnimation = _ref.enableAnimation,
    animationDelay = _ref.animationDelay,
    onValueChange = _ref.onValueChange,
    showTooltip = _ref.showTooltip,
    customTooltip = _ref.customTooltip,
    labels = _ref.labels;
  var style = useMemo(function () {
    return _objectSpread({
      cursor: onValueChange ? 'pointer' : undefined
    }, enableAnimation && {
      animation: "".concat(loadingAnimation, " 1.75s ease-in-out infinite"),
      animationDelay: "".concat(animationDelay, "ms")
    });
  }, [enableAnimation, animationDelay, onValueChange]);
  var y = labelHeight + (blockSize + blockMargin) * dayIndex;
  var tooltipTitle = useMemo(function () {
    return getTooltipTitle(activity, customTooltip, labels);
  }, [activity, customTooltip, labels]);
  var block = /*#__PURE__*/_jsx("rect", {
    "data-date": activity.date,
    "data-level": activity.level,
    fill: color,
    height: blockSize,
    onClick: onValueChange ? function () {
      return onValueChange(activity);
    } : undefined,
    rx: blockRadius,
    ry: blockRadius,
    style: style,
    width: blockSize,
    x: 0,
    y: y
  });
  return showTooltip ? /*#__PURE__*/_jsx(Tooltip, {
    title: tooltipTitle,
    children: block
  }) : block;
}, isEqual);
CalendarBlock.displayName = 'CalendarBlock';
// Memoized week component - only re-renders when its own week data changes
var CalendarWeek = /*#__PURE__*/memo(function (_ref2) {
  var week = _ref2.week,
    weekIndex = _ref2.weekIndex,
    blockMargin = _ref2.blockMargin,
    blockRadius = _ref2.blockRadius,
    blockSize = _ref2.blockSize,
    colorScale = _ref2.colorScale,
    customTooltip = _ref2.customTooltip,
    enableAnimation = _ref2.enableAnimation,
    labelHeight = _ref2.labelHeight,
    labels = _ref2.labels,
    maxLevel = _ref2.maxLevel,
    onValueChange = _ref2.onValueChange,
    showTooltip = _ref2.showTooltip;
  return /*#__PURE__*/_jsx("g", {
    transform: "translate(".concat((blockSize + blockMargin) * weekIndex, ", 0)"),
    children: 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 animationDelay = weekIndex * 20 + dayIndex * 20;
      var color = colorScale[activity.level];
      return /*#__PURE__*/_jsx(CalendarBlock, {
        activity: activity,
        animationDelay: animationDelay,
        blockMargin: blockMargin,
        blockRadius: blockRadius,
        blockSize: blockSize,
        color: color,
        customTooltip: customTooltip,
        dayIndex: dayIndex,
        enableAnimation: enableAnimation,
        labelHeight: labelHeight,
        labels: labels,
        onValueChange: onValueChange,
        showTooltip: showTooltip
      }, activity.date);
    })
  });
}, isEqual);
CalendarWeek.displayName = 'CalendarWeek';
var Calendar = /*#__PURE__*/memo(function (_ref3) {
  var weeks = _ref3.weeks,
    maxLevel = _ref3.maxLevel,
    enableAnimation = _ref3.enableAnimation,
    colorScale = _ref3.colorScale,
    blockSize = _ref3.blockSize,
    blockRadius = _ref3.blockRadius,
    blockMargin = _ref3.blockMargin,
    labelHeight = _ref3.labelHeight,
    showTooltip = _ref3.showTooltip,
    customTooltip = _ref3.customTooltip,
    labels = _ref3.labels,
    onValueChange = _ref3.onValueChange;
  return /*#__PURE__*/_jsx(_Fragment, {
    children: weeks.map(function (week, weekIndex) {
      return /*#__PURE__*/_jsx(CalendarWeek, {
        blockMargin: blockMargin,
        blockRadius: blockRadius,
        blockSize: blockSize,
        colorScale: colorScale,
        customTooltip: customTooltip,
        enableAnimation: enableAnimation,
        labelHeight: labelHeight,
        labels: labels,
        maxLevel: maxLevel,
        onValueChange: onValueChange,
        showTooltip: showTooltip,
        week: week,
        weekIndex: weekIndex
      }, weekIndex);
    })
  });
}, isEqual);
Calendar.displayName = 'Calendar';
export default Calendar;