Replace chart.js with c3.js

chart.js is poorly maintained and has been disabled. c3.js
has active development and removes the need for two charts
on the facts page.

Co-authored-by: Sage Imel <sage@cat.pdx.edu>
Co-authored-by: Ryan Niebur <ryan@cat.pdx.edu>

puppetboard/templates/_macros.html

@@ -38,15 +38,14 @@
 </table>
 {%- endmacro %}
 {% macro facts_graph(facts, autofocus=False, condensed=False, show_node=False, margin_top=20, margin_bottom=20) -%}
-<script src="{{url_for('static', filename='js/Chart.js')}}"></script>
+<script src="{{url_for('static', filename='js/d3.min.js')}}"></script>
-<canvas id="factChart" width="300" height="300"></canvas>
+<script src="{{url_for('static', filename='js/c3.min.js')}}"></script>
+<div id="factChart" width="300" height="300"></div>
 <script type="text/javascript">
-  var colors = ["#9B59B6", "#3498DB", "#2ECC71", "#1ABC9C", "#F1C40F", "#E67E22", "#E74C3C"];
-  var len_colors = colors.length;
   var data = [
 {% for fact in facts|groupby('value') %}
     {
-    label: "{{ fact.grouper }}",
+    label: '{{ fact.grouper.replace("\n", " ") }}',
     value: {{ fact.list|length }}
     },
 {% endfor %}
@@ -54,48 +53,17 @@
     value: 0,
     }
   ]
-  for (var i = 0; i < data.length; i++) {
+  var fact_values = data.map(function(item) { return [item.label, item.value]; }).filter(function(item){return item[0];});
-    data[i].color = colors[i % len_colors];
+  var chart = c3.generate({
-  }
+      bindto: '#factChart',
-  var sorted_data = data.sort(function(a,b) { return parseFloat(b.value) - parseFloat(a.value)});
+      data: {
-  var top7 = sorted_data.slice(0,7);
+          columns: fact_values,
-  var bottom = data.slice(7, -1);
+          type : 'pie',
-  var bottom_sum = 0;
+      }
-  for (var i = 0; i < bottom.length; i++) {
+  });
-    bottom_sum += bottom[i].value;
+
-  }
-  top7.push({ label: "Other", value: bottom_sum, color: "#B30202" });
-  var ctx = document.getElementById("factChart").getContext("2d");
-  new Chart(ctx).Pie(top7, {'animation': false});
 </script>
 {%- endmacro %}
-{% macro facts_graph_value(facts, autofocus=False, condensed=False, show_node=False, margin_top=20, margin_bottom=20) -%}
-<script src="{{url_for('static', filename='js/Chart.js')}}"></script>
-<canvas id="factChart_value" width="300" height="300"></canvas>
-<script type="text/javascript">
-  var colors = ["#9B59B6", "#3498DB", "#2ECC71", "#1ABC9C", "#F1C40F", "#E67E22", "#E74C3C"];
-  var len_colors = colors.length;
-  var data = [
-{% for fact in facts|groupby('value') %}
-    {
-    label: "{{ fact.grouper }}",
-    value: {{ fact.list|length }}
-    },
-{% endfor %}
-    {
-    value: 0,
-    }
-  ]
-
-  for (var i = 0; i < data.length; i++) {
-    data[i].color = colors[i % len_colors];
-  }
-  var ctx = document.getElementById("factChart_value").getContext("2d");
-  new Chart(ctx).Pie(data.sort(function(a,b) { return parseInt(a.label) - parseInt(b.label)}), {'animation':false});
-</script>
-{%- endmacro %}
-
-
 
 {% macro reports_table(reports, nodename, reports_count, condensed=False, hash_truncate=False, show_conf_col=True, show_agent_col=True, show_host_col=True) -%}
 <div class="ui info message">

puppetboard/templates/fact.html

@@ -2,8 +2,7 @@
 {% import '_macros.html' as macros %}
 {% block content %}
 <h1>{{name}}{% if value %}/{{value}}{% endif %} ({{facts|length}})</h1>
-{#{{macros.facts_graph(facts, autofocus=True, show_node=True, margin_bottom=10)}}#
+{{macros.facts_graph(facts, autofocus=True, show_node=True, margin_bottom=10)}}
-{{macros.facts_graph_value(facts, autofocus=True, show_node=True, margin_bottom=10)}}#}
 {% if value %}
 {{macros.facts_table(facts, autofocus=True, show_node=True, show_value=False, margin_bottom=10)}}
 {% else %}