Retention report updates.

assets/magnet.svg

@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 508.467 508.467" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m426.815 239.006c-11.722-11.724-30.702-11.729-42.427-.001-65.928 65.929 49.291-49.292-116.718 116.718-53.811 53.809-142.478 19.197-140.68-54.511.547-22.415 9.826-43.738 26.129-60.041l116.717-116.717c11.724-11.722 11.728-30.702 0-42.427l-46.668-46.669c-11.725-11.725-30.702-11.726-42.427 0-16.642 16.643-102.078 102.078-120.112 120.112-39.05 39.05-60.582 90.97-60.629 146.195-.093 110.827 88.182 206.288 206.244 206.394 56.778 0 109.204-21.924 148.29-61.01l118.948-118.948c11.724-11.722 11.728-30.702 0-42.427zm-224.861-182.434 46.669 46.669-58.455 58.456-46.669-46.669zm131.367 369.264c-69.043 69.043-182.868 70.02-251.708.933-68.763-69.009-68.66-181.196.229-250.086l40.443-40.443 46.669 46.669-37.049 37.049c-45.115 45.112-46.916 116.85-3.395 160.371 43.279 43.279 115.221 41.756 160.372-3.394l37.049-37.049 46.669 46.669zm60.494-60.493-46.669-46.669 58.456-58.456 46.669 46.669z"/><path d="m379.357 95.099c15.199 3.839 30.418 19.07 34.336 34.192 2.089 8.058 10.303 12.828 18.283 10.758 8.02-2.078 12.836-10.264 10.758-18.283-6.651-25.662-30.176-49.223-56.03-55.753-8.032-2.027-16.188 2.838-18.217 10.869-2.029 8.032 2.837 16.189 10.87 18.217z"/><path d="m507.984 102.124c-12.016-46.375-55.215-89.504-101.745-101.256-8.032-2.027-16.188 2.838-18.217 10.869-2.029 8.032 2.838 16.188 10.87 18.217 35.882 9.063 70.769 43.871 80.051 79.695 2.088 8.058 10.304 12.828 18.283 10.758 8.02-2.078 12.836-10.263 10.758-18.283z"/></g></svg>

components/icons.ts

@@ -11,6 +11,7 @@ import Gear from 'assets/gear.svg';
 import Globe from 'assets/globe.svg';
 import Lock from 'assets/lock.svg';
 import Logo from 'assets/logo.svg';
+import Magnet from 'assets/magnet.svg';
 import Moon from 'assets/moon.svg';
 import Nodes from 'assets/nodes.svg';
 import Overview from 'assets/overview.svg';
@@ -35,6 +36,7 @@ const icons = {
   Globe,
   Lock,
   Logo,
+  Magnet,
   Moon,
   Nodes,
   Overview,

components/pages/reports/ReportTemplates.js

@@ -4,6 +4,7 @@ import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import Funnel from 'assets/funnel.svg';
 import Lightbulb from 'assets/lightbulb.svg';
+import Magnet from 'assets/magnet.svg';
 import styles from './ReportTemplates.module.css';
 import { useMessages } from 'hooks';
 
@@ -47,9 +48,9 @@ export function ReportTemplates() {
     },
     {
       title: formatMessage(labels.retention),
-      description: 'Track your websites user retention',
+      description: 'Measure you website stickiness by tracking how often users return.',
       url: '/reports/retention',
-      icon: <Funnel />,
+      icon: <Magnet />,
     },
   ];
 

components/pages/reports/ReportTemplates.module.css

@@ -2,7 +2,6 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
   gap: 20px;
-  width: 360px;
 }
 
 .report {

components/pages/reports/retention/RetentionReport.js

@@ -4,17 +4,18 @@ import Report from '../Report';
 import ReportHeader from '../ReportHeader';
 import ReportMenu from '../ReportMenu';
 import ReportBody from '../ReportBody';
-import Funnel from 'assets/funnel.svg';
+import Magnet from 'assets/magnet.svg';
+import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
-  type: 'retention',
+  type: REPORT_TYPES.retention,
   parameters: {},
 };
 
 export default function RetentionReport({ reportId }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Funnel />} />
+      <ReportHeader icon={<Magnet />} />
       <ReportMenu>
         <RetentionParameters />
       </ReportMenu>

components/pages/reports/retention/RetentionTable.js

@@ -1,21 +1,65 @@
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
-import { useMessages } from 'hooks';
 import { ReportContext } from '../Report';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import styles from './RetentionTable.module.css';
 
 export function RetentionTable() {
   const { report } = useContext(ReportContext);
-  const { formatMessage, labels } = useMessages();
+  const { data } = report || {};
+
+  if (!data) {
+    return <EmptyPlaceholder />;
+  }
+
+  const dates = data.reduce((arr, { date }) => {
+    if (!arr.includes(date)) {
+      return arr.concat(date);
+    }
+    return arr;
+  }, []);
+
+  const days = Array(14).fill(null);
 
   return (
-    <GridTable data={report?.data || []}>
+    <>
+      <div className={styles.table}>
+        <div className={styles.row}>
+          {days.map((n, i) => (
+            <div key={i} className={styles.header}>
+              Day {i}
+            </div>
+          ))}
+        </div>
+        {dates.map((date, i) => {
+          return (
+            <div key={i} className={styles.row}>
+              {days.map((n, day) => {
+                return (
+                  <div key={day} className={styles.cell}>
+                    {data.find(row => row.date === date && row.day === day)?.percentage.toFixed(2)}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+      <DataTable data={data} />
+    </>
+  );
+}
+
+function DataTable({ data }) {
+  return (
+    <GridTable data={data || []}>
       <GridColumn name="date" label={'Date'}>
         {row => row.date}
       </GridColumn>
       <GridColumn name="day" label={'Day'}>
         {row => row.day}
       </GridColumn>
-      <GridColumn name="visitors" label={formatMessage(labels.visitors)}>
+      <GridColumn name="visitors" label={'Visitors'}>
         {row => row.visitors}
       </GridColumn>
       <GridColumn name="returnVisitors" label={'Return Visitors'}>

components/pages/reports/retention/RetentionTable.module.css

@@ -0,0 +1,28 @@
+.table {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  width: 60px;
+  height: 40px;
+  text-align: center;
+  font-size: var(--font-size-sm);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  margin-bottom: 1px;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  background: var(--blue100);
+  border-radius: var(--border-radius);
+}