fix #15 scriptable example

sgratzl · sgratzl · commit 1bf6496b7319 · 2019-06-14T22:47:04.000+10:00
diff --git a/samples/scriptable.html b/samples/scriptable.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Hierarchical Bar Chart</title>
+  <script src="https://unpkg.com/chart.js/dist/Chart.bundle.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.2/d3.min.js"></script>
+  <script src="../build/Chart.Hierarchical.js" type="text/javascript"></script>
+  <style>
+    canvas {
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="container" style="width: 75%;">
+    <canvas id="canvas"></canvas>
+  </div>
+  <script>
+    const data = {
+      // define label tree
+      labels: [
+        'A',
+        {
+          label: 'B1',
+          expand: false, // 'focus', // expand level
+          children: [
+            'B1.1',
+            {
+              label: 'B1.2',
+              children: ['B1.2.1', 'B1.2.2']
+            },
+            'B1.3'
+          ]
+        },
+        {
+          label: 'C1',
+          children: ['C1.1', 'C1.2', 'C1.3', 'C1.4']
+        },
+        'D'
+      ],
+      datasets: [{
+        label: 'Test',
+        // store as the tree attribute for reference, the data attribute will be automatically managed
+        tree: [
+          1,
+          {
+            value: 2,
+            children: [
+              3,
+              {
+                value: 4,
+                children: [4.1, 4.2]
+              },
+              5
+            ]
+          },
+          {
+            value: 6,
+            children: [7, 8, 9, 10]
+          },
+          11
+        ]
+      }]
+    };
+
+    const scale = d3.scaleSequential(d3.interpolateBlues).domain([0, 11]);
+
+    window.onload = () => {
+      const ctx = document.getElementById("canvas").getContext("2d");
+      window.myBar = new Chart(ctx, {
+        type: 'bar',
+        data: data,
+        options: {
+          responsive: true,
+          title: {
+            display: true,
+            text: 'Chart.js Hierarchical Bar Chart'
+          },
+          layout: {
+            padding: {
+              // add more space at the bottom for the hierarchy
+              bottom: 60
+            }
+          },
+          scales: {
+            xAxes: [{
+              type: 'hierarchical',
+              // offset setings, for centering the categorical axis in the bar chart case
+              offset: true,
+
+              // grid line settings
+              gridLines: {
+                offsetGridLines: true
+              },
+
+              attributes: {
+                backgroundColor: (ctx) => {
+                  const v = ctx.dataset.data[ctx.dataIndex];
+                  return scale(v);
+                },
+              }
+            }],
+            yAxes: [{
+              ticks: {
+                beginAtZero: true
+              }
+            }]
+          }
+        }
+      });
+
+    };
+
+  </script>
+</body>
+
+</html>
diff --git a/src/plugin/hierarchical.js b/src/plugin/hierarchical.js
@@ -131,7 +131,7 @@ const HierarchicalPlugin = {
 
     Object.keys(attributes).forEach((attr) => {
       chart.data.datasets.forEach((d) => {
-        d[attr] = nodes.map((n) => {
+        const v = nodes.map((n) => {
           while (n) {
             if (n.hasOwnProperty(attr)) {
               return n[attr];
@@ -141,6 +141,9 @@ const HierarchicalPlugin = {
           }
           return attributes[attr]; // default value
         });
+
+        // check if all values are the same, if so replace with a single value
+        d[attr] = v.length >= 1 && v.every((vi) => vi === v[0]) ? v[0] : v;
       });
     });
   },
