Skip to content

fix(allocation): render distinct hourly bars on home page chart#275

Open
tormodmacleod wants to merge 1 commit into
opencost:mainfrom
tormodmacleod:fix/allocation-chart-hourly-buckets
Open

fix(allocation): render distinct hourly bars on home page chart#275
tormodmacleod wants to merge 1 commit into
opencost:mainfrom
tormodmacleod:fix/allocation-chart-hourly-buckets

Conversation

@tormodmacleod

Copy link
Copy Markdown
Contributor

What does this PR change?

  • Fixes a bug in the home-page Cost Allocation chart where selecting Hourly granularity collapsed all 24 hourly buckets into a single bar. Carbon Charts stacks bars that share the same group field, and getDateLabel returned only month/day — so every hourly bucket received the same MM/DD group label and merged together.
  • getDateLabel now includes the hour (MM/DD HH) when accumulate === "hour". Other granularities (day, week, month, quarter, all) are unchanged because their bucket starts already produce distinct month/day labels.

Does this PR relate to any other PRs?

  • None.

How will this PR impact users?

  • Users selecting Hourly granularity on the home page Cost Allocation chart will now see one bar per hour instead of a single merged bar. The data was always being fetched correctly from /allocation/compute — only the rendering was wrong.
  • No impact on the Report Builder: it uses recharts, which renders each data point as a separate bar regardless of duplicate labels, so its hourly view was already correct.

Does this PR address any GitHub or Zendesk issues?

  • None.

How was this PR tested?

  • Manual: on the home page Cost Allocation chart, set Granularity to Hourly with Window=Yesterday and confirmed 24 distinct bars rendered (one per UTC hour), each labelled MM/DD HH.
  • npm run typecheck — no new type errors introduced (the 57 pre-existing legacy errors are unchanged).

Does this PR require changes to documentation?

  • No. Pure bug fix in chart rendering; the API contract and UI surface are unchanged.

Have you labeled this PR and its corresponding Issue as "next release" if it should be part of the next OpenCost release? If not, why not?

  • Yes — small, low-risk bug fix. Targeting the next release.

When `accumulate=hour` was selected on the home page Cost Allocation
chart, all 24 hourly buckets collapsed into a single bar. Carbon
Charts stacks bars sharing the same `group` field, and `getDateLabel`
returned only month/day — so every hourly bucket received the same
`MM/DD` group label and merged together.

Include the hour (`MM/DD HH`) in the group label when accumulate is
hourly. Other granularities (day, week, month, quarter, all) are
unchanged because their bucket starts already produce distinct
month/day labels.

The Report Builder is unaffected: it uses recharts, which renders
each data point as a separate bar regardless of duplicate labels.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Tormod Macleod <tormod.macleod@gmail.com>
@netlify

netlify Bot commented Jun 16, 2026

Copy link
Copy Markdown

Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit 3d15b31
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/6a3150eb0b437300082a56db
😎 Deploy Preview https://deploy-preview-275--opencost-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@ameijer ameijer left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks @tormodmacleod

@ameijer

ameijer commented Jul 9, 2026

Copy link
Copy Markdown
Member

@tormodmacleod loks good to us, can you fix conflicts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants