umami/components/metrics/EventsChart.js

81 lines
2.1 KiB
JavaScript
Raw Normal View History

import { useMemo } from 'react';
import { Loading } from 'react-basics';
2022-01-14 09:39:27 +01:00
import { colord } from 'colord';
2020-08-27 12:42:24 +02:00
import BarChart from './BarChart';
import { getDateArray } from 'lib/date';
import { useApi, useLocale, useDateRange, useTimezone, usePageQuery } from 'hooks';
import { EVENT_COLORS } from 'lib/constants';
import { renderDateLabels, renderStatusTooltip } from 'lib/charts';
2020-08-26 18:58:24 +02:00
2023-04-21 17:00:42 +02:00
export function EventsChart({ websiteId, className, token }) {
const { get, useQuery } = useApi();
2022-03-05 18:42:32 +01:00
const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
const { locale } = useLocale();
const [timezone] = useTimezone();
const {
2022-07-30 07:30:09 +02:00
query: { url, eventName },
} = usePageQuery();
2023-03-26 13:15:08 +02:00
const { data, isLoading } = useQuery(['events', websiteId, modified, eventName], () =>
get(`/websites/${websiteId}/events`, {
startAt: +startDate,
endAt: +endDate,
unit,
timezone,
url,
eventName,
token,
}),
2020-08-31 23:11:30 +02:00
);
2020-10-15 07:09:00 +02:00
2020-08-27 22:46:05 +02:00
const datasets = useMemo(() => {
if (!data) return [];
if (isLoading) return data;
2020-08-27 22:46:05 +02:00
2023-03-26 13:15:08 +02:00
const map = data.reduce((obj, { x, t, y }) => {
2020-08-27 12:42:24 +02:00
if (!obj[x]) {
obj[x] = [];
2020-08-26 18:58:24 +02:00
}
2023-03-26 13:15:08 +02:00
obj[x].push({ x: 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) => {
2022-01-14 09:39:27 +01:00
const color = colord(EVENT_COLORS[index % EVENT_COLORS.length]);
return {
label: key,
data: map[key],
lineTension: 0,
2022-01-14 09:39:27 +01:00
backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(),
borderWidth: 1,
};
});
2023-03-26 13:15:08 +02:00
}, [data, isLoading, startDate, endDate, unit]);
2020-08-26 18:58:24 +02:00
if (isLoading) {
2023-02-04 17:59:52 +01:00
return <Loading icon="dots" />;
}
2020-08-26 18:58:24 +02:00
return (
2020-08-28 03:44:20 +02:00
<BarChart
2020-10-10 05:37:24 +02:00
className={className}
2020-08-28 03:44:20 +02:00
datasets={datasets}
unit={unit}
2020-10-15 18:10:59 +02:00
height={300}
loading={isLoading}
2020-08-28 03:44:20 +02:00
stacked
renderXLabel={renderDateLabels(unit, locale)}
renderTooltip={renderStatusTooltip(unit, locale)}
2020-08-28 03:44:20 +02:00
/>
2020-08-26 18:58:24 +02:00
);
}
2023-04-21 17:00:42 +02:00
export default EventsChart;