Updated tracker and collect.

components/layout/NavBar.module.css

@@ -5,7 +5,7 @@
   align-items: center;
   height: 60px;
   background: var(--base75);
-  border-bottom: 2px solid var(--base300);
+  border-bottom: 1px solid var(--base300);
   padding: 0 20px;
 }
 

components/metrics/BarChart.js

@@ -52,7 +52,7 @@ export default function BarChart({
         millisecond: 'T',
         second: 'pp',
         minute: 'p',
-        hour: 'h aaa',
+        hour: 'h:mm aaa - PP',
         day: 'PPPP',
         week: 'PPPP',
         month: 'LLLL yyyy',
@@ -135,15 +135,13 @@ export default function BarChart({
         },
       },
     };
-  }, [animationDuration, renderTooltip, stacked, colors]);
+  }, [animationDuration, renderTooltip, stacked, colors, unit]);
 
   const createChart = () => {
     Chart.defaults.font.family = 'Inter';
 
     const options = getOptions();
 
-    onCreate(options);
-
     chart.current = new Chart(canvas.current, {
       type: 'bar',
       data: {
@@ -151,6 +149,8 @@ export default function BarChart({
       },
       options,
     });
+
+    onCreate(chart.current);
   };
 
   const updateChart = () => {
@@ -158,9 +158,11 @@ export default function BarChart({
 
     chart.current.options = getOptions();
 
-    onUpdate(chart.current);
+    chart.current.data.datasets = datasets;
 
     chart.current.update();
+
+    onUpdate(chart.current);
   };
 
   useEffect(() => {

components/metrics/EventsChart.js

@@ -17,7 +17,7 @@ export default function EventsChart({ websiteId, className, token }) {
     query: { url, eventName },
   } = usePageQuery();
 
-  const { data, isLoading } = useQuery(['events', { websiteId, modified, eventName }], () =>
+  const { data, isLoading } = useQuery(['events', websiteId, modified, eventName], () =>
     get(`/websites/${websiteId}/events`, {
       startAt: +startDate,
       endAt: +endDate,
@@ -33,12 +33,12 @@ export default function EventsChart({ websiteId, className, token }) {
     if (!data) return [];
     if (isLoading) return data;
 
-    const map = data.reduce((obj, { x, y }) => {
+    const map = data.reduce((obj, { x, t, y }) => {
       if (!obj[x]) {
         obj[x] = [];
       }
 
-      obj[x].push({ x, y });
+      obj[x].push({ x: t, y });
 
       return obj;
     }, {});
@@ -58,22 +58,12 @@ export default function EventsChart({ websiteId, className, token }) {
         borderWidth: 1,
       };
     });
-  }, [data, isLoading]);
-
-  function handleUpdate(chart) {
-    chart.data.datasets = datasets;
-
-    chart.update();
-  }
+  }, [data, isLoading, startDate, endDate, unit]);
 
   if (isLoading) {
     return <Loading icon="dots" />;
   }
 
-  if (!data) {
-    return null;
-  }
-
   return (
     <BarChart
       className={className}
@@ -81,7 +71,6 @@ export default function EventsChart({ websiteId, className, token }) {
       unit={unit}
       height={300}
       records={getDateLength(startDate, endDate, unit)}
-      onUpdate={handleUpdate}
       loading={isLoading}
       stacked
     />

components/metrics/PageviewsChart.js

@@ -38,35 +38,24 @@ export default function PageviewsChart({
     };
   }, [theme]);
 
-  const handleUpdate = chart => {
-    const {
-      data: { datasets },
-    } = chart;
+  const datasets = useMemo(() => {
+    if (!data) return [];
 
-    datasets[0].data = data.sessions;
-    datasets[0].label = formatMessage(labels.uniqueVisitors);
-    datasets[1].data = data.pageviews;
-    datasets[1].label = formatMessage(labels.pageViews);
-  };
-
-  if (!data) {
-    return null;
-  }
-
-  const datasets = [
-    {
-      label: formatMessage(labels.uniqueVisitors),
-      data: data.sessions,
-      borderWidth: 1,
-      ...colors.visitors,
-    },
-    {
-      label: formatMessage(labels.pageViews),
-      data: data.pageviews,
-      borderWidth: 1,
-      ...colors.views,
-    },
-  ];
+    return [
+      {
+        label: formatMessage(labels.uniqueVisitors),
+        data: data.sessions,
+        borderWidth: 1,
+        ...colors.visitors,
+      },
+      {
+        label: formatMessage(labels.pageViews),
+        data: data.pageviews,
+        borderWidth: 1,
+        ...colors.views,
+      },
+    ];
+  }, [data]);
 
   return (
     <div ref={ref}>
@@ -78,7 +67,6 @@ export default function PageviewsChart({
         unit={unit}
         records={records}
         animationDuration={visible ? animationDuration : 0}
-        onUpdate={handleUpdate}
         loading={loading}
       />
     </div>

components/pages/console/TestConsole.js

@@ -1,13 +1,13 @@
+import { Button, Column, Row } from 'react-basics';
+import Script from 'next/script';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 import WebsiteSelect from 'components/input/WebsiteSelect';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EventsChart from 'components/metrics/EventsChart';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import useApi from 'hooks/useApi';
-import Head from 'next/head';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { Button, Column, Row } from 'react-basics';
 import styles from './TestConsole.module.css';
 
 export default function TestConsole() {
@@ -24,22 +24,23 @@ export default function TestConsole() {
   }
 
   function handleClick() {
-    window.umami('umami-default');
-    window.umami.trackView('/page-view', 'https://www.google.com');
-    window.umami.trackEvent('track-event-no-data');
-    window.umami.trackEvent('track-event-with-data', {
-      test: 'test-data',
-      time: new Date(),
-      number: 1,
-      time2: new Date().toISOString(),
-      nested: {
+    window.umami.track({ url: '/page-view', referrer: 'https://www.google.com' });
+    window.umami.track('track-event-no-data');
+    window.umami.track('track-event-with-data', {
+      data: {
         test: 'test-data',
+        time: new Date(),
         number: 1,
-        object: {
+        time2: new Date().toISOString(),
+        nested: {
           test: 'test-data',
+          number: 1,
+          object: {
+            test: 'test-data',
+          },
         },
+        array: [1, 2, 3],
       },
-      array: [1, 2, 3],
     });
   }
 
@@ -52,22 +53,17 @@ export default function TestConsole() {
 
   return (
     <Page loading={isLoading} error={error}>
-      <Head>
-        {typeof window !== 'undefined' && website && (
-          <script
-            async
-            defer
-            data-website-id={website.id}
-            src={`${basePath}/script.js`}
-            data-cache="true"
-          />
-        )}
-      </Head>
       <PageHeader title="Test console">
         <WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
       </PageHeader>
       {website && (
         <>
+          <Script
+            async
+            data-website-id={website.id}
+            src={`${basePath}/script.js`}
+            data-cache="true"
+          />
           <Row className={styles.test}>
             <Column xs="4">
               <div className={styles.header}>Page links</div>
@@ -78,14 +74,14 @@ export default function TestConsole() {
                 <Link href={`/console/${websiteId}?page=2`}>page two</Link>
               </div>
               <div>
-                <a href="https://www.google.com" className="umami--click--external-link-direct">
+                <a href="https://www.google.com" data-umami-event="external-link-direct">
                   external link (direct)
                 </a>
               </div>
               <div>
                 <a
                   href="https://www.google.com"
-                  className="umami--click--external-link-tab"
+                  data-umami-event="external-link-tab"
                   target="_blank"
                   rel="noreferrer"
                 >
@@ -94,10 +90,20 @@ export default function TestConsole() {
               </div>
             </Column>
             <Column xs="4">
-              <div className={styles.header}>CSS events</div>
-              <Button id="primary-button" className="umami--click--button-click" variant="action">
+              <div className={styles.header}>Click events</div>
+              <Button id="send-event-button" data-umami-event="button-click" variant="action">
                 Send event
               </Button>
+              <p />
+              <Button
+                id="send-event-data-button"
+                data-umami-event="button-click"
+                data-umami-event-name="bob"
+                data-umami-event-id="123"
+                variant="action"
+              >
+                Send event with data
+              </Button>
             </Column>
             <Column xs="4">
               <div className={styles.header}>Javascript events</div>
@@ -108,14 +114,12 @@ export default function TestConsole() {
           </Row>
           <Row>
             <Column>
-              <div className={styles.header}>Statistics</div>
               <WebsiteChart
                 websiteId={website.id}
                 title={website.name}
                 domain={website.domain}
                 showLink
               />
-              <div className={styles.header}>Events</div>
               <EventsChart websiteId={website.id} />
             </Column>
           </Row>

components/pages/console/TestConsole.module.css

@@ -1,5 +1,5 @@
 .test {
-  border: 1px solid var(--base200);
+  border: 1px solid var(--base400);
   border-radius: 5px;
   padding: 0 20px 20px 20px;
 }
@@ -7,9 +7,5 @@
 .header {
   font-size: 16px;
   font-weight: 700;
-  line-height: 90px;
-}
-
-.hidden {
-  transform: rotate(-90deg);
+  margin: 20px 0;
 }