Merge pull request #84 from blkperl/add_c3_charts

Replace chart.js with c3.js

puppetboard/app.py

@@ -27,7 +27,9 @@ from puppetboard.utils import (
 
 app = Flask(__name__)
 app.config.from_object('puppetboard.default_settings')
+graph_facts = app.config['GRAPH_FACTS']
 app.config.from_envvar('PUPPETBOARD_SETTINGS', silent=True)
+graph_facts += app.config['GRAPH_FACTS']
 app.secret_key = os.urandom(24)
 
 app.jinja_env.filters['jsonprint'] = jsonprint
@@ -263,10 +265,14 @@ def fact(fact):
     node for which this fact is known."""
     # we can only consume the generator once, lists can be doubly consumed
     # om nom nom
+    render_graph = False
+    if fact in graph_facts:
+        render_graph = True
     localfacts = [f for f in yield_or_stop(puppetdb.facts(name=fact))]
     return Response(stream_with_context(stream_template(
         'fact.html',
         name=fact,
+        render_graph=render_graph,
         facts=localfacts)))
 
 

puppetboard/default_settings.py

@@ -12,3 +12,14 @@ LOCALISE_TIMESTAMP = True
 LOGLEVEL = 'info'
 REPORTS_COUNT = 10
 OFFLINE_MODE = False
+GRAPH_FACTS = ['architecture',
+               'domain',
+               'lsbcodename',
+               'lsbdistcodename',
+               'lsbdistid',
+               'lsbdistrelease',
+               'lsbmajdistrelease',
+               'netmask',
+               'osfamily',
+               'puppetversion',
+               'processorcount']

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>
-<canvas id="factChart" width="300" height="300"></canvas>
+<script src="{{url_for('static', filename='js/d3.min.js')}}"></script>
+<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,22 @@
     value: 0,
     }
   ]
-  for (var i = 0; i < data.length; i++) {
-    data[i].color = colors[i % len_colors];
+  var fact_values = data.map(function(item) { return [item.label, item.value]; }).filter(function(item){return item[0];}).sort(function(a,b){return a[1] - b[1];});
+  var realdata = fact_values.slice(0, 15);
+  var otherdata = fact_values.slice(15);
+  if (otherdata.length > 0) {
+    realdata.push(["other", otherdata.reduce(function(a,b){return a + b[1];},0)]);
   }
-  var sorted_data = data.sort(function(a,b) { return parseFloat(b.value) - parseFloat(a.value)});
-  var top7 = sorted_data.slice(0,7);
-  var bottom = data.slice(7, -1);
-  var bottom_sum = 0;
-  for (var i = 0; i < bottom.length; i++) {
-    bottom_sum += bottom[i].value;
+  var chart = c3.generate({
+      bindto: '#factChart',
+      data: {
+          columns: realdata,
+          type : 'pie',
       }
-  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,9 @@
 {% 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_value(facts, autofocus=True, show_node=True, margin_bottom=10)}}#}
+{% if render_graph %}
+{{macros.facts_graph(facts, autofocus=True, show_node=True, margin_bottom=10)}}
+{% endif %}
 {% if value %}
 {{macros.facts_table(facts, autofocus=True, show_node=True, show_value=False, margin_bottom=10)}}
 {% else %}