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

hashicorp · Jul 13, 2018 · 7e51502 · 7e51502
1 parent e435d54
commit 7e51502
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git 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
@@ -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}}