@uiw/react-heat-map/esm/LablesMonth.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 LablesMonth = function LablesMonth(_ref) {
  var _ref$monthLables = _ref.monthLables,
      monthLables = _ref$monthLables === void 0 ? [] : _ref$monthLables,
      _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,
      startDate = _ref.startDate;
  var data = useMemo(function () {
    if (monthLables === false || colNum < 1) return [];
    return [].concat(Array(colNum * 7)).map(function (_, 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: month,
          day: date.getDate(),
          monthStr: monthLables[month],
          date: date
        };
      }

      return null;
    }).filter(Boolean).filter(function (item, idx, list) {
      return list[idx - 1] && list[idx - 1].month !== item.month;
    });
  }, [colNum, monthLables, startDate]);
  return useMemo(function () {
    return /*#__PURE__*/_jsx(Fragment, {
      children: [].concat(data).map(function (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=LablesMonth.js.map