News for hackers. Stuff that matters.
Re:Charts.css by bob1029 on Wednesday March 17, 2021 @04:12PM (#26496218)
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
Re:Charts.css by brundolf on Wednesday March 17, 2021 @04:23PM (#26496321)
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.
Re:Charts.css by brundolf on Wednesday March 17, 2021 @05:08PM (#26496803)
That would assume a single, harcoded zoom level and position
Re:Charts.css by raylus on Wednesday March 17, 2021 @05:57PM (#26497270)
use js + scroll-wheel observer, profit.
Re:Charts.css by mssundaram on Wednesday March 17, 2021 @04:22PM (#26496311)
For what project/company?
Re:Charts.css by bob1029 on Wednesday March 17, 2021 @05:13PM (#26496846)
I am under NDA on specifics. We build automation/workflow solutions for the financial sector.