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?
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.