umami/components/metrics/BarChart.js

227 lines
5.7 KiB
JavaScript
Raw Normal View History

2020-08-26 18:58:24 +02:00
import React, { useState, useRef, useEffect } from 'react';
import classNames from 'classnames';
import ChartJS from 'chart.js';
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';
2020-10-10 02:58:27 +02:00
import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
import styles from './BarChart.module.css';
2020-10-15 07:09:00 +02:00
import ChartTooltip from './ChartTooltip';
2020-10-15 18:10:59 +02:00
import useForceUpdate from '../../hooks/useForceUpdate';
2020-08-26 18:58:24 +02:00
export default function BarChart({
chartId,
datasets,
unit,
records,
2020-10-10 02:58:27 +02:00
height = DEFAUL_CHART_HEIGHT,
animationDuration = DEFAULT_ANIMATION_DURATION,
2020-08-26 18:58:24 +02:00
className,
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 = () => {},
}) {
const canvas = useRef();
const chart = useRef();
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 forceUpdate = useForceUpdate();
2020-09-20 10:33:39 +02:00
const colors = {
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
zeroLine: THEME_COLORS[theme].gray500,
};
2020-08-26 18:58:24 +02:00
2020-09-02 18:56:29 +02:00
function renderXLabel(label, index, values) {
if (loading) return '';
2020-08-26 18:58:24 +02:00
const d = new Date(values[index].value);
const sw = canvas.current.width / window.devicePixelRatio;
2020-08-26 18:58:24 +02:00
switch (unit) {
2020-10-09 08:26:05 +02:00
case 'minute':
return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
2020-08-26 18:58:24 +02:00
case 'hour':
2021-02-27 07:41:05 +01:00
return dateFormat(d, 'p', locale);
2020-08-26 18:58:24 +02:00
case 'day':
if (records > 25) {
if (sw <= 275) {
2020-09-08 04:48:40 +02:00
return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
2020-09-02 18:56:29 +02:00
}
if (sw <= 550) {
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
if (sw <= 700) {
return index % 2 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
return dateFormat(d, 'MMM d', locale);
2020-09-02 18:56:29 +02:00
}
if (sw <= 375) {
2020-09-08 04:48:40 +02:00
return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
2020-08-26 18:58:24 +02:00
}
if (sw <= 425) {
return dateFormat(d, 'MMM d', locale);
}
2020-09-08 04:48:40 +02:00
return dateFormat(d, 'EEE M/d', locale);
2020-08-26 18:58:24 +02:00
case 'month':
if (sw <= 330) {
2020-09-14 05:09:18 +02:00
return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
2020-09-02 18:56:29 +02:00
}
2020-09-14 05:09:18 +02:00
return dateFormat(d, 'MMM', locale);
2020-08-26 18:58:24 +02:00
default:
return label;
}
2020-09-02 18:56:29 +02:00
}
2020-08-26 18:58:24 +02:00
2020-09-02 18:56:29 +02:00
function renderYLabel(label) {
2020-10-11 11:29:55 +02:00
return +label > 1000 ? formatLongNumber(label) : label;
2020-09-02 18:56:29 +02:00
}
2020-09-02 18:56:29 +02:00
function renderTooltip(model) {
2020-08-26 18:58:24 +02:00
const { opacity, title, body, labelColors } = model;
2020-09-22 06:34:55 +02:00
if (!opacity || !title) {
2020-08-26 18:58:24 +02:00
setTooltip(null);
2020-09-22 06:34:55 +02:00
return;
2020-08-26 18:58:24 +02:00
}
2020-09-22 06:34:55 +02:00
const [label, value] = body[0].lines[0].split(':');
setTooltip({
title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
value,
label,
labelColor: labelColors[0].backgroundColor,
});
2020-09-02 18:56:29 +02:00
}
2020-08-26 18:58:24 +02:00
2020-09-14 05:09:18 +02:00
function getTooltipFormat(unit) {
switch (unit) {
case 'hour':
2021-02-27 07:41:05 +01:00
return 'EEE p — PPP';
2020-09-14 05:09:18 +02:00
default:
2021-02-27 07:41:05 +01:00
return 'PPPP';
2020-09-14 05:09:18 +02:00
}
}
2020-09-02 18:56:29 +02:00
function createChart() {
2020-08-27 22:46:05 +02:00
const options = {
animation: {
duration: animationDuration,
},
tooltips: {
enabled: false,
custom: renderTooltip,
},
hover: {
animationDuration: 0,
},
2020-08-28 03:44:20 +02:00
responsive: true,
2020-08-27 22:46:05 +02:00
responsiveAnimationDuration: 0,
2020-08-28 03:44:20 +02:00
maintainAspectRatio: false,
2020-09-20 10:33:39 +02:00
legend: {
display: false,
2020-09-20 10:33:39 +02:00
},
2020-08-27 22:46:05 +02:00
scales: {
xAxes: [
{
type: 'time',
distribution: 'series',
time: {
unit,
2020-09-11 06:35:17 +02:00
tooltipFormat: 'x',
2020-08-27 22:46:05 +02:00
},
ticks: {
callback: renderXLabel,
2020-08-27 22:46:05 +02:00
minRotation: 0,
maxRotation: 0,
2020-09-20 10:33:39 +02:00
fontColor: colors.text,
2021-02-19 10:17:30 +01:00
autoSkipPadding: 1,
2020-08-27 22:46:05 +02:00
},
gridLines: {
display: false,
},
offset: true,
stacked: true,
},
],
yAxes: [
{
ticks: {
callback: renderYLabel,
2020-08-27 22:46:05 +02:00
beginAtZero: true,
2020-09-20 10:33:39 +02:00
fontColor: colors.text,
},
gridLines: {
color: colors.line,
zeroLineColor: colors.zeroLine,
2020-08-27 22:46:05 +02:00
},
stacked,
},
],
},
};
onCreate(options);
2020-08-27 12:42:24 +02:00
chart.current = new ChartJS(canvas.current, {
type: 'bar',
data: {
datasets,
},
2020-08-27 22:46:05 +02:00
options,
2020-08-27 12:42:24 +02:00
});
2020-09-02 18:56:29 +02:00
}
2020-08-26 18:58:24 +02:00
2020-09-02 18:56:29 +02:00
function updateChart() {
2020-08-27 12:42:24 +02:00
const { options } = chart.current;
2020-08-26 18:58:24 +02:00
2020-09-20 10:33:39 +02:00
options.legend.labels.fontColor = colors.text;
2020-08-27 12:42:24 +02:00
options.scales.xAxes[0].time.unit = unit;
options.scales.xAxes[0].ticks.callback = renderXLabel;
2020-09-20 10:33:39 +02:00
options.scales.xAxes[0].ticks.fontColor = colors.text;
options.scales.yAxes[0].ticks.fontColor = colors.text;
2020-11-24 22:19:52 +01:00
options.scales.yAxes[0].ticks.precision = 0;
2020-09-20 10:33:39 +02:00
options.scales.yAxes[0].gridLines.color = colors.line;
options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
options.animation.duration = animationDuration;
2020-09-11 06:35:17 +02:00
options.tooltips.custom = renderTooltip;
2020-08-27 12:42:24 +02:00
onUpdate(chart.current);
chart.current.update();
2020-10-15 18:10:59 +02:00
forceUpdate();
2020-09-02 18:56:29 +02: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 {
setTooltip(null);
updateChart();
}
2020-08-26 18:58:24 +02:00
}
2020-09-20 10:33:39 +02:00
}, [datasets, unit, animationDuration, locale, theme]);
2020-08-26 18:58:24 +02:00
return (
2020-08-28 03:44:20 +02:00
<>
<div
data-tip=""
data-for={`${chartId}-tooltip`}
className={classNames(styles.chart, className)}
style={{ height }}
>
<canvas ref={canvas} />
</div>
2020-10-15 07:09:00 +02:00
<Legend chart={chart.current} />
<ChartTooltip chartId={chartId} tooltip={tooltip} />
2020-08-28 03:44:20 +02:00
</>
2020-08-26 18:58:24 +02:00
);
}