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>