Update rankings view.

components/Dropdown.module.css

@@ -1,6 +1,6 @@
 .dropdown {
   position: relative;
-  font-size: 12px;
+  font-size: 14px;
   min-width: 140px;
 }
 
@@ -19,7 +19,7 @@
   border: 1px solid #b3b3b3;
   border-radius: 4px;
   overflow: hidden;
-  z-index: 1;
+  z-index: 2;
 }
 
 .option {

components/PageviewsChart.module.css

@@ -6,7 +6,7 @@
   opacity: 0;
   position: absolute;
   pointer-events: none;
-  z-index: 2;
+  z-index: 1;
 }
 
 .content {

components/RankingsChart.js

@@ -10,12 +10,13 @@ export default function RankingsChart({
   startDate,
   endDate,
   type,
+  heading,
   className,
-  filterData,
+  dataFilter,
 }) {
   const [data, setData] = useState();
 
-  const rankings = useMemo(() => (data && filterData ? filterData(data) : data), [data]);
+  const rankings = useMemo(() => (data && dataFilter ? dataFilter(data) : data), [data]);
 
   const total = useMemo(() => rankings?.reduce((n, { y }) => n + y, 0) || 0, [rankings]);
 
@@ -41,14 +42,17 @@ export default function RankingsChart({
 
   return (
     <div className={classNames(styles.container, className)}>
-      <div className={styles.title}>{title}</div>
+      <div className={styles.header}>
+        <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))}
     </div>
   );
 }
 
 const Row = ({ label, value, total }) => {
-  const props = useSpring({ width: `${(value / total) * 100}%`, from: { width: '0%' } });
+  const props = useSpring({ width: (value / total) * 100, from: { width: 0 } });
   const valueProps = useSpring({ y: value, from: { y: 0 } });
 
   return (
@@ -57,7 +61,10 @@ const Row = ({ label, value, total }) => {
       <animated.div className={styles.value}>
         {valueProps.y.interpolate(y => y.toFixed(0))}
       </animated.div>
-      <animated.div className={styles.bar} style={{ ...props }} />
+      <div className={styles.percent}>
+        <animated.div>{props.width.interpolate(y => `${y.toFixed(0)}%`)}</animated.div>
+        <animated.div className={styles.bar} style={{ ...props }} />
+      </div>
     </div>
   );
 };

components/RankingsChart.module.css

@@ -1,6 +1,24 @@
 .container {
   position: relative;
   min-height: 390px;
+  font-size: 14px;
+}
+
+.header {
+  display: flex;
+  line-height: 40px;
+}
+
+.title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.heading {
+  font-size: 14px;
+  text-align: center;
+  width: 100px;
 }
 
 .row {
@@ -13,25 +31,32 @@
   margin-bottom: 5px;
 }
 
-.title {
-  font-weight: 600;
-  line-height: 40px;
-}
-
 .label {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  flex: 1;
-  z-index: 1;
+  flex: 2;
 }
 
 .value {
+  width: 50px;
   text-align: right;
+  margin-right: 10px;
+  font-weight: 600;
+}
+
+.percent {
+  width: 50px;
+  color: #6e6e6e;
+  position: relative;
+  border-left: 1px solid #6e6e6e;
+  padding-left: 10px;
 }
 
 .bar {
   position: absolute;
+  top: 0;
+  left: 0;
   height: 30px;
   opacity: 0.1;
   background: #2680eb;

components/WebsiteDetails.js

@@ -18,22 +18,54 @@ const deviceFilter = data => {
     (obj, { x, y }) => {
       const [width] = x.split('x');
       if (width >= 1920) {
-        obj.desktop += +y;
+        obj.Desktop += +y;
       } else if (width >= 1024) {
-        obj.laptop += +y;
+        obj.Laptop += +y;
       } else if (width >= 767) {
-        obj.tablet += +y;
+        obj.Tablet += +y;
       } else {
-        obj.mobile += +y;
+        obj.Mobile += +y;
       }
       return obj;
     },
-    { desktop: 0, laptop: 0, tablet: 0, mobile: 0 },
+    { Desktop: 0, Laptop: 0, Tablet: 0, Mobile: 0 },
   );
 
   return Object.keys(devices).map(key => ({ x: key, y: devices[key] }));
 };
 
+const browsers = {
+  aol: 'AOL',
+  edge: 'Edge',
+  'edge-ios': 'Edge (iOS)',
+  yandexbrowser: 'Yandex',
+  kakaotalk: 'KKaoTalk',
+  samsung: 'Samsung',
+  silk: 'Silk',
+  miui: 'MIUI',
+  beaker: 'Beaker',
+  'edge-chromium': 'Edge (Chromium)',
+  chrome: 'Chrome',
+  'chromium-webview': 'Chrome (webview)',
+  phantomjs: 'PhantomJS',
+  crios: 'CriOS',
+  firefox: 'Firefox',
+  fxios: 'Firefox (iOS)',
+  'opera-mini': 'Opera Mini',
+  opera: 'Opera',
+  ie: 'IE',
+  bb10: 'BlackBerry 10',
+  android: 'Android',
+  ios: 'iOS',
+  safari: 'Safari',
+  facebook: 'Facebook',
+  instagram: 'Instagram',
+  'ios-webview': 'iOS (webview)',
+  searchbot: 'Searchbot',
+};
+
+const browserFilter = data => data.map(({ x, y }) => ({ x: browsers[x] || x, y }));
+
 export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
   const [data, setData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
@@ -69,48 +101,54 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
         <RankingsChart
           title="Top URLs"
           type="url"
+          heading="Views"
           className="col-12 col-md-8 col-lg-6"
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
-          filterData={urlFilter}
+          dataFilter={urlFilter}
         />
         <RankingsChart
           title="Top referrers"
           type="referrer"
+          heading="Views"
           className="col-12 col-md-8 col-lg-6"
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
-          filterData={refFilter}
+          dataFilter={refFilter}
         />
       </div>
       <div className={classNames(styles.row, 'row justify-content-between')}>
         <RankingsChart
           title="Browsers"
           type="browser"
+          heading="Visitors"
           className="col-12 col-md-8 col-lg-4"
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
+          dataFilter={browserFilter}
         />
         <RankingsChart
           title="Operating system"
           type="os"
+          heading="Visitors"
           className="col-12 col-md-8 col-lg-4"
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
-          filterData={osFilter}
+          dataFilter={osFilter}
         />
         <RankingsChart
           title="Devices"
           type="screen"
+          heading="Visitors"
           className="col-12 col-md-8 col-lg-4"
           websiteId={data.website_id}
           startDate={startDate}
           endDate={endDate}
-          filterData={deviceFilter}
+          dataFilter={deviceFilter}
         />
       </div>
     </>