Re:Charts.css
by brundolf on Wednesday March 17, 2021 @04:03PM
(#26496142)
I love a good CSS-only solution because of its statelessness; makes things much easier to reason about IMO. Of course in this case you'll probably have to generate your HTML in some procedural way anyway, but it's still a neat option to have, especially if you're statically-rendering your pages (you can avoid using JS entirely)
[ Parent
| on HN ]
100% agree. CSS-only solutions are extremely attractive. Avoiding use of JS entirely is one my team's core values at this stage.
We never got rid of 100% of it, but we did get really damn close using Blazor. Only ~180 lines of javascript interop is required for our entire solution last time I checked. This isn't trivial stuff either... We hand-rolled large file upload/download w/ progress, get client rect, get/set cookies, etc.
Re:Charts.css
by pcthrowaway on Wednesday March 17, 2021 @04:20PM
(#26496298)
Perhaps I'm wrong, but it may be impossible to add zoom capabilities to charts without JS
Hmm. You would probably want to implement the actual zoom as a `transform: scale() translate()` regardless, and you could parameterize it with CSS properties like `transform: scale(var(--zoom-scale)) translate(var(--zoom-x), var(--zoom-y))`. But when it comes to getting those numbers and hooking them into the CSS vars, I don't see a way to do that without JS. Certainly, though, the JS could be just a couple lines if you did things this way (mousemove listener on the container, a bit of math to get the relative x/y, and then either a slider or a scroll listener to determine the scale, and these three numbers are plugged directly into the CSS).
Re:Charts.css
by pcthrowaway on Wednesday March 17, 2021 @05:30PM
(#26497022)
Yeah, I suppose are definitely ways to do some basic zoom with just CSS and very minimal JS modifying the zoom-levels.
But then when you take into account data that needs to be inserted for higher resolution at higher zoom levels, it becomes a lot of JS, especially if that data needs to be fetched as the user zooms.
Re:Charts.css
by eyelidlessness on Wednesday March 17, 2021 @09:39PM
(#26498917)
It can definitely be done with checkbox hacks, adjacent child selectors, transform, and scroll-based interaction to pan.
Re:Charts.css
by thehappypm on Wednesday March 17, 2021 @05:04PM
(#26496760)
You could probably use the :hover: pseudo-class and make it work.
That would assume a single, harcoded zoom level and position
use js + scroll-wheel observer, profit.
Re:Charts.css
by mssundaram on Wednesday March 17, 2021 @04:22PM
(#26496311)
For what project/company?
I am under NDA on specifics. We build automation/workflow solutions for the financial sector.
This is more of an alternative to SVG than an alternative to JS. You could always create charts using plain SVG. Most JS charting libraries just do that for you.