feat: canvas rendering for Rect, Cell and Bar marks#333
Conversation
|
📦 Preview package for this PR is published! Version: Install it with: npm install svelteplot@pr-333
# or install the specific version
npm install svelteplot@0.9.1-pr-333.0 |
|
TypeScript error report:
Svelte TypeScript error report:
|
There was a problem hiding this comment.
Pull request overview
This pull request adds Canvas rendering support as an alternative to SVG for Rect, Cell, BarX, and BarY marks, which can significantly improve performance for large datasets. The changes introduce a new canvas boolean prop to these mark components and implement a shared RectCanvas.svelte helper component for efficient Canvas rendering.
Changes:
- Added a new reusable
RectCanvas.sveltehelper component for Canvas-based rectangle rendering with support for insets, border radius, and styling - Updated Rect, Cell, BarX, and BarY mark components to support optional Canvas rendering via a new
canvasprop - Standardized the
classprop naming inRect.svelte(changed fromclassNametoclass)
Reviewed changes
Copilot reviewed 6 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/marks/helpers/RectCanvas.svelte | New shared helper component for rendering rectangles on Canvas with full style and inset support |
| src/lib/marks/Rect.svelte | Added canvas prop and conditional rendering logic; standardized class prop naming |
| src/lib/marks/Cell.svelte | Added canvas prop with data transformation for Canvas rendering |
| src/lib/marks/BarX.svelte | Added canvas prop with bandwidth calculation and data mapping |
| src/lib/marks/BarY.svelte | Added canvas prop with bandwidth calculation and data mapping |
| src/routes/examples/cell/cell-canvas.svelte | New example demonstrating Canvas rendering with Cell mark |
| src/routes/transforms/bin/+page.md | Updated example to use Canvas rendering |
| src/snapshots/cell/cell-canvas.png | New snapshot file for Canvas Cell example (light theme) |
| src/snapshots/cell/cell-canvas.dark.png | New snapshot file for Canvas Cell example (dark theme) |
✅ Deploy Preview for svelteplot ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
TypeScript error report:
Svelte TypeScript error report:
|
|
📦 Preview package for this PR is published! Version: Install it with: npm install svelteplot@pr-333
# or install the specific version
npm install svelteplot@0.9.1-pr-333.1 |
|
📦 Preview package for this PR is published! Version: Install it with: npm install svelteplot@pr-333
# or install the specific version
npm install svelteplot@0.9.1-pr-333.2 |
|
TypeScript error report:
Svelte TypeScript error report:
|
1 participant
resolves #24, #27 and #29
This pull request adds support for rendering bar, cell, and rect marks using Canvas in addition to SVG, which can improve performance for large datasets. The main changes introduce a new
canvasprop to the relevant mark components and implement a shared helper component,RectCanvas.svelte, for efficient Canvas rendering.Canvas rendering support
canvasboolean prop toBarX.svelte,BarY.svelte,Cell.svelte, andRect.svelteto allow users to choose Canvas rendering instead of SVG. [1] [2] [3] [4]RectCanvas.sveltehelper whencanvasis true, including appropriate data transformations for Canvas drawing. [1] [2] [3] [4]New shared Canvas helper
src/lib/marks/helpers/RectCanvas.svelte, a reusable helper for drawing rectangles (bars, cells, etc.) on a Canvas, supporting style, border radius, and insets.RectCanvas.svelteinto the relevant mark components to enable Canvas rendering. [1] [2] [3] [4]Component API consistency
classprop naming inRect.sveltefor consistency with other components. [1] [2]These changes provide a significant performance and flexibility improvement for rendering visualizations, especially with larger datasets.