Skip to content

Render echarts tooltips with Lit templates#52235

Open
MindFreeze wants to merge 7 commits into
devfrom
lit-tooltip-formatters
Open

Render echarts tooltips with Lit templates#52235
MindFreeze wants to merge 7 commits into
devfrom
lit-tooltip-formatters

Conversation

@MindFreeze
Copy link
Copy Markdown
Member

Proposed change

Replace raw HTML string interpolation in every echarts tooltip formatter with Lit templates. User-controlled fields (entity friendly_name, device names, node labels) now flow as Lit text expressions and are auto-escaped, removing the need for per-string filterXSS. statistics-chart.ts (the chart that prompted this) previously interpolated param.seriesName into HTML without any sanitization — that XSS vector is closed here.

ha-chart-base.ts gains a central wrap pass: any function tooltip.formatter it finds in the options or in series is wrapped so it can return TemplateResult | typeof nothing | null, with the wrapper rendering into a stable per-formatter container and forwarding null/nothing as a tooltip-suppress signal. New typed helpers in src/resources/echarts/ha-ec-option.ts (HaECOption, HaECSeries, HaTooltipOption, LitTooltipFormatter) let charts express Lit-returning formatters without per-callsite as any casts.

Charts migrated: statistics, both state-history charts, sunburst, sankey, network-graph (and its bluetooth/zwave/zha callers), and all energy graph cards.

Screenshots

Type of change

  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Additional information

  • This PR fixes or closes issue: fixes #
  • This PR is related to issue or discussion:
  • Link to documentation pull request:
  • Link to developer documentation pull request:
  • Link to backend pull request:

Checklist

  • I understand the code I am submitting and can explain how it works.
  • The code change is tested and works locally.
  • There is no commented out code in this PR.
  • I have followed the perfect PR recommendations
  • Any generated code has been carefully reviewed for correctness and compliance with project standards.

If user exposed functionality or configuration variables are added/changed:

To help with the load of incoming pull requests:

Replace raw HTML string interpolation in echarts tooltip formatters with Lit templates so user-controlled fields (entity friendly_name, device names, node labels) are auto-escaped instead of relying on per-string filterXSS. ha-chart-base now wraps any function tooltip.formatter into a stable per-formatter container and handles Lit TemplateResult / nothing / null returns; the public HaECOption type lets charts express Lit-returning formatters without per-callsite casts.
Resolve conflicts in ha-chart-base (_getSeries keeps log-scale handling
and processSeriesTooltipFormatter) and energy-chart-options (compare
suggestedMax extension from dev with HaECOption types).
Comment thread src/components/chart/ha-sankey-chart.ts Outdated
Comment thread src/components/chart/ha-chart-base.ts Outdated
Copy link
Copy Markdown
Member

@bramkragten bramkragten left a comment

Choose a reason for hiding this comment

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

Looks goooooddd!!

@MindFreeze MindFreeze marked this pull request as ready for review May 28, 2026 05:45
@MindFreeze MindFreeze added this to the 2026.6 milestone May 28, 2026
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