From 9d71c93762f372689556653f44a11fb972ff899c Mon Sep 17 00:00:00 2001
From: John Munsch <john.munsch@gmail.com>
Date: Fri, 19 Jul 2019 21:53:44 -0500
Subject: [PATCH] Got a series of stories working for the Peity clone
 components.

---
 app/js/peity.components.js |  10 +---
 stories/peity.stories.js   | 113 +++++++++++++++++++++----------------
 2 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/app/js/peity.components.js b/app/js/peity.components.js
index 2c33694..67ff7ba 100644
--- a/app/js/peity.components.js
+++ b/app/js/peity.components.js
@@ -251,9 +251,7 @@ class DonutElement extends PieElement {
   }
 }
 
-// As with the pie and donut simply being to variations of the same custom
-// element, there's a good chance these two will lead to only one
-// implementation.
+// TODO: This component is only partially implemented. I've never gone back to finish all the d3 stuff.
 class LineElement extends BaseElement {
   constructor() {
     super();
@@ -421,9 +419,3 @@ customElements.define('wc-pie', PieElement);
 customElements.define('wc-donut', DonutElement);
 customElements.define('wc-line', LineElement);
 customElements.define('wc-bar', BarElement);
-
-window.addEventListener('WebComponentsReady', function(e) {
-  // This is just testing the function the WebComponents polyfill provides. It
-  // gets called at the same point whether it polyfilled anything or not.
-  console.log('Components are ready');
-});
diff --git a/stories/peity.stories.js b/stories/peity.stories.js
index 401337b..7ce2077 100644
--- a/stories/peity.stories.js
+++ b/stories/peity.stories.js
@@ -3,58 +3,71 @@ import { storiesOf } from '@storybook/html';
 
 import '../app/js/peity.components';
 
-storiesOf('Peity', module).add(
-  'heading',
-  () => /* html */ `
-<h2>Interactive Example</h2>
-<wc-pie class="interactive">0.5,1,2</wc-pie>
+storiesOf('Peity', module)
+  .add(
+    'Pie Charts',
+    () => /* html */ `
+    <h2>Pie Charts</h2>
 
-<button onclick="changeProperties('wc-pie.interactive')">Change Properties</button>
+    <div>
+      <wc-pie>1/5</wc-pie>
+      <wc-pie>226/360</wc-pie>
+      <wc-pie>0.52/1.561</wc-pie>
+      <wc-pie>1,4</wc-pie>
+      <wc-pie>226,134</wc-pie>
+      <wc-pie>0.52,1.041</wc-pie>
+      <wc-pie>1,2,3,2,2</wc-pie>
+    </div>`
+  )
+  .add(
+    'Donut Charts',
+    () => /* html */ `
+    <h2>Donut Charts</h2>
 
-<h2>Pie Charts</h2>
-<div>
-  <wc-pie>1/5</wc-pie>
-  <wc-pie>226/360</wc-pie>
-  <wc-pie>0.52/1.561</wc-pie>
-  <wc-pie>1,4</wc-pie>
-  <wc-pie>226,134</wc-pie>
-  <wc-pie>0.52,1.041</wc-pie>
-  <wc-pie>1,2,3,2,2</wc-pie>
-</div>
+    <div>
+      <wc-donut>1/5</wc-donut>
+      <wc-donut>226/360</wc-donut>
+      <wc-donut>0.52/1.561</wc-donut>
+      <wc-donut>1,4</wc-donut>
+      <wc-donut>226,134</wc-donut>
+      <wc-donut>0.52,1.041</wc-donut>
+      <wc-donut>1,2,3,2,2</wc-donut>
+    </div>`
+  )
+  .add(
+    'Line Charts',
+    () => /* html */ `
+    <h2>Line Charts</h2>
 
-<h2>Donut Charts</h2>
-<div>
-  <wc-donut>1/5</wc-donut>
-  <wc-donut>226/360</wc-donut>
-  <wc-donut>0.52/1.561</wc-donut>
-  <wc-donut>1,4</wc-donut>
-  <wc-donut>226,134</wc-donut>
-  <wc-donut>0.52,1.041</wc-donut>
-  <wc-donut>1,2,3,2,2</wc-donut>
-</div>
+    <div>
+      <wc-line>5,3,9,6,5,9,7,3,5,2</wc-line>
+      <wc-line>5,3,2,-1,-3,-2,2,3,5,2</wc-line>
+      <wc-line>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</wc-line>
+    </div>`
+  )
+  .add(
+    'Bar Charts',
+    () => /* html */ `
+    <h2>Bar Charts</h2>
 
-<h2>Line Charts</h2>
-<div>
-  <wc-line>5,3,9,6,5,9,7,3,5,2</wc-line>
-  <wc-line>5,3,2,-1,-3,-2,2,3,5,2</wc-line>
-  <wc-line>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</wc-line>
-</div>
+    <div>
+      <wc-bar>5,3,9,6,5,9,7,3,5,2</wc-bar>
+      <wc-bar>5,3,2,-1,-3,-2,2,3,5,2</wc-bar>
+      <wc-bar>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</wc-bar>
+    </div>`
+  )
+  .add(
+    'Attributes',
+    () => /* html */ `
+    <h2>Attributes</h2>
 
-<h2>Bar Charts</h2>
-<div>
-  <wc-bar>5,3,9,6,5,9,7,3,5,2</wc-bar>
-  <wc-bar>5,3,2,-1,-3,-2,2,3,5,2</wc-bar>
-  <wc-bar>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</wc-bar>
-</div>
-
-<h2>Attributes</h2>
-<div>
-  <wc-donut fill='["red", "#eeeeee"]' inner-radius="10" radius="40">1/7</wc-donut>
-  <wc-donut fill='["orange", "#eeeeee"]' inner-radius="14" radius="36">2/7</wc-donut>
-  <wc-donut fill='["yellow", "#eeeeee"]' inner-radius="16" radius="32">3/7</wc-donut>
-  <wc-donut fill='["green", "#eeeeee"]' inner-radius="18" radius="28">4/7</wc-donut>
-  <wc-donut fill='["blue", "#eeeeee"]' inner-radius="20" radius="24">5/7</wc-donut>
-  <wc-donut fill='["indigo", "#eeeeee"]' inner-radius="18" radius="20">6/7</wc-donut>
-  <wc-donut fill='["violet", "#eeeeee"]' inner-radius="15" radius="16">7/7</wc-donut>
-</div> `
-);
+    <div>
+      <wc-donut fill='["red", "#eeeeee"]' inner-radius="10" radius="40">1/7</wc-donut>
+      <wc-donut fill='["orange", "#eeeeee"]' inner-radius="14" radius="36">2/7</wc-donut>
+      <wc-donut fill='["yellow", "#eeeeee"]' inner-radius="16" radius="32">3/7</wc-donut>
+      <wc-donut fill='["green", "#eeeeee"]' inner-radius="18" radius="28">4/7</wc-donut>
+      <wc-donut fill='["blue", "#eeeeee"]' inner-radius="20" radius="24">5/7</wc-donut>
+      <wc-donut fill='["indigo", "#eeeeee"]' inner-radius="18" radius="20">6/7</wc-donut>
+      <wc-donut fill='["violet", "#eeeeee"]' inner-radius="15" radius="16">7/7</wc-donut>
+    </div>`
+  );