Skip to content

LayerChart 2.0 (next)#449

Open
techniq wants to merge 484 commits intomainfrom
next
Open

LayerChart 2.0 (next)#449
techniq wants to merge 484 commits intomainfrom
next

Conversation

@techniq
Copy link
Copy Markdown
Owner

@techniq techniq commented Mar 10, 2025

No description provided.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 10, 2025

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Mar 10, 2025

Open in StackBlitz

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

commit: 2ff3e09

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 12, 2025

🦋 Changeset detected

Latest commit: 2ff3e09

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

@HicaroD
Copy link
Copy Markdown

HicaroD commented May 9, 2025

Hey, @techniq.
First of all, thank you for your amazing work, this package is actually incredible!

I have a question: When are you planning to merge this PR so we can finally get the Svelte 5 support? 🤗

@techniq
Copy link
Copy Markdown
Owner Author

techniq commented May 9, 2025

Hey @HicaroD, thanks for the kind words 🫶. Sorry, I don't have a rough release date set yet. There are a good number of improvements I would like to include in 2.0.0 (see milestone although not guaranteed to cover everything or have everything).

With that said, you 100% can use it today via layerchart@next and docs at https://next.layerchart.com/. I do this already for Github Analysis, Strava Analysis, and my main work project. It's also be used to build out shadcn-svelte Charts (issue).

I could see pushing some items to 2.1 but want to make sure if we find any breaking changes (mostly API refinements) we get them all in 2.0. I'm anticipating very little (if any), but still don't want to rush it.

