Updated rankings styling and filters.

components/Dropdown.module.css

@@ -5,7 +5,7 @@
 }
 
 .value {
-  padding: 4px 24px 4px 8px;
+  padding: 4px 32px 4px 16px;
   border: 1px solid #b3b3b3;
   border-radius: 4px;
   cursor: pointer;
@@ -24,12 +24,12 @@
 
 .option {
   background: #fff;
-  padding: 4px 8px;
+  padding: 4px 16px;
   cursor: pointer;
 }
 
 .option:hover {
-  background: #eaeaea;
+  background: #f5f5f5;
 }
 
 .caret {
@@ -41,6 +41,6 @@
   transform: rotate(45deg);
   top: -4px;
   bottom: 0;
-  right: 8px;
+  right: 12px;
   margin: auto;
 }

components/RankingsChart.js

@@ -16,7 +16,12 @@ export default function RankingsChart({
 }) {
   const [data, setData] = useState();
 
-  const rankings = useMemo(() => (data && dataFilter ? dataFilter(data) : data), [data]);
+  const rankings = useMemo(() => {
+    if (data) {
+      return (dataFilter ? dataFilter(data) : data).filter((e, i) => i < 10);
+    }
+    return [];
+  }, [data]);
 
   const total = useMemo(() => rankings?.reduce((n, { y }) => n + y, 0) || 0, [rankings]);
 
@@ -46,13 +51,16 @@ export default function RankingsChart({
         <div className={styles.title}>{title}</div>
         <div className={styles.heading}>{heading}</div>
       </div>
-      {rankings.map(({ x, y }, i) => (i <= 10 ? <Row label={x} value={y} total={total} /> : null))}
+      {rankings.map(({ x, y }) => (
+        <Row key={x} label={x} value={y} total={total} />
+      ))}
     </div>
   );
 }
 
 const Row = ({ label, value, total }) => {
-  const props = useSpring({ width: (value / total) * 100, from: { width: 0 } });
+  const pct = total ? (value / total) * 100 : 0;
+  const props = useSpring({ width: pct, from: { width: 0 } });
   const valueProps = useSpring({ y: value, from: { y: 0 } });
 
   return (

components/RankingsChart.module.css

@@ -1,7 +1,19 @@
 .container {
   position: relative;
-  min-height: 390px;
+  min-height: 430px;
   font-size: 14px;
+  border-left: 1px solid #e1e1e1;
+  border-top: 1px solid #e1e1e1;
+  padding: 20px;
+}
+
+.container:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+
+.container:last-child {
+  padding-right: 0;
 }
 
 .header {
@@ -29,6 +41,7 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 5px;
+  overflow: hidden;
 }
 
 .label {
@@ -38,6 +51,14 @@
   flex: 2;
 }
 
+.label:empty {
+  color: #b3b3b3;
+}
+
+.label:empty:before {
+  content: 'Unknown';
+}
+
 .value {
   width: 50px;
   text-align: right;
@@ -49,7 +70,7 @@
   width: 50px;
   color: #6e6e6e;
   position: relative;
-  border-left: 1px solid #6e6e6e;
+  border-left: 1px solid #8e8e8e;
   padding-left: 10px;
 }
 
@@ -60,4 +81,5 @@
   height: 30px;
   opacity: 0.1;
   background: #2680eb;
+  z-index: -1;
 }

components/WebsiteDetails.js

@@ -6,7 +6,8 @@ import RankingsChart from './RankingsChart';
 import { getDateRange } from '../lib/date';
 import styles from './WebsiteDetails.module.css';
 
-const osFilter = data => data.map(({ x, y }) => ({ x: !x ? 'Unknown' : x, y }));
+const pageviewClasses = 'col-md-12 col-lg-6';
+const sessionClasses = 'col-12 col-lg-4';
 
 const urlFilter = data => data.filter(({ x }) => x !== '' && !x.startsWith('#'));
 
@@ -48,7 +49,7 @@ const browsers = {
   chrome: 'Chrome',
   'chromium-webview': 'Chrome (webview)',
   phantomjs: 'PhantomJS',
-  crios: 'CriOS',
+  crios: 'Chrome (iOS)',
   firefox: 'Firefox',
   fxios: 'Firefox (iOS)',
   'opera-mini': 'Opera Mini',
@@ -92,7 +93,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   return (
     <>
       <div className="row">
-        <div className="col">
+        <div className={classNames(styles.chart, 'col')}>
           <h1>{data.label}</h1>
           <WebsiteChart websiteId={data.website_id} onDateChange={handleDateChange} />
         </div>
@@ -102,7 +103,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
           title="Top URLs"
           type="url"
           heading="Views"
-          className="col-12 col-md-8 col-lg-6"
+          className={pageviewClasses}
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
@@ -112,7 +113,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
           title="Top referrers"
           type="referrer"
           heading="Views"
-          className="col-12 col-md-8 col-lg-6"
+          className={pageviewClasses}
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
@@ -124,7 +125,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
           title="Browsers"
           type="browser"
           heading="Visitors"
-          className="col-12 col-md-8 col-lg-4"
+          className={sessionClasses}
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
@@ -134,17 +135,16 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
           title="Operating system"
           type="os"
           heading="Visitors"
-          className="col-12 col-md-8 col-lg-4"
+          className={sessionClasses}
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
-          dataFilter={osFilter}
         />
         <RankingsChart
           title="Devices"
           type="screen"
           heading="Visitors"
-          className="col-12 col-md-8 col-lg-4"
+          className={sessionClasses}
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}

components/WebsiteDetails.module.css

@@ -1,3 +1,3 @@
-.row {
-  margin: 20px 0;
+.chart {
+  margin-bottom: 30px;
 }