watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 08:07:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Refactor components. Add refresh button.

Browse source
This commit is contained in:
Mike Cao 2020-08-31 03:53:39 -07:00
parent d0ca0819c6
commit d06c077019
12 changed files with 85 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

39
components/metrics/MetricsBar.js
View file

@ -1,8 +1,9 @@
import React, { useState } from 'react';
import classNames from 'classnames';
import MetricCard from './MetricCard';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import Loading from 'components/common/Loading';
import useFetch from 'hooks/useFetch';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import styles from './MetricsBar.module.css';
export default function MetricsBar({ websiteId, startDate, endDate, className }) {
@ -18,26 +19,28 @@ export default function MetricsBar({ websiteId, startDate, endDate, className })
setFormat(state => !state);
}
if (!data) {
return null;
}
const { pageviews, uniques, bounces, totaltime } = data;
const { pageviews, uniques, bounces, totaltime } = data || {};
return (
<div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
<MetricCard label="Views" value={pageviews} format={formatFunc} />
<MetricCard label="Visitors" value={uniques} format={formatFunc} />
<MetricCard
label="Bounce rate"
value={pageviews ? (bounces / pageviews) * 100 : 0}
format={n => Number(n).toFixed(0) + '%'}
/>
<MetricCard
label="Average visit time"
value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
format={n => formatShortTime(n, ['m', 's'], ' ')}
/>
{!data ? (
<Loading />
) : (
<>
<MetricCard label="Views" value={pageviews} format={formatFunc} />
<MetricCard label="Visitors" value={uniques} format={formatFunc} />
<MetricCard
label="Bounce rate"
value={pageviews ? (bounces / pageviews) * 100 : 0}
format={n => Number(n).toFixed(0) + '%'}
/>
<MetricCard
label="Average visit time"
value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
format={n => formatShortTime(n, ['m', 's'], ' ')}
/>
</>
)}
</div>
);
}