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, label,
reverseColors = false, reverseColors = false,
format = formatNumber, format = formatNumber,
hideComparison = false,
}) => { }) => {
const props = useSpring({ x: Number(value) || 0, from: { x: 0 } }); const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
const changeProps = useSpring({ x: Number(change) || 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> <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
<div className={styles.label}> <div className={styles.label}>
{label} {label}
{~~change === 0 && <span className={styles.change}>{format(0)}</span>} {~~change === 0 && !hideComparison && <span className={styles.change}>{format(0)}</span>}
{~~change !== 0 && ( {~~change !== 0 && !hideComparison && (
<animated.span <animated.span
className={`${styles.change} ${ className={`${styles.change} ${
change >= 0 change >= 0

View File

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