Funnel Table/Chart hooked up.

components/pages/reports/FunnelChart.js

@@ -1,43 +1,40 @@
 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';
 
-export default function FunnelChart() {
+export default function FunnelChart({ data }) {
+  const { formatMessage, labels, messages } = useMessages();
   const funnel = useRef(null);
 
   useEffect(() => {
-    funnel.current.innerHTML = '';
+    if (data && data.length > 0) {
+      funnel.current.innerHTML = '';
 
-    const data = {
-      labels: ['Cv Sent', '1st  Interview', '2nd Interview', '3rd Interview', 'Offer'],
-      subLabels: ['Cv Sent', '1st  Interview', '2nd Interview', '3rd Interview', 'Offer'],
-      colors: [
-        ['#FFB178', '#FF78B1', '#FF3C8E'],
-        ['#FFB178', '#FF78B1', '#FF3C8E'],
-        ['#A0BBFF', '#EC77FF'],
-        ['#A0F9FF', '#7795FF'],
-        ['#FFB178', '#FF78B1', '#FF3C8E'],
-      ],
-      values: [[3500], [3300], [2000], [600], [330]],
-    };
+      const chartData = {
+        labels: data.map(a => a.url),
+        colors: ['#147af3', '#e0f2ff'],
+        values: data.map(a => a.count),
+      };
 
-    const graph = new FunnelGraph({
-      container: '.funnel',
-      gradientDirection: 'horizontal',
-      data: data,
-      displayPercent: true,
-      direction: 'Vertical',
-      width: 1000,
-      height: 350,
-      subLabelValue: 'values',
-    });
+      const graph = new FunnelGraph({
+        container: '.funnel',
+        gradientDirection: 'horizontal',
+        data: chartData,
+        displayPercent: true,
+        direction: 'Vertical',
+        width: 1000,
+        height: 350,
+      });
 
-    graph.draw();
-  }, []);
+      graph.draw();
+    }
+  }, [data]);
 
   return (
-    <div>
-      FunnelChart
-      <div className="funnel" ref={funnel} />
-    </div>
+    <>
+      {data?.length > 0 && <div className="funnel" ref={funnel} />}
+      {data?.length === 0 && <EmptyPlaceholder message={formatMessage(messages.noResultsFound)} />}
+    </>
   );
 }

components/pages/reports/FunnelForm.js

@@ -1,12 +1,8 @@
-import { useMutation } from '@tanstack/react-query';
 import DateFilter from 'components/input/DateFilter';
 import WebsiteSelect from 'components/input/WebsiteSelect';
-import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
-import useUser from 'hooks/useUser';
 import { parseDateRange } from 'lib/date';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import {
   Button,
   Form,
@@ -17,15 +13,15 @@ import {
   TextField,
 } from 'react-basics';
 import styles from './FunnelForm.module.css';
-import { getNextInternalQuery } from 'next/dist/server/request-meta';
 
 export function FunnelForm({ onSearch }) {
-  const { formatMessage, labels, getMessage } = useMessages();
-  const [dateRange, setDateRange] = useState(null);
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
+  const { formatMessage, labels } = useMessages();
+  const [dateRange, setDateRange] = useState('');
+  const [startAt, setStartAt] = useState();
+  const [endAt, setEndAt] = useState();
   const [urls, setUrls] = useState(['']);
   const [websiteId, setWebsiteId] = useState('');
+  const [window, setWindow] = useState(60);
 
   const handleSubmit = async data => {
     onSearch(data);
@@ -35,14 +31,16 @@ export function FunnelForm({ onSearch }) {
     const { startDate, endDate } = parseDateRange(value);
 
     setDateRange(value);
-    setStartDate(startDate);
-    setEndDate(endDate);
+    setStartAt(startDate.getTime());
+    setEndAt(endDate.getTime());
   };
 
-  const handleAddUrl = () => setUrls([...urls, 'meow']);
+  const handleAddUrl = () => setUrls([...urls, '']);
 
   const handleRemoveUrl = i => setUrls(urls.splice(i, 1));
 
+  const handleWindowChange = value => setWindow(value.target.value);
+
   const handleUrlChange = (value, i) => {
     const nextUrls = [...urls];
 
@@ -55,13 +53,14 @@ export function FunnelForm({ onSearch }) {
       <Form
         values={{
           websiteId,
-          startDate,
-          endDate,
+          startAt,
+          endAt,
           urls,
+          window,
         }}
         onSubmit={handleSubmit}
       >
-        <FormRow label="website">
+        <FormRow label={formatMessage(labels.website)}>
           <WebsiteSelect websiteId={websiteId} onSelect={value => setWebsiteId(value)} />
           <FormInput name="websiteId" rules={{ required: formatMessage(labels.required) }}>
             <TextField value={websiteId} className={styles.hiddenInput} />
@@ -73,28 +72,39 @@ export function FunnelForm({ onSearch }) {
             value={dateRange}
             alignment="start"
             onChange={handleDateChange}
+            isF
           />
           <FormInput
-            name="startDate"
+            name="startAt"
             className={styles.hiddenInput}
             rules={{ required: formatMessage(labels.required) }}
           >
-            <TextField value={startDate} />
+            <TextField value={startAt} />
           </FormInput>
-          <FormInput name="endDate" rules={{ required: formatMessage(labels.required) }}>
-            <TextField value={endDate} className={styles.hiddenInput} />
+          <FormInput name="endAt" rules={{ required: formatMessage(labels.required) }}>
+            <TextField value={endAt} className={styles.hiddenInput} />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Window (minutes)">
+          <FormInput
+            name="window"
+            rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
+          >
+            <TextField value={window} onChange={handleWindowChange} />
           </FormInput>
         </FormRow>
         <Button onClick={handleAddUrl}>Add URL</Button>
         {urls.map((a, i) => (
-          <FormRow key={`url${i}`} label={`URL ${i + 1}`}>
-            <Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
+          <FormRow className={styles.urlFormRow} key={`url${i}`} label={`URL ${i + 1}`}>
             <TextField value={urls[i]} onChange={value => handleUrlChange(value, i)} />
+            <Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
           </FormRow>
         ))}
 
         <FormButtons>
-          <SubmitButton variant="primary">Search</SubmitButton>
+          <SubmitButton variant="primary" disabled={false}>
+            Search
+          </SubmitButton>
         </FormButtons>
       </Form>
     </>

components/pages/reports/FunnelForm.module.css

@@ -17,3 +17,12 @@
   min-height: 0px;
   max-height: 0px;
 }
+
+.urlFormRow {
+  flex-direction: row;
+  gap: 0em;
+}
+
+.urlFormRow label {
+  min-width: 80px;
+}

components/pages/reports/FunnelPage.js

@@ -1,26 +1,38 @@
+import { useMutation } from '@tanstack/react-query';
 import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import useApi from 'hooks/useApi';
+import { useState } from 'react';
 import FunnelChart from './FunnelChart';
+import FunnelTable from './FunnelTable';
 import FunnelForm from './FunnelForm';
+import styles from './FunnelPage.module.css';
 
 export default function FunnelPage() {
-  function handleOnSearch() {
+  const { post } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/reports/funnel', data));
+  const [data, setData] = useState();
+
+  function handleOnSearch(data) {
     // do API CALL to api/reports/funnel to get funnelData
     // Get DATA
+    mutate(data, {
+      onSuccess: async data => {
+        setData(data);
+      },
+    });
   }
 
   return (
     <Page>
-      funnelPage
+      <PageHeader title="Funnel Report"></PageHeader>
+      <FunnelChart data={data} />
+      <FunnelTable data={data} />
       {/* <ReportForm /> */}
-      <FunnelForm onSearchClick={handleOnSearch} /> website / start/endDate urls: []
-      <FunnelChart />
-      {/* {!chartLoaded && <Loading icon="dots" style={{ minHeight: 300 }} />}
-      {chartLoaded && (
-        <>
-          {!view && <WebsiteTableView websiteId={websiteId} />}
-          {view && <WebsiteMenuView websiteId={websiteId} />}
-        </>
-      )} */}
+      <div>
+        <h2>Filters</h2>
+        <FunnelForm onSearch={handleOnSearch} />
+      </div>
     </Page>
   );
 }

components/pages/reports/FunnelPage.module.css

@@ -0,0 +1,10 @@
+.filters {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  line-height: 32px;
+  padding: 10px;
+  overflow: hidden;
+}

components/pages/reports/FunnelTable.js

@@ -0,0 +1,17 @@
+import DataTable from 'components/metrics/DataTable';
+import useMessages from 'hooks/useMessages';
+import { useState } from 'react';
+
+export function DevicesTable({ ...props }) {
+  const { formatMessage, labels } = useMessages();
+  const { data } = 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" />;
+}
+
+export default DevicesTable;