@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 {
    weekLabels = [],
    rectSize = 0,
    topPad = 0,
    space = 0
  } = _ref;
  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]);
};