JS commenté et plus propre
This commit is contained in:
Evarin
parent
0fcb29252b
commit
ddbcfe0c69
1 changed files with 55 additions and 24 deletions
|
|
@ -1,16 +1,19 @@
|
|||
(function($){
|
||||
window.StatsGroup = function (url, target) {
|
||||
// context : array of objects {label, url}
|
||||
// a class to properly display statictics
|
||||
|
||||
// url : points to an ObjectResumeStat that lists the options through JSON
|
||||
// target : element of the DOM where to put the stats
|
||||
|
||||
var self = this;
|
||||
var element = $(target);
|
||||
var content = $("<div>");
|
||||
var buttons;
|
||||
|
||||
function dictToArray(dict, start) {
|
||||
if (start === undefined) start = 0;
|
||||
function dictToArray (dict, start) {
|
||||
// converts the dicts returned by JSONResponse to Arrays
|
||||
// necessary because for..in does not guarantee the order
|
||||
if (start === undefined) start = 0;
|
||||
var array = new Array();
|
||||
for (var k in dict) {
|
||||
array[k] = dict[k];
|
||||
|
|
@ -19,7 +22,8 @@
|
|||
return array;
|
||||
}
|
||||
|
||||
function handleTimeChart(dict) {
|
||||
function handleTimeChart (dict) {
|
||||
// reads the balance data and put it into chartjs formatting
|
||||
var data = dictToArray(dict, 0);
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var source = data[i];
|
||||
|
|
@ -30,32 +34,47 @@
|
|||
return data;
|
||||
}
|
||||
|
||||
this.showStats = function() {
|
||||
function showStats () {
|
||||
// CALLBACK : called when a button is selected
|
||||
|
||||
// shows the focus on the correct button
|
||||
buttons.find(".focus").removeClass("focus");
|
||||
$(this).addClass("focus");
|
||||
|
||||
// loads data and shows it
|
||||
$.getJSON(this.stats_target_url + "?format=json",
|
||||
self.displayStats);
|
||||
displayStats);
|
||||
}
|
||||
|
||||
this.displayStats = function(data) {
|
||||
// create the chart
|
||||
var canvas = $("<canvas>");
|
||||
function displayStats (data) {
|
||||
// reads the json data and updates the chart display
|
||||
|
||||
var chart_datasets = [];
|
||||
var charts = dictToArray(data.charts);
|
||||
|
||||
// are the points indexed by timestamps?
|
||||
var is_time_chart = data.is_time_chart || false;
|
||||
|
||||
// reads the charts data
|
||||
for (var i = 0; i < charts.length; i++) {
|
||||
var chart = charts[i];
|
||||
|
||||
// format the data
|
||||
var chart_data = is_time_chart ? handleTimeChart(chart.values) : dictToArray(chart.values, 1);
|
||||
|
||||
chart_datasets.push(
|
||||
{
|
||||
label: chart.label,
|
||||
borderColor: chart.color,
|
||||
backgroundColor: chart.color,
|
||||
fill: false,
|
||||
fill: is_time_chart,
|
||||
lineTension: 0,
|
||||
data: is_time_chart ? handleTimeChart(chart.values) : dictToArray(chart.values, 1),
|
||||
data: chart_data,
|
||||
steppedLine: is_time_chart,
|
||||
});
|
||||
}
|
||||
|
||||
// options for chartjs
|
||||
var chart_options =
|
||||
{
|
||||
responsive: true,
|
||||
|
|
@ -67,7 +86,9 @@
|
|||
mode: 'nearest',
|
||||
intersect: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// additionnal options for time-indexed charts
|
||||
if (is_time_chart) {
|
||||
chart_options['scales'] = {
|
||||
xAxes: [{
|
||||
|
|
@ -79,8 +100,6 @@
|
|||
},
|
||||
time: {
|
||||
tooltipFormat: 'll HH:mm',
|
||||
//min: new Date("{{ min_date }}"),
|
||||
//max: new Date("{{ max_date }}"),
|
||||
displayFormats: {
|
||||
'millisecond': 'SSS [ms]',
|
||||
'second': 'mm:ss a',
|
||||
|
|
@ -102,9 +121,10 @@
|
|||
labelString: 'value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// global object for the options
|
||||
var chart_model =
|
||||
{
|
||||
type: 'line',
|
||||
|
|
@ -115,8 +135,11 @@
|
|||
}
|
||||
};
|
||||
|
||||
// display
|
||||
// saves the previous charts to be destroyed
|
||||
var prev_chart = content.children();
|
||||
|
||||
// creates a blank canvas element and attach it to the DOM
|
||||
var canvas = $("<canvas>");
|
||||
content.append(canvas);
|
||||
|
||||
// create the chart
|
||||
|
|
@ -127,15 +150,18 @@
|
|||
}
|
||||
|
||||
// initialize the interface
|
||||
this.initialize = function (data) {
|
||||
function initialize (data) {
|
||||
// creates the bar with the buttons
|
||||
buttons = $("<div>",
|
||||
{class: "btn-group btn-group-justified",
|
||||
role: "group",
|
||||
"aria-label": "select-period"});
|
||||
var to_click = undefined;
|
||||
|
||||
var to_click;
|
||||
var context = dictToArray(data.stats);
|
||||
|
||||
for (var i = 0; i < context.length; i++) {
|
||||
// creates the button
|
||||
var btn_wrapper = $("<div>",
|
||||
{class: "btn-group",
|
||||
role:"group"});
|
||||
|
|
@ -144,23 +170,28 @@
|
|||
type: "button"})
|
||||
.text(context[i].label)
|
||||
.prop("stats_target_url", context[i].url)
|
||||
.on("click", self.showStats);
|
||||
.on("click", showStats);
|
||||
|
||||
// saves the default option to select
|
||||
if (i == data.default_stat || i == 0)
|
||||
to_click = btn;
|
||||
|
||||
// append the elements to the parent
|
||||
btn_wrapper.append(btn);
|
||||
buttons.append(btn_wrapper);
|
||||
}
|
||||
|
||||
// appends the contents to the DOM
|
||||
element.append(buttons);
|
||||
element.append(content);
|
||||
|
||||
// shows the default chart
|
||||
to_click.click();
|
||||
};
|
||||
|
||||
// constructor
|
||||
(function () {
|
||||
$.getJSON(url + "?format=json", self.initialize);
|
||||
$.getJSON(url + "?format=json", initialize);
|
||||
})();
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
|
|||
Loading…
Reference in a new issue