diff --git a/components/PageviewsChart.js b/components/PageviewsChart.js
index 9d601243..b3c2b598 100644
--- a/components/PageviewsChart.js
+++ b/components/PageviewsChart.js
@@ -66,16 +66,16 @@ export default function PageviewsChart({
label: 'unique visitors',
data: data.uniques,
lineTension: 0,
- backgroundColor: 'rgb(146, 86, 217, 0.4)',
- borderColor: 'rgb(122, 66, 191, 0.4)',
+ backgroundColor: 'rgb(38, 128, 235, 0.4)',
+ borderColor: 'rgb(13, 102, 208, 0.4)',
borderWidth: 1,
},
{
label: 'page views',
data: data.pageviews,
lineTension: 0,
- backgroundColor: 'rgb(38, 128, 235, 0.4)',
- borderColor: 'rgb(13, 102, 208, 0.4)',
+ backgroundColor: 'rgb(38, 128, 235, 0.2)',
+ borderColor: 'rgb(13, 102, 208, 0.2)',
borderWidth: 1,
},
],
@@ -165,7 +165,9 @@ const Tooltip = ({ title, value, label, labelColor }) => (
diff --git a/components/PageviewsChart.module.css b/components/PageviewsChart.module.css
index c378bcbb..9b344849 100644
--- a/components/PageviewsChart.module.css
+++ b/components/PageviewsChart.module.css
@@ -30,9 +30,14 @@
}
.dot {
+ position: relative;
+ overflow: hidden;
+ border-radius: 100%;
+ margin-right: 8px;
+ background: #fff;
+}
+
+.color {
width: 10px;
height: 10px;
- border-radius: 100%;
- border: 1px solid #b3b3b3;
- margin-right: 8px;
}
diff --git a/components/RankingsChart.js b/components/RankingsChart.js
index c445a4fb..cf0ca85c 100644
--- a/components/RankingsChart.js
+++ b/components/RankingsChart.js
@@ -1,6 +1,7 @@
import React, { useState, useEffect, useMemo } from 'react';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated, config } from 'react-spring';
import classNames from 'classnames';
+import CheckVisible from './CheckVisible';
import { get } from 'lib/web';
import { percentFilter } from 'lib/filters';
import styles from './RankingsChart.module.css';
@@ -14,7 +15,6 @@ export default function RankingsChart({
heading,
className,
dataFilter,
- animate = true,
onDataLoad = () => {},
}) {
const [data, setData] = useState();
@@ -50,43 +50,42 @@ export default function RankingsChart({
}
return (
-
-
- {rankings.map(({ x, y, z }) =>
- animate ? (
-
- ) : (
-
|
- ),
+
+ {visible => (
+
+
+ {rankings.map(({ x, y, z }) => (
+
|
+ ))}
+
)}
-
+
);
}
-const Row = ({ label, value, percent }) => (
-
-
{label}
-
{value.toFixed(0)}
-
-
{`${percent.toFixed(0)}%`}
-
-
-
-);
-
-const AnimatedRow = ({ label, value, percent }) => {
- const props = useSpring({ width: percent, y: value, from: { width: 0, y: 0 } });
+const Row = ({ label, value, percent, animate }) => {
+ const props = useSpring({
+ width: percent,
+ y: value,
+ from: { width: 0, y: 0 },
+ config: animate ? config.default : { duration: 0 },
+ });
return (
{label}
{props.y.interpolate(n => n.toFixed(0))}
-
{props.width.interpolate(n => `${n.toFixed(0)}%`)}
-
+
`${n}%`) }}
+ />
+
+ {props.width.interpolate(n => `${n.toFixed(0)}%`)}
+
);
diff --git a/components/RankingsChart.module.css b/components/RankingsChart.module.css
index 76d3cdb8..9e9174ea 100644
--- a/components/RankingsChart.module.css
+++ b/components/RankingsChart.module.css
@@ -56,11 +56,12 @@
}
.percent {
+ position: relative;
width: 50px;
color: #6e6e6e;
- position: relative;
border-left: 1px solid #8e8e8e;
padding-left: 10px;
+ z-index: 1;
}
.bar {
diff --git a/components/WebsiteChart.js b/components/WebsiteChart.js
index cdcbdb7c..1e5ab536 100644
--- a/components/WebsiteChart.js
+++ b/components/WebsiteChart.js
@@ -1,26 +1,26 @@
import React, { useState, useEffect, useMemo, useRef } from 'react';
import classNames from 'classnames';
import PageviewsChart from './PageviewsChart';
-import { get } from 'lib/web';
-import { getDateArray, getDateRange, getTimezone } from 'lib/date';
+import CheckVisible from './CheckVisible';
import MetricsBar from './MetricsBar';
import QuickButtons from './QuickButtons';
-import styles from './WebsiteChart.module.css';
import DateFilter from './DateFilter';
import useSticky from './hooks/useSticky';
+import { get } from 'lib/web';
+import { getDateArray, getDateRange, getTimezone } from 'lib/date';
+import styles from './WebsiteChart.module.css';
export default function WebsiteChart({
websiteId,
defaultDateRange = '7day',
stickHeader = false,
- animate = true,
onDateChange = () => {},
}) {
const [data, setData] = useState();
const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
const { startDate, endDate, unit, value } = dateRange;
const [ref, sticky] = useSticky(stickHeader);
- const width = useRef();
+ const container = useRef();
const [pageviews, uniques] = useMemo(() => {
if (data) {
@@ -52,16 +52,12 @@ export default function WebsiteChart({
loadData();
}, [websiteId, startDate, endDate, unit]);
- useEffect(() => {
- width.current = document.querySelector('main').offsetWidth;
- }, [sticky]);
-
return (
- <>
+
-
-
-
+
+ {visible => (
+
+
+
+ )}
+
- >
+
);
}
diff --git a/components/WebsiteChart.module.css b/components/WebsiteChart.module.css
index f68aa7de..5076bf47 100644
--- a/components/WebsiteChart.module.css
+++ b/components/WebsiteChart.module.css
@@ -13,7 +13,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 10px;
+ padding: 10px 0;
}
.sticky {
@@ -21,7 +21,6 @@
top: 0;
margin: auto;
background: #fff;
- padding: 10px 0;
border-bottom: 1px solid #e1e1e1;
- z-index: 1;
+ z-index: 2;
}
diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 6b963f1b..d157da83 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -37,103 +37,69 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
}
return (
- <>
+
-
{data.label}
-
- {visible => (
-
- )}
-
+ {data.label}
+
-
- {visible => (
-
- )}
-
+
-
- {visible => (
-
- )}
-
+
-
- {visible => (
-
- )}
-
+
-
- {visible => (
-
- )}
-
+
-
- {visible => (
-
- )}
-
+
@@ -141,23 +107,18 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
-
- {visible => (
- setCountryData(data)}
- animate={visible}
- />
- )}
-
+ setCountryData(data)}
+ />
- >
+
);
}
diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 9bc60542..a18afe6b 100644
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@@ -18,10 +18,10 @@ export default function WebsiteList() {
return (
{data &&
- data.websites.map(({ website_id, website_uuid, label }) => (
+ data.websites.map(({ website_id, label }) => (
diff --git a/components/WebsiteList.module.css b/components/WebsiteList.module.css
index f52e78b9..cb284497 100644
--- a/components/WebsiteList.module.css
+++ b/components/WebsiteList.module.css
@@ -1,3 +1,32 @@
.container > div {
+ padding-bottom: 30px;
+ border-bottom: 1px solid #e1e1e1;
margin-bottom: 30px;
}
+
+.container > div:last-child {
+ border-bottom: 0;
+ margin-bottom: 0;
+}
+
+.container a {
+ position: relative;
+ color: #2c2c2c;
+ text-decoration: none;
+}
+
+.container a:before {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ width: 0;
+ height: 2px;
+ background: #2680eb;
+ opacity: 0.5;
+ transition: width 100ms;
+}
+
+.container a:hover:before {
+ width: 100%;
+ transition: width 100ms;
+}
diff --git a/components/WorldMap.module.css b/components/WorldMap.module.css
index c2528038..bf84d697 100644
--- a/components/WorldMap.module.css
+++ b/components/WorldMap.module.css
@@ -1,4 +1,5 @@
.container {
overflow: hidden;
position: relative;
+ background: #fff;
}
diff --git a/lib/db.js b/lib/db.js
index 244a4d2b..8f20b0b5 100644
--- a/lib/db.js
+++ b/lib/db.js
@@ -39,11 +39,12 @@ export async function runQuery(query) {
});
}
-export async function getWebsite(website_uuid) {
+export async function getWebsite({ website_id, website_uuid }) {
return runQuery(
prisma.website.findOne({
where: {
- website_uuid,
+ ...(website_id && { website_id }),
+ ...(website_uuid && { website_uuid }),
},
}),
);
@@ -77,11 +78,12 @@ export async function createSession(website_id, data) {
);
}
-export async function getSession(session_uuid) {
+export async function getSession({ session_id, session_uuid }) {
return runQuery(
prisma.session.findOne({
where: {
- session_uuid,
+ ...(session_id && { session_id }),
+ ...(session_uuid && { session_uuid }),
},
}),
);
diff --git a/lib/session.js b/lib/session.js
index bbd0dd76..53d1c12a 100644
--- a/lib/session.js
+++ b/lib/session.js
@@ -18,13 +18,13 @@ export default async req => {
const country = await getCountry(req, ip);
if (website_uuid) {
- const website = await getWebsite(website_uuid);
+ const website = await getWebsite({ website_uuid });
if (website) {
const { website_id } = website;
const session_uuid = uuid(website_id, hostname, ip, userAgent, os);
- let session = await getSession(session_uuid);
+ let session = await getSession({ session_uuid });
if (!session) {
session = await createSession(website_id, {
diff --git a/pages/api/website/[id]/index.js b/pages/api/website/[id]/index.js
index 0a215219..cb39c63e 100644
--- a/pages/api/website/[id]/index.js
+++ b/pages/api/website/[id]/index.js
@@ -6,7 +6,7 @@ export default async (req, res) => {
const { id } = req.query;
- const website = await getWebsite(id);
+ const website = await getWebsite({ website_id: +id });
return res.status(200).json(website);
};
diff --git a/pages/index.js b/pages/index.js
index 5d71fffa..11e12934 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,26 +1,13 @@
import React from 'react';
-import Link from 'next/link';
import { parse } from 'cookie';
import Layout from 'components/Layout';
-import PageviewsChart from 'components/PageviewsChart';
import { verifySecureToken } from 'lib/crypto';
-import { subDays, endOfDay } from 'date-fns';
import WebsiteList from '../components/WebsiteList';
export default function HomePage({ username }) {
return (
-
-
- Logout 🡒
-
);
}
diff --git a/pages/[id].js b/pages/website/[...id].js
similarity index 64%
rename from pages/[id].js
rename to pages/website/[...id].js
index e9321edd..ede1d709 100644
--- a/pages/[id].js
+++ b/pages/website/[...id].js
@@ -1,15 +1,19 @@
import React from 'react';
import { useRouter } from 'next/router';
import Layout from 'components/Layout';
-import WebsiteDetails from '../components/WebsiteDetails';
+import WebsiteDetails from '../../components/WebsiteDetails';
export default function DetailsPage() {
const router = useRouter();
const { id } = router.query;
+ if (!id) {
+ return null;
+ }
+
return (
-
+
);
}
diff --git a/styles/index.css b/styles/index.css
index 20090acd..aae75718 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -9,6 +9,7 @@ body {
width: 100%;
height: 100%;
box-sizing: border-box;
+ background: #fafafa;
}
*,
@@ -24,8 +25,14 @@ body {
height: 100%;
}
+a,
+a:active,
+a:visited {
+ color: #2680eb;
+}
+
header a {
- color: #000;
+ color: #000 !important;
text-decoration: none;
}
@@ -44,6 +51,14 @@ select {
border-radius: 4px;
}
+main {
+ background: #fff;
+}
+
+.container {
+ padding: 0 20px;
+}
+
.row {
margin-right: 0;
margin-left: 0;