@lobehub/charts/es/Heatmaps/Footer.js

React modern charts components built on recharts

import { cx } from 'antd-style';
import isEqual from 'fast-deep-equal';
import { memo, useMemo } from 'react';
import { styles } from "./styles";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
// Simple component - memo not needed as props are primitives and component is lightweight
var TotalCount = function TotalCount(_ref) {
  var totalCount = _ref.totalCount,
    year = _ref.year,
    totalCountText = _ref.totalCountText;
  var text = useMemo(function () {
    if (totalCountText) {
      return totalCountText.replace('{{count}}', String(totalCount)).replace('{{year}}', String(year));
    }
    return "".concat(totalCount, " activities in ").concat(year);
  }, [totalCountText, totalCount, year]);
  return /*#__PURE__*/_jsx("div", {
    className: cx('count'),
    children: text
  });
};
TotalCount.displayName = 'TotalCount';
// Simple component - Footer already memoized, so this doesn't need memo
var ColorLegend = function ColorLegend(_ref2) {
  var blockSize = _ref2.blockSize,
    blockRadius = _ref2.blockRadius,
    colorScale = _ref2.colorScale,
    maxLevel = _ref2.maxLevel,
    lessLabel = _ref2.lessLabel,
    moreLabel = _ref2.moreLabel;
  var colorLevels = useMemo(function () {
    return Array.from({
      length: maxLevel + 1
    }, function (_, level) {
      return level;
    });
  }, [maxLevel]);
  return /*#__PURE__*/_jsxs("div", {
    className: cx('legend-colors', styles.legendColors),
    children: [/*#__PURE__*/_jsx("span", {
      style: {
        marginRight: '0.4em'
      },
      children: lessLabel
    }), colorLevels.map(function (level) {
      return /*#__PURE__*/_jsx("svg", {
        height: blockSize,
        width: blockSize,
        children: /*#__PURE__*/_jsx("rect", {
          fill: colorScale[level],
          height: blockSize,
          rx: blockRadius,
          ry: blockRadius,
          width: blockSize
        })
      }, level);
    }), /*#__PURE__*/_jsx("span", {
      style: {
        marginLeft: '0.4em'
      },
      children: moreLabel
    })]
  });
};
ColorLegend.displayName = 'ColorLegend';
var Footer = /*#__PURE__*/memo(function (_ref3) {
  var hideTotalCount = _ref3.hideTotalCount,
    hideColorLegend = _ref3.hideColorLegend,
    weekdayLabelOffset = _ref3.weekdayLabelOffset,
    loading = _ref3.loading,
    labels = _ref3.labels,
    year = _ref3.year,
    maxLevel = _ref3.maxLevel,
    blockSize = _ref3.blockSize,
    colorScale = _ref3.colorScale,
    blockRadius = _ref3.blockRadius,
    totalCount = _ref3.totalCount;
  // Memoize footer style
  var footerStyle = useMemo(function () {
    return {
      marginLeft: weekdayLabelOffset
    };
  }, [weekdayLabelOffset]);
  return /*#__PURE__*/_jsxs("footer", {
    className: cx('footer', styles.footer),
    style: footerStyle,
    children: [loading && /*#__PURE__*/_jsx("div", {
      children: "\xA0"
    }), !loading && !hideTotalCount && /*#__PURE__*/_jsx(TotalCount, {
      totalCount: totalCount,
      totalCountText: labels.totalCount,
      year: year
    }), !loading && !hideColorLegend && /*#__PURE__*/_jsx(ColorLegend, {
      blockRadius: blockRadius,
      blockSize: blockSize,
      colorScale: colorScale,
      lessLabel: labels.legend.less,
      maxLevel: maxLevel,
      moreLabel: labels.legend.more
    })]
  });
}, isEqual);
Footer.displayName = 'Footer';
export default Footer;