@uiw/react-heat-map/esm/LabelsMonth.js

React component create calendar heatmap to visualize time series data, a la github contribution graph.

import React, { Fragment, useMemo } from 'react';
import { addDays } from "./utils.js";
import { textStyle } from "./LabelsWeek.js";
import { jsx as _jsx } from "react/jsx-runtime";
var generateData = (colNum, monthLabels, startDate, endDate) => {
  if (monthLabels === false || colNum < 1) return [];
  return Array.from({
    length: colNum * 7
  }).map((_, idx) => {
    if (idx / 7 % 1 === 0) {
      var date = addDays(startDate, idx);
      var month = date.getMonth();
      if (endDate && date > endDate) return null;
      return {
        col: idx / 7,
        index: idx,
        month,
        day: date.getDate(),
        monthStr: monthLabels[month],
        date
      };
    }
    return null;
  }).filter(Boolean).filter((item, idx, list) => list[idx - 1] && list[idx - 1].month !== item.month);
};
export var LabelsMonth = _ref => {
  var _ref$monthLabels = _ref.monthLabels,
    monthLabels = _ref$monthLabels === void 0 ? [] : _ref$monthLabels,
    _ref$rectSize = _ref.rectSize,
    rectSize = _ref$rectSize === void 0 ? 0 : _ref$rectSize,
    _ref$space = _ref.space,
    space = _ref$space === void 0 ? 0 : _ref$space,
    _ref$leftPad = _ref.leftPad,
    leftPad = _ref$leftPad === void 0 ? 0 : _ref$leftPad,
    _ref$colNum = _ref.colNum,
    colNum = _ref$colNum === void 0 ? 0 : _ref$colNum,
    _ref$rectY = _ref.rectY,
    rectY = _ref$rectY === void 0 ? 15 : _ref$rectY,
    startDate = _ref.startDate,
    endDate = _ref.endDate;
  var data = useMemo(() => generateData(colNum, monthLabels, startDate, endDate), [colNum, monthLabels, startDate, endDate]);
  return /*#__PURE__*/_jsx(Fragment, {
    children: data.map((item, idx) => /*#__PURE__*/_jsx("text", {
      "data-size": rectSize,
      x: leftPad + space + space,
      y: rectY,
      dx: item.col * (rectSize + space),
      textAnchor: "start",
      style: textStyle,
      children: item.monthStr
    }, idx))
  });
};