ref(ui): svg-based bar charts #8802

Chrissy · 2018-06-21T00:25:28Z

Updates:

I'm gonna wait to move all of this to styled components until a follow-up. This pull is getting complicated.
I tried not to add/refactor too much js other than general housekeeping, but I did need to add in a min-height functionality since we use that feature a lot and svg doesn't support it.
I've found several bugs with our charts. One I fixed and the rest I will address in follow-up pulls. They are noted below.

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:

colors don't work on various settings charts anymore
several colors are no longer in the sentry brand
min-height is not factored into maximum chart height

ckj · 2018-06-21T03:50:36Z

😍

Chrissy · 2018-09-19T22:26:34Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx

      });
    }
-  },
+  }

  shouldComponentUpdate(nextProps, nextState) {
    return !_.isEqual(this.props, nextProps);


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.

I'm genuinely asking tho (hence why I left it in)

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.

…ose things can't be controlled with css in svg

…ontent from dissapearing

Chrissy · 2018-09-25T22:15:01Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx

+            <rect
+              x={index * pointWidth + '%'}
+              width={pointWidth + '%'}
+              height="105%"


The way we do stacked charts with min-heights 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-heights 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 · 2018-09-25T22:16:53Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx

+const StyledSvg = styled('svg')`
+  width: calc(100% + ${p => p.gap}px);
+  height: 100%;
+  overflow: visible !important; /* overrides global declaration */


we set overflow: hidden globally on all svgs 🙄

Chrissy · 2018-09-25T22:21:04Z

src/sentry/static/sentry/less/group-detail.less

@@ -345,36 +345,39 @@
    border-bottom: 1px dotted @trim;
  }

-  .bar-chart figure a {
+  .bar-chart figure a,
+  .bar-chart figure g {


this css will all go away, but I want to do it in a follow up.

ckj

😍😍😍

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

Chrissy · 2018-09-25T23:02:16Z

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

ckj · 2018-09-25T23:47:01Z

@Chrissy tooltips are a bit off on the smaller charts

Chrissy · 2018-09-25T23:48:28Z

@ckj good catch! that was added recently and should be an easy fix.

…a bit of customization looks really similar

Chrissy · 2018-09-26T17:24:20Z

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 · 2018-09-27T18:30:35Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx

-  },
+  }
+
+  getInterval = series => {


none of these changed, i just moved them when I removed createClass.

billyvg · 2018-09-27T20:04:01Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx

 import PropTypes from 'prop-types';
 import moment from 'moment-timezone';
 import _ from 'lodash';
+import styled from 'react-emotion';
+import cx from 'classnames';


fyi react-emotion has a cx as well (and would prefer that moving forward)

was just reading about this. good call.

billyvg · 2018-09-27T20:04:01Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx

+  }
+
+  getInterval = series => {
+    // TODO(dcramer): not guaranteed correct


billyvg · 2018-09-27T20:04:01Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx

    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),


what does 99 mean here?

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

Also good for this to be in commentz

billyvg · 2018-09-27T20:04:01Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx


  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);


What does 0.1 mean here?

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.

I would explain this in some code commentz

billyvg · 2018-09-27T20:04:01Z

src/sentry/static/sentry/app/components/stackedBarChart.jsx

-      barClasses: ['chart-bar'],
-    };
-  },
+    minHeights: PropTypes.arrayOf(PropTypes.number),


Can we document what minHeights does? It's not clear why it's an array of min heights.

I also considered renaming it to minBarHeights which might help

tests/js/spec/components/stackedBarChart.spec.jsx

billyvg

lgtm, I would add some inline comments for places where magic numbers are involved.

Chrissy · 2018-10-01T20:01:32Z

alrighty @billyvg @ckj everything is resolved. gonna check on Windows one more time and then merge.

ckj · 2018-10-01T21:59:05Z

📈

benvinegar · 2018-10-02T15:51:25Z

💯 Huge.

Chrissy added the WIP label Jun 21, 2018

random height

Loading status checks…

90ec931

Chrissy force-pushed the ref/issues/svg-bar-charts branch from 50156de to 90ec931 Sep 18, 2018

Chrissy added 8 commits Sep 18, 2018

rough working scalable version

Loading status checks…

3330874

perfect crop box

Loading status checks…

8ada768

improve bar spacing to look identical to old spacing

Loading status checks…

e04e8d7

working stax

Loading status checks…

3edc908

only have a min height on the first bar

dae1ae7

remove createReactClass for posterity of the world

Loading status checks…

4778688

use container: body so that tooltips can render outside the svg ns

Loading status checks…

c8cdbf5

cleanup and tests

Loading status checks…

b3fdab6

Chrissy reviewed Sep 19, 2018

View changes

Chrissy added 12 commits Sep 20, 2018

patch more css hidden in weird nooks

51bb905

found a couple more bits of css

Loading status checks…

af04721

enable customization of things like min height and gap space since th…

b8ab38d

…ose things can't be controlled with css in svg

working markers

Loading status checks…

a9bbeaa

use masking for fixed spaces between bars

Loading status checks…

1cb7422

add circles to svg and fix id bug with clip-path

Loading status checks…

9d29796

use proper gap in groupChart view

Loading status checks…

62c7d92

perfect identicalness to current charts

Loading status checks…

2bca6db

fix min height for super short project stats graph

da4aeb5

show tooltip during any hover contact with bar height, empty or not

Loading status checks…

a9135dd

fix min heights on group chart

Loading status checks…

703c508

remove unecessary gap=2 stuff

Loading status checks…

2ffb198

Chrissy removed the WIP label Sep 25, 2018

add an extra 5% at the top of bar charts to prevent extra minheight c…

Loading status checks…

ddeb43e

…ontent from dissapearing

Chrissy reviewed Sep 25, 2018

View changes

remove chart marker css

Loading status checks…

ac7ec91

Chrissy reviewed Sep 25, 2018

View changes

Chrissy requested review from getsentry/app-frontend and ckj Sep 25, 2018

ckj reviewed Sep 25, 2018

View changes

add params to 'bizarre case' code

Loading status checks…

60d673e

Chrissy added 4 commits Sep 26, 2018

fix tooltip placement on smaller graphs

1219f8f

place circles as seperate svgs

cb8ece8

convert to percentage based gap widths because it is simple and with …

Loading status checks…

de6be6b

…a bit of customization looks really similar

project stats gap

Loading status checks…

4c0aa82

Chrissy reviewed Sep 27, 2018

View changes

src/sentry/static/sentry/app/components/stackedBarChart.jsx

},

}

getInterval = series => {

This comment has been minimized.

Sign in to view

Chrissy Sep 27, 2018
Author Contributor

none of these changed, i just moved them when I removed createClass.

billyvg reviewed Sep 27, 2018

View changes

billyvg approved these changes Sep 28, 2018

View changes

add comments and use a stretch viewbox for safety reasons

Loading status checks…

593a722

update comment to make more sense

Loading status checks…

8bc282c

ckj deleted the ref/issues/svg-bar-charts branch Oct 1, 2018

billyvg mentioned this pull request Oct 1, 2018

feat(sidebar): Organization Stats chart #8427

Closed

getsentry / sentry

ref(ui): svg-based bar charts #8802

ref(ui): svg-based bar charts #8802

Chrissy commented Jun 21, 2018 •

edited

ckj commented Jun 21, 2018

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ckj left a comment

Chrissy commented Sep 25, 2018

ckj commented Sep 25, 2018

Chrissy commented Sep 25, 2018

Chrissy commented Sep 26, 2018 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

billyvg left a comment

Chrissy commented Oct 1, 2018

ckj commented Oct 1, 2018

benvinegar commented Oct 2, 2018

getsentry / sentry

Sponsor getsentry/sentry

Join GitHub today

GitHub is where the world builds software

ref(ui): svg-based bar charts #8802

ref(ui): svg-based bar charts #8802

Conversation

Chrissy commented Jun 21, 2018 • edited

Updates:

Changes:

ckj commented Jun 21, 2018

This comment has been minimized.

Chrissy Sep 19, 2018 Author Contributor

This comment has been minimized.

Chrissy Sep 19, 2018 Author Contributor

This comment has been minimized.

billyvg Sep 21, 2018 Member

This comment has been minimized.

Chrissy Sep 25, 2018 Author Contributor

This comment has been minimized.

Chrissy Sep 25, 2018 Author Contributor

This comment has been minimized.

Chrissy Sep 25, 2018 Author Contributor

ckj left a comment

Chrissy commented Sep 25, 2018

ckj commented Sep 25, 2018

Chrissy commented Sep 25, 2018

Chrissy commented Sep 26, 2018 • edited

This comment has been minimized.

Chrissy Sep 27, 2018 Author Contributor

This comment has been minimized.

billyvg Sep 27, 2018 Member

This comment has been minimized.

Chrissy Sep 27, 2018 Author Contributor

This comment has been minimized.

billyvg Sep 27, 2018 Member

This comment has been minimized.

Chrissy Sep 27, 2018 Author Contributor

This comment has been minimized.

billyvg Sep 27, 2018 Member

This comment has been minimized.

Chrissy Sep 27, 2018 Author Contributor

This comment has been minimized.

billyvg Sep 28, 2018 Member

This comment has been minimized.

billyvg Sep 27, 2018 Member

This comment has been minimized.

Chrissy Sep 27, 2018 • edited Author Contributor

This comment has been minimized.

billyvg Sep 27, 2018 Member

This comment has been minimized.

billyvg Sep 27, 2018 Member

This comment has been minimized.

Chrissy Sep 27, 2018 Author Contributor

This comment has been minimized.

Chrissy Sep 27, 2018 Author Contributor

billyvg left a comment

Chrissy commented Oct 1, 2018

ckj commented Oct 1, 2018

benvinegar commented Oct 2, 2018

Essential cookies

Always active

Analytics cookies

Chrissy commented Jun 21, 2018 •

edited

Chrissy Sep 19, 2018
Author Contributor

Chrissy Sep 19, 2018
Author Contributor

billyvg Sep 21, 2018
Member

Chrissy Sep 25, 2018
Author Contributor

Chrissy Sep 25, 2018
Author Contributor

Chrissy Sep 25, 2018
Author Contributor

Chrissy commented Sep 26, 2018 •

edited

Chrissy Sep 27, 2018
Author Contributor

billyvg Sep 27, 2018
Member

Chrissy Sep 27, 2018
Author Contributor

billyvg Sep 27, 2018
Member

Chrissy Sep 27, 2018
Author Contributor

billyvg Sep 27, 2018
Member

Chrissy Sep 27, 2018
Author Contributor

billyvg Sep 28, 2018
Member

billyvg Sep 27, 2018
Member

Chrissy Sep 27, 2018 •

edited

Author Contributor

billyvg Sep 27, 2018
Member

billyvg Sep 27, 2018
Member

Chrissy Sep 27, 2018
Author Contributor

Chrissy Sep 27, 2018
Author Contributor