Where is the heatmap (figma & code)?

[Oceanestars]

Hi! I'm looking for the heatmap in Figma & in the code but can't find it. Also I haven't found a code example of the Data visualization implementation. Does anyone know where I could find those?

Thank you!

Docs:
https://www.astrouxds.com/patterns/data-visualization/#heat-map

[micahjones13]

Hey there,

There is currently no data visualization components in code, but it is something on our road map. As for Figma, the heatmap has not been created yet, but there is a ticket currently being worked on to do so. The rest of the data visualization on Figma is located here just in case you were having issues finding it.
I'm going to mark this as a feature request in order to keep track of our progress in creating this component in figma and code, and will let you know of any updates here!

[Oceanestars]

Thanks for the response! Happy to help with any of those data viz components!

[micahjones13]

Awesome! We'll make sure to reach out. Speaking of which, have you used any third party chart libraries? If so, are there any you prefer or would recommend? We're talking internally about using chart.js , but it doesn't look like they have a heat-map option.

[Oceanestars]

I've used chart.js and actually for our app we were gonna do Astro + Chart.js. They don't have a heatmap but they have a treemap plugin : https://chartjs-chart-treemap.pages.dev/

(It may be a lot of overhead, but Chart.js uses a react-chart.js wrapper and Astro does too ish (for react, I just started looking at astro), not sure if this would make life harder)

[micahjones13]

Good to know about the treemap plugin - and also great callout on the reach-chart wrapper.
Our react wrapper probably does essentially the same thing that reach-chart does, but for web-components - so maybe we can use chart.js to create Astro web component versions of the charts, and then use our wrapper to convert them to react components.
That being said, I doubt it's that easy 😬 . Worth a shot though! There's a couple different approaches we can take here so I'll get with my team and start making an actionable plan. As always I'll share any updates/questions/info here as they come in.

[Oceanestars]

Great, thanks! Best of luck!