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

Replace chart.js with c3.js

Browse Source 
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>
This commit is contained in:
William Van Hevelingen
2014-06-30 18:43:37 -07:00
committed by William Van Hevelingen
parent 95a6c4b947
commit 8e063e7f15
5 changed files with 22 additions and 1817 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1770
puppetboard/static/js/Chart.js vendored
View File

File diff suppressed because it is too large Load Diff

3
puppetboard/static/js/c3.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
puppetboard/static/js/d3.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

56
puppetboard/templates/_macros.html
View File

@@ -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,17 @@
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];});
var chart = c3.generate({
bindto: '#factChart',
data: {
columns: fact_values,
type : 'pie',
}
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;
}
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">

3
puppetboard/templates/fact.html
View File

@@ -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_value(facts, autofocus=True, show_node=True, margin_bottom=10)}}#}
{{macros.facts_graph(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 %}