Commented, cleaned up...

src/html/js/entries.js

@@ -341,97 +341,120 @@ var ListViewModel = function() {
     };
 };
 
+// Function to draw the sold evolution chart.
 drawChart = function(entries, element) {
-  // clear previous chart
+  // Clear previous chart
   $(element).html("");
 
   if(entries && entries.length > 0) {
-    var chartValues = [[], []];
-
-    chartValues[0] = entries;
-
+    // Prepare for today vertical line.
     var today = new Date();
     today.setHours(0);
     today.setMinutes(0);
 
+    // Find first and last days to set limits of the x axis.
     var day = 24 * 60 * 60 * 1000;
-
     var firstDate = new Date(Date.parse(entries[0][0]).valueOf() - day).format('yyyy-mm-dd');
     var lastDate = new Date(Date.parse(entries[entries.length -1][0]).valueOf() + day).format('yyyy-mm-dd');
 
-    // plot chart
-    window.chart = $.jqplot(element.id, chartValues, {
+    // Plot chart, and store it in a window parameter for resize callback (need to be done better than it...)
+    window.chart = $.jqplot(element.id, [entries], {
+        // Title of the chart
         title: "Évolution du solde",
         axes:{
+          // Parameters for the date axis
           xaxis:{
             autoscale: true,
+
+            // Date rendere for this axis
             renderer:$.jqplot.DateAxisRenderer,
+
+            // Limits
             min: firstDate,
             max: lastDate,
-            tickOptions: {formatString: "%F"}
+
+            // Tick options
+            tickOptions: {
+              // Format date for x axis.
+              formatString: "%F"
+            }
           },
+          // Parameters for the value axis
           yaxis: {
             autoscale: true,
           }
         },
+
+        // Highlighter parameters
         highlighter: {
           show: true,
           yvalues: 4,
           formatString: '<table class="jqplot-highlighter"><tr><td>date:</td><td>%s</td></tr><tr><td>open:</td><td>%s</td></tr><tr><td>hi:</td><td>%s</td></tr><tr><td>low:</td><td>%s</td></tr><tr><td>close:</td><td>%s</td></tr></table>'
         },
 
+        // Series parameters
         series: [{
+          // We use the OHLC (open, high, low, close) rendered.
           renderer:$.jqplot.OHLCRenderer,
           color: "blue",
-          lineWidth: 3,
-          rendererOptions:{}
         }],
+
+        // To display horizontal (0) and vertical (today) lines
         canvasOverlay: {
           show: true,
-          objects: [{
-            dashedHorizontalLine: {
+          objects: [
+            // Red horizontal line for 0 limit
+            {dashedHorizontalLine: {
               name: "zero",
               y: 0,
               lineWidth: 1,
               color: "red",
               shadow: false
             }},
+            // Gray vertical line for today
             { dashedVerticalLine: {
               name: "today",
               x: today,
               lineWidth: 1,
               color: "gray",
               shadow: false
-            }}]
+            }}
+          ]
         }
     });
   } else {
+    // Reset chart to null to avoid redraw of a non existing chart in resize callback.
     window.chart = null;
   }
 };
 
+// Function to draw the expense category pie chart.
 drawPieChart = function(entries, element) {
-  // clear previous chart
+  // Clear previous chart
   $(element).html("");
 
   if(entries && entries.length > 0) {
-    var chartValues = [[]];
-
-    chartValues[0] = entries;
-
-    // plot chart
-    window.pieChart = $.jqplot(element.id, chartValues, {
+    // Plot chart, and store it in a window parameter for resize callback (need to be done better than it...)
+    window.pieChart = $.jqplot(element.id, [entries], {
+        // Title of the chart
         title: "D&eacute;penses",
+
+        // Series parameters.
         seriesDefaults: {
+          // Pie chart renderer
           renderer: $.jqplot.PieRenderer,
           rendererOptions: {
             showDataLabels: true
           }
         },
+
+        // Legend parameters.
         legend: {
           show: true,
           location: 'e'
         },
+
+        // Highlighter parameters;
         highlighter: {
           show: true,
           formatString:'%s: %s', 
@@ -440,10 +463,12 @@ drawPieChart = function(entries, element) {
         }
     });
   } else {
+    // Reset chart to null to avoid redraw of a non existing chart in resize callback.
     window.pieChart = null;
   }
 };
 
+// Chart binding to redraw the chart on entries update.
 ko.bindingHandlers.chart = {
     init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
       // empty - left as placeholder if needed later
@@ -453,12 +478,12 @@ ko.bindingHandlers.chart = {
       var unwrap = ko.utils.unwrapObservable;
       var dataSource = valueAccessor();
 
-      //var entries = dataSource ? unwrap(dataSource) : null;
       var entries = dataSource ? unwrap(dataSource) : null;
       drawChart(entries, element);
     }
 };
 
+// Pie chart binding to redraw expense chart on entries update.
 ko.bindingHandlers.pieChart = {
     init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
       // empty - left as placeholder if needed later
@@ -468,16 +493,17 @@ ko.bindingHandlers.pieChart = {
       var unwrap = ko.utils.unwrapObservable;
       var dataSource = valueAccessor();
 
-      //var entries = dataSource ? unwrap(dataSource) : null;
       var entries = dataSource ? unwrap(dataSource) : null;
       drawPieChart(entries, element);
     }
 };
 
+// Default AJAX error handler.
 $(document).ajaxError(function(event, xhr, settings) {
   message("error", "Error.", xhr.statusText);
 });
 
+// Resize callback.
 $(window).resize(function() {
   if(window.chart) {
     window.chart.replot({resetAxes: true});
@@ -488,8 +514,10 @@ $(window).resize(function() {
   }
 });
 
+// ViewModal instanciation.
 var viewModel = new ListViewModel();
 ko.applyBindings(viewModel);
 
+// Load accounts after page initialization.
 $(viewModel.loadAccounts);