Retention report updates.

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);
+}