musicias show_history basic
This commit is contained in:
parent
4ff5abe8f6
commit
14ff506a0d
|
|
@ -0,0 +1,251 @@
|
||||||
|
{% load i18n utils static %}
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Resource history</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static "orchestra/css/dancing-dots.css" %}"/>
|
||||||
|
<script src="{% static "admin/js/jquery.js" %}" type="text/javascript"></script>
|
||||||
|
<script src="{% static "orchestra/js/highcharts/stock/highstock.js" %}" type="text/javascript"></script>
|
||||||
|
<script src="{% static "orchestra/js/highcharts/modules/exporting.js" %}" type="text/javascript"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
String.prototype.capitalize = function() {
|
||||||
|
return this.charAt(0).toUpperCase() + this.slice(1);
|
||||||
|
}
|
||||||
|
function plot_charts(url) {
|
||||||
|
charts = {
|
||||||
|
series: function (div, i, seriesOptions, resource) {
|
||||||
|
$(div).highcharts('StockChart', {
|
||||||
|
chart: {
|
||||||
|
backgroundColor: (i % 2 ? "#EDF3FE" : "#FFFFFF")
|
||||||
|
},
|
||||||
|
rangeSelector: {
|
||||||
|
selected: 4
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: resource['content_type'].capitalize() + ' ' +
|
||||||
|
resource['verbose_name'].toLowerCase() + ' ' +
|
||||||
|
resource['aggregation'] +
|
||||||
|
(div.indexOf('aggregate') > 0 ? ' (aggregated)': '')
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
ordinal: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
labels: {
|
||||||
|
formatter: function () {
|
||||||
|
return this.value + ' ' + resource['unit'];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotLines: [{
|
||||||
|
value: 0,
|
||||||
|
width: 2,
|
||||||
|
color: 'silver'
|
||||||
|
}],
|
||||||
|
min: 0,
|
||||||
|
},
|
||||||
|
/*legend: {
|
||||||
|
align: 'right',
|
||||||
|
x: -30,
|
||||||
|
verticalAlign: 'top',
|
||||||
|
y: 25,
|
||||||
|
floating: true,
|
||||||
|
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
|
||||||
|
borderColor: '#CCC',
|
||||||
|
borderWidth: 1,
|
||||||
|
shadow: false,
|
||||||
|
enabled: true
|
||||||
|
},
|
||||||
|
rangeSelector: {
|
||||||
|
enabled: false
|
||||||
|
},*/
|
||||||
|
tooltip: {
|
||||||
|
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.3f} ' +
|
||||||
|
resource['unit']+ '</b><br/>',
|
||||||
|
valueDecimals: 3
|
||||||
|
},
|
||||||
|
series: seriesOptions
|
||||||
|
});
|
||||||
|
},
|
||||||
|
columns: function (div, i, seriesOptions, resource){
|
||||||
|
$(div).highcharts({
|
||||||
|
chart: {
|
||||||
|
type: 'column',
|
||||||
|
backgroundColor: (i % 2 ? "#EDF3FE" : "#FFFFFF")
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: resource['content_type'].capitalize() + ' ' +
|
||||||
|
resource['verbose_name'].toLowerCase() + ' ' +
|
||||||
|
resource['aggregation'] +
|
||||||
|
(div.indexOf('aggregate') > 0 ? ' (aggregated)': '')
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
categories: resource['dates']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
title: {
|
||||||
|
text: resource['unit']
|
||||||
|
},
|
||||||
|
stackLabels: {
|
||||||
|
enabled: true,
|
||||||
|
style: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
|
||||||
|
},
|
||||||
|
formatter: function () {
|
||||||
|
return this.total + ' ' + resource['unit'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
align: 'right',
|
||||||
|
x: -30,
|
||||||
|
verticalAlign: 'top',
|
||||||
|
y: 25,
|
||||||
|
floating: true,
|
||||||
|
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
|
||||||
|
borderColor: '#CCC',
|
||||||
|
borderWidth: 1,
|
||||||
|
shadow: false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function () {
|
||||||
|
var s = ['<b>' + this.x + '</b>'];
|
||||||
|
$.each(this.points, function(i, point) {
|
||||||
|
s.push('<span style="color:' + this.series.color + '">' + this.series.name + ': ' + this.y + ' ' + resource['unit']);
|
||||||
|
});
|
||||||
|
s.push('<b>Total: ' + this.points[0].total + ' ' + resource['unit'] + '</b>');
|
||||||
|
return s.join('<br>');
|
||||||
|
},
|
||||||
|
valueDecimals: 3,
|
||||||
|
shared: true
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
column: {
|
||||||
|
stacking: 'normal',
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
|
||||||
|
style: {
|
||||||
|
textShadow: '0 0 3px black'
|
||||||
|
},
|
||||||
|
formatter: function () {
|
||||||
|
return this.series.name + ': ' + this.y.toFixed(3) + ' ' + resource['unit'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: seriesOptions
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.getJSON(url, function(data) {
|
||||||
|
var dataLength = data.length;
|
||||||
|
$("#charts").empty();
|
||||||
|
for (i=0; i < dataLength; i++) {
|
||||||
|
var index = 0;
|
||||||
|
var seriesOptions = [];
|
||||||
|
var resource = data[i];
|
||||||
|
var objects = resource["objects"];
|
||||||
|
var objectsLength = objects.length;
|
||||||
|
var a_index = 0;
|
||||||
|
var aggregated = false;
|
||||||
|
var aggregates = []
|
||||||
|
for (j=0; j < objectsLength; j++) {
|
||||||
|
aggregate = [];
|
||||||
|
var object = objects[j];
|
||||||
|
var monitors = object["monitors"];
|
||||||
|
var monitorsLength = monitors.length;
|
||||||
|
for (k=0; k < monitorsLength; k++) {
|
||||||
|
var datasets = monitors[k]['datasets'];
|
||||||
|
if (resource['aggregated_history']) {
|
||||||
|
var datasetsLength = datasets.length;
|
||||||
|
for (l=0; l < datasetsLength; l++) {
|
||||||
|
seriesOptions.push(datasets[l]);
|
||||||
|
for (m=0; m < resource['dates'].length; m++) {
|
||||||
|
aggregate[m] = ((aggregate[m] || 0 ) + datasets[l]['data'][m]);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
for (var object_name in datasets) {
|
||||||
|
seriesOptions[index] = {
|
||||||
|
name: object_name,
|
||||||
|
data: datasets[object_name]
|
||||||
|
};
|
||||||
|
index += 1;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
if (k > 1)
|
||||||
|
aggregated = true;
|
||||||
|
aggregates[a_index] = {
|
||||||
|
name: object['object_name'],
|
||||||
|
data: aggregate
|
||||||
|
};
|
||||||
|
a_index += 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
divs = (
|
||||||
|
'<div class="chart-box" style="background: '+(i % 2 ? "#EDF3FE" : "#FFFFFF")+';">' +
|
||||||
|
'<h1>'+resource['content_type'].capitalize() + ' ' + resource['verbose_name'].toLowerCase() + '</h1>' +
|
||||||
|
'<div id="resource-'+i+'" class="chart"></div>'
|
||||||
|
);
|
||||||
|
if (a_index > 1 && aggregated && resource['aggregated_history'])
|
||||||
|
divs += '<br><div class="chart" id="resource-'+i+'-aggregate"></div>';
|
||||||
|
divs += '</div>';
|
||||||
|
|
||||||
|
$("#charts").append(divs);
|
||||||
|
if (a_index > 1 && aggregated && resource['aggregated_history'])
|
||||||
|
charts['columns']('#resource-'+i+'-aggregate', i, aggregates, resource);
|
||||||
|
charts[(resource['aggregated_history'] ? 'columns': 'series')]('#resource-'+i, i, seriesOptions, resource);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
plot_charts("{% url 'musician:dashboard-historydata' ids %}");
|
||||||
|
</script>
|
||||||
|
<style type="text/css">
|
||||||
|
@page {
|
||||||
|
size: 11.69in 8.27in;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-family: sans;
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
#notice {
|
||||||
|
font-family: sans;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
#message {
|
||||||
|
width:300px;
|
||||||
|
margin:0 auto;
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
.chart-box {
|
||||||
|
margin: 10px;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
border: 1px solid grey;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.chart {
|
||||||
|
height: 400px;
|
||||||
|
min-width: 310px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="notice">♦Notice that resources used by deleted services will not appear.</div>
|
||||||
|
<div id="charts">
|
||||||
|
<div id="message">
|
||||||
|
> crunching data <span id="dancing-dots-text"> <span><span>.</span><span>.</span><span>.</span></span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue