From a6e8007d06deebd7b2c5f0d4acbb772131a2aa1d Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 16 Jan 2018 16:11:34 -0800
Subject: [PATCH] Add jumbo distribution bar to the styleguide

---
 .../freestyle/sg-distribution-bar-jumbo.js    | 13 ++++++++++
 .../freestyle/sg-distribution-bar-jumbo.hbs   | 25 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 ui/app/components/freestyle/sg-distribution-bar-jumbo.js
 create mode 100644 ui/app/templates/components/freestyle/sg-distribution-bar-jumbo.hbs

diff --git a/ui/app/components/freestyle/sg-distribution-bar-jumbo.js b/ui/app/components/freestyle/sg-distribution-bar-jumbo.js
new file mode 100644
index 000000000..9176d6b7c
--- /dev/null
+++ b/ui/app/components/freestyle/sg-distribution-bar-jumbo.js
@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  distributionBarData: computed(() => {
+    return [
+      { label: 'one', value: 10 },
+      { label: 'two', value: 20 },
+      { label: 'three', value: 0 },
+      { label: 'four', value: 35 },
+    ];
+  }),
+});
diff --git a/ui/app/templates/components/freestyle/sg-distribution-bar-jumbo.hbs b/ui/app/templates/components/freestyle/sg-distribution-bar-jumbo.hbs
new file mode 100644
index 000000000..924f3ed7d
--- /dev/null
+++ b/ui/app/templates/components/freestyle/sg-distribution-bar-jumbo.hbs
@@ -0,0 +1,25 @@
+{{#freestyle-usage "jumbo-distribution-bar"}}
+  {{#distribution-bar data=distributionBarData class="split-view" as |chart|}}
+    <ol class="legend">
+      {{#each chart.data as |datum index|}}
+        <li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
+          <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
+          <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
+          <span class="label">
+            {{datum.label}}
+          </span>
+        </li>
+      {{/each}}
+    </ol>
+  {{/distribution-bar}}
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  <div class="block">
+    A variation of the Distribution Bar component for when the distribution bar is the central component of the page. It's a larger format that requires no interaction to see the data labels and values.
+  </div>
+  <div class="boxed-section">
+    <div class="boxed-section-body is-dark">
+      {{json-viewer json=distributionBarData}}
+    </div>
+  </div>
+{{/freestyle-annotation}}