Related: I also need to migrate Svelte UX fully over to Svelte 5 (it's Svelte 3-5 compat with Svelte 3/4 state/syntax). Both libraries have already been migrated to Tailwind 4, but the move to Svelte 5 state runes/snippets and regressions checking will take some concentrated efforts and time. I don't know how close I'll try to sync their release schedules though (and the benefit of having @next releases in place so they can be incrementally adopted).

@cycle4passion
Copy link
Copy Markdown

All the examples give 500 errors on https://next.layerchart.com/

@techniq
Copy link
Copy Markdown
Owner Author

techniq commented May 9, 2025

All the examples give 500 errors on https://next.layerchart.com/

@cycle4passion Odd... working here

image

Maybe try a hard refresh? Which browser?

@cycle4passion
Copy link
Copy Markdown

mobile only, does not work in arc (chromium), native chrome, or Safari browser.

@techniq
Copy link
Copy Markdown
Owner Author

techniq commented May 9, 2025

mobile only, does not work in arc (chromium), native chrome, or Safari browser.

Really odd... I can't reproduce

image

github-actions Bot and others added 10 commits April 29, 2026 14:27
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* split Circle.svelte into 3 layer-specific components (Circle.svg.svelte, etc) along with CircleState (Circle.shared.svelte.ts).  Keep Circle.svelte and delegate to underlying type

* split Text.svelte into 3 layer-specific components

* Organize into component directories

* split Rect, Line, and Path into 3 layer-specific components

* split Ellipse, Polygon, Group, Image, ClipPath, Pattern, LinearGradient, and RadialGradient into 3 layer-specific components

* Add changeset for per-layer primitive

* split Axis into 3 layer-specific components

* Add full-chart layer examples (to monitor progress)

* split Grid and Rule into 3 layer-specific components

* split Chart and ChartChildren into 3 layer-specific components, and alias Layer based on layer type (Layer within layerchart/svg => Svg)

* refine bundle scenarios

* refine bundle scenarios

* Add more foundation examples

Co-authored-by: Copilot <copilot@github.com>

* improve bundle comment

* split Highlight, ChartClipPath, RectClipPath into 3 layer-specific components

* split Arc, Area, and Spline into 3 layer-specific components

* split ArcLabel, Bar, Bars, Labels, Pie, and Points into 3 layer-specific components

* split Frame, Cell, Threshold, AnnotationLine, AnnotationPoint, and Trail into 3 layer-specific components

* split AnnotationRange, CircleClipPath, Vector, Link, Hull, Density, and Calendar into 3 layer-specific components

* split BoxPlot, Violin, Raster, Month, Contour, and Voronoi into 3 layer-specific components

* split geo components (GeoPath, GeoSpline, etc) into 3 layer-specific components

* split Ribbon into 3 layer-specific components.  Re-export all layout/helper components

* split high-level charts (BarChart, LineChart, etc) into 3 layer-specific components.  Re-export all layout/helper components

* update changeset and docs

* Update bundle size PR comment with collapsible sections

* Remove `Svg` from core (just Chart)

* Split `Foundation` scenarios into `Core (agnostic)` and `Core (layer-specific)`

* update bundle report

* Lazy load transform context (and only when used) similar to brush context

* Add ChartCore.  Fix TransformContext test

* update bundle sizes in docs

* move core section above base

* Fix primitive fill/stroke for canvas primitives

* fix(Text): Render on `<Svg>` layer when only one of `x`/`y` is set

The static-mode render guard required both `x` and `y` to be explicit, so
`<Text y={-6}>` inside a positioned `<Group>` (e.g. tooltip labels in the
GeoPoint world-capitals example) was skipped on the Svg layer — Canvas
worked because it doesn't gate on coordinate validity.

Change `&&` to `||` so Text renders when either coordinate is set; the
missing one falls through to the existing `motionX`/`motionY` default of 0,
matching SVG's natural "missing coord = 0" behavior and the Canvas variant.

* fix components missing html impls (Calendar, Bars, Annotation*, etc)

* Fix Text within group

---------

Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: github-actions[bot] <action@github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@github-actions github-actions Bot mentioned this pull request Apr 30, 2026
techniq and others added 7 commits April 30, 2026 13:40
* perf: Skip motion container allocation when `motion` prop is `undefined`

* perf: Skip mark-info `$effect` for pixel-mode primitives

* perf: Reduce per-tick reactive overhead in `Path` / `Link` (force-simulation graphs)

* fix(Arc, RectClipPath, ChartClipPath): Restore on-mount tween animations

* Force SVG for lattice example to verify delegation perf issue

* Revert lattice svg force

* Improve bundle size warnings

* sort bundle scenarios by size desc

* sort warnings by change desc

* Revert "perf: Skip motion container allocation when `motion` prop is `undefined`"

This reverts b45f47a. Empirical measurements on the lattice (n=20,
760 links) and tree force-simulation examples showed the call-site
gating produced no measurable FPS difference vs. an unmodified
`createMotion` — the fast path at `motion.svelte.ts:197-213`
(passthrough returned when `motionProp === undefined`) already
covers the no-motion case.

  | Example  | Phase       | Before    | After (revert) |
  |----------|-------------|-----------|---------------:|
  | Lattice  | steady sim  | 6.46-6.53 | 6.52-6.58      |
  | Tree     | active sim  | 16.88-17.28 | 17.46-17.51  |

The 728-line, 13-file diff added per-call-site gates and null-check
fallbacks for an optimization that was already happening one layer
down. Reverting restores the simpler unconditional construction.

The Path.shared.svelte.ts merge keeps ee6b332's `#getPathData`
hot-path getter (which is independent of the motion-alloc question)
and switches the initial-pathData resolution to `resolvePathData()`
to handle the polymorphic `string | () => string` form added by
that commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(SeriesState): Avoid `derived_inert` crash when chart unmounts under a `<svelte:boundary>`

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <action@github.com>
Co-authored-by: github-actions[bot] <action@github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
techniq and others added 11 commits May 5, 2026 13:25
* feat(Dodge): Add Dodge component for deterministic non-overlapping layout

* Simplify examples

* fix(Image): Stop disabling pointer events by default.  Add more examples

* add timeline-bidirectional

* add dense lanes example

* update svelte-milestones to use relative pixel dx/dy instead of data-space values to look better when zooming

* Improve svelte-milestones example

* Replace `size` with `baseline`

* Add text beeswarm example

* feat(Text): Add `fontSize` prop with auto-derived `capHeight`

* add more Dodge and ForceSimulation examples

* Add dodge to layer-specific exports and add bundle scenario

* Add more bundle scenarios includes Dodge

* Improve examples and add note about sort order controlling stacking

* Replace `rowHeight` with `rx/ry` to specify separate anchor/dodge axis values
Co-authored-by: github-actions[bot] <action@github.com>
* Add Waffle component (WIP)

* Add auto multiple example

* Support custom waffle symobols (svg-only)

* cleanup examples

* Use `series` stacks to simplify and allow legend filtering.  Simplify data rollup

* Add survey results example

* Improve Waffle/months example

* fix(Pattern): fix alignment and sharply render on high-DPI displays when using Canavs layers

* Add new Waffle component to all layer-specific exports

* improve examples

* fade non-highlighted series (legend, etc)

* improve unit/multiple examples

* improve custom symbol

* improve descriptions
… sizing and text clipping). Prompt user for resolution and background on docs "Export to PNG" / "Copy as PNG"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants