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

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

import React, { Fragment, useMemo } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export var textStyle = {
  textAnchor: 'middle',
  fontSize: 'inherit',
  fill: 'currentColor'
};
export var LabelsWeek = _ref => {
  var _ref$weekLabels = _ref.weekLabels,
    weekLabels = _ref$weekLabels === void 0 ? [] : _ref$weekLabels,
    _ref$rectSize = _ref.rectSize,
    rectSize = _ref$rectSize === void 0 ? 0 : _ref$rectSize,
    _ref$topPad = _ref.topPad,
    topPad = _ref$topPad === void 0 ? 0 : _ref$topPad,
    _ref$space = _ref.space,
    space = _ref$space === void 0 ? 0 : _ref$space;
  return useMemo(() => /*#__PURE__*/_jsx(Fragment, {
    children: [...Array(7)].map((_, idx) => {
      if (weekLabels && weekLabels[idx]) {
        return /*#__PURE__*/_jsx("text", {
          className: "w-heatmap-week",
          x: 15,
          y: topPad,
          dy: (idx + 1) * (rectSize + space) - 5,
          style: textStyle,
          children: weekLabels[idx]
        }, idx);
      }
      return null;
    })
  }), [rectSize, space, topPad, weekLabels]);
};