diff --git a/assets/expand.svg b/assets/expand.svg
new file mode 100644
index 00000000..43b9036f
--- /dev/null
+++ b/assets/expand.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/lightbulb.svg b/assets/lightbulb.svg
index c7895a7d..4ff96dcc 100644
--- a/assets/lightbulb.svg
+++ b/assets/lightbulb.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/assets/overview.svg b/assets/overview.svg
new file mode 100644
index 00000000..4c96e23d
--- /dev/null
+++ b/assets/overview.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/reports.svg b/assets/reports.svg
new file mode 100644
index 00000000..66dfc325
--- /dev/null
+++ b/assets/reports.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/components/icons.ts b/components/icons.ts
index f3040bbd..efd6914b 100644
--- a/components/icons.ts
+++ b/components/icons.ts
@@ -10,7 +10,10 @@ import Globe from 'assets/globe.svg';
import Lock from 'assets/lock.svg';
import Logo from 'assets/logo.svg';
import Moon from 'assets/moon.svg';
+import Nodes from 'assets/nodes.svg';
+import Overview from 'assets/overview.svg';
import Profile from 'assets/profile.svg';
+import Reports from 'assets/reports.svg';
import Sun from 'assets/sun.svg';
import User from 'assets/user.svg';
import Users from 'assets/users.svg';
@@ -29,7 +32,10 @@ const icons = {
Lock,
Logo,
Moon,
+ Nodes,
+ Overview,
Profile,
+ Reports,
Sun,
User,
Users,
diff --git a/components/messages.js b/components/messages.js
index 7ddbdd2d..5d85d682 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -158,6 +158,7 @@ export const labels = defineMessages({
max: { id: 'labels.max', defaultMessage: 'Max' },
unique: { id: 'labels.unique', defaultMessage: 'Unique' },
value: { id: 'labels.value', defaultMessage: 'Value' },
+ overview: { id: 'labels.overview', defaultMessage: 'Overview' },
});
export const messages = defineMessages({
diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js
index 2d7b5ceb..c72d96ed 100644
--- a/components/metrics/CountriesTable.js
+++ b/components/metrics/CountriesTable.js
@@ -1,13 +1,15 @@
-import MetricsTable from './MetricsTable';
+import { useRouter } from 'next/router';
import FilterLink from 'components/common/FilterLink';
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
import useMessages from 'hooks/useMessages';
+import MetricsTable from './MetricsTable';
export function CountriesTable({ websiteId, ...props }) {
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
const { formatMessage, labels } = useMessages();
+ const { basePath } = useRouter();
function renderLink({ x: code }) {
return (
@@ -17,7 +19,7 @@ export function CountriesTable({ websiteId, ...props }) {
value={countryNames[code] && code}
label={countryNames[code]}
>
- )
+ )
);
}
diff --git a/components/metrics/RegionsTable.js b/components/metrics/RegionsTable.js
index c8e0b768..d7b614f7 100644
--- a/components/metrics/RegionsTable.js
+++ b/components/metrics/RegionsTable.js
@@ -1,15 +1,17 @@
-import MetricsTable from './MetricsTable';
-import { emptyFilter } from 'lib/filters';
+import { useRouter } from 'next/router';
import FilterLink from 'components/common/FilterLink';
+import { emptyFilter } from 'lib/filters';
import useLocale from 'hooks/useLocale';
import useMessages from 'hooks/useMessages';
import useCountryNames from 'hooks/useCountryNames';
+import MetricsTable from './MetricsTable';
import regions from 'public/iso-3166-2.json';
export function RegionsTable({ websiteId, ...props }) {
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
const countryNames = useCountryNames(locale);
+ const { basePath } = useRouter();
const renderLabel = x => {
return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x;
@@ -18,7 +20,10 @@ export function RegionsTable({ websiteId, ...props }) {
const renderLink = ({ x: code }) => {
return (
- ?.[0]?.toLowerCase())
+ ?.[0]?.toLowerCase())
);
};
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index de21c0c7..9159a315 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -1,17 +1,38 @@
-import { Row, Column, Text } from 'react-basics';
+import { Flexbox, Row, Column, Text, Button, Icon } from 'react-basics';
import Favicon from 'components/common/Favicon';
import ActiveUsers from './ActiveUsers';
import styles from './WebsiteHeader.module.css';
+import { useMessages } from 'hooks';
+import Icons from 'components/icons';
export function WebsiteHeader({ websiteId, name, domain, children }) {
+ const { formatMessage, labels } = useMessages();
+
+ const links = [
+ { label: formatMessage(labels.overview), icon: },
+ { label: formatMessage(labels.realtime), icon: },
+ { label: formatMessage(labels.reports), icon: },
+ { label: formatMessage(labels.eventData), icon: },
+ ];
+
return (
{name}
-
+
+
+ {links.map(({ label, icon }) => {
+ return (
+
+ );
+ })}
+
{children}
diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css
index 68fd22f8..408da0ec 100644
--- a/components/metrics/WebsiteHeader.module.css
+++ b/components/metrics/WebsiteHeader.module.css
@@ -15,7 +15,7 @@
height: 100px;
}
-.info {
+.actions {
display: flex;
flex-direction: row;
align-items: center;