checkpoint

components/pages/reports/FunnelChart.js

@@ -1,42 +0,0 @@
-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();
-  const funnel = useRef(null);
-
-  useEffect(() => {
-    if (data && data.length > 0) {
-      funnel.current.innerHTML = '';
-
-      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: chartData,
-        displayPercent: true,
-        direction: 'Vertical',
-        width: 1000,
-        height: 350,
-      });
-
-      graph.draw();
-    }
-  }, [data]);
-
-  return (
-    <>
-      {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

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

components/pages/reports/ReportForm.js

@@ -0,0 +1,28 @@
+import useMessages from 'hooks/useMessages';
+import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from 'react-basics';
+
+export function FunnelForm({ onSearch }) {
+  const { formatMessage, labels } = useMessages();
+
+  const handleSubmit = () => {};
+
+  return (
+    <>
+      <Form onSubmit={handleSubmit}>
+        <FormRow label={formatMessage(labels.website)}>
+          <FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
+            <TextField />
+          </FormInput>
+        </FormRow>
+
+        <FormButtons>
+          <SubmitButton variant="primary" disabled={false}>
+            Save
+          </SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}
+
+export default FunnelForm;

components/pages/reports/ReportForm.module.css

@@ -0,0 +1,23 @@
+.filter {
+  min-width: 200px;
+}
+
+.hiddenInput {
+  max-height: 100px;
+}
+
+.hiddenInput {
+  visibility: hidden;
+  min-height: 0px;
+  max-height: 0px;
+}
+
+.hidden {
+  visibility: hidden;
+  min-height: 0px;
+  max-height: 0px;
+}
+
+.urlFormRow label {
+  min-width: 80px;
+}

components/pages/reports/funnel/FunnelChart.js

@@ -0,0 +1,186 @@
+import Chart from 'chart.js/auto';
+import classNames from 'classnames';
+import { colord } from 'colord';
+import HoverTooltip from 'components/common/HoverTooltip';
+import Legend from 'components/metrics/Legend';
+import useLocale from 'hooks/useLocale';
+import useMessages from 'hooks/useMessages';
+import useTheme from 'hooks/useTheme';
+import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import { dateFormat } from 'lib/date';
+import { formatLongNumber } from 'lib/format';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Loading, StatusLight } from 'react-basics';
+import styles from './FunnelChart.module.css';
+
+export function FunnelChart({
+  data,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  stacked = false,
+  loading = false,
+  onCreate = () => {},
+  onUpdate = () => {},
+  className,
+}) {
+  const { formatMessage, labels } = useMessages();
+  const canvas = useRef();
+  const chart = useRef(null);
+  const [tooltip, setTooltip] = useState(null);
+  const { locale } = useLocale();
+  const [theme] = useTheme();
+
+  const datasets = useMemo(() => {
+    const primaryColor = colord(THEME_COLORS[theme].primary);
+    return [
+      {
+        label: formatMessage(labels.uniqueVisitors),
+        data: data,
+        borderWidth: 1,
+        hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
+        backgroundColor: primaryColor.alpha(0.6).toRgbString(),
+        borderColor: primaryColor.alpha(0.9).toRgbString(),
+        hoverBorderColor: primaryColor.toRgbString(),
+      },
+    ];
+  }, [data]);
+
+  const colors = useMemo(
+    () => ({
+      text: THEME_COLORS[theme].gray700,
+      line: THEME_COLORS[theme].gray200,
+    }),
+    [theme],
+  );
+
+  const renderYLabel = label => {
+    return +label > 1000 ? formatLongNumber(label) : label;
+  };
+
+  const renderTooltip = useCallback(model => {
+    const { opacity, labelColors, dataPoints } = model.tooltip;
+
+    if (!dataPoints?.length || !opacity) {
+      setTooltip(null);
+      return;
+    }
+
+    setTooltip(
+      <div className={styles.tooltip}>
+        <div>
+          <StatusLight color={labelColors?.[0]?.backgroundColor}>
+            <div className={styles.value}>
+              <div>{dataPoints[0].raw.x}</div>
+              <div>{formatLongNumber(dataPoints[0].raw.y)}</div>
+            </div>
+          </StatusLight>
+        </div>
+      </div>,
+    );
+  }, []);
+
+  const getOptions = useCallback(() => {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: {
+        duration: animationDuration,
+        resize: {
+          duration: 0,
+        },
+        active: {
+          duration: 0,
+        },
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        tooltip: {
+          enabled: false,
+          external: renderTooltip,
+        },
+      },
+      scales: {
+        x: {
+          grid: {
+            display: false,
+          },
+          border: {
+            color: colors.line,
+          },
+          ticks: {
+            color: colors.text,
+            autoSkip: false,
+            maxRotation: 0,
+          },
+        },
+        y: {
+          type: 'linear',
+          min: 0,
+          beginAtZero: true,
+          stacked,
+          grid: {
+            color: colors.line,
+          },
+          border: {
+            color: colors.line,
+          },
+          ticks: {
+            color: colors.text,
+            callback: renderYLabel,
+          },
+        },
+      },
+    };
+  }, [animationDuration, renderTooltip, stacked, colors, locale]);
+
+  const createChart = () => {
+    Chart.defaults.font.family = 'Inter';
+
+    const options = getOptions();
+
+    chart.current = new Chart(canvas.current, {
+      type: 'bar',
+      data: { datasets },
+      options,
+    });
+
+    onCreate(chart.current);
+  };
+
+  const updateChart = () => {
+    setTooltip(null);
+
+    chart.current.data.datasets[0].data = datasets[0].data;
+    chart.current.data.datasets[0].label = datasets[0].label;
+
+    chart.current.options = getOptions();
+
+    onUpdate(chart.current);
+
+    chart.current.update();
+  };
+
+  useEffect(() => {
+    if (datasets) {
+      if (!chart.current) {
+        createChart();
+      } else {
+        updateChart();
+      }
+    }
+  }, [datasets, theme, animationDuration, locale]);
+
+  return (
+    <>
+      <div className={classNames(styles.chart, className)}>
+        {loading && <Loading position="page" icon="dots" />}
+        <canvas ref={canvas} />
+      </div>
+      <Legend chart={chart.current} />
+      {tooltip && <HoverTooltip tooltip={tooltip} />}
+    </>
+  );
+}
+
+export default FunnelChart;

components/pages/reports/funnel/FunnelChart.module.css

@@ -0,0 +1,23 @@
+.chart {
+  position: relative;
+  height: 400px;
+  overflow: hidden;
+}
+
+.tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tooltip .value {
+  display: flex;
+  flex-direction: column;
+  text-transform: lowercase;
+}
+
+@media only screen and (max-width: 992px) {
+  .chart {
+    /*height: 200px;*/
+  }
+}

components/pages/reports/funnel/FunnelForm.js

@@ -37,7 +37,11 @@ export function FunnelForm({ onSearch }) {
 
   const handleAddUrl = () => setUrls([...urls, '']);
 
-  const handleRemoveUrl = i => setUrls(urls.splice(i, 1));
+  const handleRemoveUrl = i => {
+    const nextUrls = [...urls];
+    nextUrls.splice(i, 1);
+    setUrls(nextUrls);
+  };
 
   const handleWindowChange = value => setWindow(value.target.value);
 
@@ -103,7 +107,7 @@ export function FunnelForm({ onSearch }) {
 
         <FormButtons>
           <SubmitButton variant="primary" disabled={false}>
-            Search
+            Query
           </SubmitButton>
         </FormButtons>
       </Form>

components/pages/reports/funnel/FunnelForm.module.css

@@ -18,11 +18,6 @@
   max-height: 0px;
 }
 
-.urlFormRow {
-  flex-direction: row;
-  gap: 0em;
-}
-
 .urlFormRow label {
   min-width: 80px;
 }

components/pages/reports/funnel/FunnelPage.js

@@ -1,17 +1,19 @@
 import { useMutation } from '@tanstack/react-query';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
+import ReportsLayout from 'components/layout/ReportsLayout';
 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() {
   const { post } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/reports/funnel', data));
-  const [data, setData] = useState();
+  const [data, setData] = useState([{}]);
   const [formData, setFormData] = useState();
 
   function handleOnSearch(data) {
@@ -25,14 +27,12 @@ export default function FunnelPage() {
   }
 
   return (
-    <Page>
-      <PageHeader title="Funnel Report"></PageHeader>
-      <FunnelChart data={data} />
-      <FunnelTable data={data} />
-      <div>
-        <h2>Filters</h2>
-        <FunnelForm onSearch={handleOnSearch} />
-      </div>
-    </Page>
+    <ReportsLayout filter={<FunnelForm onSearch={handleOnSearch} />} header={'test'}>
+      <Page>
+        <PageHeader title="Funnel Report"></PageHeader>
+        <FunnelChart data={data} />
+        <FunnelTable data={data} />
+      </Page>
+    </ReportsLayout>
   );
 }

components/pages/reports/funnel/FunnelTable.js

@@ -1,13 +1,12 @@
 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 })) || [];
+    data?.map(a => ({ x: a.x, y: a.y, z: Math.floor(a.y / data[0].y) * 100 })) || [];
 
   return <DataTable data={tableData} title="Url" type="device" />;
 }