Fixed realtime metrics display. Closes #1899.

This commit is contained in:
Mike Cao 2023-04-19 11:46:41 -07:00
parent 9c2242012e
commit 8bd289ad01
2 changed files with 25 additions and 2 deletions

View File

@ -9,14 +9,26 @@ export default function RealtimeHeader({ data = {} }) {
return ( return (
<div className={styles.header}> <div className={styles.header}>
<div className={styles.metrics}> <div className={styles.metrics}>
<MetricCard label={formatMessage(labels.views)} value={pageviews?.length} hideComparison />
<MetricCard <MetricCard
className={styles.card}
label={formatMessage(labels.views)}
value={pageviews?.length}
hideComparison
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.visitors)} label={formatMessage(labels.visitors)}
value={visitors?.length} value={visitors?.length}
hideComparison hideComparison
/> />
<MetricCard label={formatMessage(labels.events)} value={events?.length} hideComparison />
<MetricCard <MetricCard
className={styles.card}
label={formatMessage(labels.events)}
value={events?.length}
hideComparison
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.countries)} label={formatMessage(labels.countries)}
value={countries?.length} value={countries?.length}
hideComparison hideComparison

View File

@ -7,4 +7,15 @@
.metrics { .metrics {
display: flex; display: flex;
flex-wrap: wrap;
}
.card {
justify-self: flex-start;
}
@media only screen and (max-width: 992px) {
.card {
flex-basis: calc(50% - 20px);
}
} }