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

Fixed chart rendering when using date nav buttons.

Browse source
This commit is contained in:
Mike Cao 2025-06-12 23:07:25 -07:00
parent 1649992654
commit 7b5591a3ce
18 changed files with 177 additions and 320 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,26 +1,26 @@
import { useMemo, useState, useEffect } from 'react';
import { colord } from 'colord';
import { BarChart } from '@/components/charts/BarChart';
import { BarChart, BarChartProps } from '@/components/charts/BarChart';
import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
import { renderDateLabels } from '@/lib/charts';
import { CHART_COLORS } from '@/lib/constants';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export interface EventsChartProps {
export interface EventsChartProps extends BarChartProps {
websiteId: string;
className?: string;
focusLabel?: string;
}
export function EventsChart({ websiteId, className, focusLabel }: EventsChartProps) {
export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
const {
dateRange: { startDate, endDate, unit, value },
} = useDateRange(websiteId);
const { locale } = useLocale();
const { data, isLoading } = useWebsiteEventsSeriesQuery(websiteId);
const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
const [label, setLabel] = useState<string>(focusLabel);
const chartData = useMemo(() => {
if (!data) return [];
const chartData: any = useMemo(() => {
if (!data) return;
const map = (data as any[]).reduce((obj, { x, t, y }) => {
if (!obj[x]) {
@ -55,16 +55,18 @@ export function EventsChart({ websiteId, className, focusLabel }: EventsChartPro
}, [focusLabel]);
return (
<BarChart
minDate={startDate}
maxDate={endDate}
className={className}
data={chartData}
unit={unit}
stacked={true}
renderXLabel={renderDateLabels(unit, locale)}
isLoading={isLoading}
isAllTime={value === 'all'}
/>
<LoadingPanel isLoading={isLoading} error={error}>
{chartData && (
<BarChart
chartData={chartData}
minDate={value === 'all' ? undefined : startDate}
maxDate={endDate}
unit={unit}
stacked={true}
renderXLabel={renderDateLabels(unit, locale)}
height="400px"
/>
)}
</LoadingPanel>
);
}