Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

Eubehi
Copy link
Contributor

@Eubehi Eubehi commented Aug 26, 2025

Several things are done in this PR:

  1. Give the users a handle to customize points drawn.
    Today, the example to override the point form (draw-hooks.html) is not performant. In order to draw the custom point, the points.show function is overidden; this force the drawing of every point, regardless of the serie's size.
    With this PR, the alignement of the points to be drawn is handled by the uPlot library, no need to override the points.paths function and copy the alignment logic.
  2. Allow to change the Cursor form (based on a simple SVG path).
    Maybe we could reuse the draw method, but SVG are nicely displayed and does not suffer of pixel blur.
  3. Allow the forms to be visible in the legend (using the SVG defined for the cursor).

Some discrepancies remain:

  • Cursor's size and width and point's size and width are defined in pixels, while the legend marker width is defined relatively to the SVG viewBox. It can be weird for the user.
  • Since the marker is now handled by SVG, the dashed property is not handled the same as it was with plain CSS value.

This PR shows that pixel alignment is weird. For example, the Small CROSS of size 8 and width 1, when pixelAlign is set to 1, looks like more a diamond than a CROSS. I'll work on pixelAlign next.

@Eubehi Eubehi marked this pull request as draft August 26, 2025 09:56
@Eubehi Eubehi changed the title Points form Point form customization Aug 26, 2025
@Eubehi
Copy link
Contributor Author

Eubehi commented Aug 26, 2025

I'm marking this PR as ready to review. But in my mind, I wanted to open a discussion with you to cursor's form and legend markers. If you prefer, I'll mark it as a draft again.

@Eubehi Eubehi marked this pull request as ready for review August 26, 2025 10:08
@leeoniya
Copy link
Owner

leeoniya commented Aug 26, 2025

I'm marking this PR as ready to review. But in my mind, I wanted to open a discussion with you to cursor's form and legend markers. If you prefer, I'll mark it as a draft again.

thanks for the PR, i will take a look soon.

however, i definitely prefer to discuss things like this in an issue/proposal first instead of getting a random code dump without prior context. it will help you better align your PRs with future changes and understand where things are headed that are not immediately obvious from the repo code or conversations.

#431

i've been thinking long term about rendering markers on a dedicated canvas layer, which would fix the misalignment issues between DOM and canvas: #922

i'm currently experimenting with fast svg pathstring marker rendering in https://github.com/leeoniya/uMarks

I'll work on pixelAlign next.

if you attain an improvement, maybe put that into a separate PR (if it improves the existing hover point alignment)

@leeoniya
Copy link
Owner

also, please leave the build files out of PRs for easier review. i will do a build commit when the PR is merged.

@leeoniya
Copy link
Owner

leeoniya commented Aug 26, 2025

Today, the example to override the point form (draw-hooks.html) is not performant. In order to draw the custom point, the points.show function is overidden; this force the drawing of every point, regardless of the serie's size.

this may be true of the demo, but this callback does receive all the necessary arguments needed for conditional point visibility. it does require copying some code, though.

export type Show = boolean | ((self: uPlot, seriesIdx: number, idx0: number, idx1: number, gaps?: null | number[][]) => boolean | undefined);

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.

2 participants