watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-13 00:55:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Refactored fetching to use react-query.

Browse source
This commit is contained in:
Mike Cao 2022-12-28 15:43:22 -08:00
parent 7bbed0e12b
commit c56f02c475
112 changed files with 255 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

40
components/metrics/EventsChart.js
View file

@ -1,39 +1,37 @@
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import { Loading } from 'react-basics';
import { colord } from 'colord';
import BarChart from './BarChart';
import { getDateArray, getDateLength } from 'lib/date';
import useFetch from 'hooks/useFetch';
import useApi from 'hooks/useApi';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
import usePageQuery from 'hooks/usePageQuery';
import { EVENT_COLORS } from 'lib/constants';
export default function EventsChart({ websiteId, className, token }) {
const { get, useQuery } = useApi();
const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
const [timezone] = useTimezone();
const {
query: { url, eventName },
} = usePageQuery();
const { data, loading } = useFetch(
`/websites/${websiteId}/events`,
{
params: {
startAt: +startDate,
endAt: +endDate,
unit,
tz: timezone,
url,
eventName,
token,
},
},
[modified, eventName],
const { data, isLoading } = useQuery(['events', { websiteId, modified, eventName }], () =>
get(`/websites/${websiteId}/events`, {
startAt: +startDate,
endAt: +endDate,
unit,
timezone,
url,
eventName,
token,
}),
);
const datasets = useMemo(() => {
if (!data) return [];
if (loading) return data;
if (isLoading) return data;
const map = data.reduce((obj, { x, t, y }) => {
if (!obj[x]) {
@ -60,7 +58,7 @@ export default function EventsChart({ websiteId, className, token }) {
borderWidth: 1,
};
});
}, [data, loading]);
}, [data, isLoading]);
function handleUpdate(chart) {
chart.data.datasets = datasets;
@ -68,6 +66,10 @@ export default function EventsChart({ websiteId, className, token }) {
chart.update();
}
if (isLoading) {
return <Loading variant="dots" />;
}
if (!data) {
return null;
}
@ -81,7 +83,7 @@ export default function EventsChart({ websiteId, className, token }) {
height={300}
records={getDateLength(startDate, endDate, unit)}
onUpdate={handleUpdate}
loading={loading}
loading={isLoading}
stacked
/>
);