fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inclusion of time series graph

Browse Source
This commit is contained in:
Dante
2015-06-11 09:33:03 -04:00
parent 3fdca9a5bb
commit 28e6f21e56
9 changed files with 537 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
workflow/engine/classes/class.indicatorsCalculator.php
View File

@@ -68,6 +68,12 @@ abstract class IndicatorDataSourcesEnum extends BasicEnum {
const USER_GROUP = 300;
}
abstract class ReportingIndicatorTypeEnum extends BasicEnum {
const PEI = 1010;
const UEI = 1030;
const INBOX_STATUS = 1050;
}
class indicatorsCalculator
{
private $userReportingMetadata = array("tableName" => "USR_REPORTING", "keyField" => "PRO_UID");
@@ -114,7 +120,7 @@ class indicatorsCalculator
$qryParams = Array();
$sqlString = $this->indicatorsParamsQueryBuilder(IndicatorDataSourcesEnum::USER
, $processId, $periodicity, $initDate, $endDate
, $this->peiFormula, $qryParams);
, $this->peiFormula." As VALUE", $qryParams);
//$returnValue = $this->propelExecutor($sqlString);
@@ -301,7 +307,7 @@ class indicatorsCalculator
$qryParams = Array();
$sqlString = $this->indicatorsParamsQueryBuilder(IndicatorDataSourcesEnum::USER
, $employeeId, $periodicity, $initDate, $endDate
, $this->ueiFormula, $qryParams);
, $this->ueiFormula." as VALUE", $qryParams);
$retval = $this->pdoExecutor($sqlString, $qryParams);
//$returnValue = $this->propelExecutor($sqlString);
@@ -374,6 +380,7 @@ class indicatorsCalculator
return $retval;
}
//TODO: delte this function that is used nowhere
public function generalIndicatorData($indicatorId, $initDate, $endDate, $periodicity) {
if (!is_a($initDate, 'DateTime')) throw new InvalidArgumentException ('initDate parameter must be a DateTime object.', 0);
if (!is_a($endDate, 'DateTime')) throw new InvalidArgumentException ('endDate parameter must be a DateTime object.', 0);
@@ -665,35 +672,6 @@ class indicatorsCalculator
return $result;
}
/*private function indicatorsBasicQueryBuilder($reportingTable, $filterId, $periodicity, $initDate, $endDate, $fields ) {
if (!is_a($initDate, 'DateTime')) throw new InvalidArgumentException ('initDate parameter must be a DateTime object.', 0);
if (!is_a($endDate, 'DateTime')) throw new InvalidArgumentException ('endDate parameter must be a DateTime object.', 0);
$tableMetadata = $this->metadataForTable($reportingTable);
$periodicitySelectFields = $this->periodicityFieldsForSelect($periodicity);
$periodicityGroup = $this->periodicityFieldsForGrouping($periodicity);
$initYear = $initDate->format("Y");
$initMonth = $initDate->format("m");
$endYear = $endDate->format("Y");
$endMonth = $endDate->format("m");
$filterCondition = "";
if ($filterId != null && $filterId > 0) {
$filterCondition = " AND ".$tableMetadata["keyField"]." = '$filterId'";
}
$sqlString = "SELECT $periodicitySelectFields $fields
FROM ".$tableMetadata["tableName"].
" WHERE
IF (`YEAR` = $initYear, `MONTH`, `YEAR`) >= IF (`YEAR` = $initYear, $initMonth, $initYear)
AND
IF(`YEAR` = $endYear, `MONTH`, `YEAR`) <= IF (`YEAR` = $endYear, $endMonth, $endYear)"
. $filterCondition
. $periodicityGroup;
return $sqlString;
}*/
private function indicatorsParamsQueryBuilder($reportingTable, $filterId, $periodicity, $initDate, $endDate, $fields, &$params) {
if (!is_a($initDate, 'DateTime')) throw new InvalidArgumentException ('initDate parameter must be a DateTime object.', 0);
if (!is_a($endDate, 'DateTime')) throw new InvalidArgumentException ('endDate parameter must be a DateTime object.', 0);

113
workflow/engine/js/strategicDashboard/timeSeriesModel.js Normal file
View 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
View 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
View 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);
}

32
workflow/engine/js/strategicDashboard/viewDashboardHelper.js
View File

@@ -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.");

18
workflow/engine/js/strategicDashboard/viewDashboardView.js
View File

