JS commenté et plus propre

kfet/static/kfet/js/statistic.js

@@ -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) {
+        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
+            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) {
+        function displayStats (data) {
-            // create the chart
+            // reads the json data and updates the chart display
-            var canvas = $("<canvas>");
+
             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);