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

Refactored realtime.

Browse source
This commit is contained in:
Mike Cao 2024-06-19 21:47:27 -07:00
parent cda3ba345b
commit 5108b91f80
16 changed files with 205 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/metrics/PageviewsChart.tsx
View file

@ -5,11 +5,11 @@ import { renderDateLabels } from 'lib/charts';
export interface PageviewsChartProps extends BarChartProps {
data: {
pageviews: any[];
sessions: any[];
views: any[];
visitors: any[];
compare?: {
pageviews: any[];
sessions: any[];
views: any[];
visitors: any[];
};
};
unit: string;
@ -30,14 +30,14 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
datasets: [
{
label: formatMessage(labels.visitors),
data: data.sessions,
data: data.visitors,
borderWidth: 1,
...colors.chart.visitors,
order: 3,
},
{
label: formatMessage(labels.views),
data: data.pageviews,
data: data.views,
borderWidth: 1,
...colors.chart.views,
order: 4,
@ -47,7 +47,7 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
{
type: 'line',
label: `${formatMessage(labels.views)} (${formatMessage(labels.previous)})`,
data: data.compare.pageviews,
data: data.compare.views,
borderWidth: 2,
backgroundColor: '#8601B0',
borderColor: '#8601B0',
@ -56,7 +56,7 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
{
type: 'line',
label: `${formatMessage(labels.visitors)} (${formatMessage(labels.previous)})`,
data: data.compare.sessions,
data: data.compare.visitors,
borderWidth: 2,
backgroundColor: '#f15bb5',
borderColor: '#f15bb5',

27
src/components/metrics/RealtimeChart.tsx
View file

@ -1,29 +1,10 @@
import { useMemo, useRef } from 'react';
import { format, startOfMinute, subMinutes, isBefore } from 'date-fns';
import { startOfMinute, subMinutes, isBefore } from 'date-fns';
import PageviewsChart from './PageviewsChart';
import { getDateArray } from 'lib/date';
import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
import { RealtimeData } from 'lib/types';
function mapData(data: any[]) {
let last = 0;
const arr = [];
data?.reduce((obj, { timestamp }) => {
const t = startOfMinute(new Date(timestamp));
if (t.getTime() > last) {
obj = { x: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
arr.push(obj);
last = t.getTime();
} else {
obj.y += 1;
}
return obj;
}, {});
return arr;
}
export interface RealtimeChartProps {
data: RealtimeData;
unit: string;
@ -37,12 +18,12 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
const chartData = useMemo(() => {
if (!data) {
return { pageviews: [], sessions: [] };
return { views: [], visitors: [] };
}
return {
pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
sessions: getDateArray(mapData(data.visitors), startDate, endDate, unit),
views: getDateArray(data.series.views, startDate, endDate, unit),
visitors: getDateArray(data.series.visitors, startDate, endDate, unit),
};
}, [data, startDate, endDate, unit]);