inclusion of time series graph
This commit is contained in:
Dante
113
workflow/engine/js/strategicDashboard/timeSeriesModel.js
Normal file
113
workflow/engine/js/strategicDashboard/timeSeriesModel.js
Normal file
@@ -0,0 +1,113 @@
|
||||
var TimeSeriesModel = function (oauthToken, server, workspace, userId, dashboardId) {
|
||||
this.server = server;
|
||||
this.workspace = workspace;
|
||||
this.baseUrl = "/api/1.0/" + workspace + "/";
|
||||
this.oauthToken = oauthToken;
|
||||
this.helper = new ViewDashboardHelper();
|
||||
this.cache = {};
|
||||
this.forceRemote=false; //if true, the next call will go to the remote server
|
||||
this.userId = userId;
|
||||
this.dashboardId = dashboardId;
|
||||
|
||||
};
|
||||
|
||||
|
||||
TimeSeriesModel.prototype.indicatorList = function(dashboardId,initDate, endDate) {
|
||||
var dummyDate = ''
|
||||
return this.getJson('dashboard/' + dashboardId + '/indicator?dateIni=' + initDate + '&dateFin=' + endDate);
|
||||
};
|
||||
|
||||
|
||||
/*TimeSeriesModel.prototype.indicatorList = function() {
|
||||
var requestFinished = $.Deferred();
|
||||
var json = [ {"label":"PEI", "value":"1111"},
|
||||
{"label":"EEI", "value":"2222"}
|
||||
];
|
||||
requestFinished.resolve(json);
|
||||
return requestFinished.promise();
|
||||
};*/
|
||||
|
||||
TimeSeriesModel.prototype.periodicityList = function() {
|
||||
var that = this;
|
||||
var json = [{label:"Monthly", value:that.helper.ReportingPeriodicityEnum.MONTH},
|
||||
{label:"Quaterly", value:that.helper.ReportingPeriodicityEnum.QUARTER},
|
||||
{label:"Semester", value:that.helper.ReportingPeriodicityEnum.SEMESTER},
|
||||
{label:"Yearly", value:that.helper.ReportingPeriodicityEnum.YEAR}
|
||||
];
|
||||
return json;
|
||||
};
|
||||
|
||||
TimeSeriesModel.prototype.monthList = function() {
|
||||
var json = [{label:"Jan", value:"1"},
|
||||
{label:"Feb", value:"2"},
|
||||
{label:"Mar", value:"3"},
|
||||
{label:"Apr", value:"4"},
|
||||
{label:"May", value:"5"},
|
||||
{label:"Jun", value:"6"},
|
||||
{label:"Jul", value:"7"}
|
||||
];
|
||||
return json;
|
||||
};
|
||||
|
||||
TimeSeriesModel.prototype.quarterList = function() {
|
||||
var json = [{label:"1", value:"1"},
|
||||
{label:"2", value:"2"},
|
||||
{label:"3", value:"3"},
|
||||
{label:"4", value:"4"}];
|
||||
return json;
|
||||
};
|
||||
|
||||
TimeSeriesModel.prototype.semesterList = function() {
|
||||
var json = [{label:"1", value:"1"}, {label:"2", value:"2"}];
|
||||
return json;
|
||||
};
|
||||
|
||||
TimeSeriesModel.prototype.yearList = function() {
|
||||
var json = [{label:"2015", value:"2015"}, {label:"2014", value:"2014"}];
|
||||
return json;
|
||||
};
|
||||
|
||||
TimeSeriesModel.prototype.defaultInitDate = function() {
|
||||
return new Date(new Date().getFullYear(), 0, 1);
|
||||
};
|
||||
|
||||
TimeSeriesModel.prototype.defaultEndDate = function() {
|
||||
return new Date();
|
||||
};
|
||||
|
||||
TimeSeriesModel.prototype.historicData = function(indicatorId, periodicity, initDate, endDate) {
|
||||
var endPoint = "ReportingIndicators/indicator-historic-data?" +
|
||||
"indicator_uid=" + indicatorId +
|
||||
"&init_date=" + this.helper.date2MysqlString(initDate) +
|
||||
"&end_date=" + this.helper.date2MysqlString(endDate) +
|
||||
"&periodicity=" + periodicity +
|
||||
"&language=en";
|
||||
return this.getJson(endPoint);
|
||||
|
||||
};
|
||||
|
||||
TimeSeriesModel.prototype.getJson = function (endPoint) {
|
||||
var that = this;
|
||||
var callUrl = this.baseUrl + endPoint
|
||||
var requestFinished = $.Deferred();
|
||||
|
||||
return $.ajax({
|
||||
url: callUrl,
|
||||
type: 'GET',
|
||||
datatype: 'json',
|
||||
success: function (data) {
|
||||
that.forceRemote = false;
|
||||
requestFinished.resolve(data);
|
||||
},
|
||||
error: function(jqXHR, textStatus, errorThrown) {
|
||||
throw new Error(callUrl + ' -- ' + errorThrown);
|
||||
},
|
||||
beforeSend: function (xhr) {
|
||||
xhr.setRequestHeader('Authorization', 'Bearer ' + that.oauthToken);
|
||||
//xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
215
workflow/engine/js/strategicDashboard/timeSeriesPresenter.js
Normal file
215
workflow/engine/js/strategicDashboard/timeSeriesPresenter.js
Normal file
@@ -0,0 +1,215 @@
|
||||
var TimeSeriesPresenter = function (model) {
|
||||
var that = this;
|
||||
this.helper = new ViewDashboardHelper();
|
||||
this.model = model;
|
||||
};
|
||||
|
||||
TimeSeriesPresenter.prototype.initializePresenter = function () {
|
||||
var that = this;
|
||||
var requestFinished = $.Deferred();
|
||||
$.when (this.fillIndicatorList())
|
||||
.done(function () {
|
||||
that.periodicityState = {selValue: that.model.periodicityList()[0], list: that.model.periodicityList()}
|
||||
|
||||
that.initPeriodState = {selValue:that.model.monthList()[0].value,
|
||||
list:that.model.monthList(),
|
||||
visible:true };
|
||||
|
||||
that.initYearState = {selValue : that.model.yearList() [0].value,
|
||||
list : that.model.yearList()};
|
||||
|
||||
that.endPeriodState = {selValue : that.model.defaultEndDate().getMonth() + 1,
|
||||
list : that.model.monthList(),
|
||||
visible:true };
|
||||
|
||||
that.endYearState = { selValue : that.model.yearList() [0].value,
|
||||
list : that.model.yearList()};
|
||||
|
||||
that.initDate = that.model.defaultInitDate();
|
||||
that.endDate = that.model.defaultEndDate();
|
||||
|
||||
requestFinished.resolve(true);
|
||||
});
|
||||
return requestFinished.promise();
|
||||
};
|
||||
|
||||
TimeSeriesPresenter.prototype.fillIndicatorList = function () {
|
||||
var requestFinished = $.Deferred();
|
||||
var that = this;
|
||||
var dummyDate = this.helper.date2MysqlString(new Date());
|
||||
that.indicatorList(that.model.dashboardId, dummyDate, dummyDate)
|
||||
.done(function(modelData){
|
||||
if (modelData== null || modelData.length == 0) {
|
||||
that.indicatorState = {selValue: null, list: []}
|
||||
}
|
||||
else {
|
||||
that.indicatorState = {selValue: modelData[0].value, list: modelData}
|
||||
}
|
||||
requestFinished.resolve(that.indicatorState);
|
||||
});
|
||||
return requestFinished.promise();
|
||||
};
|
||||
|
||||
TimeSeriesPresenter.prototype.indicatorList = function (dashboardId) {
|
||||
var that = this;
|
||||
var requestFinished = $.Deferred();
|
||||
var dummyDate = this.helper.date2MysqlString(new Date());
|
||||
this.model.indicatorList(dashboardId, dummyDate, dummyDate).done(function (data) {
|
||||
var newArray = [];
|
||||
$.each(data, function(index, originalObject) {
|
||||
var newObject = {label: originalObject.DAS_IND_TITLE,
|
||||
value: originalObject.DAS_IND_UID
|
||||
}
|
||||
newArray.push(newObject);
|
||||
});
|
||||
|
||||
requestFinished.resolve(newArray);
|
||||
});
|
||||
return requestFinished.promise();
|
||||
};
|
||||
|
||||
TimeSeriesPresenter.prototype.changePeriodicity = function (periodicity) {
|
||||
var that = this;
|
||||
var retval = this.monthList;
|
||||
|
||||
switch (periodicity * 1) {
|
||||
case this.helper.ReportingPeriodicityEnum.MONTH:
|
||||
this.changePeriodicityToQuarter(this.model.monthList());
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.QUARTER:
|
||||
this.changePeriodicityToQuarter(this.model.quarterList());
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.SEMESTER:
|
||||
this.changePeriodicityToSemester(this.model.semesterList());
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.YEAR:
|
||||
this.changePeriodicityToYear(this.model.yearList());
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
TimeSeriesPresenter.prototype.changePeriodicityToMonth = function (monthList) {
|
||||
this.initPeriodState.list = monthList;
|
||||
this.endPeriodState.list = monthList;
|
||||
this.initPeriodState.visible = true;
|
||||
this.endPeriodState.visible = true;
|
||||
}
|
||||
|
||||
TimeSeriesPresenter.prototype.changePeriodicityToQuarter = function (quarterList) {
|
||||
this.initPeriodState.list = quarterList;
|
||||
this.endPeriodState.list = quarterList;
|
||||
this.initPeriodState.visible = true;
|
||||
this.endPeriodState.visible = true;
|
||||
}
|
||||
|
||||
TimeSeriesPresenter.prototype.changePeriodicityToSemester = function (semesterList) {
|
||||
this.initPeriodState.list = semesterList;
|
||||
this.endPeriodState.list = semesterList;
|
||||
this.initPeriodState.visible = true;
|
||||
this.endPeriodState.visible = true;
|
||||
}
|
||||
|
||||
TimeSeriesPresenter.prototype.changePeriodicityToYear = function (yearList) {
|
||||
this.initPeriodState.list = [];
|
||||
this.endPeriodState.list = [];
|
||||
this.initPeriodState.visible = false;
|
||||
this.endPeriodState.visible = false;
|
||||
}
|
||||
|
||||
TimeSeriesPresenter.prototype.historicData = function (indicator, periodicity, initPeriod,
|
||||
initYear, endPeriod, endYear) {
|
||||
var that = this;
|
||||
var requestFinished = $.Deferred();
|
||||
var initDate = this.periodInitDate(periodicity, initPeriod, initYear);
|
||||
var endDate = this.periodEndDate(periodicity, endPeriod, endYear);
|
||||
this.model.historicData(indicator, periodicity, initDate, endDate).done(function (data) {
|
||||
var graphData = [];
|
||||
$.each(data, function(index, originalObject) {
|
||||
var newObject = {datalabel: that.periodValue(periodicity, originalObject) + '/' + originalObject['YEAR'],
|
||||
value: originalObject.VALUE
|
||||
}
|
||||
graphData.push(newObject);
|
||||
});
|
||||
|
||||
requestFinished.resolve(graphData);
|
||||
});
|
||||
return requestFinished.promise();
|
||||
}
|
||||
|
||||
|
||||
TimeSeriesPresenter.prototype.periodValue = function (periodicity, object) {
|
||||
var retval = "";
|
||||
switch (periodicity*1) {
|
||||
case this.helper.ReportingPeriodicityEnum.MONTH:
|
||||
retval = object.MONTH;
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.QUARTER:
|
||||
retval = object.QUARTER;
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.SEMESTER:
|
||||
retval = object.SEMESTER;
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.YEAR:
|
||||
retval = object.YEAR;
|
||||
break;
|
||||
}
|
||||
if (retval == "") {
|
||||
throw new Error("The periodicity " + periodicity + " is not supported.");
|
||||
}
|
||||
return retval;
|
||||
}
|
||||
|
||||
TimeSeriesPresenter.prototype.periodInitDate = function (periodicity, period, year) {
|
||||
var retval = null;
|
||||
switch (periodicity * 1) {
|
||||
case this.helper.ReportingPeriodicityEnum.MONTH:
|
||||
//retval = '01-' + period + '-' + year;
|
||||
retval = new Date(year, period - 1, 1);
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.QUARTER:
|
||||
//retval = '01-' + (3*(period-1) + 1) + '-' + year;
|
||||
retval = new Date(year, 3 * (period-1), 1);
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.SEMESTER:
|
||||
//retval = '01-' + (6*(period-1) + 1) + '-' + year;
|
||||
retval = new Date(year, 6 * (period-1), 1);
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.YEAR:
|
||||
//retval = '01-01-' + year;
|
||||
retval = new Date(year, 0, 1);
|
||||
break;
|
||||
}
|
||||
if (retval == null) {
|
||||
throw new Error("The periodicity " + periodicity + " is not supported.");
|
||||
}
|
||||
return retval;
|
||||
}
|
||||
|
||||
TimeSeriesPresenter.prototype.periodEndDate = function (periodicity, period, year) {
|
||||
|
||||
var retval = null;
|
||||
switch (periodicity * 1) {
|
||||
case this.helper.ReportingPeriodicityEnum.MONTH:
|
||||
retval = new Date(year, period, 0);
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.QUARTER:
|
||||
retval = new Date(year, 3 * (period), 0);
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.SEMESTER:
|
||||
retval = new Date(year, 6 * (period), 0);
|
||||
break;
|
||||
case this.helper.ReportingPeriodicityEnum.YEAR:
|
||||
retval = new Date(year, 11, 31);
|
||||
break;
|
||||
}
|
||||
if (retval == null) {
|
||||
throw new Error("The periodicity " + periodicity + " is not supported.");
|
||||
}
|
||||
return retval;
|
||||
|
||||
}
|
||||
|
||||
|
||||
81
workflow/engine/js/strategicDashboard/timeSeriesView.js
Normal file
81
workflow/engine/js/strategicDashboard/timeSeriesView.js
Normal file
@@ -0,0 +1,81 @@
|
||||
|
||||
helper = new ViewDashboardHelper();
|
||||
var ws = urlProxy.split('/');
|
||||
var dashboardId = '3290922985542460a19e7c1021519011';
|
||||
tsModel = new TimeSeriesModel(token, urlProxy, ws[3], pageUserId, dashboardId);
|
||||
tsPresenter = new TimeSeriesPresenter(tsModel);
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
$('#periodicityList').change(function(){
|
||||
var id = $(this).val();
|
||||
tsPresenter.changePeriodicity(id);
|
||||
bindTimeSeriesLists(tsPresenter, ["indicatorList", "periodicityList"]);
|
||||
});
|
||||
|
||||
$('#compareButton').click(function(){
|
||||
tsPresenter.historicData(
|
||||
$('#indicatorList').val(),
|
||||
$('#periodicityList').val(),
|
||||
$('#initPeriodList').val(),
|
||||
$('#initYearList').val(),
|
||||
$('#endPeriodList').val(),
|
||||
$('#endYearList').val()
|
||||
).done(function(data) {
|
||||
var graphParams1 = {
|
||||
canvas : {
|
||||
containerId:'compareGraph',
|
||||
width:300,
|
||||
height:300,
|
||||
stretch:true,
|
||||
noDataText: G_STRING.ID_DISPLAY_EMPTY
|
||||
},
|
||||
graph: {
|
||||
allowTransition: false,
|
||||
allowDrillDown: false,
|
||||
showTip: true,
|
||||
allowZoom: false,
|
||||
useShadows: false,
|
||||
gridLinesX: true,
|
||||
gridLinesY: true,
|
||||
area: {visible: false, css:"area"},
|
||||
axisX:{ showAxis: true, label: "Period" },
|
||||
axisY:{ showAxis: true, label: "Efficiency" },
|
||||
showErrorBars: false
|
||||
}
|
||||
};
|
||||
|
||||
var graph1 = new LineChart(data, graphParams1, null, null);
|
||||
graph1.drawChart();
|
||||
$('#indicatorsView').hide();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var bindTimeSeriesLists = function (presenter, elementsToConserve = []) {
|
||||
var conserveStates =[];
|
||||
$.each (elementsToConserve, function (i, elem){
|
||||
conserveStates.push({id:elem, selValue: $('#' + elem).val()});
|
||||
});
|
||||
helper.fillSelectWithOptions ($('#indicatorList'), presenter.indicatorState.list, presenter.indicatorState.selValue);
|
||||
helper.fillSelectWithOptions ($('#periodicityList'), presenter.periodicityState.list, presenter.periodicityState.selValue);
|
||||
helper.fillSelectWithOptions ($('#initPeriodList'), presenter.initPeriodState.list, presenter.initPeriodState.selValue);
|
||||
helper.fillSelectWithOptions ($('#initYearList'), presenter.initYearState.list, presenter.initYearState.selValue);
|
||||
helper.fillSelectWithOptions ($('#endPeriodList'), presenter.endPeriodState.list, presenter.endPeriodState.selValue);
|
||||
helper.fillSelectWithOptions ($('#endYearList'), presenter.endYearState.list, presenter.endYearState.selValue);
|
||||
|
||||
$.each (conserveStates, function (i, item){
|
||||
$('#' + item.id).val(item.selValue);
|
||||
});
|
||||
|
||||
helper.setVisibility ($('#initPeriodList'), presenter.initPeriodState.visible);
|
||||
helper.setVisibility ($('#endPeriodList'), presenter.endPeriodState.visible);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
|
||||
|
||||
var ViewDashboardHelper = function () {
|
||||
};
|
||||
|
||||
ViewDashboardHelper.prototype.userDashboards = function(userId, callBack) {
|
||||
ViewDashboardHelper.prototype.ReportingPeriodicityEnum = {
|
||||
NONE : 0,
|
||||
MONTH : 100,
|
||||
QUARTER : 200,
|
||||
SEMESTER : 300,
|
||||
YEAR : 400
|
||||
}
|
||||
|
||||
ViewDashboardHelper.prototype.ReportingIndicatorEnum = {
|
||||
PEI : 1010,
|
||||
EEI : 1030,
|
||||
INBOX_STATUS : 1050
|
||||
}
|
||||
|
||||
ViewDashboardHelper.prototype.date2MysqlString = function (val){
|
||||
return val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDay() ;
|
||||
};
|
||||
|
||||
ViewDashboardHelper.prototype.stringIfNull = function (val){
|
||||
@@ -44,6 +57,19 @@ ViewDashboardHelper.prototype.assert = function (condition, message) {
|
||||
}
|
||||
}
|
||||
|
||||
ViewDashboardHelper.prototype.fillSelectWithOptions = function ($select, options, selectedValue) {
|
||||
$select.empty(); // remove old options
|
||||
$.each(options, function(index, option) {
|
||||
$select.append($("<option></option>")
|
||||
.attr("value", option.value).text(option.label));
|
||||
});
|
||||
$select.val(selectedValue);
|
||||
}
|
||||
|
||||
ViewDashboardHelper.prototype.setVisibility = function ($element, isVisible) {
|
||||
$element.css('visibility', (isVisible ? 'visible' : 'hidden'));
|
||||
}
|
||||
|
||||
ViewDashboardHelper.prototype.truncateString = function (string, len) {
|
||||
this.assert(len != null && len > 0, "Var len not valid. String must by truncated to a positive non zero length.");
|
||||
this.assert(string != null, "var string can't be null.");
|
||||
|
||||
@@ -401,7 +401,12 @@ $(document).ready(function() {
|
||||
animated: 'fade',
|
||||
placement: 'bottom'
|
||||
});
|
||||
initialDraw();
|
||||
|
||||
tsPresenter.initializePresenter()
|
||||
.done(function (data){
|
||||
bindTimeSeriesLists(tsPresenter);
|
||||
initialDraw();
|
||||
});
|
||||
});
|
||||
|
||||
var hideScrollIfAllDivsAreVisible = function(){
|
||||
@@ -447,8 +452,8 @@ var selectDefaultMonthAndYear = function () {
|
||||
compareDate.setMonth(compareDate.getMonth() - 1);
|
||||
var compareMonth = compareDate.getMonth() + 1;
|
||||
var compareYear = compareDate.getFullYear();
|
||||
$('#month').val(compareMonth);
|
||||
$('#year').val(compareYear);
|
||||
$('#endPeriodList').val(compareMonth);
|
||||
$('#endYearList').val(compareYear);
|
||||
}
|
||||
|
||||
var setActiveDashboard = function () {
|
||||
@@ -527,15 +532,17 @@ var defaultInitDate = function() {
|
||||
var date = new Date();
|
||||
var dateMonth = date.getMonth();
|
||||
var dateYear = date.getFullYear();
|
||||
var initDate = $('#year').val() + '-' + $('#month').val() + '-' + '01';
|
||||
var initDate = $('#initYearList').val() + '-' + $('#initPeriodList').val() + '-' + '01';
|
||||
return initDate;
|
||||
}
|
||||
|
||||
var defaultEndDate = function () {
|
||||
//TODO use the timeSeries function that finds the last day in the period
|
||||
var date = new Date();
|
||||
var dateMonth = date.getMonth();
|
||||
var dateYear = date.getFullYear();
|
||||
return dateYear + "-" + (dateMonth + 1) + "-30";
|
||||
var initDate = $('#endYearList').val() + '-' + $('#endPeriodList').val() + '-' + '30';
|
||||
return initDate;
|
||||
}
|
||||
|
||||
var fillDashboardsList = function (presenterData) {
|
||||
@@ -557,7 +564,6 @@ var fillDashboardsList = function (presenterData) {
|
||||
.addClass('selected');
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var fillIndicatorWidgets = function (presenterData) {
|
||||
|
||||
Reference in New Issue
Block a user