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

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

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) }));
}