Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
ref(ui): svg-based bar charts #8802
Our current bar charts do all sorts of crazy things if odd numbers are involved. This is because divs aren't subject to sub-pixel aliasing (or rather, they are but the browser doesn't seem to couple the antialiasing process with the precise layout):
SVGs are capable of sub-pixel aliasing and even have several different options to fit different goals. Best of all, they take layout precision into account much better during the aliasing process
Here is what a complex example looks like before and after:
Circles also don't scale very well in the current charts:
This converts our circles to svg so it scales correctly:
Performance is equal at worst, and might be a little better based on a quick look at the performance tab. There is the opportunity to emphatically improve performance in tabular list views by converting bars to a sprite with
As the charts get smaller and we move into sub-pixel layouts the improvements become more obvious:
other (existing) chart bugs for follow ups:
ckj left a comment
Visually everything looks great, save for a handful of diffs... Any idea what's going on to cause the markers in the sidebar to be on the first bar instead of the last?
alrighty @ckj I addressed both of the bugs you found. I moved the circles into independent svgs that are moved using css, and then changed the bar graphs to stretch, so everything scales fluidly now both vertically and horizontally (but...you know...without the weird bugs).
Everything looks good in comparison to master, so once I get a js review, this should be ready to go.