From 820ad69d608729a2f17684214014b0261e18bd36 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sat, 12 Aug 2023 20:13:11 -0700 Subject: [PATCH] Retention report updates. --- assets/magnet.svg | 1 + components/icons.ts | 2 + components/pages/reports/ReportTemplates.js | 5 +- .../pages/reports/ReportTemplates.module.css | 1 - .../reports/retention/RetentionReport.js | 7 +-- .../pages/reports/retention/RetentionTable.js | 52 +++++++++++++++++-- .../retention/RetentionTable.module.css | 28 ++++++++++ 7 files changed, 86 insertions(+), 10 deletions(-) create mode 100644 assets/magnet.svg create mode 100644 components/pages/reports/retention/RetentionTable.module.css diff --git a/assets/magnet.svg b/assets/magnet.svg new file mode 100644 index 00000000..3c64c3ee --- /dev/null +++ b/assets/magnet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/icons.ts b/components/icons.ts index e42b15fe..01d7caf5 100644 --- a/components/icons.ts +++ b/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, diff --git a/components/pages/reports/ReportTemplates.js b/components/pages/reports/ReportTemplates.js index 1de7de9c..0f5e710d 100644 --- a/components/pages/reports/ReportTemplates.js +++ b/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: , + icon: , }, ]; diff --git a/components/pages/reports/ReportTemplates.module.css b/components/pages/reports/ReportTemplates.module.css index 33183505..0cdcb835 100644 --- a/components/pages/reports/ReportTemplates.module.css +++ b/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 { diff --git a/components/pages/reports/retention/RetentionReport.js b/components/pages/reports/retention/RetentionReport.js index 333496d8..63eea44c 100644 --- a/components/pages/reports/retention/RetentionReport.js +++ b/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 ( - } /> + } /> diff --git a/components/pages/reports/retention/RetentionTable.js b/components/pages/reports/retention/RetentionTable.js index 35d55a64..7d0f2522 100644 --- a/components/pages/reports/retention/RetentionTable.js +++ b/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 ; + } + + const dates = data.reduce((arr, { date }) => { + if (!arr.includes(date)) { + return arr.concat(date); + } + return arr; + }, []); + + const days = Array(14).fill(null); return ( - + <> +
+
+ {days.map((n, i) => ( +
+ Day {i} +
+ ))} +
+ {dates.map((date, i) => { + return ( +
+ {days.map((n, day) => { + return ( +
+ {data.find(row => row.date === date && row.day === day)?.percentage.toFixed(2)} +
+ ); + })} +
+ ); + })} +
+ + + ); +} + +function DataTable({ data }) { + return ( + {row => row.date} {row => row.day} - + {row => row.visitors} diff --git a/components/pages/reports/retention/RetentionTable.module.css b/components/pages/reports/retention/RetentionTable.module.css new file mode 100644 index 00000000..785582a0 --- /dev/null +++ b/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); +}