Commented, cleaned up...
This commit is contained in:
Alexis Lahouze
parent
b5e8850aa8
commit
2bc65a3f93
|
|
@ -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:'<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>'
|
||||
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é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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue