From e64a555652bc88361f8549a9e7be3bae44061298 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Thu, 8 Oct 2020 15:02:48 -0700 Subject: [PATCH] Renamed methods. Initial work on realtime dashboard. --- components/common/RefreshButton.js | 2 +- components/layout/Header.js | 3 + components/metrics/MetricsBar.js | 2 +- components/metrics/MetricsTable.js | 2 +- components/metrics/RealtimeChart.js | 80 +++++++++++++++++++ components/pages/RealtimeDashboard.js | 36 +++++++++ components/pages/RealtimeDashboard.module.css | 3 + components/pages/TestConsole.js | 2 +- ...Test.module.css => TestConsole.module.css} | 0 lib/queries.js | 4 +- pages/api/realtime.js | 20 +++++ pages/api/website/[id]/metrics.js | 58 +++++++++++--- pages/api/website/[id]/pageviews.js | 6 +- pages/api/website/[id]/rankings.js | 68 ---------------- pages/api/website/[id]/stats.js | 28 +++++++ pages/realtime.js | 18 +++++ 16 files changed, 246 insertions(+), 86 deletions(-) create mode 100644 components/metrics/RealtimeChart.js create mode 100644 components/pages/RealtimeDashboard.js create mode 100644 components/pages/RealtimeDashboard.module.css rename components/pages/{Test.module.css => TestConsole.module.css} (100%) create mode 100644 pages/api/realtime.js delete mode 100644 pages/api/website/[id]/rankings.js create mode 100644 pages/api/website/[id]/stats.js create mode 100644 pages/realtime.js diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js index af754a9c..013cbf54 100644 --- a/components/common/RefreshButton.js +++ b/components/common/RefreshButton.js @@ -12,7 +12,7 @@ export default function RefreshButton({ websiteId }) { const dispatch = useDispatch(); const [dateRange] = useDateRange(websiteId); const [loading, setLoading] = useState(false); - const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]); + const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]); function handleClick() { if (dateRange) { diff --git a/components/layout/Header.js b/components/layout/Header.js index c48fdd11..cc8baae3 100644 --- a/components/layout/Header.js +++ b/components/layout/Header.js @@ -30,6 +30,9 @@ export default function Header() { + + + diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js index b7a47a10..ed2c7b12 100644 --- a/components/metrics/MetricsBar.js +++ b/components/metrics/MetricsBar.js @@ -19,7 +19,7 @@ export default function MetricsBar({ websiteId, token, className }) { } = usePageQuery(); const { data, error, loading } = useFetch( - `/api/website/${websiteId}/metrics`, + `/api/website/${websiteId}/stats`, { start_at: +startDate, end_at: +endDate, diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js index 6850a3bf..162dce0f 100644 --- a/components/metrics/MetricsTable.js +++ b/components/metrics/MetricsTable.js @@ -38,7 +38,7 @@ export default function MetricsTable({ } = usePageQuery(); const { data, loading, error } = useFetch( - `/api/website/${websiteId}/rankings`, + `/api/website/${websiteId}/metrics`, { type, start_at: +startDate, diff --git a/components/metrics/RealtimeChart.js b/components/metrics/RealtimeChart.js new file mode 100644 index 00000000..0eb3c528 --- /dev/null +++ b/components/metrics/RealtimeChart.js @@ -0,0 +1,80 @@ +import React from 'react'; +import { useIntl } from 'react-intl'; +import tinycolor from 'tinycolor2'; +import BarChart from './BarChart'; +import useTheme from 'hooks/useTheme'; +import { THEME_COLORS } from 'lib/constants'; + +export default function RealtimeChart({ websiteId, data, unit, records, className, loading }) { + const intl = useIntl(); + const [theme] = useTheme(); + const primaryColor = tinycolor(THEME_COLORS[theme].primary); + const colors = { + views: { + background: primaryColor.setAlpha(0.4).toRgbString(), + border: primaryColor.setAlpha(0.5).toRgbString(), + }, + visitors: { + background: primaryColor.setAlpha(0.6).toRgbString(), + border: primaryColor.setAlpha(0.7).toRgbString(), + }, + }; + + const handleUpdate = chart => { + const { + data: { datasets }, + } = chart; + + datasets[0].data = data.uniques; + datasets[0].label = intl.formatMessage({ + id: 'metrics.unique-visitors', + defaultMessage: 'Unique visitors', + }); + datasets[1].data = data.pageviews; + datasets[1].label = intl.formatMessage({ + id: 'metrics.page-views', + defaultMessage: 'Page views', + }); + + chart.update(); + }; + + if (!data) { + return null; + } + + return ( + + ); +} diff --git a/components/pages/RealtimeDashboard.js b/components/pages/RealtimeDashboard.js new file mode 100644 index 00000000..7fb56596 --- /dev/null +++ b/components/pages/RealtimeDashboard.js @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; +import { useSelector } from 'react-redux'; +import Page from '../layout/Page'; +import PageHeader from '../layout/PageHeader'; +import useFetch from '../../hooks/useFetch'; +import DropDown from '../common/DropDown'; +import RealtimeChart from '../metrics/RealtimeChart'; + +export default function TestConsole() { + const user = useSelector(state => state.user); + const [website, setWebsite] = useState(); + const { data } = useFetch('/api/websites'); + + if (!data || !user?.is_admin) { + return null; + } + + const options = [{ label: 'All websites', value: 0 }].concat( + data.map(({ name, website_id }) => ({ label: name, value: website_id })), + ); + const selectedValue = options.find(({ value }) => value === website?.website_id)?.value || 0; + + function handleSelect(value) { + setWebsite(data.find(({ website_id }) => website_id === value)); + } + + return ( + + +
Real time
+ + + + + ); +} diff --git a/components/pages/RealtimeDashboard.module.css b/components/pages/RealtimeDashboard.module.css new file mode 100644 index 00000000..abde53a3 --- /dev/null +++ b/components/pages/RealtimeDashboard.module.css @@ -0,0 +1,3 @@ +.container { + display: flex; +} diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js index f6fa8a23..fef6c620 100644 --- a/components/pages/TestConsole.js +++ b/components/pages/TestConsole.js @@ -7,7 +7,7 @@ import Page from '../layout/Page'; import PageHeader from '../layout/PageHeader'; import useFetch from '../../hooks/useFetch'; import DropDown from '../common/DropDown'; -import styles from './Test.module.css'; +import styles from './TestConsole.module.css'; import WebsiteChart from '../metrics/WebsiteChart'; import EventsChart from '../metrics/EventsChart'; import Button from '../common/Button'; diff --git a/components/pages/Test.module.css b/components/pages/TestConsole.module.css similarity index 100% rename from components/pages/Test.module.css rename to components/pages/TestConsole.module.css diff --git a/lib/queries.js b/lib/queries.js index 3b138faa..6312057f 100644 --- a/lib/queries.js +++ b/lib/queries.js @@ -285,7 +285,7 @@ export async function createAccount(data) { ); } -export function getMetrics(website_id, start_at, end_at, filters = {}) { +export function getWebsiteStats(website_id, start_at, end_at, filters = {}) { const params = [website_id, start_at, end_at]; const { url } = filters; let urlFilter = ''; @@ -317,7 +317,7 @@ export function getMetrics(website_id, start_at, end_at, filters = {}) { ); } -export function getPageviews( +export function getPageviewStats( website_id, start_at, end_at, diff --git a/pages/api/realtime.js b/pages/api/realtime.js new file mode 100644 index 00000000..7717c9b9 --- /dev/null +++ b/pages/api/realtime.js @@ -0,0 +1,20 @@ +import { useAuth } from 'lib/middleware'; +import { ok, unauthorized, methodNotAllowed } from 'lib/response'; + +export default async (req, res) => { + await useAuth(req, res); + + const { is_admin } = req.auth; + + if (!is_admin) { + return unauthorized(res); + } + + if (req.method === 'GET') { + const [pageviews, sessions, events] = await Promise.all([[], [], []]); + + return ok(res, { pageviews, sessions, events }); + } + + return methodNotAllowed(res); +}; diff --git a/pages/api/website/[id]/metrics.js b/pages/api/website/[id]/metrics.js index 91a0f4cf..17aa6daa 100644 --- a/pages/api/website/[id]/metrics.js +++ b/pages/api/website/[id]/metrics.js @@ -1,27 +1,67 @@ -import { getMetrics } from 'lib/queries'; -import { methodNotAllowed, ok, unauthorized } from 'lib/response'; +import { getPageviewMetrics, getSessionMetrics } from 'lib/queries'; +import { ok, badRequest, methodNotAllowed, unauthorized } from 'lib/response'; +import { DOMAIN_REGEX } from 'lib/constants'; import { allowQuery } from 'lib/auth'; +const sessionColumns = ['browser', 'os', 'device', 'country']; +const pageviewColumns = ['url', 'referrer']; + +function getTable(type) { + if (type === 'event') { + return 'event'; + } + + if (sessionColumns.includes(type)) { + return 'session'; + } + + return 'pageview'; +} + +function getColumn(type) { + if (type === 'event') { + return `concat(event_type, ':', event_value)`; + } + return type; +} + export default async (req, res) => { if (req.method === 'GET') { if (!(await allowQuery(req))) { return unauthorized(res); } - const { id, start_at, end_at, url } = req.query; + const { id, type, start_at, end_at, domain, url } = req.query; + + if (domain && !DOMAIN_REGEX.test(domain)) { + return badRequest(res); + } const websiteId = +id; const startDate = new Date(+start_at); const endDate = new Date(+end_at); - const metrics = await getMetrics(websiteId, startDate, endDate, { url }); + if (sessionColumns.includes(type)) { + const data = await getSessionMetrics(websiteId, startDate, endDate, type, { url }); - const stats = Object.keys(metrics[0]).reduce((obj, key) => { - obj[key] = Number(metrics[0][key]) || 0; - return obj; - }, {}); + return ok(res, data); + } - return ok(res, stats); + if (type === 'event' || pageviewColumns.includes(type)) { + const data = await getPageviewMetrics( + websiteId, + startDate, + endDate, + getColumn(type), + getTable(type), + { + domain, + url: type !== 'url' && url, + }, + ); + + return ok(res, data); + } } return methodNotAllowed(res); diff --git a/pages/api/website/[id]/pageviews.js b/pages/api/website/[id]/pageviews.js index 2191a4c4..07362359 100644 --- a/pages/api/website/[id]/pageviews.js +++ b/pages/api/website/[id]/pageviews.js @@ -1,5 +1,5 @@ import moment from 'moment-timezone'; -import { getPageviews } from 'lib/queries'; +import { getPageviewStats } from 'lib/queries'; import { ok, badRequest, methodNotAllowed, unauthorized } from 'lib/response'; import { allowQuery } from 'lib/auth'; @@ -22,8 +22,8 @@ export default async (req, res) => { } const [pageviews, uniques] = await Promise.all([ - getPageviews(websiteId, startDate, endDate, tz, unit, '*', url), - getPageviews(websiteId, startDate, endDate, tz, unit, 'distinct session_id', url), + getPageviewStats(websiteId, startDate, endDate, tz, unit, '*', url), + getPageviewStats(websiteId, startDate, endDate, tz, unit, 'distinct session_id', url), ]); return ok(res, { pageviews, uniques }); diff --git a/pages/api/website/[id]/rankings.js b/pages/api/website/[id]/rankings.js deleted file mode 100644 index 17aa6daa..00000000 --- a/pages/api/website/[id]/rankings.js +++ /dev/null @@ -1,68 +0,0 @@ -import { getPageviewMetrics, getSessionMetrics } from 'lib/queries'; -import { ok, badRequest, methodNotAllowed, unauthorized } from 'lib/response'; -import { DOMAIN_REGEX } from 'lib/constants'; -import { allowQuery } from 'lib/auth'; - -const sessionColumns = ['browser', 'os', 'device', 'country']; -const pageviewColumns = ['url', 'referrer']; - -function getTable(type) { - if (type === 'event') { - return 'event'; - } - - if (sessionColumns.includes(type)) { - return 'session'; - } - - return 'pageview'; -} - -function getColumn(type) { - if (type === 'event') { - return `concat(event_type, ':', event_value)`; - } - return type; -} - -export default async (req, res) => { - if (req.method === 'GET') { - if (!(await allowQuery(req))) { - return unauthorized(res); - } - - const { id, type, start_at, end_at, domain, url } = req.query; - - if (domain && !DOMAIN_REGEX.test(domain)) { - return badRequest(res); - } - - const websiteId = +id; - const startDate = new Date(+start_at); - const endDate = new Date(+end_at); - - if (sessionColumns.includes(type)) { - const data = await getSessionMetrics(websiteId, startDate, endDate, type, { url }); - - return ok(res, data); - } - - if (type === 'event' || pageviewColumns.includes(type)) { - const data = await getPageviewMetrics( - websiteId, - startDate, - endDate, - getColumn(type), - getTable(type), - { - domain, - url: type !== 'url' && url, - }, - ); - - return ok(res, data); - } - } - - return methodNotAllowed(res); -}; diff --git a/pages/api/website/[id]/stats.js b/pages/api/website/[id]/stats.js new file mode 100644 index 00000000..8b80a363 --- /dev/null +++ b/pages/api/website/[id]/stats.js @@ -0,0 +1,28 @@ +import { getWebsiteStats } from 'lib/queries'; +import { methodNotAllowed, ok, unauthorized } from 'lib/response'; +import { allowQuery } from 'lib/auth'; + +export default async (req, res) => { + if (req.method === 'GET') { + if (!(await allowQuery(req))) { + return unauthorized(res); + } + + const { id, start_at, end_at, url } = req.query; + + const websiteId = +id; + const startDate = new Date(+start_at); + const endDate = new Date(+end_at); + + const metrics = await getWebsiteStats(websiteId, startDate, endDate, { url }); + + const stats = Object.keys(metrics[0]).reduce((obj, key) => { + obj[key] = Number(metrics[0][key]) || 0; + return obj; + }, {}); + + return ok(res, stats); + } + + return methodNotAllowed(res); +}; diff --git a/pages/realtime.js b/pages/realtime.js new file mode 100644 index 00000000..9f1ebffa --- /dev/null +++ b/pages/realtime.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Layout from 'components/layout/Layout'; +import RealtimeDashboard from 'components/pages/RealtimeDashboard'; +import useRequireLogin from 'hooks/useRequireLogin'; + +export default function RealtimePage() { + const { loading } = useRequireLogin(); + + if (loading) { + return null; + } + + return ( + + + + ); +}