Jan Layola 0e8e054db1
Sync charts zoom in history tab (#26898)
* Add chart zoom event system and sync infrastructure to chart-base

- Replace inline datazoom handler with dedicated _handleDataZoomEvent method
- Add _syncZoomState method for zoom state synchronization
- Refactor zoom detection to be more robust and reliable

* Add hide reset button functionality

- Add hideResetButton property to ha-chart-base component
- Add hideResetButton property to state-history-chart-line component
- Add hideResetButton property to state-history-chart-timeline component
- Implement conditional reset button rendering based on hideResetButton flag
- Pass hideResetButton prop through component hierarchy

This allows parent components to control reset button visibility when
implementing custom reset functionality or coordinated multi-chart resets.

* Implement chart zoom synchronization

- Add chart-zoom event handlers to state-history-chart-line component
- Add chart-zoom event handlers to state-history-chart-timeline component
- Forward zoom events with chart index for identification

This enables individual charts to communicate zoom changes to parent
components for coordinated multi-chart synchronization.

* Add floating reset button and sync orchestration

- Add chart-zoom event type definition to HASSDomEvents interface
- Add global zoom state tracking with _hasZoomedCharts property
- Add _isSyncing flag to prevent infinite sync loops
- Implement _handleTimelineSync method for coordinating chart synchronization
- Implement _handleGlobalZoomReset method for resetting all charts
- Enable hide-reset-button on individual charts to use global reset
- Add floating reset button with Material Design styling

On history page the floating reset button appears when any chart is zoomed
and provides a single point to reset all synchronized charts simultaneously.

* Refactor chart zoom synchronization to use public API

Replace direct ECharts dispatchAction calls with proper zoom methods. The parent component now calls chartComponent.zoom() instead of accessing internal chart.dispatchAction() directly.

* Remove duplicate TypeScript declaration of the "chart-zoom" event

* Fix tooltips not shown due to xAxisPointer hidden

* Use chart zoom function in history charts

* Apply code review feedback

* Remove unnecessary any types

* Apply code review feedback
2025-09-17 10:36:28 +03:00
2025-04-28 16:04:47 +03:00
2025-08-29 08:12:28 +00:00
2025-06-27 15:59:14 +02:00
2025-08-29 08:12:28 +00:00
2025-09-03 12:05:19 +02:00
2024-09-30 17:10:45 +02:00
2025-01-14 11:24:02 +01:00

Home Assistant Frontend

This is the repository for the official Home Assistant frontend.

Screenshot of the frontend

Development

  • Initial setup: script/setup
  • Development: Instructions
  • Production build: script/build_frontend
  • Gallery: cd gallery && script/develop_gallery
  • Supervisor: Instructions

Frontend development

Classic environment

A complete guide can be found at the following link. It describes a short guide for the build of project.

License

Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.

We use BrowserStack to test Home Assistant on a large variety of devices.

Home Assistant - A project from the Open Home Foundation

20250903.3 Latest
2025-09-04 09:30:48 -05:00
Languages
TypeScript 98.8%
JavaScript 1.1%