umami/components/charts/PageviewsChart.js

176 lines
4.3 KiB
JavaScript
Raw Normal View History

2020-07-29 06:50:29 +02:00
import React, { useState, useRef, useEffect, useCallback } from 'react';
2020-08-02 07:13:16 +02:00
import ReactTooltip from 'react-tooltip';
2020-08-02 06:20:52 +02:00
import classNames from 'classnames';
2020-07-26 09:12:42 +02:00
import ChartJS from 'chart.js';
2020-07-29 06:50:29 +02:00
import { format } from 'date-fns';
import styles from './PageviewsChart.module.css';
2020-07-26 09:12:42 +02:00
export default function PageviewsChart({
websiteId,
data,
unit,
animationDuration = 300,
className,
children,
}) {
2020-07-26 09:12:42 +02:00
const canvas = useRef();
const chart = useRef();
2020-07-29 06:50:29 +02:00
const [tooltip, setTooltip] = useState({});
const renderLabel = useCallback(
(label, index, values) => {
const d = new Date(values[index].value);
2020-07-30 08:25:52 +02:00
const n = data.pageviews.length;
2020-07-31 08:08:33 +02:00
2020-07-29 06:50:29 +02:00
switch (unit) {
case 'day':
2020-07-31 07:40:16 +02:00
if (n >= 15) {
2020-07-30 09:06:29 +02:00
return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
2020-07-29 06:50:29 +02:00
}
return format(d, 'EEE M/d');
2020-07-31 08:08:33 +02:00
case 'month':
return format(d, 'MMMM');
2020-07-29 06:50:29 +02:00
default:
return label;
}
},
[unit, data],
);
const renderTooltip = model => {
2020-08-02 07:13:16 +02:00
const { opacity, title, body, labelColors } = model;
2020-07-29 06:50:29 +02:00
if (!opacity) {
2020-08-02 07:13:16 +02:00
setTooltip(null);
2020-07-29 06:50:29 +02:00
} else {
const [label, value] = body[0].lines[0].split(':');
setTooltip({
title: title[0],
value,
label,
labelColor: labelColors[0].backgroundColor,
});
}
};
2020-07-26 09:12:42 +02:00
function draw() {
if (!canvas.current) return;
if (!chart.current) {
2020-07-26 09:12:42 +02:00
chart.current = new ChartJS(canvas.current, {
type: 'bar',
data: {
datasets: [
{
label: 'unique visitors',
data: data.uniques,
lineTension: 0,
2020-08-04 03:12:28 +02:00
backgroundColor: 'rgb(38, 128, 235, 0.4)',
borderColor: 'rgb(13, 102, 208, 0.4)',
borderWidth: 1,
},
2020-07-26 09:12:42 +02:00
{
label: 'page views',
data: data.pageviews,
2020-07-26 09:12:42 +02:00
lineTension: 0,
2020-08-04 03:12:28 +02:00
backgroundColor: 'rgb(38, 128, 235, 0.2)',
borderColor: 'rgb(13, 102, 208, 0.2)',
2020-07-28 08:52:14 +02:00
borderWidth: 1,
2020-07-26 09:12:42 +02:00
},
],
},
options: {
animation: {
duration: animationDuration,
2020-07-26 09:12:42 +02:00
},
tooltips: {
2020-07-29 06:50:29 +02:00
enabled: false,
custom: renderTooltip,
2020-07-26 09:12:42 +02:00
},
hover: {
animationDuration: 0,
},
scales: {
xAxes: [
{
type: 'time',
distribution: 'series',
time: {
2020-07-29 06:50:29 +02:00
unit,
tooltipFormat: 'ddd MMMM DD YYYY',
},
ticks: {
callback: renderLabel,
maxRotation: 0,
2020-07-26 09:12:42 +02:00
},
gridLines: {
display: false,
},
2020-07-29 06:50:29 +02:00
offset: true,
stacked: true,
2020-07-26 09:12:42 +02:00
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
stacked: true,
2020-07-26 09:12:42 +02:00
},
],
},
},
});
} else {
2020-07-29 06:50:29 +02:00
const {
data: { datasets },
options,
} = chart.current;
datasets[0].data = data.uniques;
datasets[1].data = data.pageviews;
options.scales.xAxes[0].time.unit = unit;
options.scales.xAxes[0].ticks.callback = renderLabel;
options.animation.duration = animationDuration;
2020-07-29 06:50:29 +02:00
chart.current.update();
2020-07-26 09:12:42 +02:00
}
}
useEffect(() => {
if (data) {
2020-07-26 09:12:42 +02:00
draw();
setTooltip(null);
2020-07-26 09:12:42 +02:00
}
}, [data]);
2020-07-26 09:12:42 +02:00
return (
2020-08-02 07:13:16 +02:00
<div
data-tip=""
data-for={`${websiteId}-tooltip`}
className={classNames(styles.chart, className)}
>
2020-07-26 09:12:42 +02:00
<canvas ref={canvas} width={960} height={400} />
2020-08-02 07:13:16 +02:00
<ReactTooltip id={`${websiteId}-tooltip`}>
{tooltip ? <Tooltip {...tooltip} /> : null}
</ReactTooltip>
2020-07-31 05:11:43 +02:00
{children}
2020-07-26 09:12:42 +02:00
</div>
);
}
2020-07-29 06:50:29 +02:00
2020-08-02 07:13:16 +02:00
const Tooltip = ({ title, value, label, labelColor }) => (
<div className={styles.tooltip}>
2020-07-29 06:50:29 +02:00
<div className={styles.content}>
<div className={styles.title}>{title}</div>
<div className={styles.metric}>
2020-08-04 03:12:28 +02:00
<div className={styles.dot}>
<div className={styles.color} style={{ backgroundColor: labelColor }} />
</div>
2020-07-29 06:50:29 +02:00
{value} {label}
</div>
</div>
</div>
);