Fix bar chart tooltips: consistent hover/click + Svelte 5 mount API#1219
Open
gskjold wants to merge 1 commit into
Open
Fix bar chart tooltips: consistent hover/click + Svelte 5 mount API#1219gskjold wants to merge 1 commit into
gskjold wants to merge 1 commit into
Conversation
The second bar segment in BarChart (export in the day plot, negative price in the price plot) used a native SVG <title> while the first segment used the custom `use:tooltip` action. This made the two behave differently — the export/negative bars only showed a native hover tooltip (and only when barWidth > 15), while the import/positive bars showed the custom tooltip on click. Both segments now use `use:tooltip`. The custom tooltip was also fully broken after the Svelte 5 migration: tooltip.js still used the legacy class API (`new Tooltip()` / `$destroy()`), which throws `Cannot use 'in' operator to search for 'Symbol($state)' in undefined` on Svelte 5. Switched to `mount()` / `unmount()`. Tooltip now shows on click (and mobile tap) immediately, and on desktop hover after a short dwell (HOVER_DELAY) so it doesn't fire while sweeping the mouse across bars. Fixes #1215, #1185 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🔧 PR Build ArtifactsVersion: All environments built successfully. Download the zip files:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes inconsistent tooltip behavior in bar charts that have both positive and negative bars, and repairs the custom tooltip which was broken by the Svelte 5 migration.
What was wrong
Inconsistent tooltips (Discrepancy between kinds of tooltips #1215). In
BarChart.svelte, the first bar segment used the customuse:tooltipaction while the second segment (export in the day plot, negative price in the price plot) used a native SVG<title>. Result: import/positive bars showed the custom tooltip on click; export/negative bars only showed a native browser tooltip on hover — and only whenbarWidth > 15.Negative price never shown (Negative price not displayed #1185). Negative prices render entirely through the second segment (
value2/title2), so they fell into the native-<title>-only path with no click handler — clicking did nothing, and on the 15-min price chart the bars are often too narrow (barWidth < 15) for even the native title to appear.Custom tooltip fully broken on
main.tooltip.jsstill used the legacy Svelte class API (new Tooltip()/instance.$destroy()). On Svelte 5 (the repo is onsvelte ^5.17, despite older "Svelte 4" wording) this throws at runtime:So the custom tooltip didn't work at all after the Svelte 5 upgrade.
Changes
BarChart.svelte: second<g>now usesdata-title="{point.title2}" use:tooltipinstead of native<title>. Both segments share one path; thebarWidth > 15gate on the tooltip is gone.tooltip.js:mount()/unmount().HOVER_DELAY = 500ms) so it doesn't fire while sweeping the mouse across bars.Mobile
Unchanged from the user's perspective: a tap synthesizes a
click, so tooltips show instantly on tap. The hover dwell only affects desktop.Testing
Verified on device by seeding 24h of import+export history (via a config-file
dayplotline) so the "Energy use last 24 hours" chart had both positive and negative bars. Confirmed: no console error, hover-after-dwell and click both show the tooltip consistently on both segments.Fixes #1215, #1185
🤖 Generated with Claude Code