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 upref(ui): svg-based bar charts #8802
Conversation
Chrissy
added
the
WIP
label
Jun 21, 2018
This comment has been minimized.
This comment has been minimized.
|
Chrissy
force-pushed the
ref/issues/svg-bar-charts
branch
from
50156de
to
90ec931
Sep 18, 2018
Chrissy
added some commits
Sep 18, 2018
Chrissy
reviewed
Sep 19, 2018
}); | ||
} | ||
}, | ||
} | ||
|
||
shouldComponentUpdate(nextProps, nextState) { | ||
return !_.isEqual(this.props, nextProps); |
This comment has been minimized.
This comment has been minimized.
Chrissy
Sep 19, 2018
Author
Contributor
is this really necessary? seems like a) this would be close to the default behavior and b) it would be a confusing surprise to not re-render on state change.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
billyvg
Sep 21, 2018
Member
Difference is shallow vs deep compare, agreed with (b).
Since we're not updating on state changes... the values that are currently in state, should not be in state. I would leave this in here though and open a followup for cleanups.
Chrissy
added some commits
Sep 20, 2018
Chrissy
removed
the
WIP
label
Sep 25, 2018
Chrissy
reviewed
Sep 25, 2018
<rect | ||
x={index * pointWidth + '%'} | ||
width={pointWidth + '%'} | ||
height="105%" |
This comment has been minimized.
This comment has been minimized.
Chrissy
Sep 25, 2018
Author
Contributor
The way we do stacked charts with min-height
s right now is similar to this. we set a min-height
in css and then it just stacks up and overflows the container.
A fancier and better version of this could apply the min-height
s to a base set and then calculate everything based on that, but that seemed out of scope since I was really just trying to replicate the old chart behavior in svg.
Chrissy
reviewed
Sep 25, 2018
const StyledSvg = styled('svg')` | ||
width: calc(100% + ${p => p.gap}px); | ||
height: 100%; | ||
overflow: visible !important; /* overrides global declaration */ |
This comment has been minimized.
This comment has been minimized.
Chrissy
reviewed
Sep 25, 2018
@@ -345,36 +345,39 @@ | |||
border-bottom: 1px dotted @trim; | |||
} | |||
|
|||
.bar-chart figure a { | |||
.bar-chart figure a, | |||
.bar-chart figure g { |
This comment has been minimized.
This comment has been minimized.
Chrissy
Sep 25, 2018
Author
Contributor
this css will all go away, but I want to do it in a follow up.
Chrissy
requested review from
getsentry/app-frontend
and
ckj
Sep 25, 2018
ckj
reviewed
Sep 25, 2018
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? https://percy.io/getsentry/sentry/builds/1035439/view/63270274/1280?browser=firefox&mode=diff https://percy.io/getsentry/sentry/builds/1035439/view/63270225/1280?browser=firefox&mode=diff |
This comment has been minimized.
This comment has been minimized.
@ckj yeah I've been looking at that too. When I compare my branch directly to master it is almost identical...so I'm hoping this is a percy thing. I will probably dig around a bit more before I mash merge just to make sure it's production safe. |
This comment has been minimized.
This comment has been minimized.
@Chrissy tooltips are a bit off on the smaller charts |
This comment has been minimized.
This comment has been minimized.
@ckj good catch! that was added recently and should be an easy fix. |
Chrissy
added some commits
Sep 26, 2018
This comment has been minimized.
This comment has been minimized.
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. |
Chrissy
reviewed
Sep 27, 2018
}, | ||
} | ||
|
||
getInterval = series => { |
This comment has been minimized.
This comment has been minimized.
Chrissy
Sep 27, 2018
Author
Contributor
none of these changed, i just moved them when I removed createClass
.
billyvg
reviewed
Sep 27, 2018
import PropTypes from 'prop-types'; | ||
import moment from 'moment-timezone'; | ||
import _ from 'lodash'; | ||
import styled from 'react-emotion'; | ||
import cx from 'classnames'; |
This comment has been minimized.
This comment has been minimized.
billyvg
Sep 27, 2018
Member
fyi react-emotion
has a cx
as well (and would prefer that moving forward)
This comment has been minimized.
This comment has been minimized.
} | ||
|
||
getInterval = series => { | ||
// TODO(dcramer): not guaranteed correct |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
let totalY = point.y.reduce((a, b) => a + b); | ||
let totalPct = totalY / maxval; | ||
let prevPct = 0; | ||
let pts = point.y.map((y, i) => { | ||
let pct = totalY && this.floatFormat(y / totalY * totalPct * 99, 2); | ||
let pct = Math.max( | ||
totalY && this.floatFormat(y / totalY * totalPct * 99, 2), |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Chrissy
Sep 27, 2018
Author
Contributor
(takes a long, deep breath...)
As best I can tell the "99" is used to reserve a little extra space for the min-heights
that were previously applied to bars with css (now applied with the prop). this didn't really work because 1% isn't always 1px and sometimes (like with issue release charts) the min-height is 4+ pixels.
However none of the charts have overflow: hidden so if the bars exceed 100% height it doesn't matter (so long as visually it doesn't look weird)
I kept the 99 in there to keep things similar to what they were before. Truthfully, the charts have never been that accurate lol. We could do 100 and nobody would notice.
This comment has been minimized.
This comment has been minimized.
|
||
renderChart() { | ||
let {pointIndex, series} = this.state; | ||
let totalPoints = Math.max(...series.map(s => s.data.length)); | ||
let pointWidth = this.floatFormat(100.0 / totalPoints, 2) + '%'; | ||
let pointWidth = this.floatFormat((100.0 + this.props.gap + 0.1) / totalPoints, 2); |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Chrissy
Sep 27, 2018
•
Author
Contributor
it keeps a very subtle white line from appearing on the right edge of the svg at certain sizes. I could remove it and nobody would notice. it happens with regularity in production and nobody seems to care.
This comment has been minimized.
This comment has been minimized.
barClasses: ['chart-bar'], | ||
}; | ||
}, | ||
minHeights: PropTypes.arrayOf(PropTypes.number), |
This comment has been minimized.
This comment has been minimized.
billyvg
Sep 27, 2018
Member
Can we document what minHeights
does? It's not clear why it's an array of min heights.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Chrissy
Sep 27, 2018
Author
Contributor
I also considered renaming it to minBarHeights
which might help
billyvg
approved these changes
Sep 28, 2018
lgtm, I would add some inline comments for places where magic numbers are involved. |
This comment has been minimized.
This comment has been minimized.
Chrissy
merged commit 0f863d7
into
master
Oct 1, 2018
6 checks passed
ckj
deleted the
ref/issues/svg-bar-charts
branch
Oct 1, 2018
This comment has been minimized.
This comment has been minimized.
|
billyvg
referenced this pull request
Oct 1, 2018
Closed
feat(sidebar): Organization Stats chart #8427
This comment has been minimized.
This comment has been minimized.
|
Chrissy commentedJun 21, 2018
•
edited
Updates:
Changes:
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
<use />
.As the charts get smaller and we move into sub-pixel layouts the improvements become more obvious:
todo:
other (existing) chart bugs for follow ups: