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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Day = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = require("react");
var _Rect = require("./Rect");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
var Day = exports.Day = function 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 = (0, _react.useMemo)(function () {
    return (0, _utils.formatData)(value);
  }, [value]);
  var nums = (0, _react.useMemo)(function () {
    return (0, _utils.numberSort)(Object.keys(panelColors).map(function (item) {
      return parseInt(item, 10);
    }));
  }, [panelColors]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
    transform: transform,
    children: gridNum > 0 && (0, _toConsumableArray2["default"])(Array(gridNum)).map(function (_, idx) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
        "data-column": idx,
        children: (0, _toConsumableArray2["default"])(Array(7)).map(function (_, cidx) {
          var currentDate = (0, _utils.addDays)(initStartDate, idx * 7 + cidx);
          var date = (0, _utils.getDateToString)(currentDate);
          var dataProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, data[date]), {}, {
            date: date,
            row: cidx,
            column: idx,
            index: idx * 7 + cidx
          });
          var dayProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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 = (0, _utils.existColor)(data[date].count || 0, nums, panelColors);
          } else if (panelColors && panelColors[0]) {
            dayProps.fill = panelColors[0];
          }
          return /*#__PURE__*/(0, _react.createElement)(_Rect.Rect, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dayProps), {}, {
            key: cidx,
            value: dataProps,
            "data-date": date,
            "data-index": dataProps.index,
            "data-row": dataProps.row,
            "data-column": dataProps.column
          }));
        })
      }, idx);
    })
  });
};