search

benvinegar / counterscale

Scalable web analytics you run yourself on Cloudflare
https://counterscale.dev
MIT License
1.52k stars 66 forks source link

feat: bar charts #39

Closed chiubaca closed 9 months ago

chiubaca commented 9 months ago

Resolves: https://github.com/benvinegar/counterscale/issues/28

Notes: Was slightly trickier than anticipated because because absolute positioning elements in a css table is much harder than with plain divs in a css grid. Down the line I do wonder if if its worth refactoring the table component be plain divs and css grid if the component gets more complex, would give a bit more css flexiblity but at the cost of good html semantics.

Demo: https://counterscale.chiubaca.workers.dev/dashboard

benvinegar commented 9 months ago

Man that looks so much better (with some tiny style issues to be resolved). I'll poke at this sometime this week.

🙏

benvinegar commented 9 months ago

So I took a peek at this: I'd like to figure out how to achieve the result without adding empty table cells. Mostly for a11y; the markup should reflect the content.

I'm playing around with it now. We're also free to edit TableCell (these are copy/pasted components from shadcdn/ui).

benvinegar commented 9 months ago

I merged your PR then re-did how the colors were applied to drop the extra <td> and instead uselinear-gradienton the` element.

8af3767cab53a4f2cad0ea5a8136dd1ef742b151

benvinegar commented 9 months ago

Also added #42

chiubaca commented 9 months ago

So I took a peek at this: I'd like to figure out how to achieve the result without adding empty table cells. Mostly for a11y; the markup should reflect the content.

I'm playing around with it now. We're also free to edit TableCell (these are copy/pasted components from shadcdn/ui).

Aha, that was confusing me lots!

Nice, thanks for fixing and merging🎉