Merge pull request #756 from cywio/metric-comparison

Add time period comparison metric to dashboard
This commit is contained in:
Mike Cao 2021-08-15 23:15:14 -07:00 committed by GitHub
commit 66ed9a502a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 91 additions and 10 deletions

View File

@ -3,13 +3,38 @@ import { useSpring, animated } from 'react-spring';
import { formatNumber } from '../../lib/format';
import styles from './MetricCard.module.css';
const MetricCard = ({ value = 0, label, format = formatNumber }) => {
const MetricCard = ({
value = 0,
change = 0,
label,
reverseColors = false,
format = formatNumber,
}) => {
const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
return (
<div className={styles.card}>
<animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
<div className={styles.label}>{label}</div>
<div className={styles.label}>
{label}
{~~change === 0 && <span className={styles.change}>{format(0)}</span>}
{~~change !== 0 && (
<animated.span
className={`${styles.change} ${
change >= 0
? !reverseColors
? styles.positive
: styles.negative
: !reverseColors
? styles.negative
: styles.positive
}`}
>
{changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
</animated.span>
)}
</div>
</div>
);
};

View File

@ -16,4 +16,24 @@
.label {
font-size: var(--font-size-normal);
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;
}
.change {
font-size: 12px;
padding: 0 5px;
border-radius: 5px;
margin-left: 4px;
border: 1px solid var(--gray200);
color: var(--gray500);
}
.change.positive {
color: var(--green500);
}
.change.negative {
color: var(--red500);
}

View File

@ -34,14 +34,22 @@ export default function MetricsBar({ websiteId, className }) {
[url, modified],
);
const formatFunc = format ? formatLongNumber : formatNumber;
const formatFunc = format
? n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`)
: formatNumber;
function handleSetFormat() {
setFormat(state => !state);
}
const { pageviews, uniques, bounces, totaltime } = data || {};
const num = Math.min(uniques, bounces);
const num = Math.min(data && uniques.value, data && bounces.value);
const diffs = data && {
pageviews: pageviews.value - pageviews.change,
uniques: uniques.value - uniques.change,
bounces: bounces.value - bounces.change,
totaltime: totaltime.value - totaltime.change,
};
return (
<div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
@ -51,18 +59,27 @@ export default function MetricsBar({ websiteId, className }) {
<>
<MetricCard
label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
value={pageviews}
value={pageviews.value}
change={pageviews.change}
format={formatFunc}
/>
<MetricCard
label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
value={uniques}
value={uniques.value}
change={uniques.change}
format={formatFunc}
/>
<MetricCard
label={<FormattedMessage id="metrics.bounce-rate" defaultMessage="Bounce rate" />}
value={uniques ? (num / uniques) * 100 : 0}
value={uniques.value ? (num / uniques.value) * 100 : 0}
change={
uniques.value && uniques.change
? (num / uniques.value) * 100 -
(Math.min(diffs.uniques, diffs.bounces) / diffs.uniques) * 100 || 0
: 0
}
format={n => Number(n).toFixed(0) + '%'}
reverseColors
/>
<MetricCard
label={
@ -71,8 +88,19 @@ export default function MetricsBar({ websiteId, className }) {
defaultMessage="Average visit time"
/>
}
value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
format={n => formatShortTime(n, ['m', 's'], ' ')}
value={
totaltime.value && pageviews.value
? totaltime.value / (pageviews.value - bounces.value)
: 0
}
change={
totaltime.value && pageviews.value
? (diffs.totaltime / (diffs.pageviews - diffs.bounces) -
totaltime.value / (pageviews.value - bounces.value)) *
-1 || 0
: 0
}
format={n => `${n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`}
/>
</>
)}

View File

@ -14,10 +14,18 @@ export default async (req, res) => {
const startDate = new Date(+start_at);
const endDate = new Date(+end_at);
const distance = end_at - start_at;
const prevStartDate = new Date(+start_at - distance);
const prevEndDate = new Date(+end_at - distance);
const metrics = await getWebsiteStats(websiteId, startDate, endDate, { url });
const prevPeriod = await getWebsiteStats(websiteId, prevStartDate, prevEndDate, { url });
const stats = Object.keys(metrics[0]).reduce((obj, key) => {
obj[key] = Number(metrics[0][key]) || 0;
obj[key] = {
value: Number(metrics[0][key]) || 0,
change: Number(metrics[0][key] - prevPeriod[0][key]) || 0,
};
return obj;
}, {});