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 (
-
);
}
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"