github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Format long numbers. Updated README.

Browse Source
This commit is contained in:
Mike Cao
2020-08-19 14:35:38 -07:00
parent c6b9682296
commit b1493dfef8
10 changed files with 77 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/charts/MetricsBar.js
View File

@@ -2,13 +2,16 @@ import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import MetricCard from './MetricCard';
import { get } from 'lib/web';
import { formatShortTime } from 'lib/format';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import styles from './MetricsBar.module.css';
export default function MetricsBar({ websiteId, startDate, endDate, className }) {
const [data, setData] = useState({});
const [format, setFormat] = useState(true);
const { pageviews, uniques, bounces, totaltime } = data;
const formatFunc = format ? formatLongNumber : formatNumber;
async function loadData() {
setData(
await get(`/api/website/${websiteId}/metrics`, {
@@ -18,14 +21,18 @@ export default function MetricsBar({ websiteId, startDate, endDate, className })
);
}
function handleSetFormat() {
setFormat(state => !state);
}
useEffect(() => {
loadData();
}, [websiteId, startDate, endDate]);
return (
<div className={classNames(styles.container, className)}>
<MetricCard label="Views" value={pageviews} />
<MetricCard label="Visitors" value={uniques} />
<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={uniques ? (bounces / uniques) * 100 : 0}