Fixed label display on metrics. Removed compare for all time.

This commit is contained in:
Mike Cao 2024-05-28 22:15:44 -07:00
parent cfe2389b8e
commit 7b0b11ffaa
8 changed files with 23 additions and 18 deletions

View file

@ -47,7 +47,7 @@ export default function WebsiteChartList({
</Button> </Button>
</Link> </Link>
</WebsiteHeader> </WebsiteHeader>
<WebsiteMetricsBar websiteId={id} showFilter={false} /> <WebsiteMetricsBar websiteId={id} />
{showCharts && <WebsiteChart websiteId={id} />} {showCharts && <WebsiteChart websiteId={id} />}
</div> </div>
) : null; ) : null;

View file

@ -28,7 +28,7 @@ export default function WebsiteDetailsPage({ websiteId }: { websiteId: string })
<WebsiteProvider websiteId={websiteId}> <WebsiteProvider websiteId={websiteId}>
<WebsiteHeader websiteId={websiteId} showLinks={showLinks} /> <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
<FilterTags websiteId={websiteId} params={params} /> <FilterTags websiteId={websiteId} params={params} />
<WebsiteMetricsBar websiteId={websiteId} showChange={true} sticky={true} /> <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} sticky={true} />
<WebsiteChart websiteId={websiteId} /> <WebsiteChart websiteId={websiteId} />
{!view && <WebsiteTableView websiteId={websiteId} />} {!view && <WebsiteTableView websiteId={websiteId} />}
{view && <WebsiteExpandedView websiteId={websiteId} />} {view && <WebsiteExpandedView websiteId={websiteId} />}

View file

@ -1,5 +1,5 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { useMessages, useSticky } from 'components/hooks'; import { useDateRange, useMessages, useSticky } from 'components/hooks';
import WebsiteDateFilter from 'components/input/WebsiteDateFilter'; import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import MetricCard from 'components/metrics/MetricCard'; import MetricCard from 'components/metrics/MetricCard';
import MetricsBar from 'components/metrics/MetricsBar'; import MetricsBar from 'components/metrics/MetricsBar';
@ -15,12 +15,15 @@ export function WebsiteMetricsBar({
sticky, sticky,
showChange = false, showChange = false,
compareMode = false, compareMode = false,
showFilter = false,
}: { }: {
websiteId: string; websiteId: string;
sticky?: boolean; sticky?: boolean;
showChange?: boolean; showChange?: boolean;
compareMode?: boolean; compareMode?: boolean;
showFilter?: boolean;
}) { }) {
const { dateRange } = useDateRange(websiteId);
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const dateCompare = useStore(state => state[websiteId]?.dateCompare); const dateCompare = useStore(state => state[websiteId]?.dateCompare);
const { ref, isSticky } = useSticky({ enabled: sticky }); const { ref, isSticky } = useSticky({ enabled: sticky });
@ -28,6 +31,7 @@ export function WebsiteMetricsBar({
websiteId, websiteId,
compareMode && dateCompare, compareMode && dateCompare,
); );
const isAllTime = dateRange.value === 'all';
const { pageviews, visitors, visits, bounces, totaltime } = data || {}; const { pageviews, visitors, visits, bounces, totaltime } = data || {};
@ -97,16 +101,16 @@ export function WebsiteMetricsBar({
change={change} change={change}
formatValue={formatValue} formatValue={formatValue}
reverseColors={reverseColors} reverseColors={reverseColors}
showChange={compareMode || showChange} showChange={!isAllTime && (compareMode || showChange)}
showPrevious={compareMode} showPrevious={!isAllTime && compareMode}
/> />
); );
})} })}
</MetricsBar> </MetricsBar>
</div> </div>
<div className={styles.actions}> <div className={styles.actions}>
<WebsiteFilterButton websiteId={websiteId} /> {showFilter && <WebsiteFilterButton websiteId={websiteId} />}
<WebsiteDateFilter websiteId={websiteId} /> <WebsiteDateFilter websiteId={websiteId} showAllTime={false} />
{compareMode && ( {compareMode && (
<div className={styles.vs}> <div className={styles.vs}>
<b>VS</b> <b>VS</b>

View file

@ -14,25 +14,21 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
className={styles.card} className={styles.card}
label={formatMessage(labels.views)} label={formatMessage(labels.views)}
value={pageviews?.length} value={pageviews?.length}
showChange
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.visitors)} label={formatMessage(labels.visitors)}
value={visitors?.length} value={visitors?.length}
showChange
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.events)} label={formatMessage(labels.events)}
value={events?.length} value={events?.length}
showChange
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.countries)} label={formatMessage(labels.countries)}
value={countries?.length} value={countries?.length}
showChange
/> />
</div> </div>
</div> </div>

View file

@ -6,7 +6,13 @@ import DateFilter from './DateFilter';
import styles from './WebsiteDateFilter.module.css'; import styles from './WebsiteDateFilter.module.css';
import { DateRange } from 'lib/types'; import { DateRange } from 'lib/types';
export function WebsiteDateFilter({ websiteId }: { websiteId: string }) { export function WebsiteDateFilter({
websiteId,
showAllTime = true,
}: {
websiteId: string;
showAllTime?: boolean;
}) {
const { dir } = useLocale(); const { dir } = useLocale();
const { dateRange, saveDateRange } = useDateRange(websiteId); const { dateRange, saveDateRange } = useDateRange(websiteId);
const { value, startDate, endDate, offset } = dateRange; const { value, startDate, endDate, offset } = dateRange;
@ -30,7 +36,7 @@ export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
endDate={endDate} endDate={endDate}
offset={offset} offset={offset}
onChange={handleChange} onChange={handleChange}
showAllTime={true} showAllTime={showAllTime}
/> />
{value !== 'all' && !value.startsWith('range') && ( {value !== 'all' && !value.startsWith('range') && (
<div className={styles.buttons}> <div className={styles.buttons}>

View file

@ -3,7 +3,7 @@ import { Website, Session } from '@prisma/client';
import redis from '@umami/redis-client'; import redis from '@umami/redis-client';
export async function fetchWebsite(websiteId: string): Promise<Website> { export async function fetchWebsite(websiteId: string): Promise<Website> {
let website; let website = null;
if (redis.enabled) { if (redis.enabled) {
website = await redis.client.fetch(`website:${websiteId}`, () => getWebsite(websiteId), 86400); website = await redis.client.fetch(`website:${websiteId}`, () => getWebsite(websiteId), 86400);
@ -19,7 +19,7 @@ export async function fetchWebsite(websiteId: string): Promise<Website> {
} }
export async function fetchSession(sessionId: string): Promise<Session> { export async function fetchSession(sessionId: string): Promise<Session> {
let session; let session = null;
if (redis.enabled) { if (redis.enabled) {
session = await redis.client.fetch(`session:${sessionId}`, () => getSession(sessionId), 86400); session = await redis.client.fetch(`session:${sessionId}`, () => getSession(sessionId), 86400);

View file

@ -144,7 +144,6 @@ export default async (req: NextApiRequestCollect, res: NextApiResponse) => {
eventData: data, eventData: data,
...session, ...session,
sessionId: session.id, sessionId: session.id,
visitId: session.visitId,
}); });
} }

View file

@ -172,8 +172,8 @@ async function clickhouseQuery(
startDate, startDate,
endDate, endDate,
}, },
).then(a => { ).then(result => {
return Object.values(a).map(a => { return Object.values(result).map((a: any) => {
return { return {
date: a.date, date: a.date,
day: Number(a.day), day: Number(a.day),