fix #11

sgratzl · Sep 3, 2020 · ff7289f · ff7289f
1 parent 9b7444c
commit ff7289f
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/samples/multi.html b/samples/multi.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
+    <script src="../build/Chart.Graphs.js"></script>
+
+    <style>
+      body {
+        width: 100vw;
+        height: 100vh;
+        display: grid;
+        grid-template-rows: repeat(2, 1fr);
+        grid-template-columns: repeat(3, 1fr);
+      }
+    </style>
+  </head>
+  <body>
+    <div><canvas id="dh"></canvas></div>
+    <div><canvas id="dv"></canvas></div>
+    <div><canvas id="dr"></canvas></div>
+    <div><canvas id="th"></canvas></div>
+    <div><canvas id="tv"></canvas></div>
+    <div><canvas id="tr"></canvas></div>
+    <script>
+      const data = `https://raw.githubusercontent.com/sgratzl/chartjs-chart-graph/master/samples/tree.json`;
+
+      function createChart(nodes, id, type, orientation) {
+        new Chart(document.getElementById(id).getContext('2d'), {
+          type,
+          data: {
+            labels: nodes.map((d) => d.name),
+            datasets: [
+              {
+                pointBackgroundColor: 'steelblue',
+                pointRadius: 5,
+                data: nodes.map((d) => Object.assign({}, d)),
+                fill: false,
+              },
+            ],
+          },
+          options: {
+            tree: {
+              orientation,
+            },
+            legend: {
+              display: false,
+            },
+          },
+        });
+      }
+
+      fetch(data)
+        .then((r) => r.json())
+        .then((nodes) => {
+          createChart(nodes, 'dh', 'tree', 'horizontal');
+          createChart(nodes, 'dv', 'dendogram', 'vertical');
+          createChart(nodes, 'dr', 'dendogram', 'radial');
+          createChart(nodes, 'th', 'tree', 'horizontal');
+          createChart(nodes, 'tv', 'tree', 'vertical');
+          createChart(nodes, 'tr', 'tree', 'radial');
+        });
+    </script>
+  </body>
+  b
+</html>
diff --git a/src/controllers/tree.js b/src/controllers/tree.js
@@ -32,6 +32,7 @@ Chart.defaults.dendogram = Chart.helpers.configMerge(Chart.defaults.graph, defau
 
 if (Chart.defaults.global.datasets && Chart.defaults.global.datasets.graph) {
   Chart.defaults.global.datasets.dendogram = { ...Chart.defaults.global.datasets.graph };
+  Chart.defaults.global.datasets.tree = { ...Chart.defaults.global.datasets.graph };
 }
 
 const superClass = Graph.prototype;