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>
</Link>
</WebsiteHeader>
<WebsiteMetricsBar websiteId={id} showFilter={false} />
<WebsiteMetricsBar websiteId={id} />
{showCharts && <WebsiteChart websiteId={id} />}
</div>
) : null;

View File

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

View File

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

View File

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

View File

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

View File

@ -3,7 +3,7 @@ import { Website, Session } from '@prisma/client';
import redis from '@umami/redis-client';
export async function fetchWebsite(websiteId: string): Promise<Website> {
let website;
let website = null;
if (redis.enabled) {
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> {
let session;
let session = null;
if (redis.enabled) {
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,
...session,
sessionId: session.id,
visitId: session.visitId,
});
}

View File

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