funnel checkpoint

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

components/pages/reports/FunnelChart.module.css

@@ -0,0 +1,7 @@
+.funnel div {
+  color: var(--font-color100) !important;
+}
+
+.funnel svg {
+  max-width: 100%;
+}

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

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} />

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" />;
 }
 

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