@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/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/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,
    leftPad = 0,
    topPad = 0,
    space = 0,
    rectSize = 0,
    legendCellSize = 0,
    legendRender
  } = _ref,
      props = _objectWithoutPropertiesLoose(_ref, _excluded);

  var size = legendCellSize || rectSize;
  return useMemo(() => /*#__PURE__*/_jsx(Fragment, {
    children: Object.keys(panelColors || {}).map((num, key) => {
      var rectProps = _extends({}, props, {
        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