import { useEffect } from 'react'; import { StatusLight } from 'react-basics'; import { colord } from 'colord'; import classNames from 'classnames'; import useLocale from 'hooks/useLocale'; import useForceUpdate from 'hooks/useForceUpdate'; import styles from './Legend.module.css'; export default function Legend({ chart }) { const { locale } = useLocale(); const forceUpdate = useForceUpdate(); const handleClick = index => { const meta = chart.getDatasetMeta(index); meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null; chart.update(); forceUpdate(); }; useEffect(() => { forceUpdate(); }, [locale]); if (!chart?.legend?.legendItems.find(({ text }) => text)) { return null; } return (
{chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => { const color = colord(fillStyle); return ( ); })}
); }