feat: Optimize appearance of graph tick labels on x-axis for date values

[mtrezza]

Pull Request

• Report security issues confidentially.
• Any contribution is under this license.

Summary by CodeRabbit

• New Features
  • Enhanced graph x-axis labels to intelligently display time information—showing times for periods up to 24 hours and dates for longer spans, automatically adapting to your browser's locale settings.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

Warning

Rate limit exceeded

@mtrezza has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 27 minutes and 18 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

This pull request enhances x-axis date formatting for charts. A new helper function formats timestamps contextually (showing time for ≤24-hour spans, dates otherwise) using browser locale. GraphDataUtils computes dateAxisInfo metadata for date axes, and GraphPanel uses this to configure locale-aware tick labels.

Changes

Cohort / File(s)	Summary
Date Axis Tick Formatting src/components/GraphPanel/GraphPanel.react.js	Added formatDateTickLabel() helper to localize and format timestamps as either time (≤24 hours) or date. Integrated date-axis-aware tick configuration into chart x-axis options with callback-based formatting using dateAxisInfo.
Date Axis Detection & Metadata src/lib/GraphDataUtils.js	Extended processBarLineData() return value with new dateAxisInfo field containing isDateAxis, timespanHours, and rawXValues for date-based x-axes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• #3127: Modifies processBarLineData() to accept calculated values in GraphDataUtils, directly affects the same data processing function enhanced here.
• #3111: Adjusts x-axis date label formatting for graph panels, addressing date formatting concerns similar to this PR's locale-aware tick labeling.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is largely incomplete, missing the required 'Issue', 'Approach', and 'Tasks' sections from the template.	Complete the description by adding: the issue link (Closes: ...), detailed explanation of changes in the 'Approach' section, and mark applicable tasks (tests, documentation updates).

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: optimizing graph tick label appearance on the x-axis for date values, which matches the implementation adding date-aware formatting.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/GraphPanel/GraphPanel.react.js`:
- Around line 369-377: The tick callback currently uses the rendered-tick
position (`index`) to look up timestamps, which breaks when Chart.js auto-skips
ticks; update xAxisTicks.callback in GraphPanel.react.js to use the `value`
parameter as the index into dateAxisInfo.rawXValues (i.e., const timestamp =
dateAxisInfo.rawXValues[value]) and keep the fallback to
this.getLabelForValue(value) when timestamp is undefined; ensure this change is
applied inside the dateAxisInfo?.isDateAxis branch that calls
formatDateTickLabel.

[parseplatformorg]

🎉 This change has been released in version 8.3.0-alpha.28