From a039f405b6f8de2be10c714fbbed7f4d67076ec6 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sat, 10 Oct 2020 01:16:28 -0700 Subject: [PATCH] Refactored realtime components. --- components/metrics/DataTable.module.css | 11 +++-- components/metrics/MetricsTable.js | 2 + components/metrics/RealtimeLog.js | 49 ++++++----------------- components/metrics/RealtimeLog.module.css | 13 +++++- components/pages/RealtimeDashboard.js | 10 +++-- components/pages/WebsiteDetails.js | 2 +- package.json | 3 +- yarn.lock | 12 ++++++ 8 files changed, 51 insertions(+), 51 deletions(-) diff --git a/components/metrics/DataTable.module.css b/components/metrics/DataTable.module.css index b276e361..a1dc61fc 100644 --- a/components/metrics/DataTable.module.css +++ b/components/metrics/DataTable.module.css @@ -6,6 +6,11 @@ flex: 1; } +.body { + position: relative; + flex: 1; +} + .header { display: flex; align-items: center; @@ -88,9 +93,3 @@ background: var(--primary400); z-index: -1; } - -.body { - position: relative; - flex: 1; - overflow: hidden; -} diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js index d4b246b3..19cd5b95 100644 --- a/components/metrics/MetricsTable.js +++ b/components/metrics/MetricsTable.js @@ -25,6 +25,7 @@ export default function MetricsTable({ filterOptions, limit, renderLabel, + height, onDataLoad = () => {}, }) { const [dateRange] = useDateRange(websiteId); @@ -75,6 +76,7 @@ export default function MetricsTable({ className={className} renderLabel={renderLabel} limit={limit} + height={height} animate={limit > 0} /> )} diff --git a/components/metrics/RealtimeLog.js b/components/metrics/RealtimeLog.js index 9bd36d91..426bd3ce 100644 --- a/components/metrics/RealtimeLog.js +++ b/components/metrics/RealtimeLog.js @@ -1,11 +1,9 @@ import React, { useMemo } from 'react'; import { FormattedMessage } from 'react-intl'; import { FixedSizeList } from 'react-window'; -import classNames from 'classnames'; import firstBy from 'thenby'; import { format } from 'date-fns'; import Icon from 'components/common/Icon'; -import Table, { TableRow } from 'components/common/Table'; import Tag from 'components/common/Tag'; import useLocale from 'hooks/useLocale'; import useCountryNames from 'hooks/useCountryNames'; @@ -33,29 +31,6 @@ export default function RealtimeLog({ data, websites }) { return [...pageviews, ...sessions, ...events].sort(firstBy('created_at', -1)); }, [data]); - const columns = [ - { - key: 'time', - className: classNames(styles.time, 'col-3 col-lg-1'), - render: ({ created_at }) => format(new Date(created_at), 'h:mm:ss'), - }, - { - key: 'website', - className: classNames(styles.website, 'col-9 col-lg-2'), - render: getWebsite, - }, - { - key: 'detail', - className: classNames(styles.detail, 'col-12 col-lg-9'), - render: row => ( - <> - - {getDetail(row)} - - ), - }, - ]; - function getType({ view_id, session_id, event_id }) { if (event_id) { return TYPE_EVENT; @@ -110,29 +85,29 @@ export default function RealtimeLog({ data, websites }) { } const Row = ({ index, style }) => { + const row = logs[index]; return ( -
- +
+
{format(new Date(row.created_at), 'h:mm:ss')}
+
{getWebsite(row)}
+
+ + {getDetail(row)} +
); }; return ( -
+
- - +
+ {Row} -
+
); } diff --git a/components/metrics/RealtimeLog.module.css b/components/metrics/RealtimeLog.module.css index 5fa3d7ae..803cfe0d 100644 --- a/components/metrics/RealtimeLog.module.css +++ b/components/metrics/RealtimeLog.module.css @@ -6,12 +6,15 @@ display: flex; align-items: center; justify-content: space-between; + font-size: 16px; line-height: 40px; font-weight: 600; } .row { display: flex; + align-items: center; + height: 40px; border-bottom: 1px solid var(--gray300); } @@ -20,17 +23,23 @@ } .icon { - align-self: center; - margin-right: 20px; + margin-right: 10px; +} + +.time { + min-width: 60px; + overflow: hidden; } .website { + min-width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .detail { + display: flex; flex: 1; } diff --git a/components/pages/RealtimeDashboard.js b/components/pages/RealtimeDashboard.js index 5c8f052a..30bf1ee4 100644 --- a/components/pages/RealtimeDashboard.js +++ b/components/pages/RealtimeDashboard.js @@ -16,7 +16,7 @@ import useCountryNames from 'hooks/useCountryNames'; import { FormattedMessage } from 'react-intl'; const REALTIME_RANGE = 30; -const REALTIME_INTERVAL = 5000; +const REALTIME_INTERVAL = 55000; function mergeData(state, data, time) { const ids = state.map(({ __id }) => __id); @@ -151,17 +151,18 @@ export default function RealtimeDashboard() {
- - - } metric={} data={referrers} + height={400} animate={false} /> + + + @@ -170,6 +171,7 @@ export default function RealtimeDashboard() { metric={} data={countries} renderLabel={renderCountryName} + height={500} animate={false} /> diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js index 7f64b6f6..39b634e5 100644 --- a/components/pages/WebsiteDetails.js +++ b/components/pages/WebsiteDetails.js @@ -171,7 +171,7 @@ export default function WebsiteDetails({ websiteId, token }) { contentClassName={styles.content} menu={menuOptions} > - + )} diff --git a/package.json b/package.json index 1398c724..4347eaa4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "umami", - "version": "0.91.0", + "version": "0.92.0", "description": "A simple, fast, website analytics alternative to Google Analytics. ", "author": "Mike Cao ", "license": "MIT", @@ -83,6 +83,7 @@ "react-simple-maps": "^2.1.2", "react-spring": "^8.0.27", "react-tooltip": "^4.2.10", + "react-use-measure": "^2.0.2", "react-window": "^1.8.5", "redux": "^4.0.5", "redux-thunk": "^2.3.0", diff --git a/yarn.lock b/yarn.lock index df03a2ae..b8d1e81c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3228,6 +3228,11 @@ date-fns@^2.16.1: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b" integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ== +debounce@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131" + integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg== + debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1: version "4.2.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1" @@ -7337,6 +7342,13 @@ react-tooltip@^4.2.10: prop-types "^15.7.2" uuid "^7.0.3" +react-use-measure@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.2.tgz#06b4f99b887d5dfcd7b7167a2da063d97ec8f62f" + integrity sha512-/+eSmQiU2ePNTwFCXX4JPrQNMvyu3sWrSDi/n5F6IMXwboB46IvtU8VHvG7Nc+egvtM7sBJKwmUx/vx6KIRDog== + dependencies: + debounce "^1.2.0" + react-window@^1.8.5: version "1.8.5" resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"