diff --git a/src/html/js/entries.js b/src/html/js/entries.js index 0c7d3d9..2145580 100644 --- a/src/html/js/entries.js +++ b/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, + show: true, yvalues: 4, - formatString:'
date:%s
open:%s
hi:%s
low:%s
close:%s
' + formatString: '
date:%s
open:%s
hi:%s
low:%s
close:%s
' }, + // 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é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);