49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import { useSettingsStore } from 'stores';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import {
|
|
Wrapper,
|
|
Label,
|
|
Bar,
|
|
Grade,
|
|
} from './legendStyle';
|
|
|
|
const Legend = ({
|
|
min,
|
|
max,
|
|
total,
|
|
onSegmentFocus,
|
|
...props
|
|
}) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation('event');
|
|
const highlight = useSettingsStore(state => state.highlight);
|
|
const setHighlight = useSettingsStore(state => state.setHighlight);
|
|
|
|
return (
|
|
<Wrapper>
|
|
<Label>{min}/{total} {t('event:available')}</Label>
|
|
|
|
<Bar
|
|
onMouseOut={() => onSegmentFocus(null)}
|
|
onClick={() => setHighlight(!highlight)}
|
|
title={t('event:group.legend_tooltip')}
|
|
>
|
|
{[...Array(max+1-min).keys()].map(i => i+min).map(i =>
|
|
<Grade
|
|
key={i}
|
|
color={`${theme.primary}${Math.round((i/(max))*255).toString(16)}`}
|
|
highlight={highlight && i === max}
|
|
onMouseOver={() => onSegmentFocus(i)}
|
|
/>
|
|
)}
|
|
</Bar>
|
|
|
|
<Label>{max}/{total} {t('event:available')}</Label>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
export default Legend;
|