Set chart rectangle to fill="none"

[rvantonder]

Hi @terezka 👋 I had some trouble getting SVG elements to receive pointer events on a chart. After digging into things, I realized that the chartPosition rectangle sets fill to transparent, which effectively blocks pointer events from being propagated to other elements in the chart. The short version of the fix is to use a none fill, rather than transparent, which allows other elements to handle pointer events. I don't think (?) there's a good reason for this rectangle to be transparent rather than none, since it appears to exist for layout reasons.

Here is Ellie with an example. After applying the change in this PR, the "no clicky" becomes clickable.

More details: Even though it's possible to set SVG pointer-events attributes, and after trying a myriad of settings on the chart, I realized part of the trouble is that I can't modify this rectangles attributes and there isn't much I can do to allow pointer events to go through it (also, I think, that despite setting pointer-events of other SVG elements in the chart, it doesn't help, because they are not inserted as a child of this rectangle, this empty rectangle is added after all the other SVG elements, so no pointer events are propagated even if pointer-events attributes allow them to "pass through"). So I can't come up with any workaround, but let me know if you can think of one.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/terezka/elm-charts/4fEXr4aSvtewsUwyw2wu6jSacDF4
✅ Preview: https://elm-charts-git-fork-rvantonder-patch-1-terezka.vercel.app

[rvantonder]

Oh, forgot to say, using none fixes this because it causes pointer-events attribute to not grab pointer events. Conversely, any fill other than none (like transparent) will cause pointer-events to be set to visiblePainted, and so grabs the pointer events. reference

[rvantonder]

Found a temporary workaround by using CSS and doing:

svg > rect {
   fill: none;
}

but obviously not ideal :-)

[rvantonder]

I don't think (?) there's a good reason for this rectangle to be transparent rather than none, since it appears to exist for layout reasons.

Welp, looks like it causes the chart event handlers like onClick to no longer work, so I'm guessing it's actually used for intercepting events. The trouble with using the event handlers is that it means adding those pointer attributes to SVG elements don't quite work. But since this breaks the event handlers, I don't think it works to fix the issue. I can probably use elm-charts event handlers to do what I'm trying to do.