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

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

import _extends from "@babel/runtime/helpers/extends";
import { useMemo, createElement as _createElement } from "react";
import { Rect } from "./Rect.js";
import { formatData, getDateToString, existColor, numberSort, oneDayTime } from "./utils.js";
import { jsx as _jsx } from "react/jsx-runtime";
export var Day = props => {
  var {
    transform,
    gridNum = 0,
    startY = 0,
    panelColors = {},
    initStartDate,
    space = 2,
    value = [],
    rectSize = 11,
    endDate,
    rectProps,
    rectRender
  } = props;
  var data = useMemo(() => formatData(value), [value]);
  var nums = useMemo(() => numberSort(Object.keys(panelColors).map(item => parseInt(item, 10))), [panelColors]);
  return /*#__PURE__*/_jsx("g", {
    transform: transform,
    children: gridNum > 0 && [...Array(gridNum)].map((_, idx) => {
      return /*#__PURE__*/_jsx("g", {
        "data-column": idx,
        children: [...Array(7)].map((_, cidx) => {
          var currentDate = new Date(initStartDate.getTime() + oneDayTime * (idx * 7 + cidx));
          var date = getDateToString(currentDate);
          var dataProps = _extends({}, data[date], {
            date: date,
            row: cidx,
            column: idx,
            index: idx * 7 + cidx
          });
          var dayProps = _extends({}, rectProps, {
            fill: 'var(--rhm-rect, #EBEDF0)',
            width: rectSize,
            height: rectSize,
            x: idx * (rectSize + space),
            y: (rectSize + space) * cidx,
            render: rectRender,
            value: dataProps
          });
          if (endDate instanceof Date && currentDate.getTime() > endDate.getTime()) {
            return null;
          }
          if (date && data[date] && panelColors && Object.keys(panelColors).length > 0) {
            dayProps.fill = existColor(data[date].count || 0, nums, panelColors);
          } else if (panelColors && panelColors[0]) {
            dayProps.fill = panelColors[0];
          }
          return /*#__PURE__*/_createElement(Rect, _extends({}, dayProps, {
            key: cidx,
            value: dataProps,
            "data-date": date,
            "data-index": dataProps.index,
            "data-row": dataProps.row,
            "data-column": dataProps.column
          }));
        })
      }, idx);
    })
  });
};