From e435d542b1bf4880970923369f856a3acb12f240 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 12 Jul 2018 16:29:30 -0700
Subject: [PATCH 1/3] Fix a bug where the wrong index could be used when some
 bars had no value

---
 ui/app/components/distribution-bar.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/distribution-bar.js b/ui/app/components/distribution-bar.js
index f29f3b6722b1..3cdaa7b2a71a 100644
--- a/ui/app/components/distribution-bar.js
+++ b/ui/app/components/distribution-bar.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { computed, observer } from '@ember/object';
+import { computed, observer, set } from '@ember/object';
 import { run } from '@ember/runloop';
 import { assign } from '@ember/polyfills';
 import { guidFor, copy } from '@ember/object/internals';
@@ -76,6 +76,9 @@ export default Component.extend(WindowResizable, {
     const { chart, _data, isNarrow } = this.getProperties('chart', '_data', 'isNarrow');
     const width = this.$('svg').width();
     const filteredData = _data.filter(d => d.value > 0);
+    filteredData.forEach((d, index) => {
+      set(d, 'index', index);
+    });
 
     let slices = chart.select('.bars').selectAll('g').data(filteredData, d => d.label);
     let sliceCount = filteredData.length;
@@ -114,8 +117,8 @@ export default Component.extend(WindowResizable, {
 
     this.set('slices', slices);
 
-    const setWidth = d => `${width * d.percent - (d.index === sliceCount - 1 || d.index === 0 ? 1 : 2)}px`
-    const setOffset = d => `${width * d.offset + (d.index === 0 ? 0 : 1)}px`
+    const setWidth = d => `${width * d.percent - (d.index === sliceCount - 1 || d.index === 0 ? 1 : 2)}px`;
+    const setOffset = d => `${width * d.offset + (d.index === 0 ? 0 : 1)}px`;
 
     let hoverTargets = slices.selectAll('.target').data(d => [d]);
     hoverTargets.enter()

From 7e51502cc5c268803f0d3a053b600743b91d4675 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 12 Jul 2018 16:44:17 -0700
Subject: [PATCH 2/3] Create a single-bar example of distribution-bar in the
 styleguide

---
 ui/app/components/freestyle/sg-distribution-bar.js         | 4 ++++
 .../templates/components/freestyle/sg-distribution-bar.hbs | 7 +++++++
 2 files changed, 11 insertions(+)

diff --git a/ui/app/components/freestyle/sg-distribution-bar.js b/ui/app/components/freestyle/sg-distribution-bar.js
index ab43ceb038dc..7c1f5c57907c 100644
--- a/ui/app/components/freestyle/sg-distribution-bar.js
+++ b/ui/app/components/freestyle/sg-distribution-bar.js
@@ -17,6 +17,10 @@ export default Component.extend({
     clearInterval(this.get('timer'));
   },
 
+  distributionBarDatum: computed(() => {
+    return [{ label: 'one', value: 10 }];
+  }),
+
   distributionBarData: computed(() => {
     return [
       { label: 'one', value: 10 },
diff --git a/ui/app/templates/components/freestyle/sg-distribution-bar.hbs b/ui/app/templates/components/freestyle/sg-distribution-bar.hbs
index 3fbc6d993b44..76f4ca2eec85 100644
--- a/ui/app/templates/components/freestyle/sg-distribution-bar.hbs
+++ b/ui/app/templates/components/freestyle/sg-distribution-bar.hbs
@@ -67,4 +67,11 @@
       </div>
     {{/freestyle-annotation}}
   {{/collection.variant}}
+  {{#collection.variant key="single bar"}}
+    {{#freestyle-usage 'distribution-bar-single'}}
+      <div class="block" style="height:50px; width:600px;">
+        {{distribution-bar data=distributionBarDatum}}
+      </div>
+    {{/freestyle-usage}}
+  {{/collection.variant}}
 {{/freestyle-collection}}

From d5af5e6cfc7c0ea7f96d24593b65f316d64049f7 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 12 Jul 2018 16:45:12 -0700
Subject: [PATCH 3/3] Compute the correct number of pixels to shave off of bar
 width

---
 ui/app/components/distribution-bar.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/distribution-bar.js b/ui/app/components/distribution-bar.js
index 3cdaa7b2a71a..c02b217ff40b 100644
--- a/ui/app/components/distribution-bar.js
+++ b/ui/app/components/distribution-bar.js
@@ -117,7 +117,14 @@ export default Component.extend(WindowResizable, {
 
     this.set('slices', slices);
 
-    const setWidth = d => `${width * d.percent - (d.index === sliceCount - 1 || d.index === 0 ? 1 : 2)}px`;
+    const setWidth = d => {
+      // Remove a pixel from either side of the slice
+      let modifier = 2;
+      if (d.index === 0) modifier--; // But not the left side
+      if (d.index === sliceCount - 1) modifier--; // But not the right side
+
+      return `${width * d.percent - modifier}px`;
+    };
     const setOffset = d => `${width * d.offset + (d.index === 0 ? 0 : 1)}px`;
 
     let hoverTargets = slices.selectAll('.target').data(d => [d]);