Rerender the distribution chart when the window resizes

ui/app/components/distribution-bar.js

@@ -1,12 +1,13 @@
 import Ember from 'ember';
 import d3 from 'npm:d3-selection';
 import 'npm:d3-transition';
+import WindowResizable from '../mixins/window-resizable';
 import styleStringProperty from '../utils/properties/style-string';
 
 const { Component, computed, run, assign, guidFor } = Ember;
 const sumAggregate = (total, val) => total + val;
 
-export default Component.extend({
+export default Component.extend(WindowResizable, {
   classNames: ['chart', 'distribution-bar'],
   classNameBindings: ['isNarrow:is-narrow'],
 
@@ -124,6 +125,7 @@ export default Component.extend({
         .attr('y', () => isNarrow ? '50%' : 0)
         .attr('clip-path', `url(#${this.get('maskId')})`)
         .attr('height', () => isNarrow ? '6px' : '100%')
+        .attr('transform', () => isNarrow && 'translate(0, -3)')
       .merge(layers)
         .attr('class', (d, i) => `bar layer-${i}`)
       .transition()
@@ -138,4 +140,8 @@ export default Component.extend({
       }
   },
   /* eslint-enable */
+
+  windowResizeHandler() {
+    run.once(this, this.renderChart);
+  },
 });

ui/app/mixins/window-resizable.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+const { run, $ } = Ember;
+
+export default Ember.Mixin.create({
+  setupWindowResize: function() {
+    run.scheduleOnce('afterRender', this, () => {
+      this.set('_windowResizeHandler', this.get('windowResizeHandler').bind(this));
+      $(window).on('resize', this.get('_windowResizeHandler'));
+    });
+  }.on('didInsertElement'),
+
+  removeWindowResize: function() {
+    $(window).off('resize', this.get('_windowResizeHandler'));
+  }.on('willDestroyElement'),
+});