Merge branch 'dev' of https://github.com/umami-software/umami into bug/um-200-fix-referrer-filters

components/layout/Header.module.css

@@ -12,7 +12,7 @@
   gap: 10px;
   font-size: var(--font-size-lg);
   font-weight: 700;
-  color: var(--font-color100);
+  color: var(--font-color100) !important;
 }
 
 .buttons {

components/metrics/BarChart.js

@@ -1,7 +1,7 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { StatusLight } from 'react-basics';
 import classNames from 'classnames';
-import ChartJS from 'chart.js';
+import Chart from 'chart.js/auto';
 import HoverTooltip from 'components/common/HoverTooltip';
 import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
@@ -15,7 +15,6 @@ import styles from './BarChart.module.css';
 export default function BarChart({
   datasets,
   unit,
-  records,
   animationDuration = DEFAULT_ANIMATION_DURATION,
   className,
   stacked = false,
@@ -30,74 +29,36 @@ export default function BarChart({
   const [theme] = useTheme();
   const forceUpdate = useForceUpdate();
 
-  const colors = {
+  const colors = useMemo(
-    text: THEME_COLORS[theme].gray700,
+    () => ({
-    line: THEME_COLORS[theme].gray200,
+      text: THEME_COLORS[theme].gray700,
-    zeroLine: THEME_COLORS[theme].gray500,
+      line: THEME_COLORS[theme].gray200,
-  };
+      zeroLine: THEME_COLORS[theme].gray500,
-
+    }),
-  function renderXLabel(label, index, values) {
+    [theme],
-    if (loading) return '';
+  );
-    const d = new Date(values[index].value);
-    const sw = canvas.current.width / window.devicePixelRatio;
-
-    switch (unit) {
-      case 'minute':
-        return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
-      case 'hour':
-        return dateFormat(d, 'p', locale);
-      case 'day':
-        if (records > 25) {
-          if (sw <= 275) {
-            return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
-          }
-          if (sw <= 550) {
-            return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
-          }
-          if (sw <= 700) {
-            return index % 2 === 0 ? dateFormat(d, 'M/d', locale) : '';
-          }
-          return dateFormat(d, 'MMM d', locale);
-        }
-        if (sw <= 375) {
-          return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
-        }
-        if (sw <= 425) {
-          return dateFormat(d, 'MMM d', locale);
-        }
-        return dateFormat(d, 'EEE M/d', locale);
-      case 'month':
-        if (sw <= 330) {
-          return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
-        }
-        return dateFormat(d, 'MMM', locale);
-      default:
-        return label;
-    }
-  }
 
   function renderYLabel(label) {
     return +label > 1000 ? formatLongNumber(label) : label;
   }
 
   function renderTooltip(model) {
-    const { opacity, title, body, labelColors } = model;
+    const { opacity, labelColors, dataPoints } = model.tooltip;
 
-    if (!opacity || !title) {
+    if (!dataPoints?.length || !opacity) {
       setTooltip(null);
       return;
     }
 
-    const [label, value] = body[0].lines[0].split(':');
     const format = unit === 'hour' ? 'EEE p — PPP' : 'PPPP';
 
     setTooltip(
       <>
-        <div>{dateFormat(new Date(+title[0]), format, locale)}</div>
+        <div>{dateFormat(new Date(dataPoints[0].raw.x), format, locale)}</div>
         <div>
-          <StatusLight color={labelColors[0].backgroundColor}>
+          <StatusLight color={labelColors?.[0]?.backgroundColor}>
             <b>
-              {formatLongNumber(value)} {label}
+              {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
             </b>
           </StatusLight>
         </div>
@@ -107,68 +68,53 @@ export default function BarChart({
 
   function createChart() {
     const options = {
+      responsive: true,
+      maintainAspectRatio: false,
       animation: {
         duration: animationDuration,
+        resize: {
+          duration: 0,
+        },
+        active: {
+          duration: 0,
+        },
       },
-      tooltips: {
+      plugins: {
-        enabled: false,
+        legend: {
-        custom: renderTooltip,
+          display: false,
-      },
+        },
-      hover: {
+        tooltip: {
-        animationDuration: 0,
+          enabled: false,
-      },
+          external: renderTooltip,
-      responsive: true,
+        },
-      responsiveAnimationDuration: 0,
-      maintainAspectRatio: false,
-      legend: {
-        display: false,
-      },
-      onResize: ({ width, height }) => {
-        //console.log({ width, height });
       },
       scales: {
-        xAxes: [
+        x: {
-          {
+          type: 'time',
-            type: 'time',
+          stacked: true,
-            distribution: 'series',
+          grid: {
-            time: {
+            display: false,
-              unit,
-              tooltipFormat: 'x',
-            },
-            ticks: {
-              callback: renderXLabel,
-              minRotation: 0,
-              maxRotation: 0,
-              fontColor: colors.text,
-              autoSkipPadding: 1,
-            },
-            gridLines: {
-              display: false,
-            },
-            offset: true,
-            stacked: true,
           },
-        ],
+          ticks: {
-        yAxes: [
+            autoSkip: false,
-          {
+            maxRotation: 0,
-            ticks: {
-              callback: renderYLabel,
-              beginAtZero: true,
-              fontColor: colors.text,
-            },
-            gridLines: {
-              color: colors.line,
-              zeroLineColor: colors.zeroLine,
-            },
-            stacked,
           },
-        ],
+        },
+        y: {
+          type: 'linear',
+          min: 0,
+          beginAtZero: true,
+          stacked,
+          ticks: {
+            callback: renderYLabel,
+          },
+        },
       },
     };
 
     onCreate(options);
 
-    chart.current = new ChartJS(canvas.current, {
+    chart.current = new Chart(canvas.current, {
       type: 'bar',
       data: {
         datasets,
@@ -180,16 +126,7 @@ export default function BarChart({
   function updateChart() {
     const { options } = chart.current;
 
-    options.legend.labels.fontColor = colors.text;
-    options.scales.xAxes[0].time.unit = unit;
-    options.scales.xAxes[0].ticks.callback = renderXLabel;
-    options.scales.xAxes[0].ticks.fontColor = colors.text;
-    options.scales.yAxes[0].ticks.fontColor = colors.text;
-    options.scales.yAxes[0].ticks.precision = 0;
-    options.scales.yAxes[0].gridLines.color = colors.line;
-    options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
     options.animation.duration = animationDuration;
-    options.tooltips.custom = renderTooltip;
 
     onUpdate(chart.current);
 
@@ -207,7 +144,7 @@ export default function BarChart({
         updateChart();
       }
     }
-  }, [datasets, unit, animationDuration, locale]);
+  }, [datasets, unit, animationDuration, locale, loading]);
 
   return (
     <>

components/metrics/BarChart.module.css

@@ -1,10 +1,11 @@
 .chart {
   position: relative;
   height: 400px;
+  overflow: hidden;
 }
 
 @media only screen and (max-width: 992px) {
   .chart {
-    height: 200px;
+    /*height: 200px;*/
   }
 }

components/metrics/Legend.module.css

@@ -2,13 +2,13 @@
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  margin-top: 10px;
+  padding: 10px 0;
 }
 
 .label {
   display: flex;
   align-items: center;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   cursor: pointer;
 }
 

components/metrics/PageviewsChart.js

@@ -25,12 +25,16 @@ export default function PageviewsChart({
     const primaryColor = colord(THEME_COLORS[theme].primary);
     return {
       views: {
-        background: primaryColor.alpha(0.4).toRgbString(),
+        hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
-        border: primaryColor.alpha(0.5).toRgbString(),
+        backgroundColor: primaryColor.alpha(0.4).toRgbString(),
+        borderColor: primaryColor.alpha(0.7).toRgbString(),
+        hoverBorderColor: primaryColor.toRgbString(),
       },
       visitors: {
-        background: primaryColor.alpha(0.6).toRgbString(),
+        hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
-        border: primaryColor.alpha(0.7).toRgbString(),
+        backgroundColor: primaryColor.alpha(0.6).toRgbString(),
+        borderColor: primaryColor.alpha(0.9).toRgbString(),
+        hoverBorderColor: primaryColor.toRgbString(),
       },
     };
   }, [theme]);
@@ -50,29 +54,30 @@ export default function PageviewsChart({
     return null;
   }
 
+  const datasets = [
+    {
+      label: formatMessage(labels.uniqueVisitors),
+      data: data.sessions,
+      lineTension: 0,
+      borderWidth: 1,
+      ...colors.visitors,
+    },
+    {
+      label: formatMessage(labels.pageViews),
+      data: data.pageviews,
+      lineTension: 0,
+      borderWidth: 1,
+      ...colors.views,
+    },
+  ];
+
   return (
     <div ref={ref}>
       <BarChart
         {...props}
+        key={websiteId}
         className={className}
-        datasets={[
+        datasets={datasets}
-          {
-            label: formatMessage(labels.uniqueVisitors),
-            data: data.sessions,
-            lineTension: 0,
-            backgroundColor: colors.visitors.background,
-            borderColor: colors.visitors.border,
-            borderWidth: 1,
-          },
-          {
-            label: formatMessage(labels.pageViews),
-            data: data.pageviews,
-            lineTension: 0,
-            backgroundColor: colors.views.background,
-            borderColor: colors.views.border,
-            borderWidth: 1,
-          },
-        ]}
         unit={unit}
         records={records}
         animationDuration={visible ? animationDuration : 0}

components/metrics/WebsiteChart.module.css

@@ -7,7 +7,7 @@
 
 .chart {
   position: relative;
-  padding-bottom: 10px;
+  overflow: hidden;
 }
 
 .title {

hooks/useDateRange.js

@@ -1,4 +1,3 @@
-import { parseISO } from 'date-fns';
 import { parseDateRange } from 'lib/date';
 import { setItem } from 'next-basics';
 import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';

lib/date.js

@@ -181,18 +181,18 @@ export function getDateArray(data, startDate, endDate, unit) {
   const n = diff(endDate, startDate) + 1;
 
   function findData(t) {
-    const x = data.find(e => {
+    const d = data.find(({ x }) => {
-      return normalize(getDateFromString(e.t)).getTime() === t.getTime();
+      return normalize(getDateFromString(x)).getTime() === t.getTime();
     });
 
-    return x?.y || 0;
+    return d?.y || 0;
   }
 
   for (let i = 0; i < n; i++) {
     const t = normalize(add(startDate, i));
     const y = findData(t);
 
-    arr.push({ ...data[i], t, y });
+    arr.push({ x: t, y });
   }
 
   return arr;

package.json

@@ -64,7 +64,8 @@
     "@umami/prisma-client": "^0.2.0",
     "@umami/redis-client": "^0.2.0",
     "chalk": "^4.1.1",
-    "chart.js": "^2.9.4",
+    "chart.js": "^4.2.1",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "classnames": "^2.3.1",
     "clickhouse": "^2.5.0",
     "colord": "^2.9.2",
@@ -93,7 +94,7 @@
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
-    "react-basics": "^0.72.0",
+    "react-basics": "^0.73.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-intl": "^5.24.7",

pages/_app.js

@@ -10,6 +10,7 @@ import 'styles/locale.css';
 import 'styles/index.css';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/700.css';
+import 'chartjs-adapter-date-fns';
 import Script from 'next/script';
 
 const client = new QueryClient({

queries/analytics/pageview/getPageviewStats.ts

@@ -50,7 +50,7 @@ async function relationalQuery(
   const { filterQuery, joinSession } = parseFilters(filters, params);
 
   return rawQuery(
-    `select ${getDateQuery('website_event.created_at', unit, timezone)} t,
+    `select ${getDateQuery('website_event.created_at', unit, timezone)} x,
         count(${count !== '*' ? `${count}${sessionKey}` : count}) y
       from website_event
         ${joinSession}
@@ -83,7 +83,7 @@ async function clickhouseQuery(
 
   return rawQuery(
     `select
-      ${getDateStringQuery('g.t', unit)} as t, 
+      ${getDateStringQuery('g.t', unit)} as x, 
       g.y as y
     from
       (select 

rollup.tracker.config.js

@@ -6,12 +6,12 @@ import { terser } from 'rollup-plugin-terser';
 export default {
   input: 'tracker/index.js',
   output: {
-    file: 'public/umami.js',
+    file: 'public/script.js',
     format: 'iife',
   },
   plugins: [
     replace({
-      '/api/collect': process.env.COLLECT_API_ENDPOINT || '/api/collect',
+      '/api/send': process.env.COLLECT_API_ENDPOINT || '/api/send',
       delimiters: ['', ''],
       preventAssignment: true,
     }),

tracker/index.js

@@ -61,7 +61,7 @@
   const root = hostUrl
     ? hostUrl.replace(/\/$/, '')
     : currentScript.src.split('/').slice(0, -1).join('/');
-  const endpoint = `${root}/api/collect`;
+  const endpoint = `${root}/api/send`;
   const screen = `${width}x${height}`;
   const eventClass = /^umami--([a-z]+)--([\w]+[\w-]*)$/;
   const eventSelect = "[class*='umami--']";

yarn.lock

@@ -1745,6 +1745,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@netlify/esbuild-android-64@0.14.39":
   version "0.14.39"
   resolved "https://registry.yarnpkg.com/@netlify/esbuild-android-64/-/esbuild-android-64-0.14.39.tgz#7bd30aba94a92351d2c5e25e178ceb824f3c2f99"
@@ -3348,28 +3353,17 @@ chalk@^4.0.0, chalk@^4.1.1, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chart.js@^2.9.4:
+chart.js@^4.2.1:
-  version "2.9.4"
+  version "4.2.1"
-  resolved "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.1.tgz#d2bd5c98e9a0ae35408975b638f40513b067ba1d"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  integrity sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==
   dependencies:
-    chartjs-color "^2.1.0"
+    "@kurkle/color" "^0.3.0"
-    moment "^2.10.2"
 
-chartjs-color-string@^0.6.0:
+chartjs-adapter-date-fns@^3.0.0:
-  version "0.6.0"
+  version "3.0.0"
-  resolved "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
 
 chokidar@^3.5.3:
   version "3.5.3"
@@ -3464,7 +3458,7 @@ cluster-key-slot@^1.1.0:
   resolved "https://registry.yarnpkg.com/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz#88ddaa46906e303b5de30d3153b7d9fe0a0c19ac"
   integrity sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==
 
-color-convert@^1.9.0, color-convert@^1.9.3:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -6117,7 +6111,7 @@ moment-timezone@^0.5.35:
   dependencies:
     moment "^2.29.4"
 
-"moment@>= 2.9.0", moment@^2.10.2, moment@^2.29.4:
+"moment@>= 2.9.0", moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@@ -7082,10 +7076,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-basics@^0.72.0:
+react-basics@^0.73.0:
-  version "0.72.0"
+  version "0.73.0"
-  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.72.0.tgz#23dbd61d5ac6bb8b8d61f1f3adcebb7edeab8a26"
+  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.73.0.tgz#9555563f3407ac417dc833dfca47588123d55535"
-  integrity sha512-dWthEwyh/ilt1BSPYwMdd1oE/OFDp8oZ5udZGrdXs5guRh9Ukar4V4chQPbnuZPYUnAH4jg19H5Fesvz2lSaaw==
+  integrity sha512-eEK8yWWrXO7JATBlPKBfFQlD1hNZoNeEtlYNx+QjOCLKu1qjClutP5nXWHmX4gHE97XFwUKzbTU35NkNEy5C0w==
   dependencies:
     classnames "^2.3.1"
     date-fns "^2.29.3"