Refactored funnel report. Made BarChart more generic.

components/pages/reports/funnel/FunnelReport.js

@@ -7,21 +7,35 @@ import ReportMenu from '../ReportMenu';
 import ReportBody from '../ReportBody';
 import Funnel from 'assets/funnel.svg';
 import { useReport } from 'hooks';
+import useApi from 'hooks/useApi';
 
 export default function FunnelReport({ reportId }) {
-  const report = useReport(reportId);
+  const report = useReport(reportId, { window: 60, urls: ['/', '/docs'] });
+  const { post, useQuery } = useApi();
+  const { data, isLoading, error } = useQuery(
+    ['report:funnel', report?.update],
+    () => {
+      const { websiteId, parameters } = report || {};
 
-  console.log('REPORT', { report });
+      return post(`/reports/funnel`, {
+        websiteId: websiteId,
+        ...parameters,
+        startAt: +parameters.dateRange.startDate,
+        endAt: +parameters.dateRange.endDate,
+      });
+    },
+    { enabled: !!report?.update },
+  );
 
   return (
-    <Report>
+    <Report error={error} loading={data && isLoading}>
       <ReportHeader icon={<Funnel />} report={report} />
       <ReportMenu>
         <FunnelParameters report={report} />
       </ReportMenu>
       <ReportBody>
-        <FunnelChart report={report} />
-        <FunnelTable report={report} />
+        <FunnelChart report={report} data={data} />
+        <FunnelTable data={data} />
       </ReportBody>
     </Report>
   );