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

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

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["panelColors", "leftPad", "topPad", "space", "rectSize", "legendCellSize", "legendRender"];
import React, { Fragment, useMemo } from 'react';
import { Rect } from './Rect';
import { jsx as _jsx } from "react/jsx-runtime";
export default function Legend(_ref) {
  var panelColors = _ref.panelColors,
      _ref$leftPad = _ref.leftPad,
      leftPad = _ref$leftPad === void 0 ? 0 : _ref$leftPad,
      _ref$topPad = _ref.topPad,
      topPad = _ref$topPad === void 0 ? 0 : _ref$topPad,
      _ref$space = _ref.space,
      space = _ref$space === void 0 ? 0 : _ref$space,
      _ref$rectSize = _ref.rectSize,
      rectSize = _ref$rectSize === void 0 ? 0 : _ref$rectSize,
      _ref$legendCellSize = _ref.legendCellSize,
      legendCellSize = _ref$legendCellSize === void 0 ? 0 : _ref$legendCellSize,
      legendRender = _ref.legendRender,
      props = _objectWithoutPropertiesLoose(_ref, _excluded);

  var size = legendCellSize || rectSize;
  return useMemo(function () {
    return /*#__PURE__*/_jsx(Fragment, {
      children: Object.keys(panelColors || {}).map(function (num, key) {
        var rectProps = _extends({}, props, {
          key: key,
          x: (size + 1) * key + leftPad,
          y: topPad + rectSize * 8 + 6,
          fill: panelColors[Number(num)],
          width: size,
          height: size
        });

        if (legendRender) return legendRender(rectProps);
        return /*#__PURE__*/_jsx(Rect, _extends({}, rectProps));
      })
    });
  }, [panelColors, props, size, leftPad, topPad, rectSize, legendRender]);
}
//# sourceMappingURL=Legend.js.map