Add quick filter buttons.

This commit is contained in:
Mike Cao 2020-07-30 01:08:21 -07:00
parent 9beec1b50e
commit ff4492ffb5
10 changed files with 80 additions and 25 deletions

View file

@ -1,12 +1,16 @@
import React, { useState, useEffect, useMemo } from 'react';
import PageviewsChart from './PageviewsChart';
import { get } from 'lib/web';
import { getDateArray, getTimezone } from 'lib/date';
import { getDateArray, getDateRange, getTimezone } from 'lib/date';
import WebsiteSummary from './WebsiteSummary';
import QuickButtons from './QuickButtons';
import styles from './WebsiteStats.module.css';
export default function WebsiteStats({ title, websiteId, startDate, endDate, unit }) {
export default function WebsiteStats({ title, websiteId }) {
const [data, setData] = useState();
const [dateRange, setDateRange] = useState(getDateRange('7day'));
const { startDate, endDate, unit } = dateRange;
const [pageviews, uniques] = useMemo(() => {
if (data) {
return [
@ -17,6 +21,10 @@ export default function WebsiteStats({ title, websiteId, startDate, endDate, uni
return [[], []];
}, [data]);
function handleDateChange(values) {
setDateRange(values);
}
async function loadData() {
setData(
await get(`/api/website/${websiteId}/pageviews`, {
@ -35,7 +43,10 @@ export default function WebsiteStats({ title, websiteId, startDate, endDate, uni
return (
<div className={styles.container}>
<div className={styles.title}>{title}</div>
<WebsiteSummary websiteId={websiteId} startDate={startDate} endDate={endDate} />
<div className={styles.header}>
<WebsiteSummary websiteId={websiteId} startDate={startDate} endDate={endDate} />
<QuickButtons onChange={handleDateChange} />
</div>
<PageviewsChart data={{ pageviews, uniques }} unit={unit} />
</div>
);