umami/components/metrics/EventsChart.js

93 lines
1.9 KiB
JavaScript
Raw Normal View History

import React, { useMemo } from 'react';
2020-08-28 03:44:20 +02:00
import tinycolor from 'tinycolor2';
2020-08-27 12:42:24 +02:00
import BarChart from './BarChart';
2020-09-01 00:02:32 +02:00
import { getTimezone, getDateArray, getDateLength } from 'lib/date';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
2020-08-26 18:58:24 +02:00
2020-08-27 12:42:24 +02:00
const COLORS = [
2020-08-28 03:44:20 +02:00
'#2680eb',
'#9256d9',
'#44b556',
'#e68619',
'#e34850',
'#1b959a',
'#d83790',
'#85d044',
2020-08-27 12:42:24 +02:00
];
2020-08-26 18:58:24 +02:00
export default function EventsChart({ websiteId, token }) {
2020-09-01 00:02:32 +02:00
const dateRange = useDateRange(websiteId);
const { startDate, endDate, unit, modified } = dateRange;
2020-08-31 23:11:30 +02:00
const { data } = useFetch(
`/api/website/${websiteId}/events`,
{
start_at: +startDate,
end_at: +endDate,
unit,
tz: getTimezone(),
token,
2020-08-31 23:11:30 +02:00
},
{ update: [modified] },
);
2020-08-27 22:46:05 +02:00
const datasets = useMemo(() => {
if (!data) return [];
2020-08-27 12:42:24 +02:00
const map = data.reduce((obj, { x, t, y }) => {
if (!obj[x]) {
obj[x] = [];
2020-08-26 18:58:24 +02:00
}
2020-08-27 12:42:24 +02:00
obj[x].push({ t, y });
2020-08-26 18:58:24 +02:00
2020-08-27 12:42:24 +02:00
return obj;
}, {});
2020-08-26 18:58:24 +02:00
2020-08-27 12:42:24 +02:00
Object.keys(map).forEach(key => {
map[key] = getDateArray(map[key], startDate, endDate, unit);
});
2020-08-26 18:58:24 +02:00
return Object.keys(map).map((key, index) => {
const color = tinycolor(COLORS[index]);
return {
label: key,
data: map[key],
lineTension: 0,
backgroundColor: color.setAlpha(0.4).toRgbString(),
borderColor: color.setAlpha(0.5).toRgbString(),
borderWidth: 1,
};
});
}, [data]);
2020-08-26 18:58:24 +02:00
2020-08-28 03:44:20 +02:00
function handleCreate(options) {
const legend = {
position: 'bottom',
};
options.legend = legend;
}
2020-08-27 12:42:24 +02:00
function handleUpdate(chart) {
2020-08-27 22:46:05 +02:00
chart.data.datasets = datasets;
2020-08-26 18:58:24 +02:00
2020-08-27 12:42:24 +02:00
chart.update();
2020-08-26 18:58:24 +02:00
}
2020-08-27 12:42:24 +02:00
if (!data) {
return null;
}
2020-08-26 18:58:24 +02:00
return (
2020-08-28 03:44:20 +02:00
<BarChart
chartId={`events-${websiteId}`}
datasets={datasets}
unit={unit}
records={getDateLength(startDate, endDate, unit)}
onCreate={handleCreate}
onUpdate={handleUpdate}
stacked
/>
2020-08-26 18:58:24 +02:00
);
}