@lobehub/charts/es/common/ChartLegend.js

React modern charts components built on recharts

import { useRef } from 'react';
import { Flexbox } from 'react-layout-kit';
import Legend from "../Legend";
import { useOnWindowResize } from "../hooks/useOnWindowResize";
import { jsx as _jsx } from "react/jsx-runtime";
var calculateHeight = function calculateHeight(height) {
  return height ? Number(height) + 20 // 20px extra padding
  : 60;
}; // default height

var ChartLegend = function ChartLegend(_ref, categoryColors, setLegendHeight, activeLegend, onClick, enableLegendSlider, customCategories) {
  var payload = _ref.payload;
  var legendRef = useRef(null);
  useOnWindowResize(function () {
    var _legendRef$current;
    setLegendHeight(calculateHeight((_legendRef$current = legendRef.current) === null || _legendRef$current === void 0 ? void 0 : _legendRef$current.clientHeight));
  });
  var filteredPayload = payload.filter(function (item) {
    return item.type !== 'none';
  });
  return /*#__PURE__*/_jsx(Flexbox, {
    align: 'center',
    horizontal: true,
    justify: 'flex-end',
    ref: legendRef,
    children: /*#__PURE__*/_jsx(Legend, {
      activeLegend: activeLegend,
      categories: filteredPayload.map(function (entry) {
        return entry.value;
      }),
      colors: filteredPayload.map(function (entry) {
        return categoryColors.get(entry.value);
      }),
      customCategories: customCategories,
      enableLegendSlider: enableLegendSlider,
      onClickLegendItem: onClick
    })
  });
};
export default ChartLegend;