Skip to content

fix: Installations graphs responsiveness - #1022

Open
Quentame wants to merge 6 commits into
home-assistant:devfrom
hacf-fr:fix/responsive_graphs
Open

fix: Installations graphs responsiveness#1022
Quentame wants to merge 6 commits into
home-assistant:devfrom
hacf-fr:fix/responsive_graphs

Conversation

@Quentame

@Quentame Quentame commented Oct 24, 2025

Copy link
Copy Markdown
Member

fixes #926 & fixes #973

How:

  • Explicitly activate chart responsive mode
  • use a custom HTML Legend Plugin that make the chart legend responsive (official exemple)
  • use plugins.legend.labels.usePointStyle = true to reduce the legend item width (and better align with the chart style)

Also:

  • Code style cleanup with better reusability
  • Avoid inline styling
  • Factorise plugins.tooltip.callbacks.footer into tooltipFooterCallback()
  • Change the div ID for the installations per countries from svgMap (?) to installationsPerCountry

ChartJS Doc:

BEFORE AFTER
desktop (width: 1440px) desktop (width: 1440px)
mobile iPad mini (width: 768px) ⚠️ screen capture tool is missing some part of the screen mobile iPad mini (width: 768px) ⚠️ screen capture tool is missing some part of the screen
mobile iPhone 12 Pro (width: 390px) mobile iPhone 12 Pro (width: 390px)

@Quentame
Quentame force-pushed the fix/responsive_graphs branch from 303f830 to 990ed50 Compare October 27, 2025 13:39
@Quentame Quentame mentioned this pull request Oct 27, 2025
@Quentame
Quentame marked this pull request as ready for review October 27, 2025 14:00
@Quentame
Quentame requested a review from ludeeus October 28, 2025 15:51
ludeeus pushed a commit that referenced this pull request Nov 11, 2025
- `site/src/_layouts/base.html` formating is done with #1024
- `site/src/index.html` formating is done with #1022
@ludeeus
ludeeus removed their request for review November 11, 2025 14:28
@djwmarcx
djwmarcx self-requested a review February 3, 2026 14:13
@Quentame
Quentame force-pushed the fix/responsive_graphs branch from 376ee21 to 830f36b Compare February 5, 2026 13:37
@Quentame
Quentame force-pushed the fix/responsive_graphs branch from 830f36b to eb6baca Compare April 17, 2026 10:12
@Quentame
Quentame marked this pull request as draft April 17, 2026 10:13
@Quentame
Quentame force-pushed the fix/responsive_graphs branch from eb6baca to 15e9e98 Compare April 17, 2026 14:11
@Quentame
Quentame marked this pull request as ready for review April 17, 2026 14:12
Comment thread site/src/index.html
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
.chart__legend__text--bold {
display: none;

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

removes the count and percentage on legend items on medium screens (mini tablet or portrait tablet).

should we also remove them from phones ?

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.

Missing screen mover (data not showed completelly) Version History table missing labels

1 participant