recharts.customLegend.js

/**
 * CustomLegend handler
 * <CustomLegendItem>
 * @param {object} asset - data for display on the legend item
 * @param {function} setOpacity - function to change opacity
 * @enders {React <li> Element} to display the legend as desired
 *
 * <CustomLegend>
 * @param {object} payload - the recharts standard payload object
 * @param {string} direction - row/column for direction of display
 * @param {object} graphDataObj - data from the Pie or Bar graph
 * @param {function} setOpacity - setOpacity depending on hover state & active element
 * @renders {React <ul> Element}
 */
const CustomLegendItem = ({asset, setOpacity}) => {
  const assetProps = assetClassProperties(asset.dataKey);
  const labelValue = `${assetProps.categoryName} ${formatPercent(asset.allocation)}`;
  const labelRadius = getTextWidth(labelValue) + 28;
  return (
    <div
      role="button"
      className={`legend-item legend-${assetProps.code}`}
      style={{opacity: setOpacity(assetProps.code)}}
    >
      <svg height="16" width={labelRadius}>
        <circle cx="7" cy="5" r="5.0" fill={assetProps.colorCode} />
        <text x="16" y="10" style={{...legendStyle}}>
          &nbsp;&nbsp;
          {labelValue}
        </text>
      </svg>
    </div>
  );
};
CustomLegendItem.propTypes = {
  asset: PropTypes.shape({
    color: PropTypes.string,
    dataKey: PropTypes.string,
    value: PropTypes.string,
    allocation: PropTypes.number
  }),
  graphDataObj: PropTypes.shape({}),
  setOpacity: PropTypes.func
};

const CustomLegend = ({payload, direction, graphDataObj, setOpacity}) => {
  return (
    <ul
      style={{
        display: 'flex',
        flexDirection: direction,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignContent: 'center'
      }}
    >
      {R.map(asset => {
        const style = {flex: '0 1 auto', margin: '0 8px', alignContent: 'center'};
        // Normalize the allocation & dataKey/value element so that
        // CustomLegendItem doesn't have to worry about things...
        return (
          <>
            {/* eslint-disable-next-line */}
            <li key={asset.value} style={{...style}}>
              <CustomLegendItem
                asset={{dataKey: asset.value, allocation: graphDataObj[asset.value], ...asset}}
                setOpacity={setOpacity}
              />
            </li>
          </>
        );
      })(payload)}
    </ul>
  );
};
CustomLegend.propTypes = {
  payload: PropTypes.array,
  graphDataObj: PropTypes.shape({}),
  direction: PropTypes.string,
  setOpacity: PropTypes.func
};