checkpoint

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

@@ -0,0 +1,118 @@
+import DateFilter from 'components/input/DateFilter';
+import WebsiteSelect from 'components/input/WebsiteSelect';
+import useMessages from 'hooks/useMessages';
+import { parseDateRange } from 'lib/date';
+import { useState } from 'react';
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  SubmitButton,
+  TextField,
+} from 'react-basics';
+import styles from './FunnelForm.module.css';
+
+export function FunnelForm({ onSearch }) {
+  const { formatMessage, labels } = useMessages();
+  const [dateRange, setDateRange] = useState('');
+  const [startAt, setStartAt] = useState();
+  const [endAt, setEndAt] = useState();
+  const [urls, setUrls] = useState(['/', '/docs/getting-started', '/docs/intall']);
+  const [websiteId, setWebsiteId] = useState('');
+  const [window, setWindow] = useState(60);
+
+  const handleSubmit = async data => {
+    onSearch(data);
+  };
+
+  const handleDateChange = value => {
+    const { startDate, endDate } = parseDateRange(value);
+
+    setDateRange(value);
+    setStartAt(startDate.getTime());
+    setEndAt(endDate.getTime());
+  };
+
+  const handleAddUrl = () => setUrls([...urls, '']);
+
+  const handleRemoveUrl = i => {
+    const nextUrls = [...urls];
+    nextUrls.splice(i, 1);
+    setUrls(nextUrls);
+  };
+
+  const handleWindowChange = value => setWindow(value.target.value);
+
+  const handleUrlChange = (value, i) => {
+    const nextUrls = [...urls];
+
+    nextUrls[i] = value.target.value;
+    setUrls(nextUrls);
+  };
+
+  return (
+    <>
+      <Form
+        values={{
+          websiteId,
+          startAt,
+          endAt,
+          urls,
+          window,
+        }}
+        onSubmit={handleSubmit}
+      >
+        <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} />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Date">
+          <DateFilter
+            className={styles.filter}
+            value={dateRange}
+            alignment="start"
+            onChange={handleDateChange}
+            isF
+          />
+          <FormInput
+            name="startAt"
+            className={styles.hiddenInput}
+            rules={{ required: formatMessage(labels.required) }}
+          >
+            <TextField value={startAt} />
+          </FormInput>
+          <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 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" disabled={false}>
+            Query
+          </SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
+  );
+}
+
+export default FunnelForm;

components/pages/reports/funnel/FunnelForm.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/FunnelPage.js

@@ -0,0 +1,38 @@
+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 [formData, setFormData] = useState();
+
+  function handleOnSearch(data) {
+    setFormData(data);
+
+    mutate(data, {
+      onSuccess: async data => {
+        setData(data);
+      },
+    });
+  }
+
+  return (
+    <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/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/funnel/FunnelTable.js

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