@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 { oneDayTime } 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 = new Date(startDate.getTime() + idx * oneDayTime);
      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 {
    monthLabels = [],
    rectSize = 0,
    space = 0,
    leftPad = 0,
    colNum = 0,
    rectY = 15,
    startDate,
    endDate
  } = _ref;
  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))
  });
};