puppet/puppetboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

_macros.html: Add a second Pie chart to facts/<fact>

Browse Source 
The second chart is in order of the value of the fact. So in the
uptime fact we see 1 day before 2 days before 50 days.
This commit is contained in:
Spencer Krum
2013-08-28 17:07:33 -07:00
committed by Daniele Sluijters
parent 23af033cbb
commit e1603608bc
2 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
puppetboard/templates/_macros.html
View File

@@ -46,8 +46,32 @@ var data = [
}
]
var ctx = document.getElementById("factChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);
new Chart(ctx).Pie(data);
new Chart(ctx).Pie(data.sort(function(a,b) { return parseFloat(a.value) - parseFloat(b.value)}));
</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="400" height="400"></canvas>
<script type="text/javascript">
var colors = [ "#F38630", "#E0E4CC", "#69D2E7", "#D11151", "#787BE3", "#B59370", "#B30202" ];
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 parseFloat(a.label) - parseFloat(b.label)}));
</script>
{%- endmacro %}

1
puppetboard/templates/fact.html
View File

@@ -3,5 +3,6 @@
{% block content %}
<h1>{{name}}</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)}}
{{macros.facts_table(facts, autofocus=True, show_node=True, margin_bottom=10)}}
{% endblock content %}