Create a single-bar example of distribution-bar in the styleguide

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

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}}