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

Website compare fix. Updated date functions.

Browse source
This commit is contained in:
Mike Cao 2025-06-19 00:40:21 -07:00
parent 5a85433e63
commit da173779e0
7 changed files with 91 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
View file

@ -16,7 +16,7 @@ export function WebsiteChart({
const { startDate, endDate, unit, value } = dateRange;
const { data, isLoading, isFetching, error } = useWebsitePageviewsQuery({
websiteId,
compareMode: compareMode ? dateCompare : undefined,
compare: compareMode ? dateCompare : undefined,
});
const { pageviews, sessions, compare } = (data || {}) as any;

12
src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx
View file

@ -129,7 +129,13 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
const value = y - prev;
const change = Math.abs(((y - prev) / prev) * 100);
return !isNaN(change) && <ChangeLabel value={value}>{formatNumber(change)}%</ChangeLabel>;
return (
!isNaN(change) && (
<Row alignItems="center" marginRight="3">
<ChangeLabel value={value}>{formatNumber(change)}%</ChangeLabel>
</Row>
)
);
};
const { startDate, endDate } = getCompareDate(
@ -147,7 +153,7 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
<Panel>
<Grid columns={{ xs: '1fr', lg: '200px 1fr 1fr' }} gap="6">
<SideMenu items={items} selectedKey={view} />
<Column border="left" paddingLeft="6">
<Column border="left" paddingLeft="6" gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="1">{formatMessage(labels.previous)}</Heading>
<DateDisplay startDate={startDate} endDate={endDate} />
@ -160,7 +166,7 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
params={params}
/>
</Column>
<Column>
<Column border="left" paddingLeft="6" gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="1"> {formatMessage(labels.current)}</Heading>
<DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />

8
src/components/charts/BarChart.tsx
View file

@ -5,7 +5,7 @@ import { Chart, ChartProps } from '@/components/charts/Chart';
import { useLocale } from '@/components/hooks';
import { renderNumberLabels } from '@/lib/charts';
import { getThemeColors } from '@/lib/colors';
import { formatDate, formatDateByUnit } from '@/lib/date';
import { formatDate, DATE_FORMATS } from '@/lib/date';
import { formatLongCurrency, formatLongNumber } from '@/lib/format';
const dateFormats = {
@ -37,7 +37,7 @@ export function BarChart({
renderXLabel,
renderYLabel,
unit,
XAxisType = 'time',
XAxisType = 'timeseries',
YAxisType = 'linear',
stacked = false,
minDate,
@ -57,8 +57,8 @@ export function BarChart({
x: {
type: XAxisType,
stacked: true,
min: formatDateByUnit(minDate, unit),
max: formatDateByUnit(maxDate, unit),
min: formatDate(minDate, DATE_FORMATS[unit], locale),
max: formatDate(maxDate, DATE_FORMATS[unit], locale),
offset: true,
time: {
unit,

6
src/components/hooks/queries/useWebsitePageviewsQuery.ts
View file

@ -8,15 +8,15 @@ export interface WebsitePageviewsData {
}
export function useWebsitePageviewsQuery(
{ websiteId, compareMode }: { websiteId: string; compareMode?: string },
{ websiteId, compare }: { websiteId: string; compare?: string },
options?: ReactQueryOptions<WebsitePageviewsData>,
) {
const { get, useQuery } = useApi();
const filterParams = useFilterParams(websiteId);
return useQuery<WebsitePageviewsData>({
queryKey: ['websites:pageviews', { websiteId, compareMode, ...filterParams }],
queryFn: () => get(`/websites/${websiteId}/pageviews`, { compareMode, ...filterParams }),
queryKey: ['websites:pageviews', { websiteId, compare, ...filterParams }],
queryFn: () => get(`/websites/${websiteId}/pageviews`, { compare, ...filterParams }),
enabled: !!websiteId,
...options,
});

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

@ -1,4 +1,4 @@
import { ReactNode, useMemo, useState } from 'react';
import { ReactNode, useEffect, useMemo, useState } from 'react';
import { Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
@ -11,7 +11,6 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
export interface MetricsTableProps extends ListTableProps {
websiteId: string;
type?: string;
className?: string;
dataFilter?: (data: any) => any;
limit?: number;
delay?: number;
@ -20,13 +19,14 @@ export interface MetricsTableProps extends ListTableProps {
searchFormattedValues?: boolean;
showMore?: boolean;
params?: { [key: string]: any };
onDataLoad?: (data: any) => any;
className?: string;
children?: ReactNode;
}
export function MetricsTable({
websiteId,
type,
className,
dataFilter,
limit,
delay = null,
@ -34,6 +34,8 @@ export function MetricsTable({
searchFormattedValues = false,
showMore = true,
params,
onDataLoad,
className,
children,
...props
}: MetricsTableProps) {
@ -79,9 +81,15 @@ export function MetricsTable({
return [];
}, [data, dataFilter, search, limit, formatValue, type]);
useEffect(() => {
if (data) {
onDataLoad?.(data);
}
}, [data]);
return (
<Column gap="3" justifyContent="space-between">
<LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error} gap>
<Row alignItems="center" justifyContent="space-between">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
{children}

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

@ -4,7 +4,7 @@ import { BarChart, BarChartProps } from '@/components/charts/BarChart';
import { useLocale, useMessages } from '@/components/hooks';
import { renderDateLabels } from '@/lib/charts';
import { getThemeColors } from '@/lib/colors';
import { formatDateByUnit } from '@/lib/date';
import { generateTimeSeries } from '@/lib/date';
export interface PageviewsChartProps extends BarChartProps {
data: {
@ -18,7 +18,7 @@ export interface PageviewsChartProps extends BarChartProps {
unit: string;
}
export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
export function PageviewsChart({ data, unit, minDate, maxDate, ...props }: PageviewsChartProps) {
const { formatMessage, labels } = useMessages();
const { theme } = useTheme();
const { locale, dateLocale } = useLocale();
@ -32,7 +32,7 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
datasets: [
{
label: formatMessage(labels.visitors),
data: convertDataset(data.sessions, unit, dateLocale),
data: generateTimeSeries(data.sessions, minDate, maxDate, unit, dateLocale),
borderWidth: 1,
barPercentage: 0.9,
categoryPercentage: 0.9,
@ -41,7 +41,7 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
},
{
label: formatMessage(labels.views),
data: convertDataset(data.pageviews, unit, dateLocale),
data: generateTimeSeries(data.pageviews, minDate, maxDate, unit, dateLocale),
barPercentage: 0.9,
categoryPercentage: 0.9,
borderWidth: 1,
@ -53,7 +53,13 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
{
type: 'line',
label: `${formatMessage(labels.views)} (${formatMessage(labels.previous)})`,
data: data.compare.pageviews,
data: generateTimeSeries(
data.compare.pageviews,
minDate,
maxDate,
unit,
dateLocale,
),
borderWidth: 2,
backgroundColor: '#8601B0',
borderColor: '#8601B0',
@ -62,7 +68,7 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
{
type: 'line',
label: `${formatMessage(labels.visitors)} (${formatMessage(labels.previous)})`,
data: data.compare.sessions,
data: generateTimeSeries(data.compare.sessions, minDate, maxDate, unit, dateLocale),
borderWidth: 2,
backgroundColor: '#f15bb5',
borderColor: '#f15bb5',
@ -81,12 +87,10 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
{...props}
chartData={chartData}
unit={unit}
minDate={minDate}
maxDate={maxDate}
renderXLabel={renderXLabel}
height="400px"
/>
);
}
function convertDataset(data: { x: string; y: number }[], unit: string, locale?: any) {
return data.map(d => ({ ...d, d: d.x, x: formatDateByUnit(d.x, unit, locale) }));
}

117
src/lib/date.ts
View file

@ -34,7 +34,8 @@ import {
subWeeks,
endOfMinute,
isSameDay,
parseISO,
isBefore,
isEqual,
} from 'date-fns';
import { getDateLocale } from '@/lib/lang';
import { DateRange } from '@/lib/types';
@ -48,19 +49,7 @@ export const TIME_UNIT = {
year: 'year',
};
export const CUSTOM_FORMATS = {
'en-US': {
p: 'ha',
pp: 'h:mm:ss',
},
'fr-FR': {
'M/d': 'd/M',
'MMM d': 'd MMM',
'EEE M/d': 'EEE d/M',
},
};
const DATE_FUNCTIONS = {
export const DATE_FUNCTIONS = {
minute: {
diff: differenceInMinutes,
add: addMinutes,
@ -105,6 +94,15 @@ const DATE_FUNCTIONS = {
},
};
export const DATE_FORMATS = {
minute: 'yyyy-MM-dd HH:mm',
hour: 'yyyy-MM-dd HH',
day: 'yyyy-MM-dd',
week: "yyyy-'W'II",
month: 'yyyy-MM',
year: 'yyyy',
};
export function isValidTimezone(timezone: string) {
try {
Intl.DateTimeFormat(undefined, { timeZone: timezone });
@ -283,52 +281,6 @@ export function getMinimumUnit(startDate: number | Date, endDate: number | Date)
return 'year';
}
export function formatDateByUnit(dateInput: string | Date, unit: string, locale?: any) {
const date = typeof dateInput === 'string' ? parseISO(dateInput) : dateInput;
switch (unit) {
case 'minute':
return format(startOfMinute(date), 'yyyy-MM-dd HH:mm');
case 'hour':
return format(startOfHour(date), 'yyyy-MM-dd HH');
case 'day':
return format(startOfDay(date), 'yyyy-MM-dd');
case 'week':
return format(startOfWeek(date, { locale }), "yyyy-'W'II");
case 'month':
return format(startOfMonth(date), 'yyyy-MM');
case 'year':
return format(startOfYear(date), 'yyyy');
default:
return format(startOfDay(date), 'yyyy-MM-dd');
}
}
export function getDateArray(data: any[], startDate: Date, endDate: Date, unit: string) {
const arr = [];
const { diff, add, start } = DATE_FUNCTIONS[unit];
const n = diff(endDate, startDate);
for (let i = 0; i <= n; i++) {
const t = start(add(startDate, i));
const y = data.find(({ x }) => start(new Date(x)).getTime() === t.getTime())?.y || 0;
arr.push({ x: t, y });
}
return arr;
}
export function formatDate(date: string | number | Date, str: string, locale = 'en-US') {
return format(
typeof date === 'string' ? new Date(date) : date,
CUSTOM_FORMATS?.[locale]?.[str] || str,
{
locale: getDateLocale(locale),
},
);
}
export function maxDate(...args: Date[]) {
return max(args.filter(n => isDate(n)));
}
@ -337,15 +289,6 @@ export function minDate(...args: any[]) {
return min(args.filter(n => isDate(n)));
}
export function getLocalTime(t: string | number | Date) {
return addMinutes(new Date(t), new Date().getTimezoneOffset());
}
export function getDateLength(startDate: Date, endDate: Date, unit: string | number) {
const { diff } = DATE_FUNCTIONS[unit];
return diff(endDate, startDate) + 1;
}
export function getCompareDate(compare: string, startDate: Date, endDate: Date) {
if (compare === 'yoy') {
return { startDate: subYears(startDate, 1), endDate: subYears(endDate, 1) };
@ -368,3 +311,39 @@ export function getDayOfWeekAsDate(dayOfWeek: number) {
return currentDate;
}
export function formatDate(date: string | number | Date, dateFormat: string, locale = 'en-US') {
return format(typeof date === 'string' ? new Date(date) : date, dateFormat, {
locale: getDateLocale(locale),
});
}
export function generateTimeSeries(
data: { x: string; y: number }[],
minDate: Date,
maxDate: Date,
unit: string,
locale: string,
) {
const add = DATE_FUNCTIONS[unit].add;
const start = DATE_FUNCTIONS[unit].start;
const fmt = DATE_FORMATS[unit];
let current = start(minDate);
const end = start(maxDate);
const timeseries: string[] = [];
while (isBefore(current, end) || isEqual(current, end)) {
timeseries.push(formatDate(current, fmt, locale));
current = add(current, 1);
}
const lookup = new Map(data.map(({ x, y }) => [formatDate(x, fmt, locale), { x, y }]));
return timeseries.map(t => {
const { x, y } = lookup.get(t) || {};
return { x: t, d: x, y: y ?? null };
});
}