m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-19 15:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix legend color mismatch.

Browse Source
This commit is contained in:
Mike Cao 2022-01-06 01:45:53 -08:00
parent 56cf55e053
commit 5f359b3cf1
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/metrics/BarChart.js
View File

@ -6,10 +6,10 @@ import { formatLongNumber } from 'lib/format';
import { dateFormat } from 'lib/date'; import { dateFormat } from 'lib/date';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useTheme from 'hooks/useTheme'; import useTheme from 'hooks/useTheme';
import useForceUpdate from 'hooks/useForceUpdate';
import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants'; import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
import styles from './BarChart.module.css'; import styles from './BarChart.module.css';
import ChartTooltip from './ChartTooltip'; import ChartTooltip from './ChartTooltip';
import useForceUpdate from '../../hooks/useForceUpdate';
export default function BarChart({ export default function BarChart({
chartId, chartId,

13
components/metrics/Legend.js
View File

@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import tinycolor from 'tinycolor2';
import classNames from 'classnames'; import classNames from 'classnames';
import Dot from 'components/common/Dot'; import Dot from 'components/common/Dot';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useForceUpdate from 'hooks/useForceUpdate';
import styles from './Legend.module.css'; import styles from './Legend.module.css';
import useForceUpdate from '../../hooks/useForceUpdate';
export default function Legend({ chart }) { export default function Legend({ chart }) {
const { locale } = useLocale(); const { locale } = useLocale();
@ -25,16 +26,20 @@ export default function Legend({ chart }) {
return ( return (
<div className={styles.legend}> <div className={styles.legend}>
{chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => ( {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => {
const color = tinycolor(fillStyle);
return (
<div <div
key={text} key={text}
className={classNames(styles.label, { [styles.hidden]: hidden })} className={classNames(styles.label, { [styles.hidden]: hidden })}
onClick={() => handleClick(datasetIndex)} onClick={() => handleClick(datasetIndex)}
> >
<Dot color={fillStyle} /> <Dot color={color.setAlpha(color.getAlpha() + 0.2)} />
<span className={locale}>{text}</span> <span className={locale}>{text}</span>
</div> </div>
))} );
})}
</div> </div>
); );
} }