watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-13 09:05:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix chart and timezone issues, pass consistent dates to DB.
Some checks failed
Create docker images (cloud) / Build, push, and deploy (push) Waiting to run
Details
Node.js CI / build (postgresql, 18.18, 10) (push) Has been cancelled
Details

Browse source 
Closes #3700
This commit is contained in:
Francis Cao 2025-11-13 15:52:24 -08:00
parent 81bedec6d5
commit 6751bf88bb
10 changed files with 157 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/metrics/EventsChart.tsx
View file

@ -1,6 +1,11 @@
import { BarChart, BarChartProps } from '@/components/charts/BarChart';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
import {
useDateRange,
useLocale,
useTimezone,
useWebsiteEventsSeriesQuery,
} from '@/components/hooks';
import { renderDateLabels } from '@/lib/charts';
import { CHART_COLORS } from '@/lib/constants';
import { generateTimeSeries } from '@/lib/date';
@ -13,9 +18,10 @@ export interface EventsChartProps extends BarChartProps {
}
export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
const { timezone } = useTimezone();
const {
dateRange: { startDate, endDate, unit },
} = useDateRange();
} = useDateRange({ timezone: timezone });
const { locale, dateLocale } = useLocale();
const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
const [label, setLabel] = useState<string>(focusLabel);
@ -33,20 +39,32 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
return obj;
}, {});
return {
datasets: Object.keys(map).map((key, index) => {
const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
return {
label: key,
data: generateTimeSeries(map[key], startDate, endDate, unit, dateLocale),
lineTension: 0,
backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(),
borderWidth: 1,
};
}),
focusLabel,
};
if (!map || Object.keys(map).length === 0) {
return {
datasets: [
{
data: generateTimeSeries([], startDate, endDate, unit, dateLocale),
lineTension: 0,
borderWidth: 1,
},
],
};
} else {
return {
datasets: Object.keys(map).map((key, index) => {
const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
return {
label: key,
data: generateTimeSeries(map[key], startDate, endDate, unit, dateLocale),
lineTension: 0,
backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(),
borderWidth: 1,
};
}),
focusLabel,
};
}
}, [data, startDate, endDate, unit, focusLabel]);
useEffect(() => {