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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LabelsMonth = void 0;
var _react = _interopRequireWildcard(require("react"));
var _utils = require("./utils");
var _LabelsWeek = require("./LabelsWeek");
var _jsxRuntime = require("react/jsx-runtime");
var generateData = function generateData(colNum, monthLabels, startDate, endDate) {
  if (monthLabels === false || colNum < 1) return [];
  return Array.from({
    length: colNum * 7
  }).map(function (_, idx) {
    if (idx / 7 % 1 === 0) {
      var date = new Date(startDate.getTime() + idx * _utils.oneDayTime);
      var month = date.getMonth();
      if (endDate && date > endDate) return null;
      return {
        col: idx / 7,
        index: idx,
        month: month,
        day: date.getDate(),
        monthStr: monthLabels[month],
        date: date
      };
    }
    return null;
  }).filter(Boolean).filter(function (item, idx, list) {
    return list[idx - 1] && list[idx - 1].month !== item.month;
  });
};
var LabelsMonth = exports.LabelsMonth = function 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 = (0, _react.useMemo)(function () {
    return generateData(colNum, monthLabels, startDate, endDate);
  }, [colNum, monthLabels, startDate, endDate]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
    children: data.map(function (item, idx) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
        "data-size": rectSize,
        x: leftPad + space + space,
        y: rectY,
        dx: item.col * (rectSize + space),
        textAnchor: "start",
        style: _LabelsWeek.textStyle,
        children: item.monthStr
      }, idx);
    })
  });
};