Remove comparison metrics from realtime header

This commit is contained in:
Chris Walsh 2021-12-01 15:07:10 -08:00
parent b756fcddf1
commit 8874357bed
No known key found for this signature in database
GPG Key ID: 28EE0CCA6032019E
2 changed files with 7 additions and 2 deletions

View File

@ -9,6 +9,7 @@ const MetricCard = ({
label,
reverseColors = false,
format = formatNumber,
hideComparison = false,
}) => {
const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
@ -18,8 +19,8 @@ const MetricCard = ({
<animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
<div className={styles.label}>
{label}
{~~change === 0 && <span className={styles.change}>{format(0)}</span>}
{~~change !== 0 && (
{~~change === 0 && !hideComparison && <span className={styles.change}>{format(0)}</span>}
{~~change !== 0 && !hideComparison && (
<animated.span
className={`${styles.change} ${
change >= 0

View File

@ -30,18 +30,22 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
<MetricCard
label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
value={pageviews.length}
hideComparison
/>
<MetricCard
label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
value={sessions.length}
hideComparison
/>
<MetricCard
label={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
value={events.length}
hideComparison
/>
<MetricCard
label={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
value={countries.length}
hideComparison
/>
</div>
</>