umami/components/metrics/BarChart.js

225 lines
5.6 KiB
JavaScript
Raw Normal View History

2020-08-26 18:58:24 +02:00
import React, { useState, useRef, useEffect } from 'react';
import ReactTooltip from 'react-tooltip';
import classNames from 'classnames';
import ChartJS from 'chart.js';
2020-09-02 18:56:29 +02:00
import { formatLongNumber } from 'lib/format';
2020-09-08 04:48:40 +02:00
import { dateFormat } from 'lib/lang';
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-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);
2020-09-09 05:46:31 +02:00
const [locale] = useLocale();
2020-09-20 10:33:39 +02:00
const [theme] = useTheme();
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);
2020-09-02 18:56:29 +02:00
const w = canvas.current.width;
2020-08-26 18:58:24 +02:00
switch (unit) {
2020-10-09 08:26:05 +02:00
case 'minute':
2020-10-09 20:14:42 +02:00
return index % 2 === 0 ? dateFormat(d, 'h:mm', locale) : '';
2020-08-26 18:58:24 +02:00
case 'hour':
2020-09-08 04:48:40 +02:00
return dateFormat(d, 'ha', locale);
2020-08-26 18:58:24 +02:00
case 'day':
2020-09-02 18:56:29 +02:00
if (records > 31) {
if (w <= 500) {
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
}
2020-09-08 04:48:40 +02:00
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
2020-09-02 18:56:29 +02:00
}
if (w <= 500) {
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
}
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':
2020-09-02 18:56:29 +02:00
if (w <= 660) {
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':
return 'EEE ha — MMM d yyyy';
default:
return 'EEE MMMM d yyyy';
}
}
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: {
labels: {
fontColor: colors.text,
},
},
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,
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;
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);
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-08-26 18:58:24 +02:00
<ReactTooltip id={`${chartId}-tooltip`}>
{tooltip ? <Tooltip {...tooltip} /> : null}
</ReactTooltip>
2020-08-28 03:44:20 +02:00
</>
2020-08-26 18:58:24 +02:00
);
}
const Tooltip = ({ title, value, label, labelColor }) => (
<div className={styles.tooltip}>
<div className={styles.content}>
<div className={styles.title}>{title}</div>
<div className={styles.metric}>
<div className={styles.dot}>
<div className={styles.color} style={{ backgroundColor: labelColor }} />
</div>
{value} {label}
</div>
</div>
</div>
);