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

Fixed realtime chart display.

Browse source
This commit is contained in:
Mike Cao 2023-02-17 21:42:42 -08:00
parent 93b77672f3
commit 802c262cd9
14 changed files with 112 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

26
components/metrics/RealtimeChart.js
View file

@ -1,5 +1,5 @@
import { useMemo, useRef } from 'react';
import { format, parseISO, startOfMinute, subMinutes, isBefore } from 'date-fns';
import { format, startOfMinute, subMinutes, isBefore } from 'date-fns';
import PageviewsChart from './PageviewsChart';
import { getDateArray } from 'lib/date';
import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
@ -8,13 +8,12 @@ function mapData(data) {
let last = 0;
const arr = [];
data.reduce((obj, val) => {
const { createdAt } = val;
const t = startOfMinute(parseISO(createdAt));
data.reduce((obj, { timestamp }) => {
const t = startOfMinute(new Date(timestamp));
if (t.getTime() > last) {
obj = { t: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
arr.push(obj);
last = t;
last = t.getTime();
} else {
obj.y += 1;
}
@ -30,14 +29,15 @@ export default function RealtimeChart({ data, unit, ...props }) {
const prevEndDate = useRef(endDate);
const chartData = useMemo(() => {
if (data) {
return {
pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
};
if (!data) {
return { pageviews: [], sessions: [] };
}
return { pageviews: [], sessions: [] };
}, [data]);
return {
pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
};
}, [data, startDate, endDate, unit]);
// Don't animate the bars shifting over because it looks weird
const animationDuration = useMemo(() => {
@ -46,7 +46,7 @@ export default function RealtimeChart({ data, unit, ...props }) {
return 0;
}
return DEFAULT_ANIMATION_DURATION;
}, [data]);
}, [data, endDate]);
return (
<PageviewsChart