@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 { addDays, formatData, getDateToString, existColor, numberSort } from "./utils.js";
import { jsx as _jsx } from "react/jsx-runtime";
export var Day = props => {
  var transform = props.transform,
    _props$gridNum = props.gridNum,
    gridNum = _props$gridNum === void 0 ? 0 : _props$gridNum,
    _props$startY = props.startY,
    startY = _props$startY === void 0 ? 0 : _props$startY,
    _props$panelColors = props.panelColors,
    panelColors = _props$panelColors === void 0 ? {} : _props$panelColors,
    initStartDate = props.initStartDate,
    _props$space = props.space,
    space = _props$space === void 0 ? 2 : _props$space,
    _props$value = props.value,
    value = _props$value === void 0 ? [] : _props$value,
    _props$rectSize = props.rectSize,
    rectSize = _props$rectSize === void 0 ? 11 : _props$rectSize,
    endDate = props.endDate,
    rectProps = props.rectProps,
    rectRender = props.rectRender;
  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 = addDays(initStartDate, 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);
    })
  });
};