m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-06-28 16:57:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update realtime chart animation.

Browse Source
This commit is contained in:
Mike Cao 2020-10-09 11:14:42 -07:00
parent 5dd3110fbf
commit 0ccae7483c
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/metrics/BarChart.js
View File

@ -40,7 +40,7 @@ export default function BarChart({
switch (unit) {
case 'minute':
return dateFormat(d, 'h:mm', locale);
return index % 2 === 0 ? dateFormat(d, 'h:mm', locale) : '';
case 'hour':
return dateFormat(d, 'ha', locale);
case 'day':

27
components/metrics/RealtimeChart.js
View File

@ -1,5 +1,5 @@
import React, { useMemo } from 'react';
import { format, parseISO, startOfMinute, subMinutes } from 'date-fns';
import React, { useMemo, useRef } from 'react';
import { format, parseISO, startOfMinute, subMinutes, isBefore } from 'date-fns';
import PageviewsChart from './PageviewsChart';
import { getDateArray } from 'lib/date';
@ -23,13 +23,13 @@ function mapData(data) {
return arr;
}
export default function RealtimeChart({ data, ...props }) {
export default function RealtimeChart({ data, unit, ...props }) {
const endDate = startOfMinute(new Date());
const startDate = subMinutes(endDate, 30);
const prevEndDate = useRef(endDate);
const chartData = useMemo(() => {
if (data) {
const endDate = startOfMinute(new Date());
const startDate = subMinutes(endDate, 30);
const unit = 'minute';
return {
pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
@ -38,5 +38,16 @@ export default function RealtimeChart({ data, ...props }) {
return { pageviews: [], sessions: [] };
}, [data]);
return <PageviewsChart {...props} data={chartData} />;
// Don't animate the bars shifting over because it looks weird
const animationDuration = useMemo(() => {
if (isBefore(prevEndDate.current, endDate)) {
prevEndDate.current = endDate;
return 0;
}
return 300;
}, [data]);
return (
<PageviewsChart {...props} unit={unit} data={chartData} animationDuration={animationDuration} />
);
}