From b5f84159d2925bb05585f62200c7593aa91f8194 Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Mon, 15 May 2023 14:03:42 -0700
Subject: [PATCH] funnel checkpoint

---
 components/pages/reports/FunnelChart.js         |  4 +++-
 components/pages/reports/FunnelChart.module.css |  7 +++++++
 components/pages/reports/FunnelForm.js          |  2 +-
 components/pages/reports/FunnelPage.js          |  6 +++---
 components/pages/reports/FunnelTable.js         |  2 --
 components/pages/reports/ReportDropdown.js      |  0
 components/pages/reports/ReportForm.js          |  0
 queries/analytics/pageview/getPageviewFunnel.ts | 12 +++++++-----
 8 files changed, 21 insertions(+), 12 deletions(-)
 create mode 100644 components/pages/reports/FunnelChart.module.css
 create mode 100644 components/pages/reports/ReportDropdown.js
 create mode 100644 components/pages/reports/ReportForm.js

diff --git a/components/pages/reports/FunnelChart.js b/components/pages/reports/FunnelChart.js
index 8739e1da..ec03acab 100644
--- a/components/pages/reports/FunnelChart.js
+++ b/components/pages/reports/FunnelChart.js
@@ -2,6 +2,8 @@ import FunnelGraph from 'funnel-graph-js/dist/js/funnel-graph';
 import { useEffect, useRef } from 'react';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import useMessages from 'hooks/useMessages';
+import styles from './FunnelChart.module.css';
+import classNames from 'classnames';
 
 export default function FunnelChart({ data }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -33,7 +35,7 @@ export default function FunnelChart({ data }) {
 
   return (
     <>
-      {data?.length > 0 && <div className="funnel" ref={funnel} />}
+      {data?.length > 0 && <div className={classNames(styles.funnel, 'funnel')} ref={funnel} />}
       {data?.length === 0 && <EmptyPlaceholder message={formatMessage(messages.noResultsFound)} />}
     </>
   );
diff --git a/components/pages/reports/FunnelChart.module.css b/components/pages/reports/FunnelChart.module.css
new file mode 100644
index 00000000..1d7eb37e
--- /dev/null
+++ b/components/pages/reports/FunnelChart.module.css
@@ -0,0 +1,7 @@
+.funnel div {
+  color: var(--font-color100) !important;
+}
+
+.funnel svg {
+  max-width: 100%;
+}
diff --git a/components/pages/reports/FunnelForm.js b/components/pages/reports/FunnelForm.js
index 56be6732..5f9758f0 100644
--- a/components/pages/reports/FunnelForm.js
+++ b/components/pages/reports/FunnelForm.js
@@ -19,7 +19,7 @@ export function FunnelForm({ onSearch }) {
   const [dateRange, setDateRange] = useState('');
   const [startAt, setStartAt] = useState();
   const [endAt, setEndAt] = useState();
-  const [urls, setUrls] = useState(['']);
+  const [urls, setUrls] = useState(['/', '/docs/getting-started', '/docs/intall']);
   const [websiteId, setWebsiteId] = useState('');
   const [window, setWindow] = useState(60);
 
diff --git a/components/pages/reports/FunnelPage.js b/components/pages/reports/FunnelPage.js
index c715d857..b69319b1 100644
--- a/components/pages/reports/FunnelPage.js
+++ b/components/pages/reports/FunnelPage.js
@@ -12,10 +12,11 @@ export default function FunnelPage() {
   const { post } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/reports/funnel', data));
   const [data, setData] = useState();
+  const [formData, setFormData] = useState();
 
   function handleOnSearch(data) {
-    // do API CALL to api/reports/funnel to get funnelData
-    // Get DATA
+    setFormData(data);
+
     mutate(data, {
       onSuccess: async data => {
         setData(data);
@@ -28,7 +29,6 @@ export default function FunnelPage() {
       <PageHeader title="Funnel Report"></PageHeader>
       <FunnelChart data={data} />
       <FunnelTable data={data} />
-      {/* <ReportForm /> */}
       <div>
         <h2>Filters</h2>
         <FunnelForm onSearch={handleOnSearch} />
diff --git a/components/pages/reports/FunnelTable.js b/components/pages/reports/FunnelTable.js
index fa40fd13..036e20c3 100644
--- a/components/pages/reports/FunnelTable.js
+++ b/components/pages/reports/FunnelTable.js
@@ -9,8 +9,6 @@ export function DevicesTable({ ...props }) {
   const tableData =
     data?.map(a => ({ x: a.url, y: a.count, z: (a.count / data[0].count) * 100 })) || [];
 
-  console.log(tableData);
-
   return <DataTable data={tableData} title="Url" type="device" />;
 }
 
diff --git a/components/pages/reports/ReportDropdown.js b/components/pages/reports/ReportDropdown.js
new file mode 100644
index 00000000..e69de29b
diff --git a/components/pages/reports/ReportForm.js b/components/pages/reports/ReportForm.js
new file mode 100644
index 00000000..e69de29b
diff --git a/queries/analytics/pageview/getPageviewFunnel.ts b/queries/analytics/pageview/getPageviewFunnel.ts
index d80a681c..591310cf 100644
--- a/queries/analytics/pageview/getPageviewFunnel.ts
+++ b/queries/analytics/pageview/getPageviewFunnel.ts
@@ -74,7 +74,7 @@ async function clickhouseQuery(
   {
     level: number;
     url: string;
-    count: any;
+    count: number;
   }[]
 > {
   const { windowMinutes, startDate, endDate, urls } = criteria;
@@ -108,9 +108,11 @@ async function clickhouseQuery(
     ORDER BY level ASC;
     `,
     params,
-  ).then(a => {
-    return a
-      .filter(b => b.level !== 0)
-      .map((c, i) => ({ level: c.level, url: urls[i], count: c.count }));
+  ).then(results => {
+    return urls.map((a, i) => ({
+      level: i + 1,
+      url: a,
+      count: results[i + 1]?.count || 0,
+    }));
   });
 }