Skip to content

Add canvas tick mark rendering and example#351

Merged
gka merged 2 commits intomainfrom
feat/canvas-tick-mark
Feb 8, 2026
Merged

Add canvas tick mark rendering and example#351
gka merged 2 commits intomainfrom
feat/canvas-tick-mark

Conversation

@gka
Copy link
Copy Markdown
Contributor

@gka gka commented Feb 8, 2026

resolves #34

Summary

  • implement canvas rendering for TickX and TickY marks so both mark types can draw using canvas
  • add a new example demonstrating a canvas vs SVG tick comparison
  • move the shared .container and .two-cols styles into the global examples layout for reuse

Testing

  • Not run (not requested)

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 8, 2026

Deploy Preview for svelteplot ready!

Name Link
🔨 Latest commit 0d9fcf2
🔍 Latest deploy log https://app.netlify.com/projects/svelteplot/deploys/69887e7fabb6c700087d8a53
😎 Deploy Preview https://deploy-preview-351--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.

@gka gka added this to the 1.0 milestone Feb 8, 2026
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f81c354506

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +87 to +90
if (orientation === 'vertical') {
const x = datum.x;
if (x == null) continue;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Apply dx/dy offsets in canvas ticks

Canvas rendering ignores the per-datum dx/dy offsets when explicit x/y channels are provided. In SVG mode, TickX/TickY always apply dx/dy via the transform="translate(...)" regardless of whether x/y are set, so users can shift ticks uniformly. In the canvas path, datum.x/datum.y are used directly, and the offsets are only included in the fallback branches when options.y/options.x are null. This means dx/dy silently stop working for canvas ticks whenever x/y are set, producing mismatched output between SVG and canvas.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 8, 2026

TypeScript error report:

  • This branch: 855
  • main branch: 1115
  • Difference (PR - main): -260 🎉

Svelte TypeScript error report:

  • This branch: 2157
  • main branch: 2154
  • Difference (PR - main): +3 ⚠️

@gka gka self-assigned this Feb 8, 2026
@gka gka merged commit d8a9cdc into main Feb 8, 2026
7 of 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.

Canvas rendering for Tick marks

1 participant