Skip to content

Cherry-pick #44813: Update chart styles / fix bugs#44925

Merged
sgress454 merged 1 commit into
rc-minor-fleet-v4.85.0from
sgress454/chart-styles-bugs-cp
May 7, 2026
Merged

Cherry-pick #44813: Update chart styles / fix bugs#44925
sgress454 merged 1 commit into
rc-minor-fleet-v4.85.0from
sgress454/chart-styles-bugs-cp

Conversation

@sgress454
Copy link
Copy Markdown
Contributor

Cherry-pick of #44813 into the RC branch.

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #44676 

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [ ] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.
n/a, unreleased

## Testing

- [ ] Added/updated automated tests
just style fixes, but the ["disable features: frontend"
PR](#44797) has some tests
  - [X] QA'd all new/changed functionality manually
  - [x] make hosts enrolled chart match height w/ checkerboard
  - [x] use empty boxes with outline instead of filled boxes for 0 value
  - [x] use dark-mode colors for green theme
- [x] put host enrolled chart bars between horizontal rules instead of
on top of them
- [x] only show date and # of hosts in tooltip, no percentage or
denominator
  - [X] add day of week to checkerboard tooltip
  - [x] use comma in tooltip numbers
  - [x] use relative shading in both datasets
- [x] make text size match between hosts enrolled and checkerboard
titles
- [x] on vuln chart tooltip, add "Want more control over this chart?
Comprehensive vulnerability filtering is [coming soon](link to this
issue: #44746)."
  - [x] on vuln chart tooltip, fix link styling in dark mode
  - [x] change "Hosts active" => "Hosts online" 
- [x] Update tooltip copy to "The number of hosts detected online during
a given hour. A host is considered online if it's actively checking in
to Fleet. This includes sleeping hosts (e.g. lid closed)."
- [X] Fix issue where at smaller widths, the entire page has a
horizontal scrollbar
- [X] Make charts stay pegged to the right side when first loaded and
when resizing window

Charts align:
<img width="1223" height="479" alt="image"
src="https://github.com/user-attachments/assets/4a7ba859-a0aa-43c6-a06b-4ef8361e2418"
/>

Data tooltip:
<img width="162" height="77" alt="image"
src="https://github.com/user-attachments/assets/5b1768e4-0736-4e45-ad49-6faf31958352"
/>

Vuln tooltip:
<img width="387" height="123" alt="image"
src="https://github.com/user-attachments/assets/98c2096f-fa4e-4b06-917e-ec6eed844b05"
/>

Hosts online tooltip:
<img width="360" height="113" alt="image"
src="https://github.com/user-attachments/assets/bd65cd1d-0f0c-4c72-a31d-ffe602cacd9c"
/>

For unreleased bug fixes in a release candidate, one of:

- [X] Confirmed that the fix is not expected to adversely impact load
test results


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Optional relative scaling for chart visualizations
  * Responsive chart sizing in the Hosts Enrolled card

* **Improvements**
  * Dataset label updated to "Hosts online"
* Tooltips and labels show formatted host counts with proper
pluralization
  * Day labels now include weekday for clearer dates
  * Chart descriptions mention upcoming vulnerability filtering
  * Tighter header, dropdown, scrollbar, and dark‑mode styling

* **Tests**
* Updated dataset heading test and added a relative‑scale color ramp
test
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Rachael Shaw <r@rachael.wtf>
Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
Co-authored-by: Luke Heath <luke@fleetdm.com>
@sgress454 sgress454 requested a review from a team as a code owner May 7, 2026 13:58
Copy link
Copy Markdown

@claude claude Bot left a comment

Choose a reason for hiding this comment

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

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

Tip: disable this comment in your organization's Code Review settings.

@codecov
Copy link
Copy Markdown

codecov Bot commented May 7, 2026

Codecov Report

❌ Patch coverage is 91.42857% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.75%. Comparing base (9de8af6) to head (8e73645).
⚠️ Report is 25 commits behind head on rc-minor-fleet-v4.85.0.

Files with missing lines Patch % Lines
.../pages/DashboardPage/cards/ChartCard/ChartCard.tsx 0.00% 2 Missing ⚠️
.../DashboardPage/cards/ChartCard/CheckerboardViz.tsx 96.96% 1 Missing ⚠️
Additional details and impacted files
@@                    Coverage Diff                     @@
##           rc-minor-fleet-v4.85.0   #44925      +/-   ##
==========================================================
+ Coverage                   66.72%   66.75%   +0.03%     
==========================================================
  Files                        2626     2630       +4     
  Lines                      211198   211223      +25     
  Branches                     9428     9501      +73     
==========================================================
+ Hits                       140924   141006      +82     
+ Misses                      57485    57428      -57     
  Partials                    12789    12789              
Flag Coverage Δ
frontend 54.93% <91.42%> (+0.19%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@sgress454 sgress454 merged commit c2e57a8 into rc-minor-fleet-v4.85.0 May 7, 2026
16 checks passed
@sgress454 sgress454 deleted the sgress454/chart-styles-bugs-cp branch May 7, 2026 14:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants