umami/components/metrics/BarChart.js

212 lines
4.9 KiB
JavaScript
Raw Normal View History

2023-03-16 23:56:05 +01:00
import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
2023-04-19 20:41:31 +02:00
import { StatusLight, Loading } from 'react-basics';
2020-08-26 18:58:24 +02:00
import classNames from 'classnames';
import Chart from 'chart.js/auto';
import HoverTooltip from 'components/common/HoverTooltip';
2020-10-15 07:09:00 +02:00
import Legend from 'components/metrics/Legend';
2020-09-02 18:56:29 +02:00
import { formatLongNumber } from 'lib/format';
2021-02-27 07:41:05 +01:00
import { dateFormat } from 'lib/date';
2020-09-09 05:46:31 +02:00
import useLocale from 'hooks/useLocale';
2020-09-20 10:33:39 +02:00
import useTheme from 'hooks/useTheme';
2022-03-02 04:28:44 +01:00
import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
2020-10-10 02:58:27 +02:00
import styles from './BarChart.module.css';
2020-08-26 18:58:24 +02:00
export default function BarChart({
datasets,
unit,
2020-10-10 02:58:27 +02:00
animationDuration = DEFAULT_ANIMATION_DURATION,
2020-08-27 12:42:24 +02:00
stacked = false,
loading = false,
2020-08-27 22:46:05 +02:00
onCreate = () => {},
2020-08-26 18:58:24 +02:00
onUpdate = () => {},
2023-03-16 23:56:05 +01:00
className,
2020-08-26 18:58:24 +02:00
}) {
const canvas = useRef();
2023-03-16 23:56:05 +01:00
const chart = useRef(null);
2020-09-22 06:34:55 +02:00
const [tooltip, setTooltip] = useState(null);
const { locale } = useLocale();
2020-09-20 10:33:39 +02:00
const [theme] = useTheme();
2020-10-15 18:10:59 +02:00
const colors = useMemo(
() => ({
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
}),
[theme],
);
2020-08-26 18:58:24 +02:00
2023-03-16 10:05:56 +01:00
const renderYLabel = label => {
2020-10-11 11:29:55 +02:00
return +label > 1000 ? formatLongNumber(label) : label;
2023-03-16 10:05:56 +01:00
};
2023-04-19 20:41:31 +02:00
const renderXLabel = useCallback(
(label, index, values) => {
const d = new Date(values[index].value);
switch (unit) {
case 'minute':
return dateFormat(d, 'H:mm', locale);
case 'hour':
return dateFormat(d, 'p', locale);
case 'day':
return dateFormat(d, 'MMM d', locale);
case 'month':
return dateFormat(d, 'MMM', locale);
default:
return label;
}
},
[locale, unit],
);
2023-03-16 23:56:05 +01:00
const renderTooltip = useCallback(
model => {
const { opacity, labelColors, dataPoints } = model.tooltip;
2020-09-22 06:34:55 +02:00
2023-03-16 23:56:05 +01:00
if (!dataPoints?.length || !opacity) {
setTooltip(null);
return;
}
2023-03-16 10:05:56 +01:00
2023-03-16 23:56:05 +01:00
const formats = {
millisecond: 'T',
second: 'pp',
minute: 'p',
2023-03-26 13:15:08 +02:00
hour: 'h:mm aaa - PP',
2023-03-16 23:56:05 +01:00
day: 'PPPP',
week: 'PPPP',
month: 'LLLL yyyy',
quarter: 'qqq',
year: 'yyyy',
};
setTooltip(
<div className={styles.tooltip}>
<div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
<div className={styles.value}>
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
</div>
</StatusLight>
</div>
</div>,
);
},
[unit],
);
2020-09-14 05:09:18 +02:00
2023-03-16 23:56:05 +01:00
const getOptions = useCallback(() => {
return {
2020-08-28 03:44:20 +02:00
responsive: true,
maintainAspectRatio: false,
animation: {
duration: animationDuration,
resize: {
duration: 0,
},
active: {
duration: 0,
},
2020-09-20 10:33:39 +02:00
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: renderTooltip,
},
},
2020-08-27 22:46:05 +02:00
scales: {
x: {
type: 'time',
stacked: true,
2023-03-16 10:05:56 +01:00
time: {
unit,
},
grid: {
display: false,
},
2023-03-16 10:05:56 +01:00
border: {
color: colors.line,
},
ticks: {
2023-03-16 10:05:56 +01:00
color: colors.text,
autoSkip: false,
maxRotation: 0,
2023-04-19 20:41:31 +02:00
callback: renderXLabel,
2020-08-27 22:46:05 +02:00
},
},
y: {
type: 'linear',
min: 0,
beginAtZero: true,
stacked,
2023-03-16 10:05:56 +01:00
grid: {
color: colors.line,
},
border: {
color: colors.line,
},
ticks: {
2023-03-16 10:05:56 +01:00
color: colors.text,
callback: renderYLabel,
2020-08-27 22:46:05 +02:00
},
},
2020-08-27 22:46:05 +02:00
},
};
2023-04-19 20:41:31 +02:00
}, [animationDuration, renderTooltip, renderXLabel, stacked, colors, unit, locale]);
2023-03-16 23:56:05 +01:00
const createChart = () => {
Chart.defaults.font.family = 'Inter';
const options = getOptions();
2020-08-27 22:46:05 +02:00
chart.current = new Chart(canvas.current, {
2020-08-27 12:42:24 +02:00
type: 'bar',
data: {
datasets,
},
2020-08-27 22:46:05 +02:00
options,
2020-08-27 12:42:24 +02:00
});
2023-03-26 13:15:08 +02:00
onCreate(chart.current);
2023-03-16 10:05:56 +01:00
};
2020-08-26 18:58:24 +02:00
2023-03-16 10:05:56 +01:00
const updateChart = () => {
2023-03-16 23:56:05 +01:00
setTooltip(null);
2020-08-26 18:58:24 +02:00
2023-03-16 23:56:05 +01:00
chart.current.options = getOptions();
2020-08-27 12:42:24 +02:00
2023-04-19 20:41:31 +02:00
if (datasets.length) {
chart.current.data.datasets = datasets;
}
chart.current.update();
2023-03-26 13:15:08 +02:00
onUpdate(chart.current);
2023-03-16 10:05:56 +01:00
};
2020-08-26 18:58:24 +02:00
useEffect(() => {
if (datasets) {
2020-08-27 12:42:24 +02:00
if (!chart.current) {
createChart();
} else {
updateChart();
}
2020-08-26 18:58:24 +02:00
}
2023-04-19 20:41:31 +02:00
}, [datasets, unit, theme, animationDuration, locale]);
2020-08-26 18:58:24 +02:00
return (
2020-08-28 03:44:20 +02:00
<>
<div className={classNames(styles.chart, className)}>
2023-04-19 20:41:31 +02:00
{loading && <Loading position="page" icon="dots" />}
2020-08-28 03:44:20 +02:00
<canvas ref={canvas} />
</div>
2020-10-15 07:09:00 +02:00
<Legend chart={chart.current} />
{tooltip && <HoverTooltip tooltip={tooltip} />}
2020-08-28 03:44:20 +02:00
</>
2020-08-26 18:58:24 +02:00
);
}