Lit Web Component with Plot

[timbomckay]

I'm rather fond of both Lit & Plot and have found they work really well together.

I've created a Lit Playground example that just demonstrates a fairly basic implementation with Plot's auto mark as well as re-rendered on resize with Lit's resize observer. This isn't showing off the exact component that I've built for my organization but just shows how simple it is to implement.

For brevity and in case the link stops working, here's how component would be used in a vanilla html scenario:

<lit-plot x="hour" y="value" color="sensor"></lit-plot>

document.querySelectorAll("lit-plot").forEach((el) => {
  el.data = [... ];
});

And the lit code and rendering screenshot:

It'd be nice to show Plot as a web component on the getting started page, or a plugin of some sort. I know it shows vanilla HTML as well as some other frameworks such as React, Vue, and Svelte. And implementing in a Lit app is also very easy, and my implementation at work does something similar with the getting started examples providing an options property to pass an object in, as well as some other opinionated properties and defaults.