Website components. Update chart component.

This commit is contained in:
Mike Cao 2020-07-28 01:17:45 -07:00
parent d81ee3932d
commit bdcdcd9d13
9 changed files with 165 additions and 43 deletions

22
components/DateFilter.js Normal file
View File

@ -0,0 +1,22 @@
import React, { useState } from 'react';
import { getDateRange } from 'lib/date';
const filterOptions = ['24h', '7d', '30d'];
export default function DateFilter({ onChange }) {
const [selected, setSelected] = useState('7d');
function handleChange(e) {
const value = e.target.value;
setSelected(value);
onChange(getDateRange(value));
}
return (
<select value={selected} onChange={handleChange}>
{filterOptions.map(option => (
<option name={option}>{option}</option>
))}
</select>
);
}

View File

@ -1,38 +1,28 @@
import React, { useState, useMemo, useRef, useEffect } from 'react';
import React, { useRef, useEffect, useMemo } from 'react';
import ChartJS from 'chart.js';
import { get } from 'lib/web';
import { getTimezone, getLocalTime } from 'lib/date';
import { getLocalTime } from 'lib/date';
export default function Chart({ websiteId, startDate, endDate }) {
const [data, setData] = useState();
export default function PageviewsChart({ data }) {
const canvas = useRef();
const chart = useRef();
const metrics = useMemo(() => {
const pageviews = useMemo(() => {
if (data) {
return data.pageviews.map(({ t, y }) => ({ t: getLocalTime(t), y }));
}
return [];
}, [data]);
console.log(metrics);
async function loadData() {
setData(
await get(`/api/website/${websiteId}/pageviews`, {
start_at: +startDate,
end_at: +endDate,
tz: getTimezone(),
}),
);
}
function draw() {
if (!chart.current && canvas.current) {
if (!canvas.current) return;
if (!chart.current) {
chart.current = new ChartJS(canvas.current, {
type: 'bar',
data: {
datasets: [
{
label: 'page views',
data: Object.values(metrics),
data: pageviews,
lineTension: 0,
backgroundColor: 'rgb(38, 128, 235, 0.1)',
borderColor: 'rgb(13, 102, 208, 0.2)',
@ -74,18 +64,17 @@ export default function Chart({ websiteId, startDate, endDate }) {
},
},
});
} else {
chart.current.data.datasets[0].data = pageviews;
chart.current.update();
}
}
useEffect(() => {
loadData();
}, []);
useEffect(() => {
if (metrics) {
if (data) {
draw();
}
}, [metrics]);
}, [data]);
return (
<div>

41
components/WebsiteList.js Normal file
View File

@ -0,0 +1,41 @@
import React, { useState, useEffect } from 'react';
import { get } from 'lib/web';
import WebsiteStats from './WebsiteStats';
import DateFilter from './DateFilter';
import { getDateRange } from '../lib/date';
export default function WebsiteList() {
const [data, setData] = useState();
const [dateRange, setDateRange] = useState(getDateRange('7d'));
const { startDate, endDate, unit } = dateRange;
async function loadData() {
setData(await get(`/api/website`));
}
function handleDateChange(value) {
setDateRange(value);
}
useEffect(() => {
loadData();
}, []);
return (
<div>
<DateFilter onChange={handleDateChange} />
{data &&
data.websites.map(({ website_id, label }) => (
<div>
<h2>{label}</h2>
<WebsiteStats
websiteId={website_id}
startDate={startDate}
endDate={endDate}
unit={unit}
/>
</div>
))}
</div>
);
}

View File

@ -0,0 +1,25 @@
import React, { useState, useEffect } from 'react';
import PageviewsChart from './PageviewsChart';
import { get } from 'lib/web';
import { getTimezone } from 'lib/date';
export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
const [data, setData] = useState();
async function loadData() {
setData(
await get(`/api/website/${websiteId}/pageviews`, {
start_at: +startDate,
end_at: +endDate,
unit,
tz: getTimezone(),
}),
);
}
useEffect(() => {
loadData();
}, [websiteId, startDate, endDate]);
return <PageviewsChart data={data} />;
}

View File

@ -1,5 +1,5 @@
import moment from 'moment-timezone';
import { addMinutes } from 'date-fns';
import { addMinutes, endOfDay, subDays, subHours } from 'date-fns';
export function getTimezone() {
const tz = moment.tz.guess();
@ -9,3 +9,29 @@ export function getTimezone() {
export function getLocalTime(t) {
return addMinutes(new Date(t), new Date().getTimezoneOffset());
}
export function getDateRange(value) {
const now = new Date();
const endToday = endOfDay(now);
switch (value) {
case '7d':
return {
startDate: subDays(endToday, 7),
endDate: endToday,
unit: 'day',
};
case '30d':
return {
startDate: subDays(endToday, 30),
endDate: endToday,
unit: 'day',
};
default:
return {
startDate: subHours(now, 24),
endDate: now,
unit: 'hour',
};
}
}

View File

@ -1,13 +1,27 @@
import { PrismaClient } from '@prisma/client';
export const prisma = new PrismaClient({
const options = {
log: [
{
emit: 'event',
level: 'query',
},
],
});
};
let prisma;
if (process.env.NODE_ENV === 'production') {
prisma = new PrismaClient(options);
} else {
if (!global.prisma) {
global.prisma = new PrismaClient(options);
}
prisma = global.prisma;
}
export default prisma;
prisma.on('query', e => {
if (process.env.LOG_QUERY) {

View File

@ -7,12 +7,15 @@ export const apiRequest = (method, url, body) =>
'Content-Type': 'application/json',
},
body,
}).then(res => (res.ok ? res.json() : null));
}).then(res => {
if (res.ok) {
return res.json();
}
return null;
});
function parseQuery(url, params) {
const query =
params &&
Object.keys(params).reduce((values, key) => {
function parseQuery(url, params = {}) {
const query = Object.keys(params).reduce((values, key) => {
if (params[key] !== undefined) {
return values.concat(`${key}=${encodeURIComponent(params[key])}`);
}

View File

@ -4,11 +4,11 @@ import { useAuth } from 'lib/middleware';
export default async (req, res) => {
await useAuth(req, res);
const { id, start_at, end_at, tz } = req.query;
const { id, start_at, end_at, unit, tz } = req.query;
const [pageviews, uniques] = await Promise.all([
getPageviewData(+id, new Date(+start_at), new Date(+end_at), tz, 'day', '*'),
getPageviewData(+id, new Date(+start_at), new Date(+end_at), tz, 'day', 'distinct session_id'),
getPageviewData(+id, new Date(+start_at), new Date(+end_at), tz, unit, '*'),
getPageviewData(+id, new Date(+start_at), new Date(+end_at), tz, unit, 'distinct session_id'),
]);
res.status(200).json({ pageviews, uniques });

View File

@ -2,9 +2,10 @@ import React from 'react';
import Link from 'next/link';
import { parse } from 'cookie';
import Layout from 'components/Layout';
import Chart from 'components/Chart';
import PageviewsChart from 'components/PageviewsChart';
import { verifySecureToken } from 'lib/crypto';
import { subDays, endOfDay } from 'date-fns';
import WebsiteList from '../components/WebsiteList';
export default function HomePage({ username }) {
return (
@ -12,8 +13,9 @@ export default function HomePage({ username }) {
<h2>
You've successfully logged in as <b>{username}</b>.
</h2>
<WebsiteList />
<div>
<Chart
<PageviewsChart
websiteId={3}
startDate={subDays(endOfDay(new Date()), 6)}
endDate={endOfDay(new Date())}