diff --git a/components/metrics/RealtimeLog.js b/components/metrics/RealtimeLog.js index 7bb37e08..6e205e16 100644 --- a/components/metrics/RealtimeLog.js +++ b/components/metrics/RealtimeLog.js @@ -94,14 +94,24 @@ export default function RealtimeLog({ data, websites }) { } } + function getTime({ created_at }) { + return format(new Date(created_at), 'h:mm:ss'); + } + + function getColor(row) { + const { session_id } = row; + + return stringToColor(uuids[session_id] || `${session_id}${getWebsite(row)}`); + } + const Row = ({ index, style }) => { const row = logs[index]; return (
- +
-
{format(new Date(row.created_at), 'h:mm:ss')}
+
{getTime(row)}
{getDetail(row)} diff --git a/components/metrics/RealtimeLog.module.css b/components/metrics/RealtimeLog.module.css index 5924b331..99335a52 100644 --- a/components/metrics/RealtimeLog.module.css +++ b/components/metrics/RealtimeLog.module.css @@ -34,15 +34,12 @@ .website { text-align: right; - padding-right: 20px; + padding: 0 20px; } .detail { display: flex; flex: 1; -} - -.detail span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/components/pages/RealtimeDashboard.js b/components/pages/RealtimeDashboard.js index d514e348..d80304d9 100644 --- a/components/pages/RealtimeDashboard.js +++ b/components/pages/RealtimeDashboard.js @@ -80,7 +80,7 @@ export default function RealtimeDashboard() { ); } return []; - }, [realtimeData]); + }, [realtimeData?.sessions]); const referrers = useMemo(() => { if (realtimeData?.pageviews) { @@ -89,12 +89,15 @@ export default function RealtimeDashboard() { .reduce((arr, { referrer }) => { if (referrer?.startsWith('http')) { const { hostname } = new URL(referrer); - const row = arr.find(({ x }) => x === hostname); - if (!row) { - arr.push({ x: hostname, y: 1 }); - } else { - row.y += 1; + if (!data.domains.includes(hostname)) { + const row = arr.find(({ x }) => x === hostname); + + if (!row) { + arr.push({ x: hostname, y: 1 }); + } else { + row.y += 1; + } } } return arr; @@ -103,7 +106,7 @@ export default function RealtimeDashboard() { ); } return []; - }, [realtimeData]); + }, [realtimeData?.pageviews]); useEffect(() => { if (init && !data) { @@ -111,7 +114,11 @@ export default function RealtimeDashboard() { const domains = init.websites.map(({ domain }) => domain); setData({ websites, domains, ...data }); - } else if (updates) { + } + }, [init]); + + useEffect(() => { + if (updates) { const { pageviews, sessions, events, timestamp } = updates; const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime(); @@ -123,16 +130,14 @@ export default function RealtimeDashboard() { timestamp, })); } - }, [init, updates]); + }, [updates]); - if (!init || loading || !data) { + if (!init || !data || loading) { return null; } const { websites } = data; - //console.log({realtimeData, countries}); - return ( { if (url && !disabled) { - setTimeout(() => loadData(), delay); + const id = setTimeout(() => loadData(params), delay); + + return () => { + clearTimeout(id); + }; } - }, [url, disabled, ...update]); + }, [url, !!disabled, count, ...update]); useEffect(() => { - const id = interval ? setInterval(() => loadData(), interval) : null; + if (interval && !disabled) { + const id = setInterval(() => setCount(state => state + 1), interval); - return () => { - clearInterval(id); - }; - }, [interval, params]); + return () => { + clearInterval(id); + }; + } + }, [interval, !!disabled]); return { data, status, error, loading }; } diff --git a/lib/constants.js b/lib/constants.js index 721f5e1c..80d8eed1 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -51,6 +51,8 @@ export const EVENT_COLORS = [ '#ffec16', ]; +export const DEFAULT_LOCALE = 'en-US'; +export const DEFAULT_THEME = 'light'; export const DEFAUL_CHART_HEIGHT = 400; export const DEFAULT_ANIMATION_DURATION = 300; export const DEFAULT_DATE_RANGE = '24hour'; diff --git a/redux/actions/app.js b/redux/actions/app.js index 94b77daa..900be56d 100644 --- a/redux/actions/app.js +++ b/redux/actions/app.js @@ -1,13 +1,19 @@ import { createSlice } from '@reduxjs/toolkit'; import { getItem } from 'lib/web'; -import { LOCALE_CONFIG, THEME_CONFIG, VERSION_CHECK } from 'lib/constants'; +import { + DEFAULT_LOCALE, + DEFAULT_THEME, + LOCALE_CONFIG, + THEME_CONFIG, + VERSION_CHECK, +} from 'lib/constants'; import semver from 'semver'; const app = createSlice({ name: 'app', initialState: { - locale: getItem(LOCALE_CONFIG) || 'en-US', - theme: getItem(THEME_CONFIG) || 'light', + locale: getItem(LOCALE_CONFIG) || DEFAULT_LOCALE, + theme: getItem(THEME_CONFIG) || DEFAULT_THEME, versions: { current: process.env.VERSION, latest: null,