Refactored funnel report. Made BarChart more generic.

components/common/HoverTooltip.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Tooltip } from 'react-basics';
 import styles from './HoverTooltip.module.css';
 
-export function HoverTooltip({ tooltip }) {
+export function HoverTooltip({ children }) {
   const [position, setPosition] = useState({ x: -1000, y: -1000 });
 
   useEffect(() => {
@@ -18,8 +18,8 @@ export function HoverTooltip({ tooltip }) {
   }, []);
 
   return (
-    <div className={styles.tooltip} style={{ left: position.x, top: position.y }}>
-      <Tooltip position="top" action="none" label={tooltip} />
+    <div className={styles.tooltip} style={{ left: position.x, top: position.y - 16 }}>
+      <Tooltip position="top" action="none" label={children} />
     </div>
   );
 }

components/common/WorldMap.js

@@ -15,7 +15,7 @@ import styles from './WorldMap.module.css';
 export function WorldMap({ data, className }) {
   const { basePath } = useRouter();
   const [tooltip, setTooltip] = useState();
-  const [theme] = useTheme();
+  const { theme } = useTheme();
   const colors = useMemo(
     () => ({
       baseColor: THEME_COLORS[theme].primary,

components/input/LanguageButton.js

@@ -9,9 +9,9 @@ export function LanguageButton() {
   const { locale, saveLocale, dir } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
-  function handleSelect(value) {
-    //saveLocale(value);
-    console.log('WTFFFF');
+  function handleSelect(value, close) {
+    saveLocale(value);
+    close();
   }
 
   return (
@@ -22,24 +22,28 @@ export function LanguageButton() {
         </Icon>
       </Button>
       <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
-        <div className={styles.menu}>
-          {items.map(({ value, label }) => {
-            return (
-              <div
-                key={value}
-                className={classNames(styles.item, { [styles.selected]: value === locale })}
-                onClick={handleSelect.bind(null, value)}
-              >
-                <Text>{label}</Text>
-                {value === locale && (
-                  <Icon className={styles.icon}>
-                    <Icons.Check />
-                  </Icon>
-                )}
-              </div>
-            );
-          })}
-        </div>
+        {close => {
+          return (
+            <div className={styles.menu}>
+              {items.map(({ value, label }) => {
+                return (
+                  <div
+                    key={value}
+                    className={classNames(styles.item, { [styles.selected]: value === locale })}
+                    onClick={handleSelect.bind(null, value, close)}
+                  >
+                    <Text>{label}</Text>
+                    {value === locale && (
+                      <Icon className={styles.icon}>
+                        <Icons.Check />
+                      </Icon>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        }}
       </Popup>
     </PopupTrigger>
   );

components/input/ThemeButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import styles from './ThemeButton.module.css';
 
 export function ThemeButton() {
-  const [theme, setTheme] = useTheme();
+  const { theme, saveTheme } = useTheme();
 
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
@@ -21,7 +21,7 @@ export function ThemeButton() {
   });
 
   function handleClick() {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    saveTheme(theme === 'light' ? 'dark' : 'light');
   }
 
   return (

components/messages.js

@@ -123,7 +123,11 @@ export const labels = defineMessages({
   reports: { id: 'label.reports', defaultMessage: 'Reports' },
   eventData: { id: 'label.event-data', defaultMessage: 'Event data' },
   funnel: { id: 'label.funnel', defaultMessage: 'Funnel' },
+  url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
+  add: { id: 'label.add', defaultMessage: 'Add' },
+  window: { id: 'label.window', defaultMessage: 'Window' },
+  addUrl: { id: 'label.add-url', defaultMessage: 'Add URL' },
 });
 
 export const messages = defineMessages({

components/metrics/BarChart.js

@@ -1,102 +1,39 @@
-import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { StatusLight, Loading } from 'react-basics';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Loading } from 'react-basics';
 import classNames from 'classnames';
 import Chart from 'chart.js/auto';
 import HoverTooltip from 'components/common/HoverTooltip';
 import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
-import { dateFormat } from 'lib/date';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
-import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import styles from './BarChart.module.css';
 
+function defaultRenderYLabel(label) {
+  return +label > 1000 ? formatLongNumber(label) : label;
+}
+
 export function BarChart({
   datasets,
   unit,
   animationDuration = DEFAULT_ANIMATION_DURATION,
   stacked = false,
   loading = false,
-  onCreate = () => {},
-  onUpdate = () => {},
+  renderXLabel,
+  renderYLabel,
+  XAxisType = 'time',
+  YAxisType = 'linear',
+  renderTooltip,
+  onCreate,
+  onUpdate,
   className,
 }) {
   const canvas = useRef();
   const chart = useRef(null);
   const [tooltip, setTooltip] = useState(null);
   const { locale } = useLocale();
-  const [theme] = useTheme();
-
-  const colors = useMemo(
-    () => ({
-      text: THEME_COLORS[theme].gray700,
-      line: THEME_COLORS[theme].gray200,
-    }),
-    [theme],
-  );
-
-  const renderYLabel = label => {
-    return +label > 1000 ? formatLongNumber(label) : label;
-  };
-
-  const renderXLabel = useCallback(
-    (label, index, values) => {
-      const d = new Date(values[index].value);
-
-      switch (unit) {
-        case 'minute':
-          return dateFormat(d, 'h:mm', locale);
-        case 'hour':
-          return dateFormat(d, 'p', locale);
-        case 'day':
-          return dateFormat(d, 'MMM d', locale);
-        case 'month':
-          return dateFormat(d, 'MMM', locale);
-        case 'year':
-          return dateFormat(d, 'YYY', locale);
-        default:
-          return label;
-      }
-    },
-    [locale, unit],
-  );
-
-  const renderTooltip = useCallback(
-    model => {
-      const { opacity, labelColors, dataPoints } = model.tooltip;
-
-      if (!dataPoints?.length || !opacity) {
-        setTooltip(null);
-        return;
-      }
-
-      const formats = {
-        millisecond: 'T',
-        second: 'pp',
-        minute: 'p',
-        hour: 'h:mm aaa - PP',
-        day: 'PPPP',
-        week: 'PPPP',
-        month: 'LLLL yyyy',
-        quarter: 'qqq',
-        year: 'yyyy',
-      };
-
-      setTooltip(
-        <div className={styles.tooltip}>
-          <div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
-          <div>
-            <StatusLight color={labelColors?.[0]?.backgroundColor}>
-              <div className={styles.value}>
-                {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
-              </div>
-            </StatusLight>
-          </div>
-        </div>,
-      );
-    },
-    [unit],
-  );
+  const { theme, colors } = useTheme();
 
   const getOptions = useCallback(() => {
     return {
@@ -117,12 +54,12 @@ export function BarChart({
         },
         tooltip: {
           enabled: false,
-          external: renderTooltip,
+          external: renderTooltip ? renderTooltip.bind(null, setTooltip) : undefined,
         },
       },
       scales: {
         x: {
-          type: 'time',
+          type: XAxisType,
           stacked: true,
           time: {
             unit,
@@ -131,34 +68,44 @@ export function BarChart({
             display: false,
           },
           border: {
-            color: colors.line,
+            color: colors.chart.line,
           },
           ticks: {
-            color: colors.text,
+            color: colors.chart.text,
             autoSkip: false,
             maxRotation: 0,
             callback: renderXLabel,
           },
         },
         y: {
-          type: 'linear',
+          type: YAxisType,
           min: 0,
           beginAtZero: true,
           stacked,
           grid: {
-            color: colors.line,
+            color: colors.chart.line,
           },
           border: {
-            color: colors.line,
+            color: colors.chart.line,
           },
           ticks: {
             color: colors.text,
-            callback: renderYLabel,
+            callback: renderYLabel || defaultRenderYLabel,
           },
         },
       },
     };
-  }, [animationDuration, renderTooltip, renderXLabel, stacked, colors, unit, locale]);
+  }, [
+    animationDuration,
+    renderTooltip,
+    renderXLabel,
+    XAxisType,
+    YAxisType,
+    stacked,
+    colors,
+    unit,
+    locale,
+  ]);
 
   const createChart = () => {
     Chart.defaults.font.family = 'Inter';
@@ -173,7 +120,7 @@ export function BarChart({
       options,
     });
 
-    onCreate(chart.current);
+    onCreate?.(chart.current);
   };
 
   const updateChart = () => {
@@ -186,7 +133,7 @@ export function BarChart({
 
     chart.current.options = getOptions();
 
-    onUpdate(chart.current);
+    onUpdate?.(chart.current);
 
     chart.current.update();
   };
@@ -208,7 +155,11 @@ export function BarChart({
         <canvas ref={canvas} />
       </div>
       <Legend chart={chart.current} />
-      {tooltip && <HoverTooltip tooltip={tooltip} />}
+      {tooltip && (
+        <HoverTooltip>
+          <div className={styles.tooltip}>{tooltip}</div>
+        </HoverTooltip>
+      )}
     </>
   );
 }

components/metrics/DataTable.js

@@ -5,8 +5,8 @@ import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
 import NoData from 'components/common/NoData';
 import { formatNumber, formatLongNumber } from 'lib/format';
+import useMessages from 'hooks/useMessages';
 import styles from './DataTable.module.css';
-import useMessages from '../../hooks/useMessages';
 
 export function DataTable({
   data = [],

components/metrics/DataTable.module.css

@@ -1,9 +1,9 @@
 .table {
   position: relative;
-  height: 100%;
   display: grid;
   grid-template-rows: fit-content(100%) auto;
   overflow: hidden;
+  flex: 1;
 }
 
 .body {

components/metrics/MetricsBar.module.css

@@ -1,7 +1,7 @@
 .bar {
   display: flex;
   cursor: pointer;
-  min-height: 80px;
+  min-height: 110px;
   gap: 20px;
   flex-wrap: wrap;
 }

components/metrics/PageviewsChart.js

@@ -1,33 +1,73 @@
-import { useMemo } from 'react';
-import { colord } from 'colord';
+import { useCallback, useMemo } from 'react';
+import { StatusLight } from 'react-basics';
 import BarChart from './BarChart';
-import { THEME_COLORS } from 'lib/constants';
 import useTheme from 'hooks/useTheme';
 import useMessages from 'hooks/useMessages';
 import useLocale from 'hooks/useLocale';
+import { dateFormat } from 'lib/date';
+import { formatLongNumber } from 'lib/format';
 
-export function PageviewsChart({ websiteId, data, unit, records, className, loading, ...props }) {
+export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) {
   const { formatMessage, labels } = useMessages();
-  const [theme] = useTheme();
+  const { colors } = useTheme();
   const { locale } = useLocale();
 
-  const colors = useMemo(() => {
-    const primaryColor = colord(THEME_COLORS[theme].primary);
-    return {
-      views: {
-        hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
-        backgroundColor: primaryColor.alpha(0.4).toRgbString(),
-        borderColor: primaryColor.alpha(0.7).toRgbString(),
-        hoverBorderColor: primaryColor.toRgbString(),
-      },
-      visitors: {
-        hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
-        backgroundColor: primaryColor.alpha(0.6).toRgbString(),
-        borderColor: primaryColor.alpha(0.9).toRgbString(),
-        hoverBorderColor: primaryColor.toRgbString(),
-      },
-    };
-  }, [theme]);
+  const renderXLabel = useCallback(
+    (label, index, values) => {
+      const d = new Date(values[index].value);
+
+      switch (unit) {
+        case 'minute':
+          return dateFormat(d, 'h:mm', locale);
+        case 'hour':
+          return dateFormat(d, 'p', locale);
+        case 'day':
+          return dateFormat(d, 'MMM d', locale);
+        case 'month':
+          return dateFormat(d, 'MMM', locale);
+        case 'year':
+          return dateFormat(d, 'YYY', locale);
+        default:
+          return label;
+      }
+    },
+    [locale, unit],
+  );
+
+  const renderTooltip = useCallback(
+    (setTooltip, model) => {
+      const { opacity, labelColors, dataPoints } = model.tooltip;
+
+      if (!dataPoints?.length || !opacity) {
+        setTooltip(null);
+        return;
+      }
+
+      const formats = {
+        millisecond: 'T',
+        second: 'pp',
+        minute: 'p',
+        hour: 'h:mm aaa - PP',
+        day: 'PPPP',
+        week: 'PPPP',
+        month: 'LLLL yyyy',
+        quarter: 'qqq',
+        year: 'yyyy',
+      };
+
+      setTooltip(
+        <>
+          <div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
+          <div>
+            <StatusLight color={labelColors?.[0]?.backgroundColor}>
+              {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
+            </StatusLight>
+          </div>
+        </>,
+      );
+    },
+    [unit],
+  );
 
   const datasets = useMemo(() => {
     if (!data) return [];
@@ -37,13 +77,13 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
         label: formatMessage(labels.uniqueVisitors),
         data: data.sessions,
         borderWidth: 1,
-        ...colors.visitors,
+        ...colors.chart.visitors,
       },
       {
         label: formatMessage(labels.pageViews),
         data: data.pageviews,
         borderWidth: 1,
-        ...colors.views,
+        ...colors.chart.views,
       },
     ];
   }, [data, locale, colors]);
@@ -55,8 +95,9 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
       className={className}
       datasets={datasets}
       unit={unit}
-      records={records}
       loading={loading}
+      renderXLabel={renderXLabel}
+      renderTooltip={renderTooltip}
     />
   );
 }

components/metrics/WebsiteHeader.module.css

@@ -1,3 +1,9 @@
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .title {
   display: flex;
   flex-direction: row;

components/pages/reports/ReportHeader.js

@@ -16,8 +16,6 @@ export function ReportHeader({ report, icon }) {
   const { id, websiteId, name, parameters } = report || {};
   const { value, startDate, endDate } = parameters?.dateRange || {};
 
-  console.log('REPORT HEADER', report);
-
   const handleSelect = websiteId => {
     updateReport(id, { websiteId });
   };

components/pages/reports/funnel/FunnelChart.js

@@ -1,184 +1,60 @@
-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 { useCallback, useMemo } from 'react';
+import { Loading } from 'react-basics';
 import useMessages from 'hooks/useMessages';
 import useTheme from 'hooks/useTheme';
-import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import BarChart from 'components/metrics/BarChart';
 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,
-}) {
+export function FunnelChart({ report, data, loading, className }) {
   const { formatMessage, labels } = useMessages();
-  const canvas = useRef();
-  const chart = useRef(null);
-  const [tooltip, setTooltip] = useState(null);
-  const { locale } = useLocale();
-  const [theme] = useTheme();
+  const { colors } = 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 { parameters } = report || {};
 
-  const colors = useMemo(
-    () => ({
-      text: THEME_COLORS[theme].gray700,
-      line: THEME_COLORS[theme].gray200,
-    }),
-    [theme],
+  const renderXLabel = useCallback(
+    (label, index) => {
+      return parameters.urls[index];
+    },
+    [parameters],
   );
 
-  const renderYLabel = label => {
-    return +label > 1000 ? formatLongNumber(label) : label;
-  };
-
-  const renderTooltip = useCallback(model => {
-    const { opacity, labelColors, dataPoints } = model.tooltip;
+  const renderTooltip = useCallback((setTooltip, model) => {
+    const { opacity, 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>,
-    );
+    setTooltip(`${formatLongNumber(dataPoints[0].raw.y)} ${formatMessage(labels.visitors)}`);
   }, []);
 
-  const getOptions = useCallback(() => {
-    return {
-      responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: animationDuration,
-        resize: {
-          duration: 0,
-        },
-        active: {
-          duration: 0,
-        },
+  const datasets = useMemo(() => {
+    return [
+      {
+        label: formatMessage(labels.uniqueVisitors),
+        data: data,
+        borderWidth: 1,
+        ...colors.chart.visitors,
       },
-      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]);
+    ];
+  }, [data]);
 
-  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]);
+  if (loading) {
+    return <Loading icon="dots" className={styles.loading} />;
+  }
 
   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} />}
-    </>
+    <BarChart
+      className={className}
+      datasets={datasets}
+      unit="day"
+      loading={loading}
+      renderXLabel={renderXLabel}
+      renderTooltip={renderTooltip}
+      XAxisType="category"
+    />
   );
 }
 

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

@@ -1,23 +1,3 @@
-.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;*/
-  }
+.loading {
+  height: 300px;
 }

components/pages/reports/funnel/FunnelParameters.js

@@ -1,5 +1,6 @@
 import { useMessages } from 'hooks';
 import {
+  Button,
   Icon,
   Form,
   FormButtons,
@@ -8,29 +9,38 @@ import {
   PopupTrigger,
   Popup,
   SubmitButton,
+  Text,
   TextField,
 } from 'react-basics';
 import Icons from 'components/icons';
 import { updateReport } from 'store/reports';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import styles from './FunnelParameters.module.css';
 
 export function FunnelParameters({ report }) {
   const { formatMessage, labels } = useMessages();
   const ref = useRef(null);
   const { id, websiteId, parameters, isLoading } = report || {};
+  const queryDisabled = !websiteId || parameters?.urls?.length < 2;
 
   const handleSubmit = values => {
-    console.log({ values });
-    updateReport(id, { parameters: values, isLoading: false });
+    updateReport(id, { parameters: values, isLoading: false, update: Date.now() });
   };
 
-  console.log('PARAMETERS', parameters);
+  const handleAdd = url => {
+    updateReport(id, { parameters: { ...parameters, urls: parameters.urls.concat(url) } });
+  };
+
+  const handleRemove = index => {
+    const urls = [...parameters.urls];
+    urls.splice(index, 1);
+    updateReport(id, { parameters: { ...parameters, urls } });
+  };
 
   return (
     <>
       <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
-        <FormRow label="Window (minutes)">
+        <FormRow label={formatMessage(labels.window)}>
           <FormInput
             name="window"
             rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
@@ -38,11 +48,22 @@ export function FunnelParameters({ report }) {
             <TextField autoComplete="off" />
           </FormInput>
         </FormRow>
-        <FormRow label={formatMessage(labels.urls)} action={<AddURLButton />}>
-          hi
+        <FormRow label={formatMessage(labels.urls)} action={<AddURLButton onAdd={handleAdd} />}>
+          <div className={styles.urls}>
+            {parameters?.urls.map((url, index) => {
+              return (
+                <div key={index} className={styles.url}>
+                  <Text>{url}</Text>
+                  <Icon onClick={() => handleRemove(index)}>
+                    <Icons.Close />
+                  </Icon>
+                </div>
+              );
+            })}
+          </div>
         </FormRow>
         <FormButtons>
-          <SubmitButton variant="primary" disabled={!websiteId} loading={isLoading}>
+          <SubmitButton variant="primary" disabled={queryDisabled} loading={isLoading}>
             {formatMessage(labels.query)}
           </SubmitButton>
         </FormButtons>
@@ -51,14 +72,40 @@ export function FunnelParameters({ report }) {
   );
 }
 
-function AddURLButton() {
+function AddURLButton({ onAdd }) {
+  const [url, setUrl] = useState('');
+  const { formatMessage, labels } = useMessages();
+
+  const handleAdd = close => {
+    onAdd?.(url);
+    setUrl('');
+    close();
+  };
+
+  const handleChange = e => {
+    setUrl(e.target.value);
+  };
+
   return (
     <PopupTrigger>
       <Icon>
         <Icons.Plus />
       </Icon>
       <Popup className={styles.popup} position="right" alignment="start">
-        HALLO
+        {close => {
+          return (
+            <Form>
+              <FormRow label={formatMessage(labels.url)}>
+                <TextField name="url" value={url} onChange={handleChange} autoComplete="off" />
+              </FormRow>
+              <FormButtons>
+                <Button variant="primary" onClick={() => handleAdd(close)}>
+                  {formatMessage(labels.add)}
+                </Button>
+              </FormButtons>
+            </Form>
+          );
+        }}
       </Popup>
     </PopupTrigger>
   );

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

@@ -4,4 +4,22 @@
   margin-left: 10px;
   border: 1px solid var(--base400);
   border-radius: var(--border-radius);
-}
+  width: 400px;
+}
+
+.urls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.url {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  box-shadow: 1px 1px 1px var(--base400);
+}

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>
   );

components/pages/reports/funnel/FunnelTable.js

@@ -1,12 +1,17 @@
 import DataTable from 'components/metrics/DataTable';
+import { useMessages } from 'hooks';
 
-export function FunnelTable({ ...props }) {
-  const { data } = props;
+export function FunnelTable({ data }) {
+  const { formatMessage, labels } = useMessages();
 
-  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" />;
+  return (
+    <DataTable
+      data={data}
+      title={formatMessage(labels.url)}
+      metric={formatMessage(labels.visitors)}
+      showPercentage={false}
+    />
+  );
 }
 
 export default FunnelTable;

components/pages/settings/profile/ThemeSetting.js

@@ -6,13 +6,13 @@ import Moon from 'assets/moon.svg';
 import styles from './ThemeSetting.module.css';
 
 export function ThemeSetting() {
-  const [theme, setTheme] = useTheme();
+  const { theme, saveTheme } = useTheme();
 
   return (
     <div className={styles.buttons}>
       <Button
         className={classNames({ [styles.active]: theme === 'light' })}
-        onClick={() => setTheme('light')}
+        onClick={() => saveTheme('light')}
       >
         <Icon>
           <Sun />
@@ -20,7 +20,7 @@ export function ThemeSetting() {
       </Button>
       <Button
         className={classNames({ [styles.active]: theme === 'dark' })}
-        onClick={() => setTheme('dark')}
+        onClick={() => saveTheme('dark')}
       >
         <Icon>
           <Moon />

hooks/useReport.js

@@ -1,8 +1,7 @@
 import useStore, { createReport } from 'store/reports';
 import { useCallback, useEffect, useState } from 'react';
-import { useForceUpdate } from 'hooks';
 
-export function useReport(reportId) {
+export function useReport(reportId, defaultParameters) {
   const [id, setId] = useState(reportId);
 
   const selector = useCallback(state => state[id], [id]);
@@ -10,12 +9,11 @@ export function useReport(reportId) {
 
   useEffect(() => {
     if (!report) {
-      setId(createReport().id);
+      const newReport = createReport(defaultParameters);
+      setId(newReport.id);
     }
   }, []);
 
-  console.log('USE REPORT', report);
-
   return report;
 }
 

hooks/useTheme.js

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import useStore, { setTheme } from 'store/app';
 import { getItem, setItem } from 'next-basics';
-import { THEME_CONFIG } from 'lib/constants';
+import { THEME_COLORS, THEME_CONFIG } from 'lib/constants';
+import { colord } from 'colord';
 
 const selector = state => state.theme;
 
@@ -13,6 +14,26 @@ export function useTheme() {
         : 'light'
       : 'light';
   const theme = useStore(selector) || getItem(THEME_CONFIG) || defaultTheme;
+  const primaryColor = colord(THEME_COLORS[theme].primary);
+
+  const colors = {
+    chart: {
+      text: THEME_COLORS[theme].gray700,
+      line: THEME_COLORS[theme].gray200,
+      views: {
+        hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
+        backgroundColor: primaryColor.alpha(0.4).toRgbString(),
+        borderColor: primaryColor.alpha(0.7).toRgbString(),
+        hoverBorderColor: primaryColor.toRgbString(),
+      },
+      visitors: {
+        hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
+        backgroundColor: primaryColor.alpha(0.6).toRgbString(),
+        borderColor: primaryColor.alpha(0.9).toRgbString(),
+        hoverBorderColor: primaryColor.toRgbString(),
+      },
+    },
+  };
 
   function saveTheme(value) {
     setItem(THEME_CONFIG, value);
@@ -32,7 +53,7 @@ export function useTheme() {
     }
   }, []);
 
-  return [theme, saveTheme];
+  return { theme, saveTheme, colors };
 }
 
 export default useTheme;

pages/api/reports/funnel.ts

@@ -29,6 +29,7 @@ export default async (
 
   if (req.method === 'POST') {
     const { websiteId, urls, window, startAt, endAt } = req.body;
+
     if (!(await canViewWebsite(req.auth, websiteId))) {
       return unauthorized(res);
     }

rollup.tracker.config.js

@@ -4,7 +4,7 @@ import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 
 export default {
-  input: 'tracker/event-data.js',
+  input: 'tracker/index.js',
   output: {
     file: 'public/script.js',
     format: 'iife',

store/reports.js

@@ -15,8 +15,6 @@ const store = create(() => ({ ...initialState }));
 export function updateReport(id, data) {
   const report = store.getState()[id];
 
-  console.log('UPDATE STORE START', id, report);
-
   if (report) {
     store.setState(
       produce(state => {
@@ -37,9 +35,9 @@ export function updateReport(id, data) {
   }
 }
 
-export function createReport() {
+export function createReport(parameters) {
   const id = `new_${getRandomChars(16)}`;
-  const report = { ...emptyReport, id };
+  const report = { ...emptyReport, id, parameters };
 
   store.setState(
     produce(state => {
@@ -49,8 +47,6 @@ export function createReport() {
     }),
   );
 
-  console.log('CREATE STORE', report);
-
   return report;
 }