watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 06:37:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Updated timezone hook, fixed chart rendering, added icons.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/components/hooks/queries/useReport.ts
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 = {

2
src/components/hooks/queries/useWebsitePageviews.ts
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();

58
src/components/hooks/useTheme.ts
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,38 +10,40 @@ export function useTheme() {
const theme = useStore(selector) || getItem(THEME_CONFIG) || DEFAULT_THEME;
const primaryColor = colord(THEME_COLORS[theme].primary);
const colors = {
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(),
const colors = useMemo(() => {
return {
theme: {
...THEME_COLORS[theme],
},
visitors: {
hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
backgroundColor: primaryColor.alpha(0.6).toRgbString(),
borderColor: primaryColor.alpha(0.9).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
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(),
},
},
},
map: {
baseColor: THEME_COLORS[theme].primary,
fillColor: THEME_COLORS[theme].gray100,
strokeColor: THEME_COLORS[theme].primary,
hoverColor: THEME_COLORS[theme].primary,
},
};
map: {
baseColor: THEME_COLORS[theme].primary,
fillColor: THEME_COLORS[theme].gray100,
strokeColor: 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);

22
src/components/hooks/useTimezone.ts
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) => {
setItem(TIMEZONE_CONFIG, value);
setTimezone(value);
},
[setTimezone],
);
const saveTimezone = (value: string) => {
setItem(TIMEZONE_CONFIG, value);
setTimezone(value);
};
return [timezone, saveTimezone];
return { timezone, saveTimezone };
}
export default useTimezone;