44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { useTranslation } from '/src/i18n/client'
|
|
import { useStore } from '/src/stores'
|
|
import useSettingsStore from '/src/stores/settingsStore'
|
|
|
|
import styles from './Legend.module.scss'
|
|
|
|
interface LegendProps {
|
|
min: number
|
|
max: number
|
|
total: number
|
|
palette: { string: string, highlight: string }[]
|
|
onSegmentFocus: (segment: number | undefined) => void
|
|
}
|
|
|
|
const Legend = ({ min, max, total, palette, onSegmentFocus }: LegendProps) => {
|
|
const { t } = useTranslation('event')
|
|
const highlight = useStore(useSettingsStore, state => state.highlight)
|
|
const setHighlight = useSettingsStore(state => state.setHighlight)
|
|
|
|
return <div className={styles.wrapper}>
|
|
<label className={styles.label}>{min}/{total} {t('available')}</label>
|
|
|
|
<div
|
|
className={styles.bar}
|
|
onMouseOut={() => onSegmentFocus(undefined)}
|
|
onClick={() => setHighlight?.(!highlight)}
|
|
title={t<string>('group.legend_tooltip')}
|
|
>
|
|
{[...Array(max + 1 - min).keys()].map(i => i + min).map((i, j) =>
|
|
<div
|
|
key={i}
|
|
style={{ flex: 1, backgroundColor: palette[j].string, '--highlight-color': palette[j].highlight } as React.CSSProperties}
|
|
className={highlight && i === max && max > 0 ? styles.highlight : undefined}
|
|
onMouseOver={() => onSegmentFocus(i)}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<label className={styles.label}>{max}/{total} {t('available')}</label>
|
|
</div>
|
|
}
|
|
|
|
export default Legend
|