Place touch tooltips above the finger

[techniq]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5059972

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
layerchart	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/layerchart@927

commit: 5059972

[techniq]

@ntainy (continued conversation from: #924 (comment))

Great feedback! I made those changes here (including the rebase). When you get a chance, could you see how these work for you? Thanks!

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
layerchart	✅ Ready (View Log)	Visit Preview	5059972

[github-actions]

Bundle Size Analysis

Use-Case Scenarios

Core (7 changed)

Scenario	Current	New	Change
🟡 core-canvas	232.24 KB 59.75 gz	232.55 KB 59.85 gz	+0.32 KB (+0.1%) +0.10 gz (+0.2%)
🟡 core-line	230.46 KB 58.46 gz	230.78 KB 58.54 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 core-scatter	221.39 KB 55.93 gz	221.70 KB 56.02 gz	+0.32 KB (+0.1%) +0.09 gz (+0.2%)
🟡 core-geo	217.14 KB 55.55 gz	217.46 KB 55.63 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 core-html	216.55 KB 55.03 gz	216.87 KB 55.10 gz	+0.32 KB (+0.1%) +0.07 gz (+0.1%)
🟡 core	214.47 KB 54.43 gz	214.79 KB 54.50 gz	+0.32 KB (+0.1%) +0.07 gz (+0.1%)
🟡 core-svg	214.46 KB 54.52 gz	214.79 KB 54.61 gz	+0.32 KB (+0.1%) +0.09 gz (+0.2%)

Base (agnostic) (4 changed)

Scenario	Current	New	Change
🟡 base-svg-agnostic	359.10 KB 83.27 gz	359.42 KB 83.36 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)
🟡 base-canvas-agnostic	359.10 KB 83.27 gz	359.42 KB 83.35 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 base-html-agnostic	359.10 KB 83.27 gz	359.42 KB 83.35 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 base	359.10 KB 83.26 gz	359.42 KB 83.35 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)

Base (layer-specific) (3 changed)

Scenario	Current	New	Change
🟡 base-canvas	346.99 KB 81.04 gz	347.30 KB 81.12 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 base-html	339.39 KB 78.75 gz	339.71 KB 78.84 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)
🟡 base-svg	337.30 KB 78.26 gz	337.62 KB 78.34 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)

Cartesian charts (27 changed)

Scenario	Current	New	Change
🟡 PieChart	400.51 KB 92.19 gz	401.82 KB 92.53 gz	+1.31 KB (+0.3%) +0.34 gz (+0.4%)
🟡 ArcChart	393.76 KB 90.85 gz	395.06 KB 91.23 gz	+1.31 KB (+0.3%) +0.38 gz (+0.4%)
🟡 LineChart	389.49 KB 90.42 gz	389.81 KB 90.53 gz	+0.32 KB (+0.1%) +0.10 gz (+0.1%)
🟡 PieChart-canvas	386.39 KB 89.59 gz	387.70 KB 90.00 gz	+1.31 KB (+0.3%) +0.41 gz (+0.5%)
🟡 AreaChart	381.52 KB 88.03 gz	381.84 KB 88.14 gz	+0.32 KB (+0.1%) +0.10 gz (+0.1%)
🟡 ArcChart-canvas	380.21 KB 88.33 gz	381.51 KB 88.71 gz	+1.31 KB (+0.3%) +0.39 gz (+0.4%)
🟡 PieChart-svg	376.71 KB 86.80 gz	378.03 KB 87.16 gz	+1.31 KB (+0.3%) +0.36 gz (+0.4%)
🟡 line-chart-interactive	376.32 KB 87.10 gz	377.62 KB 87.51 gz	+1.30 KB (+0.3%) +0.41 gz (+0.5%)
🟡 area-chart	377.17 KB 87.08 gz	377.49 KB 87.16 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 ArcChart-svg	370.54 KB 85.60 gz	371.84 KB 86.00 gz	+1.30 KB (+0.4%) +0.40 gz (+0.5%)
🟡 pie-chart	371.41 KB 85.82 gz	371.73 KB 85.92 gz	+0.32 KB (+0.1%) +0.10 gz (+0.1%)
🟡 BarChart	369.54 KB 85.35 gz	369.86 KB 85.43 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 AreaChart-canvas	368.61 KB 85.69 gz	368.93 KB 85.78 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)
🟡 bar-chart	363.73 KB 84.11 gz	364.05 KB 84.22 gz	+0.32 KB (+0.1%) +0.11 gz (+0.1%)
🟡 ScatterChart	363.71 KB 84.29 gz	364.02 KB 84.39 gz	+0.32 KB (+0.1%) +0.10 gz (+0.1%)
🟡 scatter-chart	360.19 KB 83.55 gz	360.50 KB 83.64 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)
🟡 line-chart	359.60 KB 83.30 gz	359.92 KB 83.40 gz	+0.32 KB (+0.1%) +0.10 gz (+0.1%)
🟡 AreaChart-svg	358.94 KB 82.96 gz	359.26 KB 83.03 gz	+0.32 KB (+0.1%) +0.07 gz (+0.1%)
🟡 BarChart-canvas	356.32 KB 82.98 gz	356.64 KB 83.08 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)
🟡 LineChart-canvas	353.56 KB 82.57 gz	353.88 KB 82.65 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 ScatterChart-canvas	350.71 KB 81.84 gz	351.03 KB 81.92 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 line-chart-canvas	347.01 KB 81.05 gz	347.33 KB 81.14 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)
🟡 BarChart-svg	346.65 KB 80.21 gz	346.97 KB 80.30 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)
🟡 LineChart-svg	343.89 KB 79.81 gz	344.20 KB 79.88 gz	+0.32 KB (+0.1%) +0.07 gz (+0.1%)
🟡 ScatterChart-svg	341.04 KB 79.08 gz	341.36 KB 79.15 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 line-chart-html	339.41 KB 78.77 gz	339.73 KB 78.85 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 line-chart-svg	337.33 KB 78.27 gz	337.64 KB 78.35 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)

Geo (3 changed)

Scenario	Current	New	Change
🟡 geo-full	433.68 KB 102.65 gz	434.00 KB 102.74 gz	+0.31 KB (+0.1%) +0.09 gz (+0.1%)
🟡 geo-tiles	381.20 KB 88.87 gz	381.52 KB 88.96 gz	+0.32 KB (+0.1%) +0.09 gz (+0.1%)
🟡 geo	376.09 KB 87.19 gz	376.40 KB 87.27 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)

Hierarchy (4 changed)

Scenario	Current	New	Change
🟡 hierarchy-tree	369.88 KB 86.21 gz	370.19 KB 86.32 gz	+0.32 KB (+0.1%) +0.11 gz (+0.1%)
🟡 hierarchy-treemap	366.49 KB 85.36 gz	366.80 KB 85.43 gz	+0.31 KB (+0.1%) +0.08 gz (+0.1%)
🟡 hierarchy-pack	366.16 KB 85.38 gz	366.48 KB 85.48 gz	+0.32 KB (+0.1%) +0.10 gz (+0.1%)
🟡 dodge	363.88 KB 84.70 gz	364.20 KB 84.77 gz	+0.32 KB (+0.1%) +0.07 gz (+0.1%)

Graph / network (4 changed)

Scenario	Current	New	Change
🟡 dagre	428.63 KB 102.21 gz	428.95 KB 102.29 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 force	372.28 KB 87.03 gz	372.60 KB 87.11 gz	+0.32 KB (+0.1%) +0.08 gz (+0.1%)
🟡 sankey	372.10 KB 86.42 gz	372.42 KB 86.52 gz	+0.33 KB (+0.1%) +0.09 gz (+0.1%)
🟡 chord	368.79 KB 85.53 gz	369.10 KB 85.60 gz	+0.31 KB (+0.1%) +0.07 gz (+0.1%)

Components (1 changed)

Scenario	Current	New	Change
🟡 Tooltip	150.40 KB 36.32 gz	151.68 KB 36.67 gz	+1.28 KB (+0.8%) +0.35 gz (+1.0%)

Worst case (1 changed)

Scenario	Current	New	Change
🟡 all	1043.50 KB 243.81 gz	1044.82 KB 244.18 gz	+1.32 KB (+0.1%) +0.37 gz (+0.2%)

---

Understanding this report

• Use-case scenarios measure the bundle cost of common chart configurations (e.g. a line chart with axes)
• Individual components measure each component imported in isolation
• Svelte runtime is excluded; sizes reflect layerchart + its dependencies (d3, etc.)
• When multiple components share dependencies (e.g. d3-scale), the real-world cost is lower than the sum of individual sizes
• Changes smaller than 10 bytes or 0.1% are considered insignificant

[ntainy]

hi, sorry for the slow reply, got buried for a bit

pulled and tested properly (arc/chromium at 360px vs 2.5.1). works really really well!

• touch/pen: visualViewport top actually is much nicer than what i initially suggested, it's much better, didn't see a single issue there (is properly above the finger and clamped)
• mouse seems identical
• pinch thing: works perfectly (stays inside), zooming while locked properly repositions itself as ewll.

the only thing noticeable (not a regression though) is that with default contained container, if the box is wider than the container in the first place (minus y axis gutter), visibleBounds falls back to the container and so the left clamp wins, so on a 360px phone 310px box ended up still past the right edge even though it would have fit on the screen. idk what's the right solution for that would be -- maybe for portaled tooltips fall back to the visible viewport before the container? though a good moment to +1 again for making the contained window default in v3 as it doesn't have this issue :)

couple small additional things that were noticed by an agent in a separate pass:

• pinch re-placement only subscribes when portaled, so portal={false} + window won't follow a pinch
• facetAll panels get anchor="bottom" passed explicitly, so they don't get the "rise above the chart" min
• maybe worth adding a test for touch + contained="window"?

Thanks again! and sorry for such a huge delay

ps: also I didnt check ios safari, so I still have no clue how it would look there