Updated timezone hook, fixed chart rendering, added icons.

This commit is contained in:
Mike Cao 2024-03-29 16:04:39 -07:00
parent 5a2330ba2a
commit 291562f6c2
14 changed files with 94 additions and 65 deletions

View File

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

View File

@ -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}

View File

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

View File

@ -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()))
: listTimeZones();
? timezones.filter(n => n.toLowerCase().includes(search.toLowerCase()))
: 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}

View File

@ -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}
/>

View File

@ -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 = {

View File

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

View File

@ -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,7 +10,8 @@ export function useTheme() {
const theme = useStore(selector) || getItem(THEME_CONFIG) || DEFAULT_THEME;
const primaryColor = colord(THEME_COLORS[theme].primary);
const colors = {
const colors = useMemo(() => {
return {
theme: {
...THEME_COLORS[theme],
},
@ -37,11 +38,12 @@ export function useTheme() {
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);

View File

@ -1,20 +1,18 @@
import { useState, useCallback } from 'react';
import { getTimezone } from 'lib/date';
import { getItem, setItem } from 'next-basics';
import { 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(
(value: string) => {
const saveTimezone = (value: string) => {
setItem(TIMEZONE_CONFIG, value);
setTimezone(value);
},
[setTimezone],
);
};
return [timezone, saveTimezone];
return { timezone, saveTimezone };
}
export default useTimezone;

View File

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

View File

@ -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 (
<Flexbox alignItems="center">
<Favicon domain={referrer} />
<FilterLink
id="referrer"
value={referrer}
externalUrl={`https://${referrer}`}
label={!referrer && formatMessage(labels.none)}
/>
</Flexbox>
);
};

View File

@ -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

View File

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

View File

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