@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';
import { jsx as _jsx } from "react/jsx-runtime";
export var LabelsMonth = _ref => {
  var {
    monthLabels = [],
    rectSize = 0,
    space = 0,
    leftPad = 0,
    colNum = 0,
    startDate
  } = _ref;
  var data = useMemo(() => {
    if (monthLabels === false || colNum < 1) return [];
    return [...Array(colNum * 7)].map((_, idx) => {
      if (idx / 7 % 1 === 0) {
        var date = new Date(startDate.getTime() + idx * oneDayTime);
        var month = date.getMonth();
        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);
  }, [colNum, monthLabels, startDate]);
  return useMemo(() => /*#__PURE__*/_jsx(Fragment, {
    children: [...data].map((item, idx) => {
      return /*#__PURE__*/_jsx("text", {
        "data-size": rectSize,
        x: leftPad + space + space,
        y: 15,
        dx: item.col * (rectSize + space),
        textAnchor: "start",
        children: item.monthStr
      }, idx);
    })
  }), [data, leftPad, rectSize, space]);
};
//# sourceMappingURL=LabelsMonth.js.map