Added category, added pie chart on categories, removed buggy ba-resize plugin.

src/html/js/entries.js

@@ -7,6 +7,7 @@ function entry(data){
     var account = ko.utils.unwrapObservable(data.account);
     var sold = ko.utils.unwrapObservable(data.sold);
     var pointedSold = ko.utils.unwrapObservable(data.pointedSold);
+    var category = ko.utils.unwrapObservable(data.category);
 
     this.id=ko.observable(id ? id : null);
     this.value_date=ko.observable(value_date ? value_date : null);
@@ -16,6 +17,7 @@ function entry(data){
     this.account=ko.observable(account ? account : null);
     this.sold=ko.observable(sold ? sold : null);
     this.pointedSold=ko.observable(pointedSold ? pointedSold : null);
+    this.category=ko.observable(category ? category : null);
 }
 
 function message(alertType, title, message) {
@@ -34,17 +36,41 @@ var ListViewModel = function() {
     self.months = ko.observableArray();
     self.month = ko.observable();
 
-    self.pointedSold = ko.observable();
-    self.futureSold = ko.observable();
-    self.currentSold = ko.observable();
-
     self.selectedItem = ko.observable();
     self.savedItem = ko.observable();
     self.itemToRemove = ko.observable();
     self.chart = null;
 
+    self.categoriesChart = ko.computed(function() {
+      var entries=ko.utils.unwrapObservable(self.entries);
+
+      var chartValues = [];
+      var chartValuesTmp = {};
+
+      $.each(entries, function(index, entry) {
+        var category = entry.category();
+        var value = entry.value() ? Number(entry.value()) : null;
+
+        if(category && value) {
+          var oldValue = 0.0;
+
+          if(chartValuesTmp[category]) {
+            oldValue = chartValuesTmp[category];
+          }
+
+          chartValuesTmp[category] = oldValue - value
+        }
+      });
+ 
+      $.each(chartValuesTmp, function(key, value) {
+        chartValues.push([key, value]);
+      });
+
+      return chartValues;
+    });
+
     self.entriesChart = ko.computed(function() {
-      var entries = self.entries().slice().reverse();
+      var entries = ko.utils.unwrapObservable(self.entries).slice().reverse();
 
       var chartValues = [];
       var chartValuesTmp = {};
@@ -113,7 +139,8 @@ var ListViewModel = function() {
                 value: element.value,
                 account: element.account_id,
                 sold: element.sold,
-                pointedSold: element.operation_date ? element.pointedsold : ''
+                pointedSold: element.operation_date ? element.pointedsold : '',
+                category: element.category
               }));
           });
 
@@ -357,64 +384,84 @@ ko.bindingHandlers.dateValue = {
 };
 
 drawChart = function(entries, element) {
-      if(entries && entries.length > 0) {
-        var firstDate, lastDate;
-        var chartValues = [[], []];
+  // clear previous chart
+  $(element).html("");
 
-        var day = 24 * 60 * 60 * 1000;
+  if(entries && entries.length > 0) {
+    var day = 24 * 60 * 60 * 1000;
 
-        lastDate = new Date(Date.parse(entries[entries.length -1][0]).valueOf() + 1 * day);
-        firstDate = new Date(Date.parse(entries[0][0]).valueOf() - 1 * day);
+    var lastDate = new Date(Date.parse(entries[entries.length -1][0]).valueOf() + 1 * day);
+    var firstDate = new Date(Date.parse(entries[0][0]).valueOf() - 1 * day);
+    var chartValues = [[], []];
 
-        // For the '0' line.
-        chartValues[0].push(
-          [new Date(firstDate.valueOf()).toString(), 0],
-          [new Date(lastDate.valueOf()).toString(), 0]);
+    // For the '0' line.
+    chartValues[0].push(
+      [new Date(firstDate.valueOf()).toString(), 0],
+      [new Date(lastDate.valueOf()).toString(), 0]);
 
-        // Push last entry
-        chartValues[1] = entries;
+    chartValues[1] = entries;
 
-        // clear previous chart
-        $(element).html("");
-        $(element).resize();
+    // plot chart
+    window.chart = $.jqplot(element.id, chartValues, {
+        axes:{
+          xaxis:{
+            renderer:$.jqplot.DateAxisRenderer,
+            tickOptions: {formatString: "%F"}
+          },
+          yaxis: {
+            autoscale: true,
+          }
+        },
+        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>'
+        },
 
-        // plot chart
-        jqplot = $.jqplot(element.id, chartValues, {
-            axes:{
-              xaxis:{
-                renderer:$.jqplot.DateAxisRenderer,
-                tickOptions: {formatString: "%F"}
-              },
-              yaxis: {
-                autoscale: true,
-                //tickOptions: {formatString: "%f"}
-              }
-            },
-            highlighter: {
-              show:true,
-              //tooltipAxes: 'y',
-              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: [{
+          linePattern: "dashed",
+          lineWidth: 1,
+          color: "red",
+          showMarker: false
+        },{
+          renderer:$.jqplot.OHLCRenderer,
+          color: "blue",
+          lineWidth: 3,
+          rendererOptions:{
+        }}],
+    });
+  }
+};
 
-            series: [{
-              linePattern: "dashed",
-              lineWidth: 1,
-              color: "red",
-              showMarker: false
-            },{
-              renderer:$.jqplot.OHLCRenderer,
-              color: "blue",
-              lineWidth: 3,
-              rendererOptions:{
-                //candleStick: true
-            }}],
-        });//*/
+drawPieChart = function(entries, element) {
+  // clear previous chart
+  $(element).html("");
 
-        $(element).resize(function() {
-          jqplot.replot({resetAxes: true});
-        });
-      }
+  if(entries && entries.length > 0) {
+    var chartValues = [[]];
+
+    chartValues[0] = entries;
+
+    // plot chart
+    window.pieChart = $.jqplot(element.id, chartValues, {
+        seriesDefaults: {
+          renderer: $.jqplot.PieRenderer,
+          rendererOptions: {
+            showDataLabels: true
+          }
+        },
+        legend: {
+          show: true,
+          location: 'e'
+        },
+        highlighter: {
+          show: true,
+          formatString:'%s: %s', 
+          tooltipLocation:'sw', 
+          useAxesFormatters:false
+        }
+    });
+  }
 };
 
 ko.bindingHandlers.chart = {
@@ -432,10 +479,35 @@ ko.bindingHandlers.chart = {
     }
 };
 
+ko.bindingHandlers.pieChart = {
+    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
+      // empty - left as placeholder if needed later
+    },
+
+    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
+      var unwrap = ko.utils.unwrapObservable;
+      var dataSource = valueAccessor();
+
+      //var entries = dataSource ? unwrap(dataSource) : null;
+      var entries = dataSource ? unwrap(dataSource) : null;
+      drawPieChart(entries, element);
+    }
+};
+
 $(document).ajaxError(function(event, xhr, settings) {
   message("error", "Error.", xhr.statusText);
 });
 
+$(window).resize(function() {
+  if(window.chart) {
+    window.chart.replot({resetAxes: true});
+  }
+
+  if(window.chart) {
+    window.pieChart.replot({resetAxes: true});
+  }
+});
+
 var viewModel = new ListViewModel();
 ko.applyBindings(viewModel);