fix(events): pad hourly data for Events → Today chart (fixes #3697)

[SamP231004]

Fixes: #3697 — Events view for "Today" doesn't show all hourly columns

Summary

This patch ensures that the Events → Today chart displays all hourly buckets (0–23) between the selected minDate and maxDate.
Previously, the chart only rendered hours that contained data and added a single placeholder bar at 11 PM, which made the graph appear truncated.

Changes

• Updated padTimeSeriesChartData in src/components/charts/BarChart.tsx:
  • Handles Chart.js-style datasets using { x, y } points.
  • Pads missing hourly buckets between minDate and maxDate with zero values.
  • Accepts a locale parameter for label formatting.
  • Improved type-safety for DATE_FORMATS.
• Updated BarChart to pass locale and apply the padding function when rendering time-series data.

Verification

Verified locally using Docker:

docker compose build
docker compose up -d

After the change, the Events → Today chart correctly renders 24 hourly columns with zero-height bars for empty hours.

Notes

• Frontend-only change — no database or backend modifications.
• Uses dayjs to generate hourly steps between minDate and maxDate.
• If preferred, a follow-up patch can normalize all padding steps to UTC for consistency.

Screenshot (After Fix)

[vercel]

@SamP231004 is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes the Events → Today chart to display all 24 hourly columns by adding a padTimeSeriesChartData function that fills missing time buckets between minDate and maxDate.

Major changes:

• Added stepByUnit helper to generate hourly steps using dayjs
• Added padTimeSeriesChartData to pad missing time buckets with zero values
• Supports Chart.js dataset formats with {x, y} coordinate objects
• Applied padding via useMemo when rendering timeseries charts

Critical issues found:

• Locale is hardcoded as 'en' on line 91, breaking internationalization for non-English users
• The locale parameter needs to be threaded through padTimeSeriesChartData → BarChart useMemo
• chartOptions useMemo has incorrect dependency (uses paddedChartData instead of the actual dependencies it relies on)

Confidence Score: 2/5

• This PR has critical i18n bugs that will break the feature for non-English locales
• The hardcoded locale on line 91 is a blocker - it will cause chart labels to always appear in English regardless of user's locale setting. The incorrect useMemo dependencies could also cause stale renders. While the core padding logic appears sound, these bugs make it unsafe to merge without fixes.
• src/components/charts/BarChart.tsx requires fixes to locale handling and useMemo dependencies before merging

Important Files Changed

File Analysis

Filename	Score	Overview
src/components/charts/BarChart.tsx	2/5	Adds hourly padding logic but has critical locale hardcoding bug that breaks i18n, plus incorrect useMemo dependencies

Sequence Diagram

sequenceDiagram
    participant User
    participant EventsChart
    participant BarChart
    participant padTimeSeriesChartData
    participant Chart.js

    User->>EventsChart: View "Today" events
    EventsChart->>EventsChart: Fetch event series data
    EventsChart->>EventsChart: useMemo: create chartData with datasets
    EventsChart->>BarChart: Pass chartData, minDate, maxDate, unit='hour'
    BarChart->>BarChart: useMemo: check if timeseries && unit && minDate && maxDate
    BarChart->>padTimeSeriesChartData: Call with chartData, unit, minDate, maxDate
    padTimeSeriesChartData->>padTimeSeriesChartData: Generate hourly steps (0-23) using dayjs
    padTimeSeriesChartData->>padTimeSeriesChartData: Map existing data to ISO timestamps
    padTimeSeriesChartData->>padTimeSeriesChartData: Fill missing hours with {x, y: 0}
    padTimeSeriesChartData-->>BarChart: Return paddedChartData with all 24 hours
    BarChart->>BarChart: useMemo: build chartOptions with scales
    BarChart->>Chart.js: Render with paddedChartData
    Chart.js-->>User: Display chart with all hourly columns (0-23)

Loading

_{1 file reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: hardcoded 'en' locale will break internationalization - should accept locale as parameter

Suggested change

	const newLabels = stepKeys.map(k => formatDate(new Date(k), DATE_FORMATS[unit], 'en')); // labels formatted; locale handled by Chart options
	const newLabels = stepKeys.map(k => formatDate(new Date(k), DATE_FORMATS[unit], locale));

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/charts/BarChart.tsx
Line: 91:91

Comment:
**logic:** hardcoded `'en'` locale will break internationalization - should accept locale as parameter

```suggestion
    const newLabels = stepKeys.map(k => formatDate(new Date(k), DATE_FORMATS[unit], locale));
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

logic: missing locale parameter - will break when locale is needed on line 91

Suggested change

	function padTimeSeriesChartData(
	chartData: any,
	unit: ManipulateType,
	minDate?: Date,
	maxDate?: Date,
	) {
	function padTimeSeriesChartData(
	chartData: any,
	unit: ManipulateType,
	minDate?: Date,
	maxDate?: Date,
	locale?: string,
	) {

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/charts/BarChart.tsx
Line: 57:62

Comment:
**logic:** missing `locale` parameter - will break when locale is needed on line 91

```suggestion
function padTimeSeriesChartData(
  chartData: any,
  unit: ManipulateType,
  minDate?: Date,
  maxDate?: Date,
  locale?: string,
) {
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

logic: needs to pass locale parameter to fix hardcoded locale issue

Suggested change

	const paddedChartData = useMemo(() => {
	if (XAxisType === 'timeseries' && unit && minDate && maxDate) {
	return padTimeSeriesChartData(chartData, unit as ManipulateType, minDate, maxDate);
	}
	return chartData;
	}, [chartData, unit, XAxisType, minDate?.toString(), maxDate?.toString()]);
	const paddedChartData = useMemo(() => {
	if (XAxisType === 'timeseries' && unit && minDate && maxDate) {
	return padTimeSeriesChartData(chartData, unit as ManipulateType, minDate, maxDate, locale);
	}
	return chartData;
	}, [chartData, unit, XAxisType, minDate?.toString(), maxDate?.toString(), locale]);

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/charts/BarChart.tsx
Line: 174:179

Comment:
**logic:** needs to pass `locale` parameter to fix hardcoded locale issue

```suggestion
  const paddedChartData = useMemo(() => {
    if (XAxisType === 'timeseries' && unit && minDate && maxDate) {
      return padTimeSeriesChartData(chartData, unit as ManipulateType, minDate, maxDate, locale);
    }
    return chartData;
  }, [chartData, unit, XAxisType, minDate?.toString(), maxDate?.toString(), locale]);
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

logic: paddedChartData in dependency array but not used in function - should reference other actual dependencies like minDate, maxDate, locale

Suggested change

	}, [paddedChartData, colors, unit, stacked, renderXLabel, renderYLabel]);
	}, [chartData, colors, unit, stacked, renderXLabel, renderYLabel, minDate, maxDate, locale]);

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/charts/BarChart.tsx
Line: 225:225

Comment:
**logic:** `paddedChartData` in dependency array but not used in function - should reference other actual dependencies like `minDate`, `maxDate`, `locale`

```suggestion
  }, [chartData, colors, unit, stacked, renderXLabel, renderYLabel, minDate, maxDate, locale]);
```

How can I resolve this? If you propose a fix, please make it concise.

[mikecao]

There are issues with locale. Additionally we shouldn't need a new dependency on dayjs as we already use date-fns.