@@ -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) {

38
workflow/engine/src/ProcessMaker/BusinessModel/ReportingIndicators.php
View File

@@ -5,7 +5,41 @@ use \G;
class ReportingIndicators
{
// /**et
/**
* Returns the historic data of an indicator
*
* @param array $indicatorUid indicator from which will be extracted the information
* @param DateTime $initDate date from the index will be calculated
* @param DateTime $endDate date until the index will be calculated
* @param string $language language for the names (en, es, etc.)
*
* return decimal value
*/
public function getHistoricData($indicatorUid, $initDate, $endDate, $periodicity, $language)
{
G::loadClass('indicatorsCalculator');
$retval = "";
$calculator = new \IndicatorsCalculator();
$arr = $calculator->indicatorData($indicatorUid);
$indicator = $arr[0];
$processesId = $indicator['DAS_UID_PROCESS'];
$indicatorType = $indicator['DAS_IND_TYPE'];
switch ($indicatorType) {
case \ReportingIndicatorTypeEnum::PEI:
$retval = $calculator->peiHistoric($processesId, $initDate, $endDate, \ReportingPeriodicityEnum::fromValue($periodicity));
break;
case \ReportingIndicatorTypeEnum::UEI:
$retval = $calculator->ueiHistoric($processesId, $initDate, $endDate, \ReportingPeriodicityEnum::fromValue($periodicity));
break;
default:
throw new Exception("Can't retrive historic Data becasuse de indicator type " + $indicator['DAS_IND_TYPE'] + " has no operation associated.");
break;
}
return $retval;
}
/**
* Lists tasks of a process and it's statistics (efficiency, average times, etc.)
@@ -25,7 +59,7 @@ class ReportingIndicators
$arr = $calculator->indicatorData($indicatorUid);
$indicator = $arr[0];
$processesId = $indicator['DAS_UID_PROCESS'];
$peiValue = current(reset($calculator-> peiHistoric($processesId, $measureDate, $measureDate, \ReportingPeriodicityEnum::NONE)));
$peiValue = current(reset($calculator->peiHistoric($processesId, $measureDate, $measureDate, \ReportingPeriodicityEnum::NONE)));
$peiCost = current(reset($calculator->peiCostHistoric($processesId, $measureDate, $measureDate, \ReportingPeriodicityEnum::NONE)));
$peiCompare = current(reset($calculator->peiHistoric($processesId, $compareDate, $compareDate, \ReportingPeriodicityEnum::NONE)));

25
workflow/engine/src/ProcessMaker/Services/Api/ReportingIndicators.php
View File

@@ -197,6 +197,31 @@ class ReportingIndicators extends Api
}
}
/**
* Get historic data of an indicator
*
* @return array
*
* @author Dante Loayza
* @copyright Colosa - Bolivia
*
* @url GET /indicator-historic-data
*/
public function doGetHistoricDataFromIndicator($indicator_uid, $init_date, $end_date, $periodicity, $language) {
try {
$indicatorsObj = new \ProcessMaker\BusinessModel\ReportingIndicators();
$response = $indicatorsObj->getHistoricData
($indicator_uid,
new \DateTime($init_date),
new \DateTime($end_date),
$periodicity,
$language);
return $response;
} catch (\Exception $e) {
throw (new RestException(Api::STAT_APP_EXCEPTION, $e->getMessage()));
}
}
}

50
workflow/engine/templates/strategicDashboard/viewDashboard.html
View File

@@ -39,7 +39,9 @@
<script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardPresenter.js"></script>
<script type="text/javascript" src="/jscore/strategicDashboard/viewDashboardView.js"></script>
<script type="text/javascript" src="/jscore/strategicDashboard/timeSeriesModel.js"></script>
<script type="text/javascript" src="/jscore/strategicDashboard/timeSeriesPresenter.js"></script>
<script type="text/javascript" src="/jscore/strategicDashboard/timeSeriesView.js"></script>
<script type="text/template" class="specialIndicatorButtonTemplate">
<div class="col-lg-3 col-md-6 dashPro ind-button-selector"
@@ -369,43 +371,24 @@
<div class="pull-right dashboard-right container-fluid">
<div id="compareIndicators" class="row pull-left">
<div class="span4 pull-left">
<h5 class="pull-left" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">{translate label="ID_DASH_COMPARE_MONTH"}:</h5>
</div>
<div class="span4 pull-left">
<select id="year" class="form-control pull-right ">
{literal}
<script>
now = new Date();
anio = now.getFullYear();
for(a=anio;a>=anio-10;a--){
document.write('<option value="'+a+'">'+a+'</option>');
}
</script>
{/literal}
</select>
<select id="month" class="form-control pull-right ">
<option value="1">{translate label="ID_MONTH_ABB_1"}</option>
<option value="2">{translate label="ID_MONTH_ABB_2"}</option>
<option value="3">{translate label="ID_MONTH_ABB_3"}</option>
<option value="4">{translate label="ID_MONTH_ABB_4"}</option>
<option value="5">{translate label="ID_MONTH_ABB_5"}</option>
<option value="6">{translate label="ID_MONTH_ABB_6"}</option>
<option value="7">{translate label="ID_MONTH_ABB_7"}</option>
<option value="8">{translate label="ID_MONTH_ABB_8"}</option>
<option value="9">{translate label="ID_MONTH_ABB_9"}</option>
<option value="10">{translate label="ID_MONTH_ABB_10"}</option>
<option value="11">{translate label="ID_MONTH_ABB_11"}</option>
<option value="12">{translate label="ID_MONTH_ABB_12"}</option>
</select>
**Graph:
<select id="indicatorList"></select>
***Periodicty:
<select id="periodicityList" style="width:auto;"></select>
***From:
<select id="initPeriodList"></select>
<select id="initYearList"></select>
***To:
<select id="endPeriodList"></select>
<select id="endYearList"></select>
<input type="button" id="compareButton" value="**Compare"/>
</div>
<div class="span4 pull-left">
<button type="button" class="btn btn-compare btn-success pull-right btn-date">{translate label="ID_DASH_COMPARE"}</button>
</div>
</div>
</div>
<div class="clearfix"></div>
@@ -426,7 +409,7 @@
<!-- /.col-lg-12 -->
</div>
<!-- Indicators -->
<div class="row">
<div class="row" id="indicatorsView">
<div class="indicators">
<div id="indicatorsGridStack" class="grid-stack" data-gs-width="12" data-gs-animate="no" >
<!--Here are added dynamically the Indicators-->
@@ -454,6 +437,7 @@
</div>
</div>
</div>
<div class="row" id="compareGraph"></div>
</div>
</div>