Updated timezone hook, fixed chart rendering, added icons.

src/app/(main)/profile/DateRangeSetting.module.css

@@ -0,0 +1,3 @@
+.field {
+  width: 200px;
+}

src/app/(main)/profile/DateRangeSetting.tsx

@@ -3,6 +3,7 @@ import { Button, Flexbox } from 'react-basics';
 import { useDateRange, useMessages } from 'components/hooks';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
 import { DateRange } from 'lib/types';
+import styles from './DateRangeSetting.module.css';
 
 export function DateRangeSetting() {
   const { formatMessage, labels } = useMessages();
@@ -13,8 +14,9 @@ export function DateRangeSetting() {
   const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
 
   return (
-    <Flexbox gap={10}>
+    <Flexbox gap={10} width={300}>
       <DateFilter
+        className={styles.field}
         value={value}
         startDate={dateRange.startDate}
         endDate={dateRange.endDate}

src/app/(main)/profile/TimezoneSetting.module.css

@@ -1,3 +1,7 @@
+.dropdown {
+  width: 200px;
+}
+
 div.menu {
   max-height: 300px;
   width: 300px;

src/app/(main)/profile/TimezoneSetting.tsx

@@ -1,26 +1,29 @@
 import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
-import { listTimeZones } from 'timezone-support';
+import moment from 'moment-timezone';
 import { useTimezone, useMessages } from 'components/hooks';
 import { getTimezone } from 'lib/date';
 import styles from './TimezoneSetting.module.css';
 
+const timezones = moment.tz.names();
+
 export function TimezoneSetting() {
   const [search, setSearch] = useState('');
   const { formatMessage, labels } = useMessages();
-  const [timezone, saveTimezone] = useTimezone();
+  const { timezone, saveTimezone } = useTimezone();
   const options = search
-    ? listTimeZones().filter(n => n.toLowerCase().includes(search.toLowerCase()))
+    ? timezones.filter(n => n.toLowerCase().includes(search.toLowerCase()))
-    : listTimeZones();
+    : timezones;
 
   const handleReset = () => saveTimezone(getTimezone());
 
   return (
     <Flexbox gap={10}>
       <Dropdown
+        className={styles.dropdown}
         items={options}
         value={timezone}
-        onChange={saveTimezone}
+        onChange={(value: any) => saveTimezone(value)}
         menuProps={{ className: styles.menu }}
         allowSearch={true}
         onSearch={setSearch}

src/components/common/Favicon.tsx

@@ -16,7 +16,8 @@ export function Favicon({ domain, ...props }) {
     <img
       className={styles.favicon}
       src={`https://icons.duckduckgo.com/ip3/${hostName}.ico`}
-      height="16"
+      width={16}
+      height={16}
       alt=""
       {...props}
     />

src/components/hooks/queries/useReport.ts

@@ -8,7 +8,7 @@ export function useReport(reportId: string, defaultParameters: { [key: string]:
   const [report, setReport] = useState(null);
   const [isRunning, setIsRunning] = useState(false);
   const { get, post } = useApi();
-  const [timezone] = useTimezone();
+  const { timezone } = useTimezone();
   const { formatMessage, labels } = useMessages();
 
   const baseParameters = {

src/components/hooks/queries/useWebsitePageviews.ts

@@ -4,7 +4,7 @@ export function useWebsitePageviews(websiteId: string, options?: { [key: string]
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit } = dateRange;
-  const [timezone] = useTimezone();
+  const { timezone } = useTimezone();
   const {
     query: { url, referrer, os, browser, device, country, region, city, title },
   } = useNavigation();

src/components/hooks/useTheme.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import useStore, { setTheme } from 'store/app';
 import { getItem, setItem } from 'next-basics';
 import { DEFAULT_THEME, THEME_COLORS, THEME_CONFIG } from 'lib/constants';
@@ -10,38 +10,40 @@ export function useTheme() {
   const theme = useStore(selector) || getItem(THEME_CONFIG) || DEFAULT_THEME;
   const primaryColor = colord(THEME_COLORS[theme].primary);
 
-  const colors = {
+  const colors = useMemo(() => {
-    theme: {
+    return {
-      ...THEME_COLORS[theme],
+      theme: {
-    },
+        ...THEME_COLORS[theme],
-    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: {
+      chart: {
-        hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
+        text: THEME_COLORS[theme].gray700,
-        backgroundColor: primaryColor.alpha(0.6).toRgbString(),
+        line: THEME_COLORS[theme].gray200,
-        borderColor: primaryColor.alpha(0.9).toRgbString(),
+        views: {
-        hoverBorderColor: primaryColor.toRgbString(),
+          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(),
+        },
       },
-    },
+      map: {
-    map: {
+        baseColor: THEME_COLORS[theme].primary,
-      baseColor: THEME_COLORS[theme].primary,
+        fillColor: THEME_COLORS[theme].gray100,
-      fillColor: THEME_COLORS[theme].gray100,
+        strokeColor: THEME_COLORS[theme].primary,
-      strokeColor: THEME_COLORS[theme].primary,
+        hoverColor: THEME_COLORS[theme].primary,
-      hoverColor: THEME_COLORS[theme].primary,
+      },
-    },
+    };
-  };
+  }, [theme]);
 
-  function saveTheme(value) {
+  const saveTheme = (value: string) => {
     setItem(THEME_CONFIG, value);
     setTheme(value);
-  }
+  };
 
   useEffect(() => {
     document.body.setAttribute('data-theme', theme);

src/components/hooks/useTimezone.ts

@@ -1,20 +1,18 @@
-import { useState, useCallback } from 'react';
+import { setItem } from 'next-basics';
-import { getTimezone } from 'lib/date';
-import { getItem, setItem } from 'next-basics';
 import { TIMEZONE_CONFIG } from 'lib/constants';
+import useStore, { setTimezone } from 'store/app';
+
+const selector = (state: { timezone: string }) => state.timezone;
 
 export function useTimezone() {
-  const [timezone, setTimezone] = useState(getItem(TIMEZONE_CONFIG) || getTimezone());
+  const timezone = useStore(selector);
 
-  const saveTimezone = useCallback(
+  const saveTimezone = (value: string) => {
-    (value: string) => {
+    setItem(TIMEZONE_CONFIG, value);
-      setItem(TIMEZONE_CONFIG, value);
+    setTimezone(value);
-      setTimezone(value);
+  };
-    },
-    [setTimezone],
-  );
 
-  return [timezone, saveTimezone];
+  return { timezone, saveTimezone };
 }
 
 export default useTimezone;

src/components/metrics/EventsChart.tsx

@@ -22,7 +22,7 @@ export interface EventsChartProps {
 export function EventsChart({ websiteId, className, token }: EventsChartProps) {
   const [{ startDate, endDate, unit, offset }] = useDateRange(websiteId);
   const { locale } = useLocale();
-  const [timezone] = useTimezone();
+  const { timezone } = useTimezone();
   const {
     query: { url, event },
   } = useNavigation();

src/components/metrics/ReferrersTable.tsx

@@ -1,18 +1,23 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
+import Favicon from 'components/common/Favicon';
 import { useMessages } from 'components/hooks';
+import { Flexbox } from 'react-basics';
 
 export function ReferrersTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
 
   const renderLink = ({ x: referrer }) => {
     return (
-      <FilterLink
+      <Flexbox alignItems="center">
-        id="referrer"
+        <Favicon domain={referrer} />
-        value={referrer}
+        <FilterLink
-        externalUrl={`https://${referrer}`}
+          id="referrer"
-        label={!referrer && formatMessage(labels.none)}
+          value={referrer}
-      />
+          externalUrl={`https://${referrer}`}
+          label={!referrer && formatMessage(labels.none)}
+        />
+      </Flexbox>
     );
   };
 

src/pages/api/send.ts

@@ -20,16 +20,17 @@ import * as yup from 'yup';
 
 export interface CollectRequestBody {
   payload: {
-    data: { [key: string]: any };
-    hostname: string;
-    ip: string;
-    language: string;
-    referrer: string;
-    screen: string;
-    title: string;
-    url: string;
     website: string;
-    name: string;
+    data?: { [key: string]: any };
+    hostname?: string;
+    ip?: string;
+    language?: string;
+    name?: string;
+    referrer?: string;
+    screen?: string;
+    tag?: string;
+    title?: string;
+    url: string;
   };
   type: CollectionType;
 }
@@ -72,6 +73,7 @@ const schema = {
         url: yup.string(),
         website: yup.string().uuid().required(),
         name: yup.string().max(50),
+        tag: yup.string().max(50),
       })
       .required(),
     type: yup

src/store/app.ts

@@ -6,8 +6,10 @@ import {
   DEFAULT_THEME,
   LOCALE_CONFIG,
   THEME_CONFIG,
+  TIMEZONE_CONFIG,
 } from 'lib/constants';
 import { getItem } from 'next-basics';
+import { getTimezone } from 'lib/date';
 
 function getDefaultTheme() {
   return typeof window !== 'undefined'
@@ -20,6 +22,7 @@ function getDefaultTheme() {
 const initialState = {
   locale: getItem(LOCALE_CONFIG) || DEFAULT_LOCALE,
   theme: getItem(THEME_CONFIG) || getDefaultTheme() || DEFAULT_THEME,
+  timezone: getItem(TIMEZONE_CONFIG) || getTimezone(),
   dateRange: getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE,
   shareToken: null,
   user: null,
@@ -32,6 +35,10 @@ export function setTheme(theme: string) {
   store.setState({ theme });
 }
 
+export function setTimezone(timezone: string) {
+  store.setState({ timezone });
+}
+
 export function setLocale(locale: string) {
   store.setState({ locale });
 }

src/tracker/index.js

@@ -18,6 +18,7 @@
   const attr = currentScript.getAttribute.bind(currentScript);
   const website = attr(_data + 'website-id');
   const hostUrl = attr(_data + 'host-url');
+  const tag = attr(_data + 'tag');
   const autoTrack = attr(_data + 'auto-track') !== _false;
   const excludeSearch = attr(_data + 'exclude-search') === _true;
   const domain = attr(_data + 'domains') || '';
@@ -216,6 +217,7 @@
         ...getPayload(),
         name: obj,
         data: typeof data === 'object' ? data : undefined,
+        tag,
       });
     } else if (typeof obj === 'object') {
       return send(obj);