-
-
Notifications
You must be signed in to change notification settings - Fork 14
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
Conversation
✅ Deploy Preview for svelteplot ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📦 Preview package for this PR is published! Version: Install it with: npm install svelteplot@pr-131
# or install the specific version
npm install svelteplot@0.3.7-pr-131.0 |
📦 Preview package for this PR is published! Version: Install it with: npm install svelteplot@pr-131
# or install the specific version
npm install svelteplot@0.3.7-pr-131.1 |
📦 Preview package for this PR is published! Version: Install it with: npm install svelteplot@pr-131
# or install the specific version
npm install svelteplot@0.3.7-pr-131.2 |
📦 Preview package for this PR is published! Version: Install it with: npm install svelteplot@pr-131
# or install the specific version
npm install svelteplot@0.3.7-pr-131.3 |
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:
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 therecord
object in snippets. It supports bothmark
(per-record) andmarks
(batch) rendering snippets, and thedata
prop is now optional. (src/lib/marks/CustomMark.svelte
, src/lib/marks/CustomMark.svelteL7-R69)ScaledDataRecord
type was refactored to use the newScaledChannelType
utility, ensuring type safety for all channel values. (src/lib/types/data.ts
, src/lib/types/data.tsL15-R17)MarkType
enum now includes'custom'
to support the new mark type. (src/lib/types/mark.ts
, src/lib/types/mark.tsR16)Mark
component and related types were updated to support the new, genericScaledDataRecord<Datum>
. (src/lib/Mark.svelte
, [1];src/lib/types/channel.ts
, [2]Documentation and Example Updates:
/marks/custom
documentation page was rewritten to explain the new API, show usage of bothmark
andmarks
snippets, and remove outdated examples such asmapXY
. (src/routes/marks/custom/+page.md
, [1] [2] [3]custom-rect.svelte
for drawing rectangles with custom channels.single.svelte
for single mark placement.custom-svg.svelte
tomultiple.svelte
to show multi-mark SVG usage with the new API. [1] [2] [3]Type and Internal Improvements:
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]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.