watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-23 05:55:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Updated reports components.

Browse source
This commit is contained in:
Mike Cao 2025-03-26 21:54:23 -07:00
parent f5bc3dc6c2
commit 0f6cdf8b80
95 changed files with 580 additions and 698 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
View file

@ -1,24 +1,16 @@
import { Select, ListItem } from '@umami/react-zen';
import classNames from 'classnames';
import { useDateRange, useMessages, useSticky } from '@/components/hooks';
import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
import { useDateRange, useMessages } from '@/components/hooks';
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
import { formatShortTime, formatLongNumber } from '@/lib/format';
import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
import { useWebsites, setWebsiteDateCompare } from '@/store/websites';
import { WebsiteFilterButton } from './WebsiteFilterButton';
import styles from './WebsiteMetricsBar.module.css';
import { useWebsites } from '@/store/websites';
export function WebsiteMetricsBar({
websiteId,
sticky,
showChange = false,
compareMode = false,
showFilter = false,
}: {
websiteId: string;
sticky?: boolean;
showChange?: boolean;
compareMode?: boolean;
showFilter?: boolean;
@ -26,7 +18,6 @@ export function WebsiteMetricsBar({
const { dateRange } = useDateRange(websiteId);
const { formatMessage, labels } = useMessages();
const dateCompare = useWebsites(state => state[websiteId]?.dateCompare);
const { ref } = useSticky({ enabled: sticky });
const { data, isLoading, isFetched, error } = useWebsiteStatsQuery(
websiteId,
compareMode && dateCompare,
@ -76,51 +67,23 @@ export function WebsiteMetricsBar({
]
: [];
const items = [
{ label: formatMessage(labels.previousPeriod), value: 'prev' },
{ label: formatMessage(labels.previousYear), value: 'yoy' },
];
return (
<div ref={ref} className={classNames(styles.container)}>
<div>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
{metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
return (
<MetricCard
key={label}
value={value}
previousValue={prev}
label={label}
change={change}
formatValue={formatValue}
reverseColors={reverseColors}
showChange={!isAllTime && (compareMode || showChange)}
showPrevious={!isAllTime && compareMode}
/>
);
})}
</MetricsBar>
</div>
<div className={styles.actions}>
{showFilter && <WebsiteFilterButton websiteId={websiteId} />}
<WebsiteDateFilter websiteId={websiteId} showAllTime={!compareMode} />
{compareMode && (
<div className={styles.vs}>
<b>VS</b>
<Select
className={styles.dropdown}
items={items}
value={dateCompare || 'prev'}
onChange={(value: any) => setWebsiteDateCompare(websiteId, value)}
>
{items.map(({ label, value }) => (
<ListItem key={value}>{label}</ListItem>
))}
</Select>
</div>
)}
</div>
</div>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
{metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
return (
<MetricCard
key={label}
value={value}
previousValue={prev}
label={label}
change={change}
formatValue={formatValue}
reverseColors={reverseColors}
showChange={!isAllTime && (compareMode || showChange)}
showPrevious={!isAllTime && compareMode}
/>
);
})}
</MetricsBar>
);
}