diff --git a/components/Settings.js b/components/Settings.js
index f3144f65..37b93506 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -8,16 +8,20 @@ import { useSelector } from 'react-redux';
export default function Settings() {
const user = useSelector(state => state.user);
- const [option, setOption] = useState('Websites');
+ const [option, setOption] = useState(1);
- const menuOptions = ['Websites', user.is_admin && 'Accounts', 'Profile'];
+ const menuOptions = [
+ { label: 'Websites', value: 1 },
+ { label: 'Accounts', value: 2, hidden: !user.is_admin },
+ { label: 'Profile', value: 3 },
+ ];
return (
- {option === 'Websites' && }
- {option === 'Accounts' && }
- {option === 'Profile' && }
+ {option === 1 && }
+ {option === 2 && }
+ {option === 3 && }
);
diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 250ed1f7..b446d34f 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -4,16 +4,17 @@ import WebsiteChart from './charts/WebsiteChart';
import RankingsChart from './charts/RankingsChart';
import WorldMap from './common/WorldMap';
import Page from './layout/Page';
+import PageHeader from './layout/PageHeader';
+import MenuLayout from './layout/MenuLayout';
+import Button from './common/Button';
import { getDateRange } from 'lib/date';
import { get } from 'lib/web';
import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';
+import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteDetails.module.css';
-import PageHeader from './layout/PageHeader';
-import MenuLayout from './layout/MenuLayout';
const pageviewClasses = 'col-md-12 col-lg-6';
-const sessionClasses = 'col-12 col-lg-4';
-const menuOptions = ['Pages', 'Referrers', 'Browsers', 'Operating system', 'Devices', 'Countries'];
+const sessionClasses = 'col-md-12 col-lg-4';
export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
const [data, setData] = useState();
@@ -23,6 +24,32 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
const [expand, setExpand] = useState();
const { startDate, endDate } = dateRange;
+ const menuOptions = [
+ {
+ render: () => (
+ }
+ size="xsmall"
+ onClick={() => setExpand(null)}
+ >
+ Back
+
+ ),
+ },
+ { label: 'Pages', value: 'url', filter: urlFilter },
+ { label: 'Referrers', value: 'referrer', filter: refFilter(data?.domain) },
+ { label: 'Browsers', value: 'browser', filter: browserFilter },
+ { label: 'Operating system', value: 'os' },
+ { label: 'Devices', value: 'device', filter: deviceFilter },
+ {
+ label: 'Countries',
+ value: 'country',
+ filter: countryFilter,
+ onDataLoad: data => setCountryData(data),
+ },
+ ];
+
async function loadData() {
setData(await get(`/api/website/${websiteId}`));
}
@@ -35,12 +62,16 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
setTimeout(() => setDateRange(values), 300);
}
- function handleExpand(title) {
- setExpand(title);
+ function handleExpand(value) {
+ setExpand(menuOptions.find(e => e.value === value));
}
- function handleMenuSelect(title) {
- setExpand(title);
+ function handleMenuSelect(value) {
+ setExpand(menuOptions.find(e => e.value === value));
+ }
+
+ function getHeading(type) {
+ return type === 'url' || type === 'referrer' ? 'Views' : 'Visitors';
}
useEffect(() => {
@@ -77,6 +108,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
+ limit={10}
dataFilter={urlFilter}
onExpand={handleExpand}
/>
@@ -89,6 +121,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
+ limit={10}
dataFilter={refFilter(data.domain)}
onExpand={handleExpand}
/>
@@ -103,6 +136,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
+ limit={10}
dataFilter={browserFilter}
onExpand={handleExpand}
/>
@@ -115,6 +149,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
+ limit={10}
onExpand={handleExpand}
/>
@@ -126,6 +161,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
+ limit={10}
dataFilter={deviceFilter}
onExpand={handleExpand}
/>
@@ -143,6 +179,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
websiteId={websiteId}
startDate={startDate}
endDate={endDate}
+ limit={10}
dataFilter={countryFilter}
onDataLoad={data => setCountryData(data)}
onExpand={handleExpand}
@@ -155,10 +192,22 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
+ >
+
+
)}
);
diff --git a/components/WebsiteDetails.module.css b/components/WebsiteDetails.module.css
index eb787027..ce26f8b1 100644
--- a/components/WebsiteDetails.module.css
+++ b/components/WebsiteDetails.module.css
@@ -10,6 +10,19 @@
font-size: var(--font-size-small);
}
+.menu .option {
+ font-size: var(--font-size-small);
+}
+
+.backButton {
+ align-self: flex-start;
+ margin-bottom: 16px;
+}
+
+.backButton svg {
+ transform: rotate(180deg);
+}
+
.row {
border-top: 1px solid var(--gray300);
min-height: 430px;
diff --git a/components/charts/RankingsChart.js b/components/charts/RankingsChart.js
index e3c7fc2c..54a7b4bb 100644
--- a/components/charts/RankingsChart.js
+++ b/components/charts/RankingsChart.js
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useMemo } from 'react';
+import { FixedSizeList } from 'react-window';
import { useSpring, animated, config } from 'react-spring';
import classNames from 'classnames';
import CheckVisible from 'components/helpers/CheckVisible';
@@ -17,6 +18,7 @@ export default function RankingsChart({
heading,
className,
dataFilter,
+ limit,
onDataLoad = () => {},
onExpand = () => {},
}) {
@@ -24,7 +26,11 @@ export default function RankingsChart({
const rankings = useMemo(() => {
if (data) {
- return (dataFilter ? dataFilter(data) : data).filter((e, i) => i < 10);
+ const items = dataFilter ? dataFilter(data) : data;
+ if (limit) {
+ return items.filter((e, i) => i < limit);
+ }
+ return items;
}
return [];
}, [data]);
@@ -52,31 +58,44 @@ export default function RankingsChart({
return null;
}
+ const Row = ({ index, style }) => {
+ const { x, y, z } = rankings[index];
+ return (
+
+ );
+ };
+
return (
-
- {visible => (
-
-
-
- {rankings.map(({ x, y, z }) => (
- |
- ))}
-
-
-
} size="xsmall" onClick={() => onExpand(title)}>
-
More
-
-
-
+
+
+ {limit ? (
+ rankings.map(({ x, y, z }) => (
+
+ ))
+ ) : (
+
+ {Row}
+
+ )}
+
+
+ {limit && data.length > limit && (
+
} size="xsmall" onClick={() => onExpand(type)}>
+
More
+
+ )}
+
+
+
+
+
+
+
{visible => (
diff --git a/components/charts/WebsiteChart.module.css b/components/charts/WebsiteChart.module.css
index 5c941dd7..3bd9db19 100644
--- a/components/charts/WebsiteChart.module.css
+++ b/components/charts/WebsiteChart.module.css
@@ -10,6 +10,11 @@
}
.header {
+ min-height: 90px;
+}
+
+.metrics {
+ position: relative;
display: flex;
justify-content: space-between;
align-items: center;
@@ -22,5 +27,5 @@
margin: auto;
background: var(--gray50);
border-bottom: 1px solid var(--gray300);
- z-index: 2;
+ z-index: 3;
}
diff --git a/components/common/DropDown.js b/components/common/DropDown.js
index 70c68db7..cee90fc7 100644
--- a/components/common/DropDown.js
+++ b/components/common/DropDown.js
@@ -38,7 +38,9 @@ export default function DropDown({
{options.find(e => e.value === value)?.label}
} size="small" />
- {showMenu && }
+ {showMenu && (
+
+ )}
);
}
diff --git a/components/common/Menu.js b/components/common/Menu.js
index 861980c5..d97c4754 100644
--- a/components/common/Menu.js
+++ b/components/common/Menu.js
@@ -2,23 +2,43 @@ import React from 'react';
import classNames from 'classnames';
import styles from './Menu.module.css';
-export default function Menu({ options = [], className, align = 'left', onSelect = () => {} }) {
+export default function Menu({
+ options = [],
+ selectedOption,
+ className,
+ float,
+ align = 'left',
+ optionClassName,
+ selectedClassName,
+ onSelect = () => {},
+}) {
return (
- {options.map(({ label, value, className: optionClassName }) => (
-
onSelect(value, e)}
- >
- {label}
-
- ))}
+ {options.map(option => {
+ const { label, value, className: customClassName, render } = option;
+
+ return render ? (
+ render(option)
+ ) : (
+
onSelect(value, e)}
+ >
+ {label}
+
+ );
+ })}
-
- {menu.map(option =>
- option ? (
-
handleMenuSelect(option)}
- >
- {option}
-
- ) : null,
- )}
-
+
{children}