Skip to content

feat: simplify custom marks #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 8, 2025
Merged

feat: simplify custom marks #131

merged 6 commits into from
Aug 8, 2025

Conversation

gka
Copy link
Contributor

@gka gka commented Aug 5, 2025

This pull request introduces a major overhaul of the CustomMark API in SveltePlot, making it more flexible and powerful for rendering custom SVG marks. The new API allows users to access all scaled channel values, provides both per-record and batch rendering options, and adds support for new channels. The documentation and examples have been updated to reflect these changes.

CustomMark API Enhancements:

  • The CustomMark component now accepts any combination of channel accessors (x, y, x1, x2, y1, y2, r, fill, stroke, etc.) and exposes all scaled values to the user via the record object in snippets. It supports both mark (per-record) and marks (batch) rendering snippets, and the data prop is now optional. (src/lib/marks/CustomMark.svelte, src/lib/marks/CustomMark.svelteL7-R69)
  • The ScaledDataRecord type was refactored to use the new ScaledChannelType utility, ensuring type safety for all channel values. (src/lib/types/data.ts, src/lib/types/data.tsL15-R17)
  • The MarkType enum now includes 'custom' to support the new mark type. (src/lib/types/mark.ts, src/lib/types/mark.tsR16)
  • The Mark component and related types were updated to support the new, generic ScaledDataRecord<Datum>. (src/lib/Mark.svelte, [1]; src/lib/types/channel.ts, [2]

Documentation and Example Updates:

  • The /marks/custom documentation page was rewritten to explain the new API, show usage of both mark and marks snippets, and remove outdated examples such as mapXY. (src/routes/marks/custom/+page.md, [1] [2] [3]
  • New and updated example files demonstrate the new capabilities:
    • Added custom-rect.svelte for drawing rectangles with custom channels.
    • Added single.svelte for single mark placement.
    • Updated and renamed custom-svg.svelte to multiple.svelte to show multi-mark SVG usage with the new API. [1] [2] [3]

Type and Internal Improvements:

  • Added ScaledChannelType utility type to ensure channel values are correctly typed (string or number as appropriate). (src/lib/types/channel.ts, [1]; src/lib/types/data.ts, [2]
  • The CustomMark component now dynamically determines which channels are required based on provided props, improving flexibility and reducing boilerplate. (src/lib/marks/CustomMark.svelte, src/lib/marks/CustomMark.svelteL7-R69)

These changes make it much easier to create custom visualizations in SveltePlot, with a more consistent and extensible API.

Copy link

netlify bot commented Aug 5, 2025

Deploy Preview for svelteplot ready!

Name Link
🔨 Latest commit a8ab78a
🔍 Latest deploy log https://app.netlify.com/projects/svelteplot/deploys/689670a576eab400087911a6
😎 Deploy Preview https://deploy-preview-131--svelteplot.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

github-actions bot commented Aug 5, 2025

📦 Preview package for this PR is published!

Version: 0.3.7-pr-131.0

Install it with:

npm install svelteplot@pr-131
# or install the specific version
npm install svelteplot@0.3.7-pr-131.0

Copy link

github-actions bot commented Aug 7, 2025

📦 Preview package for this PR is published!

Version: 0.3.7-pr-131.1

Install it with:

npm install svelteplot@pr-131
# or install the specific version
npm install svelteplot@0.3.7-pr-131.1

Copy link

github-actions bot commented Aug 8, 2025

📦 Preview package for this PR is published!

Version: 0.3.7-pr-131.2

Install it with:

npm install svelteplot@pr-131
# or install the specific version
npm install svelteplot@0.3.7-pr-131.2

Copy link

github-actions bot commented Aug 8, 2025

📦 Preview package for this PR is published!

Version: 0.3.7-pr-131.3

Install it with:

npm install svelteplot@pr-131
# or install the specific version
npm install svelteplot@0.3.7-pr-131.3

@gka gka merged commit 5816448 into main Aug 8, 2025
8 checks passed
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.

1 participant