next: Svelte 5

[huntabyte]

WIP - exploration into what a next-generation API may look like for LayerChart, taking full advantage of Svelte 5.

• pkg-pr-new comment
• preview comment

Closes #7
Closes #112
Closes #159
Closes #261
Closes #291
Closes #451
Closes #456
Closes #469
Closes #472
Closes #480

• Add changesets for all new features / breaking changes
• Fix pnpm check (svelte-check) failures

---

• Identifier classes on each underlying element for style targeting
• Extended tooltip payload for simplified chart components, such as BarChart, LineChart, PieChart
• Replace uniqueId with $props.id() and a new createId function to create multiple unique ids based off of the single $props.id()
• When scrolling through a page with a chart, if I touch the chart at all it interrupts my scroll. We can likely improve this where only intentional touches are registered/handled
  • Issue: Enable touch scrolling on mobile #255)
  • See also related: [TransformContext] Add pinch/zoom gesture #82 / Transform cartesian charts on pointer drag / scroll #366)
• The Legend component should be more composable. Right now if you opt into the included legend via one of the simplfiied charts, you get a bunch of great functionality. The data required for that functionality should be provided via a snippet prop to the legend snippet in those components.
• When using <BarChart> and the resulting Bars end up being <Rect>s instead of <Spline> the tween configuration doesn't align causing unexpected behavior. Would be nice if we could normalize this so that BarChart.props.bars.tweened = true works the same as it does when there aren't all/no rounded corners.
• tickLength specifies how long the tick line itself is, but has no effect on the tickLabel, if this is by design then there should be a way to move the label over as well I've since discovered you can accomplish this via props.xAxis.tickLabelProps.svgProps but it feels like a lot of work and not the greatest DX for something simple.
• Labels should wait until their associated chart has finished animating, otherwise you end up with some weird behavior example
• For improved types/confidence in the APIs, as well as for tree-shaking benefits, perhaps splitting the vastly different chart components into their own top-level component, while only sharing what is necessary to be shared (cartesian, hierarchy, graph, force, geo, etc.). At the moment, regardless if you're using those capabilities or not, you still get them in your bundle.
• Determine how to round the radius of specific corners of stacked bar charts. using the series[0].props did the trick 😃
• Labels have no contextual awareness of the data they may be associated with, for example, if I wanted to make the labels the same color as the bars (which could be different colors) I can't do so without having to manually build each bar manually. Perhaps similar to the value prop exposed on labels, we also expose a color: which could either be hard coded or an accessor.
• What does animating points look like, or at least delaying the display of points when on a line that is currently animating in?
• What do simplified chart context's look like? There is a lot of useful data built and handled automatically within the <BarChart>, <AreaChart>, <LabelChart>, etc., but the only way to access it is to opt-out of the work it does for you by using the children snippet. We should expose that information via a bindable prop as well.
• Do we need to force the user to manually pass in their own series to take advantage of them? What if we just build it for them in absense of one, using the accessor value as the key and then the rest of the data as usual?
• On mobile when holding down on a chart to see the tooltip, the tooltip is blocked by my thumb, should something be done for this out of the box by default with an escape hatch if necessary? Or should tapping on the chart persist the tooltip if on a touch device?
• Fix Area stack series tooltip with separate data (example) (recently added)
• Update BarChart to support stack series with separate data (see AreaChart)
• Update Points/Labels to account for x1 scales (i.e grouped by charts) like Bars. (issue)
• Move selectionState and uniqueState to @layerstack/svelte-state
• Support passing initial series selection
• Update BrushContext to support band scales
• Determine best use cases between <ArcChart> and <BarChart radial orientation="horizontal">
  • BarChart
    • Axis support
    • Non-0 start positions
    • Multiple per "track"
    • Stacking? (and when does this become a PieChart if using stackExpand)
  • ArcChart
    • Simple for single series
    • Easy/flexible radius control
    • Track color
    • Arc labels
• Should we consider rendering the axis components under marks (similar to grid)?
  • Would make adding point annotations along x-axis easier (use aboveMarks instead of aboveContext)
  • How to handle Axis labels inside bars example or many radial examples. Should we allow controlling the stacking order of each layer/snippet?
• Remove asAny() usage

---

Example A

CleanShot.2025-03-23.at.00.27.08.mp4

---

Regressions

Collision Detection

• Slower, less responsive than before

BrushContext

• Resetting (click within chart) does not appear to be passing original/config domain (reference)
  • Expecting null in use case
• Externally resetting domain not working (example)

BarChart

• Axis labels inside bars (using Labels) not displayed (example)

[changeset-bot]

🦋 Changeset detected

Latest commit: 5ca5943

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

This PR includes changesets to release 1 package

Name	Type
layerchart	Major

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

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

[pkg-pr-new]

Open in StackBlitz

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

commit: 5ca5943

[techniq]

@huntabyte amazing work! Releasing as 2.0.0-next.2 and we'll continue to iterate as we move towards a 2.0.0 release