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

implement generateTimeSeries for eventsChart

Browse source
This commit is contained in:
Francis Cao 2025-11-10 15:36:43 -08:00
parent 64a6379c3c
commit 49e1582c28
1 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,11 @@
import { useMemo, useState, useEffect } from 'react';
import { colord } from 'colord';
import { BarChart, BarChartProps } from '@/components/charts/BarChart'; import { BarChart, BarChartProps } from '@/components/charts/BarChart';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks'; import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
import { renderDateLabels } from '@/lib/charts'; import { renderDateLabels } from '@/lib/charts';
import { CHART_COLORS } from '@/lib/constants'; import { CHART_COLORS } from '@/lib/constants';
import { LoadingPanel } from '@/components/common/LoadingPanel'; import { generateTimeSeries } from '@/lib/date';
import { colord } from 'colord';
import { useCallback, useEffect, useMemo, useState } from 'react';
export interface EventsChartProps extends BarChartProps { export interface EventsChartProps extends BarChartProps {
websiteId: string; websiteId: string;
@ -15,7 +16,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
const { const {
dateRange: { startDate, endDate, unit }, dateRange: { startDate, endDate, unit },
} = useDateRange(); } = useDateRange();
const { locale } = useLocale(); const { locale, dateLocale } = useLocale();
const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId); const { data, isLoading, error } = useWebsiteEventsSeriesQuery(websiteId);
const [label, setLabel] = useState<string>(focusLabel); const [label, setLabel] = useState<string>(focusLabel);
@ -37,7 +38,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
const color = colord(CHART_COLORS[index % CHART_COLORS.length]); const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
return { return {
label: key, label: key,
data: map[key], data: generateTimeSeries(map[key], startDate, endDate, unit, dateLocale),
lineTension: 0, lineTension: 0,
backgroundColor: color.alpha(0.6).toRgbString(), backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(), borderColor: color.alpha(0.7).toRgbString(),
@ -54,6 +55,8 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
} }
}, [focusLabel]); }, [focusLabel]);
const renderXLabel = useCallback(renderDateLabels(unit, locale), [unit, locale]);
return ( return (
<LoadingPanel isLoading={isLoading} error={error} minHeight="400px"> <LoadingPanel isLoading={isLoading} error={error} minHeight="400px">
{chartData && ( {chartData && (
@ -63,7 +66,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
maxDate={endDate} maxDate={endDate}
unit={unit} unit={unit}
stacked={true} stacked={true}
renderXLabel={renderDateLabels(unit, locale)} renderXLabel={renderXLabel}
height="400px" height="400px"
/> />
)} )}