seblammers, 8 months ago

@tonydang

Thanks for sharing Tony! I had this one on my list as well. But it's also nice to go through your implementation and see what I can learn from that.

tonydang, 8 months ago

@seblammers This was defintiely the most complex conversion I've done so far! Even the legend was tricky because of the gradient.

One thing I couldn't figure out how to do was server render the gradient because it relies on HTMLCanvasElement.getContext(). If you have any ideas on how to SSR the gradient when you try, let me know! 🙏

seblammers, 8 months ago

@tonydang

Oh, that's interesting.
I think I have an idea about that. Will test that on the weekend and let you know :)

tonydang, 8 months ago

@seblammers Yes, definitely lmk if you figure it out! The fact that it takes the legend a second to pop up after everything else loads really bothers me 😅

maarten, 8 months ago

@tonydang @seblammers Maybe you can just use like 256 rects in SVG, or just divs with a background-color?

seblammers, 8 months ago

@maarten @tonydang

Yep, a quick try with SVG rects was successful.

I'll keep fiddling with the details to make it complete.

seblammers, 8 months ago

@maarten @tonydang

You can check out my complete SVG-version here:

https://svelte.dev/repl/664a4be608934959b23c22117187de4a?version=4.2.0

I tried to keep it as simple as possible and used your Legend-Component as a template where possible.

To let you compare both variations, I left both legends in the graphic.

tonydang, 8 months ago

@seblammers @maarten Oh man, the SVG rects method is a great idea! I'll take a look at updating my example later with it. I'm curious to see how the page load performance is going to improve by not having to send the extra JavaScript and hydrating!

Thank you to you both @seblammers and @maarten !

tonydang, 8 months ago

@seblammers @maarten Just updated my example to use SVG rects. The legend now loads with the rest of the chart and I was able decrease the kb transferred by 156kb! Thanks again for the tip 🙏

seblammers, 8 months ago

@tonydang @maarten

That's great to hear 🚀

Sounds like a win-win-win to me!