DGNum/gestioCOF
13
2
Fork 2
Code Issues 82 Pull requests 17 Projects Releases 12 Packages Wiki Activity Actions

Frontend tout en JS

Browse source
This commit is contained in:
Evarin 2017-02-15 21:01:54 +01:00
parent 46f343b1ab
commit 0fcb29252b
7 changed files with 205 additions and 313 deletions
Download patch file Download diff file Expand all files Collapse all files

180
kfet/static/kfet/js/statistic.js
View file

@ -1,18 +1,166 @@
var STAT = {};
(function($){
window.StatsGroup = function (url, target) {
// context : array of objects {label, url}
// target : element of the DOM where to put the stats
var self = this;
var element = $(target);
var content = $("<div>");
var buttons;
jQuery(document).ready(function() {
// FONCTIONS
// Permet de raffraichir un champ, étant donné :
// thing_url : l'url contenant le contenu
// thing_div : le div où le mettre
// empty_... : le truc à dire si on a un contenu vide
STAT.get_thing = function(thing_url, thing_div, empty_thing_message) {
$.get(thing_url, function(data) {
if(jQuery.trim(data).length==0) {
thing_div.html(empty_thing_message);
} else {
thing_div.html(data);
function dictToArray(dict, start) {
if (start === undefined) start = 0;
// converts the dicts returned by JSONResponse to Arrays
// necessary because for..in does not guarantee the order
var array = new Array();
for (var k in dict) {
array[k] = dict[k];
}
array.splice(0, start);
return array;
}
function handleTimeChart(dict) {
var data = dictToArray(dict, 0);
for (var i = 0; i < data.length; i++) {
var source = data[i];
data[i] = { x: new Date(source.at),
y: source.balance,
label: source.label }
}
return data;
}
this.showStats = function() {
buttons.find(".focus").removeClass("focus");
$(this).addClass("focus");
$.getJSON(this.stats_target_url + "?format=json",
self.displayStats);
}
this.displayStats = function(data) {
// create the chart
var canvas = $("<canvas>");
var chart_datasets = [];
var charts = dictToArray(data.charts);
var is_time_chart = data.is_time_chart || false;
for (var i = 0; i < charts.length; i++) {
var chart = charts[i];
chart_datasets.push(
{
label: chart.label,
borderColor: chart.color,
backgroundColor: chart.color,
fill: false,
lineTension: 0,
data: is_time_chart ? handleTimeChart(chart.values) : dictToArray(chart.values, 1),
});
}
var chart_options =
{
responsive: true,
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: false,
}
}
});
}
});
if (is_time_chart) {
chart_options['scales'] = {
xAxes: [{
type: "time",
display: true,
scaleLabel: {
display: false,
labelString: 'Date'
},
time: {
tooltipFormat: 'll HH:mm',
//min: new Date("{{ min_date }}"),
//max: new Date("{{ max_date }}"),
displayFormats: {
'millisecond': 'SSS [ms]',
'second': 'mm:ss a',
'minute': 'DD MMM',
'hour': 'ddd h[h]',
'day': 'DD MMM',
'week': 'DD MMM',
'month': 'MMM',
'quarter': 'MMM',
'year': 'YYYY',
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'value'
}
}]
}
}
var chart_model =
{
type: 'line',
options: chart_options,
data: {
labels: dictToArray(data.labels, 1),
datasets: chart_datasets,
}
};
// display
var prev_chart = content.children();
content.append(canvas);
// create the chart
var chart = new Chart(canvas, chart_model);
// clean
prev_chart.remove();
}
// initialize the interface
this.initialize = function (data) {
buttons = $("<div>",
{class: "btn-group btn-group-justified",
role: "group",
"aria-label": "select-period"});
var to_click = undefined;
var context = dictToArray(data.stats);
for (var i = 0; i < context.length; i++) {
var btn_wrapper = $("<div>",
{class: "btn-group",
role:"group"});
var btn = $("<button>",
{class: "btn btn-primary",
type: "button"})
.text(context[i].label)
.prop("stats_target_url", context[i].url)
.on("click", self.showStats);
if (i == data.default_stat || i == 0)
to_click = btn;
btn_wrapper.append(btn);
buttons.append(btn_wrapper);
}
element.append(buttons);
element.append(content);
to_click.click();
};
(function () {
$.getJSON(url + "?format=json", self.initialize);
})();
};
})(jQuery);