Funnel Table/Chart hooked up.

components/input/DateFilter.js

@@ -9,7 +9,7 @@ import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import useMessages from 'hooks/useMessages';
 
-export function DateFilter({ websiteId, value, className, onChange, isForm, alignment }) {
+export function DateFilter({ websiteId, value, className, onChange, alignment }) {
   const { formatMessage, labels } = useMessages();
   const { get } = useApi();
   const [dateRange, setDateRange] = useDateRange(websiteId);
@@ -23,7 +23,7 @@ export function DateFilter({ websiteId, value, className, onChange, isForm, alig
       if (data) {
         const websiteRange = { value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) };
 
-        if (!isForm) {
+        if (!onChange) {
           setDateRange(websiteRange);
         }
 
@@ -32,15 +32,13 @@ export function DateFilter({ websiteId, value, className, onChange, isForm, alig
         }
       }
     } else if (value !== 'all') {
-      if (!isForm) {
+      if (!onChange) {
         setDateRange(value);
       }
 
       if (onChange) {
         onChange(value);
       }
-
-      console.log(value);
     }
   }
 

components/layout/SettingsLayout.js

@@ -15,6 +15,7 @@ export function SettingsLayout({ children }) {
   const items = [
     { key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
     { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
+    { key: 'reports', label: 'Reports', url: '/settings/reports/funnel' },
     user.isAdmin && { key: 'users', label: formatMessage(labels.users), url: '/settings/users' },
     { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
   ].filter(n => n);

components/messages.js

@@ -18,7 +18,9 @@ export const labels = defineMessages({
   admin: { id: 'label.admin', defaultMessage: 'Administrator' },
   confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
   details: { id: 'label.details', defaultMessage: 'Details' },
+  website: { id: 'label.website', defaultMessage: 'Website' },
   websites: { id: 'label.websites', defaultMessage: 'Websites' },
+  reports: { id: 'label.reports', defaultMessage: 'Reports' },
   created: { id: 'label.created', defaultMessage: 'Created' },
   edit: { id: 'label.edit', defaultMessage: 'Edit' },
   name: { id: 'label.name', defaultMessage: 'Name' },
@@ -183,6 +185,10 @@ export const messages = defineMessages({
     id: 'message.delete-website-warning',
     defaultMessage: 'All website data will be deleted.',
   },
+  noResultsFound: {
+    id: 'messages.no-results-found',
+    defaultMessage: 'No results were found.',
+  },
   noWebsitesConfigured: {
     id: 'messages.no-websites-configured',
     defaultMessage: 'You do not have any websites configured.',

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;

db/postgresql/schema.prisma

@@ -17,9 +17,9 @@ model User {
   updatedAt DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
   deletedAt DateTime? @map("deleted_at") @db.Timestamptz(6)
 
-  website        Website[]
-  teamUser       TeamUser[]
-  ReportTemplate UserReport[]
+  website  Website[]
+  teamUser TeamUser[]
+  Report   Report[]
 
   @@map("user")
 }
@@ -60,6 +60,7 @@ model Website {
   user        User?         @relation(fields: [userId], references: [id])
   teamWebsite TeamWebsite[]
   eventData   EventData[]
+  Report      Report[]
 
   @@index([userId])
   @@index([createdAt])
@@ -156,18 +157,21 @@ model TeamWebsite {
   @@map("team_website")
 }
 
-model UserReport {
-  id           String    @id() @unique() @map("report_id") @db.Uuid
-  userId       String    @map("user_id") @db.Uuid
-  websiteId    String    @map("website_id") @db.Uuid
-  reportName   String    @map("report_name") @db.VarChar(200)
-  templateName String    @map("template_name") @db.VarChar(200)
-  parameters   String    @map("parameters") @db.VarChar(6000)
-  createdAt    DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
-  updatedAt    DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
+model Report {
+  id          String    @id() @unique() @map("report_id") @db.Uuid
+  userId      String    @map("user_id") @db.Uuid
+  websiteId   String    @map("website_id") @db.Uuid
+  type        String    @map("type") @db.VarChar(200)
+  name        String    @map("name") @db.VarChar(200)
+  description String    @map("description") @db.VarChar(500)
+  parameters  String    @map("parameters") @db.VarChar(6000)
+  createdAt   DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
+  updatedAt   DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
 
-  user User @relation(fields: [userId], references: [id])
+  user    User    @relation(fields: [userId], references: [id])
+  website Website @relation(fields: [websiteId], references: [id])
 
   @@index([userId])
-  @@map("user_report")
+  @@index([websiteId])
+  @@map("report")
 }

pages/api/reports/funnel.ts

@@ -40,7 +40,7 @@ export default async (
       startDate,
       endDate,
       urls,
-      windowMinutes: window,
+      windowMinutes: +window,
     });
 
     return ok(res, data);

pages/settings/reports/funnel.js

@@ -0,0 +1,16 @@
+import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
+import FunnelPage from 'components/pages/reports/FunnelPage';
+import useMessages from 'hooks/useMessages';
+
+export default function DetailsPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.reports)}`}>
+      <SettingsLayout>
+        <FunnelPage />
+      </SettingsLayout>
+    </AppLayout>
+  );
+}

pages/settings/reports/index.js

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 import AppLayout from 'components/layout/AppLayout';
 import FunnelPage from 'components/pages/reports/FunnelPage';
 import useMessages from 'hooks/useMessages';
+import SettingsLayout from 'components/layout/SettingsLayout';
 
 export default function DetailsPage() {
   //   const { formatMessage, labels } = useMessages();
@@ -15,8 +16,10 @@ export default function DetailsPage() {
   //   return <AppLayout title={formatMessage(labels.websites)}>{/* <FunnelPage /> */}</AppLayout>;
 
   return (
-    <div>
-      <FunnelPage />
-    </div>
+    <AppLayout>
+      <SettingsLayout>
+        <FunnelPage />
+      </SettingsLayout>
+    </AppLayout>
   );
 }