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