refactor: cleaned up logic and update data method

trutoo · Jun 10, 2021 · a7fc020 · a7fc020
1 parent e7fd92d
commit a7fc020
Show file tree

Hide file tree

Showing 6 changed files with 425 additions and 468 deletions.
diff --git a/examples/example-multiple.html b/examples/example-multiple.html
diff --git a/examples/example.html b/examples/example.html
@@ -20,7 +20,7 @@
 
     body {
       margin: 0;
-      background: #f7f4f0;
+      background: #f5f3f1;
     }
 
     .funnel {
@@ -64,98 +64,103 @@
   </div>
 
   <script src="../dist/index.umd.js"></script>
+  <script type="text/javascript">
+    if (typeof fg == 'undefined') {
+      document.write('<script src="https://unpkg.com/@trutoo/funnel-graph">\x3C/script>');
+    }
+  </script>
   <script>
-
-    var dataExample1 = {
-      values: [11000, 3000, 240]
-    };
-
-    var dataExample2 = {
-      labels: ['Impressions 2', 'Add To Cart 2', 'Buy 2'],
-      values: [12000, 5700, 360]
-    };
-
-    var dataExample3 = {
-      labels: ['Impressions', 'Add To Cart', 'Buy'],
-      subLabels: ['Direct', 'Social Media', 'Ads'],
-      values: [
-        [3500, 2500, 6500],
-        [3300, 1400, 1000],
-        [600, 200, 130]
-      ],
-    };
-
-    var dataExample4 = {
-      labels: ['Impressions', 'Add To Cart', 'Buy', 'Refund'],
-      subLabels: ['Organic', 'Direct', 'Social Media', 'Ads', 'Something 1', 'Something 2', 'Something 3', 'Something 4'],
-      values: [
-        [3000, 3000, 3000, 3000, 3000, 3500, 2500, 6500],
-        [2000, 2000, 2000, 2000, 2000, 3300, 1400, 1000],
-        [1500, 1500, 1500, 1500, 1500, 2000, 600, 130],
-        [1000, 1000, 1000, 1000, 1000, 300, 100, 70],
-      ],
-    };
-
-    var graph = new fg.FunnelGraph({
-      container: '.funnel',
-      gradientDirection: 'horizontal',
-      data: dataExample3,
-      displayPercent: true,
-      direction: 'horizontal',
-      width: 800,
-      height: 300,
-      subLabelValue: 'raw'
-    });
-
-    graph.draw();
-
-    // direction methods
-    document.querySelector('#makeVertical').addEventListener('click', function () {
-      graph.setWidth(300);
-      graph.setHeight(400);
-      graph.makeVertical();
-    });
-
-    document.querySelector('#makeHorizontal').addEventListener('click', function () {
-      graph.setWidth(800);
-      graph.setHeight(300);
-      graph.makeHorizontal();
-    });
-
-    document.querySelector('#toggleDirection').addEventListener('click', function () {
-      graph.direction === 'horizontal' ? document.querySelector('#makeVertical').click() :
-        document.querySelector('#makeHorizontal').click();
-    });
-
-    // gradient methods
-    document.querySelector('#gradientMakeVertical').addEventListener('click', function () {
-      graph.gradientMakeVertical();
-    });
-
-    document.querySelector('#gradientMakeHorizontal').addEventListener('click', function () {
-      graph.gradientMakeHorizontal();
-    });
-
-    document.querySelector('#gradientToggleDirection').addEventListener('click', function () {
-      graph.gradientToggleDirection();
-    });
-
-    document.querySelector('#useData1').addEventListener('click', function () {
-      graph.updateData(dataExample1);
-    });
-
-    document.querySelector('#useData2').addEventListener('click', function () {
-      graph.updateData(dataExample2);
-    });
-
-    document.querySelector('#useData3').addEventListener('click', function () {
-      graph.updateData(dataExample3);
-    });
-
-    document.querySelector('#useData4').addEventListener('click', function () {
-      graph.updateData(dataExample4);
-    });
-
+    (function () {
+      var dataExample1 = {
+        values: [11000, 3000, 240]
+      };
+
+      var dataExample2 = {
+        labels: ['Impressions 2', 'Add To Cart 2', 'Buy 2'],
+        values: [12000, 5700, 360],
+      };
+
+      var dataExample3 = {
+        labels: ['Impressions', 'Add To Cart', 'Buy'],
+        subLabels: ['Direct', 'Social Media', 'Ads'],
+        values: [
+          [3500, 2500, 6500],
+          [3300, 1400, 1000],
+          [600, 200, 130]
+        ],
+      };
+
+      var dataExample4 = {
+        labels: ['Impressions', 'Add To Cart', 'Buy', 'Refund'],
+        subLabels: ['Organic', 'Direct', 'Social Media', 'Ads', 'Something 1', 'Something 2', 'Something 3', 'Something 4'],
+        values: [
+          [3000, 3000, 3000, 3000, 3000, 3500, 2500, 6500],
+          [2000, 2000, 2000, 2000, 2000, 3300, 1400, 1000],
+          [1500, 1500, 1500, 1500, 1500, 2000, 600, 130],
+          [1000, 1000, 1000, 1000, 1000, 300, 100, 70],
+        ],
+      };
+
+      var graph = new fg.FunnelGraph({
+        container: '.funnel',
+        gradientDirection: 'horizontal',
+        data: dataExample3,
+        displayPercent: true,
+        direction: 'horizontal',
+        width: 800,
+        height: 300,
+        subLabelValue: 'raw'
+      });
+
+      graph.draw();
+
+      // direction methods
+      document.querySelector('#makeVertical').addEventListener('click', function () {
+        graph.setWidth(300);
+        graph.setHeight(400);
+        graph.makeVertical();
+      });
+
+      document.querySelector('#makeHorizontal').addEventListener('click', function () {
+        graph.setWidth(800);
+        graph.setHeight(300);
+        graph.makeHorizontal();
+      });
+
+      document.querySelector('#toggleDirection').addEventListener('click', function () {
+        graph.direction === 'horizontal' ? document.querySelector('#makeVertical').click() :
+          document.querySelector('#makeHorizontal').click();
+      });
+
+      // gradient methods
+      document.querySelector('#gradientMakeVertical').addEventListener('click', function () {
+        graph.gradientMakeVertical();
+      });
+
+      document.querySelector('#gradientMakeHorizontal').addEventListener('click', function () {
+        graph.gradientMakeHorizontal();
+      });
+
+      document.querySelector('#gradientToggleDirection').addEventListener('click', function () {
+        graph.gradientToggleDirection();
+      });
+
+      document.querySelector('#useData1').addEventListener('click', function () {
+        graph.updateData(dataExample1);
+      });
+
+      document.querySelector('#useData2').addEventListener('click', function () {
+        graph.updateData(dataExample2);
+      });
+
+      document.querySelector('#useData3').addEventListener('click', function () {
+        graph.updateData(dataExample3);
+      });
+
+      document.querySelector('#useData4').addEventListener('click', function () {
+        graph.updateData(dataExample4);
+      });
+    })();
   </script>
 </body>
 

diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,7 @@
 :root {
-  --text: #003f5c;
-  --primary: #a05195;
-  --accent: #f95d6a;
+  --text: MidnightBlue;
+  --primary: MidnightBlue;
+  --accent: Crimson;
   --backdrop: rgba(0, 0, 0, 0.75);
   --backdrop-text: #ffffff;
 }