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

Unified loading states.

Browse source
This commit is contained in:
Mike Cao 2025-06-13 21:13:11 -07:00
parent 7b5591a3ce
commit da8c7e99c5
52 changed files with 506 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/metrics/EventData.tsx Normal file
View file

@ -0,0 +1,22 @@
import { Grid, Column, Text, Label } from '@umami/react-zen';
import { useEventDataQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export function EventData({ websiteId, eventId }: { websiteId: string; eventId: string }) {
const { data, isLoading, error } = useEventDataQuery(websiteId, eventId);
return (
<LoadingPanel isLoading={isLoading} error={error}>
<Grid columns="1fr 1fr" gap="5">
{data?.map(({ dataKey, stringValue }) => {
return (
<Column key={dataKey}>
<Label>{dataKey}</Label>
<Text>{stringValue}</Text>
</Column>
);
})}
</Grid>
</LoadingPanel>
);
}

7
src/components/metrics/LanguagesTable.tsx
View file

@ -1,13 +1,9 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { percentFilter } from '@/lib/filters';
import { useLocale } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { useFormat } from '@/components/hooks';
export function LanguagesTable({
onDataLoad,
...props
}: { onDataLoad: (data: any) => void } & MetricsTableProps) {
export function LanguagesTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { formatLanguage } = useFormat();
@ -22,7 +18,6 @@ export function LanguagesTable({
title={formatMessage(labels.languages)}
type="language"
metric={formatMessage(labels.visitors)}
onDataLoad={data => onDataLoad?.(percentFilter(data))}
renderLabel={renderLabel}
searchFormattedValues={true}
/>

20
src/components/metrics/MetricsBar.tsx
View file

@ -1,22 +1,14 @@
import { ReactNode } from 'react';
import { Grid } from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Grid, GridProps } from '@umami/react-zen';
export interface MetricsBarProps {
isLoading?: boolean;
isFetched?: boolean;
error?: Error;
export interface MetricsBarProps extends GridProps {
children?: ReactNode;
}
export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBarProps) {
export function MetricsBar({ children, ...props }: MetricsBarProps) {
return (
<LoadingPanel isLoading={isLoading} isFetched={isFetched} error={error}>
{!isLoading && !error && isFetched && (
<Grid columns="repeat(auto-fit, minmax(200px, 1fr))" width="100%" gap>
{children}
</Grid>
)}
</LoadingPanel>
<Grid columns="repeat(auto-fit, minmax(200px, 1fr))" gap {...props}>
{children}
</Grid>
);
}

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

@ -1,12 +1,12 @@
import { ReactNode, useMemo, useState } from 'react';
import { Loading, Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
import { ErrorMessage } from '@/components/common/ErrorMessage';
import { Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
import { percentFilter } from '@/lib/filters';
import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
import { Arrow } from '@/components/icons';
import { ListTable, ListTableProps } from './ListTable';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export interface MetricsTableProps extends ListTableProps {
websiteId: string;
@ -15,7 +15,6 @@ export interface MetricsTableProps extends ListTableProps {
dataFilter?: (data: any) => any;
limit?: number;
delay?: number;
onDataLoad?: (data: any) => void;
onSearch?: (search: string) => void;
allowSearch?: boolean;
searchFormattedValues?: boolean;
@ -30,7 +29,6 @@ export function MetricsTable({
className,
dataFilter,
limit,
onDataLoad,
delay = null,
allowSearch = false,
searchFormattedValues = false,
@ -44,12 +42,11 @@ export function MetricsTable({
const { renderUrl } = useNavigation();
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteMetricsQuery(
const { data, isLoading, isFetching, error } = useWebsiteMetricsQuery(
websiteId,
{ type, limit, search: searchFormattedValues ? undefined : search, ...params },
{
retryDelay: delay || DEFAULT_ANIMATION_DURATION,
onDataLoad,
},
);
@ -84,25 +81,25 @@ export function MetricsTable({
return (
<Column gap="3" justifyContent="space-between">
{error && <ErrorMessage />}
<Row alignItems="center" justifyContent="space-between">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
{children}
</Row>
{data && !error && (
<ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
)}
{!data && isLoading && !isFetched && <Loading icon="dots" />}
<Row justifyContent="center">
{showMore && data && !error && limit && (
<LinkButton href={renderUrl({ view: type })} variant="quiet">
<Text>{formatMessage(labels.more)}</Text>
<Icon size="sm">
<Arrow />
</Icon>
</LinkButton>
<LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
<Row alignItems="center" justifyContent="space-between">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
{children}
</Row>
{data && (
<ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
)}
</Row>
<Row justifyContent="center">
{showMore && data && !error && limit && (
<LinkButton href={renderUrl({ view: type })} variant="quiet">
<Text>{formatMessage(labels.more)}</Text>
<Icon size="sm">
<Arrow />
</Icon>
</LinkButton>
)}
</Row>
</LoadingPanel>
</Column>
);
}