umami/components/metrics/BarChart.js

175 lines
3.9 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-08-28 03:44:20 +02:00
import styles from './BarChart.module.css';
2020-08-26 18:58:24 +02:00
import { format } from 'date-fns';
import { formatLongNumber } from '../../lib/format';
2020-08-26 18:58:24 +02:00
export default function BarChart({
chartId,
datasets,
unit,
records,
2020-08-28 03:44:20 +02:00
height = 400,
2020-08-26 18:58:24 +02:00
animationDuration = 300,
className,
2020-08-27 12:42:24 +02:00
stacked = 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();
const [tooltip, setTooltip] = useState({});
const renderXLabel = (label, index, values) => {
2020-08-26 18:58:24 +02:00
const d = new Date(values[index].value);
const n = records;
switch (unit) {
case 'hour':
return format(d, 'ha');
case 'day':
if (n >= 15) {
return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
}
return format(d, 'EEE M/d');
case 'month':
return format(d, 'MMMM');
default:
return label;
}
};
const renderYLabel = label => {
return +label > 1 ? formatLongNumber(label) : label;
};
2020-08-26 18:58:24 +02:00
const renderTooltip = model => {
const { opacity, title, body, labelColors } = model;
if (!opacity) {
setTooltip(null);
} else {
const [label, value] = body[0].lines[0].split(':');
setTooltip({
title: title[0],
value,
label,
labelColor: labelColors[0].backgroundColor,
});
}
};
2020-08-27 12:42:24 +02:00
const 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-08-27 22:46:05 +02:00
scales: {
xAxes: [
{
type: 'time',
distribution: 'series',
time: {
unit,
tooltipFormat: 'ddd MMMM DD YYYY',
},
ticks: {
callback: renderXLabel,
2020-08-27 22:46:05 +02:00
minRotation: 0,
maxRotation: 0,
},
gridLines: {
display: false,
},
offset: true,
stacked: true,
},
],
yAxes: [
{
ticks: {
callback: renderYLabel,
2020-08-27 22:46:05 +02:00
beginAtZero: true,
},
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-08-26 18:58:24 +02:00
2020-08-27 12:42:24 +02:00
const updateChart = () => {
const { options } = chart.current;
2020-08-26 18:58:24 +02:00
2020-08-27 12:42:24 +02:00
options.scales.xAxes[0].time.unit = unit;
options.scales.xAxes[0].ticks.callback = renderXLabel;
options.animation.duration = animationDuration;
2020-08-27 12:42:24 +02:00
onUpdate(chart.current);
};
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
}
}, [datasets, unit, animationDuration]);
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>
);