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

View Refactoring and new status indicator display

Browse Source
This commit is contained in:
Dante
2015-04-17 15:08:04 -04:00
parent c844438322
commit 8927c51cf9
8 changed files with 379 additions and 1771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gulliver/js/pmchart/pmCharts.js
View File

@@ -109,6 +109,7 @@ BarChart.prototype.drawBars = function(data, canvas, param) {
var currObj = this;
if (data == null || data.length == 0) {
console.log(graphDim);
canvas.append("text")
.attr('class','pm-charts-no-draw')
.attr("y", graphDim.height/2)
@@ -1385,6 +1386,7 @@ PieChart.prototype.drawPie2D = function (dataset, canvas, param) {
.enter()
.append("text")
.attr("x", width + 30)
.attr("class", "legend")
.text(function (d, i) {
return (d.datalabel + "-" + getPercent(d.value))
})

1237
workflow/engine/js/strategicDashboard/dashboard.js
View File

File diff suppressed because it is too large Load Diff

500
workflow/engine/js/strategicDashboard/dashboardProxy.js
View File

@@ -1,500 +0,0 @@
var getKeyValue =
function getKeyValue(obj, key, undefined) {
var reg = /\./gi
, subKey
, keys
, context
, x
;
if (reg.test(key)) {
keys = key.split(reg);
context = obj;
for (x = 0; x < keys.length; x++) {
subKey = keys[x];
//the values of all keys except for
//the last one should be objects
if (x < keys.length -1) {
if (!context.hasOwnProperty(subKey)) {
return undefined;
}
context = context[subKey];
}
else {
return context[subKey];
}
}
}
else {
return obj[key];
}
};
var setKeyValue =
function setKeyValue(obj, key, value) {
var reg = /\./gi
, subKey
, keys
, context
, x
;
//check to see if we need to process
//multiple levels of objects
if (reg.test(key)) {
keys = key.split(reg);
context = obj;
for (x = 0; x < keys.length; x++) {
subKey = keys[x];
//the values of all keys except for
//the last one should be objects
if (x < keys.length -1) {
if (!context[subKey]) {
context[subKey] = {};
}
context = context[subKey];
}
else {
context[subKey] = value;
}
}
}
else {
obj[key] = value;
}
};
var merge =
function merge(objFrom, objTo, propMap) {
var toKey
, fromKey
, x
, value
, def
, transform
, key
, keyIsArray
;
if (!objTo) {
objTo = {};
}
for(fromKey in propMap) {
if (propMap.hasOwnProperty(fromKey)) {
toKey = propMap[fromKey];
//force toKey to an array of toKeys
if (!Array.isArray(toKey)) {
toKey = [toKey];
}
for(x = 0; x < toKey.length; x++) {
def = null;
transform = null;
key = toKey[x];
keyIsArray = Array.isArray(key);
if (typeof(key) === "object" && !keyIsArray) {
def = key.default || null;
transform = key.transform || null;
key = key.key;
//evaluate if the new key is an array
keyIsArray = Array.isArray(key);
}
if (keyIsArray) {
//key[toKeyName,transform,default]
def = key[2] || null;
transform = key[1] || null;
key = key[0];
}
if (def && typeof(def) === "function" ) {
def = def(objFrom, objTo);
}
value = getKeyValue(objFrom, fromKey);
if (transform) {
value = transform(value, objFrom, objTo);
}
if (typeof value !== 'undefined') {
setKeyValue(objTo, key, value);
}
else if (typeof def !== 'undefined') {
setKeyValue(objTo, key, def);
}
}
}
}
return objTo;
};
var DashboardProxy = function (oauthToken, server, workspace) {
this.server = server;
this.workspace = workspace;
this.baseUrl = "/api/1.0/" + workspace + "/";
this.oauthToken = oauthToken;
};
DashboardProxy.prototype.userDashboards = function(userId, callBack) {
this.getJson('dashboard/ownerData/' + userId,
function (r) {
var returnList = [];
$.each(r, function(index, originalObject) {
var map = {
"DAS_TITLE" : "dashName",
"DAS_UID" : "dashUid",
"DAS_FAVORITE" : "favorite",
};
var newObject = merge(originalObject, {}, map);
returnList.push(newObject);
});
callBack(returnList);
});
};
DashboardProxy.prototype.dashboardIndicators = function(dashboardId, initDate, endDate, callBack) {
this.getJson('dashboard/' + dashboardId + '/indicator?dateIni=' + initDate + '&dateFin=' + endDate,
function (r) {
var returnList = [];
$.each(r, function(index, originalObject) {
var map = {
"DAS_IND_UID" : "indUid",
"DAS_IND_TITLE" : "indName",
"DAS_IND_TYPE" : "id",
"DAS_IND_VARIATION" : "comparative",
"DAS_IND_DIRECTION" : "direction",
"DAS_IND_VALUE" : "index",
"DAS_IND_X" : "x",
"DAS_IND_Y" : "y",
"DAS_IND_WIDTH" : "width",
"DAS_IND_HEIGHT" : "height",
"DAS_UID_PROCESS" : "process"
};
var newObject = merge(originalObject, {}, map);
//TODO do not burn this value. Data must come from the endpoint
newObject.favorite = ((returnList.length == 1) ? 1 : 0);
returnList.push(newObject);
});
callBack(returnList);
});
};
DashboardProxy.prototype.peiData = function(indicatorId, measureDate, compareDate, callBack) {
var endPoint = "ReportingIndicators/process-efficiency-data?" +
"indicator_uid=" + indicatorId +
"&measure_date=" + measureDate +
"&compare_date=" + compareDate +
"&language=en";
this.getJson(endPoint,
function (r) {
var graphData = [];
$.each(r.data, function(index, originalObject) {
var map = {
"name" : "datalabel",
"inefficiencyCost" : "value"
};
var newObject = merge(originalObject, {}, map);
var shortLabel = (newObject.datalabel == null)
? ""
: newObject.datalabel.substring(0,15);
newObject.datalabel = shortLabel;
graphData.push(newObject);
});
r.dataToDraw = graphData.splice(0,7);
callBack(r);
});
}
DashboardProxy.prototype.processTasksData = function(process, initDate, endDate, callBack) {
var endPoint = "ReportingIndicators/process-tasks?" +
"process_list=" + process +
"&init_date=" + initDate +
"&end_date=" + endDate +
"&language=en";
this.getJson(endPoint,
function (r) {
var graphData = [];
$.each(r, function(index, originalObject) {
var map = {
"name" : "datalabel",
"averageTime" : "value",
"deviationTime" : "dispersion"
};
var newObject = merge(originalObject, {}, map);
newObject.datalabel = newObject.datalabel.substring(0, 7);
graphData.push(newObject);
});
var retval = {};
retval.dataToDraw = graphData.splice(0,7);
retval.tasksData = r;
callBack(retval);
});
}
DashboardProxy.prototype.ueiData = function(indicatorId, measureDate, compareDate, callBack) {
var endPoint = "ReportingIndicators/employee-efficiency-data?" +
"indicator_uid=" + indicatorId +
"&measure_date=" + measureDate +
"&compare_date=" + compareDate +
"&language=en";
this.getJson(endPoint,
function (r) {
var graphData = [];
$.each(r.data, function(index, originalObject) {
var map = {
"name" : "datalabel",
"averageTime" : "value",
"deviationTime" : "dispersion"
};
var newObject = merge(originalObject, {}, map);
var shortLabel = (newObject.datalabel == null)
? ""
: newObject.datalabel.substring(0,7);
newObject.datalabel = shortLabel;
graphData.push(newObject);
});
r.dataToDraw = graphData.splice(0,7);
callBack(r);
});
/*var retval = {
"efficiencyIndex":1.23,
"efficiencyVariation":0.23,
"inefficiencyCost":"$ 20112.23",
"employeeGroupsDataToDraw":
[
{"value":"96", "datalabel":"User 1"},
{"value":"84", "datalabel":"User 2"},
{"value":"72", "datalabel":"User 3"},
{"value":"18", "datalabel":"User 4"},
{"value":"85", "datalabel":"User 5"}
],
"employeeGroupsData": [
{"name": "User 1", "efficiencyIndex":"0.45", "innefficiencyCost":"$ 3404"},
{"name": "User 2", "efficiencyIndex":"1.45", "innefficiencyCost":"$ 1404"},
{"name": "User 3", "efficiencyIndex":"0.25", "innefficiencyCost":"$ 3304"},
{"name": "User 4", "efficiencyIndex":"1.95", "innefficiencyCost":"$ 404"},
{"name": "User 5", "efficiencyIndex":"1.25", "innefficiencyCost":"$ 13404"},
{"name": "User 6", "efficiencyIndex":"0.75", "innefficiencyCost":"$ 4"}
]
}
return retval;*/
}
DashboardProxy.prototype.userGroupData = function(groupId, initDate, endDate, callBack) {
var endPoint = "ReportingIndicators/group-employee-data?" +
"group_uid=" + groupId +
"&init_date=" + initDate +
"&end_date=" + endDate +
"&language=en";
this.getJson(endPoint,
function (r) {
var graphData = [];
$.each(r, function(index, originalObject) {
var map = {
"name" : "datalabel",
"averageTime" : "value",
"deviationTime" : "dispersion"
};
var newObject = merge(originalObject, {}, map);
newObject.datalabel = newObject.datalabel.substring(0, 7);
graphData.push(newObject);
});
var retval = {};
retval.dataToDraw = graphData.splice(0,7);
retval.tasksData = r;
callBack(retval);
});
}
DashboardProxy.prototype.generalIndicatorData = function(indicatorId, initDate, endDate, callBack) {
var method = "";
var endPoint = "ReportingIndicators/general-indicator-data?" +
"indicator_uid=" + indicatorId +
"&init_date=" + initDate +
"&end_date=" + endDate +
"&language=en";
this.getJson(endPoint,
function (r) {
$.each(r.graph1Data, function(index, originalObject) {
var label = (('YEAR' in originalObject) ? originalObject.YEAR : "") ;
label += (('MONTH' in originalObject) ? "/" + originalObject.MONTH : "") ;
label += (('QUARTER' in originalObject) ? "/" + originalObject.QUARTER : "");
label += (('SEMESTER' in originalObject) ? "/" + originalObject.SEMESTER : "");
originalObject.datalabel = label;
});
$.each(r.graph2Data, function(index, originalObject) {
var label = (('YEAR' in originalObject) ? originalObject.YEAR : "") ;
label += (('MONTH' in originalObject) ? "/" + originalObject.MONTH : "") ;
label += (('QUARTER' in originalObject) ? "/" + originalObject.QUARTER : "");
label += (('SEMESTER' in originalObject) ? "/" + originalObject.SEMESTER : "") ;
originalObject.datalabel = label;
});
callBack(r);
});
/*var retval = {
"index" : "23",
"graph1Data": [
{"value":"96", "datalabel":"User 1"},
{"value":"84", "datalabel":"User 2"},
{"value":"72", "datalabel":"User 3"},
{"value":"18", "datalabel":"User 4"},
{"value":"85", "datalabel":"User 5"}
],
"graph2Data": [
{"value":"196", "datalabel":"User 1"},
{"value":"184", "datalabel":"User 2"},
{"value":"172", "datalabel":"User 3"},
{"value":"118", "datalabel":"User 4"},
{"value":"185", "datalabel":"User 5"}
]
}
return retval;*/
}
DashboardProxy.prototype.userTasksData = function(processId, monthCompare, yearCompare) {
var retval = {
"tasksDataToDraw": [
{"value":"96", "datalabel":"Task 1"},
{"value":"84", "datalabel":"Task 2"},
{"value":"72", "datalabel":"Task 3"},
{"value":"18", "datalabel":"Task 4"},
{"value":"85", "datalabel":"Task 5"}
],
"tasksData": [
{"Name": "Task 1", "efficiencyIndex":"0.45", "deviationTime":"0.45", "averageTime":"34 days"},
{"Name": "Task 2", "efficiencyIndex":"1.45", "deviationTime":"1.45", "averageTime":"14 days"},
{"Name": "Task 3", "efficiencyIndex":"0.25", "deviationTime":"0.25", "averageTime":"3 days"},
{"Name": "Task 4", "efficiencyIndex":"1.95", "deviationTime":"1.95", "averageTime":"4 days"},
{"Name": "Task 5", "efficiencyIndex":"1.25", "deviationTime":"1.25", "averageTime":"14 days"},
{"Name": "Task 6", "efficiencyIndex":"0.75", "deviationTime":"0.75", "averageTime":"4 days"}
]
}
return retval;
}
DashboardProxy.prototype.getPositionIndicator = function(callBack) {
this.getJson('dashboard/config', function (r) {
var graphData = [];
$.each(r, function(index, originalObject) {
var map = {
"widgetId" : originalObject.widgetId,
"x" : originalObject.x,
"y" : originalObject.y,
"width" : originalObject.width,
"height" : originalObject.height
};
graphData.push(map);
});
callBack(graphData);
});
};
DashboardProxy.prototype.setPositionIndicator = function(data, callBack) {
var that = this;
this.getPositionIndicator(
function(response){
if (response.length != 0) {
that.putJson('dashboard/config', data, function (r) {
});
} else {
that.postJson('dashboard/config', data, function (r) {
});
}
}
);
};
DashboardProxy.prototype.getJson = function (endPoint, callBack) {
var that = this;
var callUrl = this.baseUrl + endPoint
//For Debug: console.log('Llamando:');
//For Debug: console.log(callUrl)
$.ajax({
url: callUrl,
type: 'GET',
datatype: 'json',
success: function(response) { callBack(response); },
error: function(jqXHR, textStatus, errorThrown) {
throw new Error(textStatus);
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + that.oauthToken);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
}
});
}
DashboardProxy.prototype.postJson = function (endPoint, data, callBack) {
var that = this;
$.ajax({
url : this.baseUrl + endPoint,
type : 'POST',
datatype : 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function(response) {
callBack(response);
},
error: function(jqXHR, textStatus, errorThrown) {
throw new Error(textStatus);
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + that.oauthToken);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
}
}).fail(function () {
throw new Error('Fail server');
});
};
DashboardProxy.prototype.putJson = function (endPoint, data, callBack) {
var that = this;
$.ajax({
url : this.baseUrl + endPoint,
type : 'PUT',
datatype : 'json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function(response) {
callBack(response);
},
error: function(jqXHR, textStatus, errorThrown) {
throw new Error(textStatus);
},
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + that.oauthToken);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
}
}).fail(function () {
throw new Error('Fail server');
});
};

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

@@ -30,7 +30,9 @@ class ReportingIndicators
$peiCost = current(reset($calculator->peiCostHistoric($processesId, $measureDate, $measureDate, \ReportingPeriodicityEnum::NONE)));
$peiCompare = current(reset($calculator->peiHistoric($processesId, $compareDate, $compareDate, \ReportingPeriodicityEnum::NONE)));
$retval = array("efficiencyIndex" => $peiValue,
$retval = array(
"id" => $indicatorUid,
"efficiencyIndex" => $peiValue,
"efficiencyVariation" => ($peiValue-$peiCompare),
"inefficiencyCost" => $peiCost,
"data"=>$processes);
@@ -72,7 +74,9 @@ class ReportingIndicators
$ueiCompare = current(reset($calculator->ueiHistoric(null, $compareDate, $compareDate, \ReportingPeriodicityEnum::NONE)));
$retval = array("efficiencyIndex" => $ueiValue,
$retval = array(
"id" => $indicatorUid,
"efficiencyIndex" => $ueiValue,
"efficiencyVariation" => ($ueiValue-$ueiCompare),
"inefficiencyCost" => $ueiCost,
"data"=>$groups);

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

@@ -27,18 +27,283 @@
<script type="text/javascript" src="/js/pmchart/pmCharts.js"></script>
<script type="text/javascript" >
var urlProxy = '{$urlProxy}';
var usrId = '{$usrId}';
var pageUsrId = '{$usrId}';
var token = '{$credentials.access_token}';
var G_STRING = [];
{foreach from=$translation key=index item=option}
G_STRING['{$index}'] = "{$option}";
{/foreach}
</script>
<script type="text/javascript" src="/jscore/strategicDashboard/dashboard.js"></script>
<script type="text/javascript" src="/jscore/strategicDashboard/dashboardProxy.js"></script>
<script type="text/javascript" src="/jscore/strategicdashboard/viewDashboardHelper.js"></script>
<script type="text/javascript" src="/jscore/strategicdashboard/viewDashboardModel.js"></script>
<script type="text/javascript" src="/jscore/strategicdashboard/viewDashboardPresenter.js"></script>
<script type="text/javascript" src="/jscore/strategicdashboard/viewDashboardView.js"></script>
<script type="text/template" class="specialIndicatorButtonTemplate">
<div class="col-lg-3 col-md-6 dashPro ind-button-selector"
id="indicatorButton-<%- indicator.id %>"
data-indicator-id="<%- indicator.id %>"
data-indicator-type="<%- indicator.type %>"
data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">
<div class="ind-container-selector panel panel-green grid-stack-item-content" style="min-width:200px;">
<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
<div class="panel-heading" >
<div class="row">
<div class="col-xs-3">
<div class="huge ind-value-selector"><%- indicator.value %></div>
</div>
<div class="col-xs-9 text-right"><i class="ind-symbol-selector fa fa-chevron-up fa-3x"></i>
<div class="small ind-comparative-selector"><%- indicator.comparative %></div>
</div>
</div>
</div>
<div class="panel-footer text-center ind-title-selector">
<%- indicator.title %>
</div>
</a>
</div>
</div>
</script>
<script type="text/template" class="statusIndicatorButtonTemplate">
<div class="col-lg-3 col-md-6 dashPro ind-button-selector"
id="indicatorButton-<%- indicator.id %>"
data-indicator-id="<%- indicator.id %>"
data-indicator-type="<%- indicator.type %>"
data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2">
<div class="ind-container-selector panel grid-stack-item-content" style="min-width:200px;">
<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
<div class="panel-heading status-indicator-low"
style=" width:<%- indicator.percentageOverdue %>%;
visibility: <%- indicator.overdueVisibility %>" >
<div class="row">
<div class="col-xs-12">
<div class="small ind-comparative-selector"><%- indicator.percentageOverdue %>%</div>
</div>
</div>
</div>
<div class="panel-heading status-indicator-medium"
style=" width:<%- indicator.percentageAtRisk %>%;
visibility: <%- indicator.atRiskVisibility %>;" >
<div class="row">
<div class="col-xs-12">
<div class="small ind-comparative-selector"><%- indicator.percentageAtRisk %>%</div>
</div>
</div>
</div>
<div class="panel-heading status-indicator-high"
style=" width:<%- indicator.percentageOnTime %>%;
visibility: <%- indicator.onTimeVisibility %>;">
<div class="row">
<div class="col-xs-12">
<div class="small ind-comparative-selector"><%- indicator.percentageOnTime %>%</div>
</div>
</div>
</div>
<div class="panel-footer text-center ind-title-selector" style="clear:both;">
<%- indicator.title %>
</div>
</a>
</div>
</div>
</script>
<script type="text/template" class="indicatorButtonTemplate">
<div class="col-lg-3 col-md-6 ind-button-selector" id="generalLowItem"
id="indicatorButton-<%- indicator.id %>"
data-indicator-id="<%- indicator.id %>"
data-indicator-type="<%- indicator.type %>"
data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2" >
<div class="panel ie-panel panel-low grid-stack-item-content ind-container-selector" style="min-width: 200px;">
<a data-toggle="collapse" href="#completedcases" aria-expanded="false" aria-controls="completedcases">
<div class="panel-heading"> <div class="row"> <div class="col-xs-3">
<div class="huge ind-value-selector">X</div>
</div>
<div class="col-xs-9 text-right"><i class="fa fa-file-text-o fa-3x"></i>
<div class="small ind-comparative-selector ellipsis"><%- indicator.comparative %></div>
</div>
</div>
</div>
<div class="progress progress-xs progress-dark-base ie-progress-dark-base mar-no">
<div role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
class="progress-bar progress-bar-light ind-progress-selector"
style="width: 0%">
</div>
</div>
<div class="panel-footer text-center ind-title-selector">
<span>
<%- indicator.title %>
</span>
</div>
</a>
</div>
</div>
</script>
<script type="text/template" class="specialIndicatorMainPanel">
<div class="process-div well" id="specialIndicatorMainPanel"
data-gs-no-resize="true"
style="clear:both;position:relative;height:auto;">
<div class="panel-heading bluebg sind-title-selector"">
<ol class="breadcrumb">
</ol>
</div>
<div class="text-center huge">
<div class="col-xs-3 vcenter">
<div class="green"><%- indicator.efficiencyIndexToShow %></div>
<div class="small grey sind-index-selector ellipsis"></div>
</div>
<div class="col-xs-3 vcenter" style="margin-right:80px">
<div id="proEfficCost" class="red"><%- indicator.inefficiencyCostToShow %></div>
<div class="small grey sind-cost-selector ellipsis"></div>
</div>
<div class="col-xs-6" id="specialIndicatorGraph" style="width:600px;height:300px;"></div>
</div>
<div class="clearfix"></div>
</div>
</script>
<script type="text/template" class="specialIndicatorDetail">
<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
id="detailData-<%- detailData.uid %>"
data-indicator-id="<%- detailData.indicatorId %>"
data-detail-id="<%- detailData.uid %>"
data-detail-index="<%- detailData.efficiencyIndexToShow %>"
data-detail-cost="<%- detailData.inefficiencyCostToShow %>"
data-detail-name="<%- detailData.name %>"
>
<div class="col-lg-12 vcenter-task">
<a href="#" class="process-button">
<div class="col-xs-5 text-left title-process">
<div class="small grey detail-title-selector"> <%- detailData.name %></div>
</div>
<div class="col-xs-3 text-center ">
<div class="blue"><%- detailData.efficiencyIndexToShow %></div>
<div class="small grey detail-efficiency-selector ellipsis"></div>
</div>
<div class="col-xs-3 text-center ">
<div class="blue"><%- detailData.inefficiencyCostToShow %></div>
<div class="small grey detail-cost-selector ellipsis"></div>
</div>
<div class="col-xs-1 text-right arrow"><i class="fa fa-chevron-right fa-fw"></i></div>
</a>
</div>
<div class="clearfix"></div>
</div>
</script>
<script type="text/template" class="ueiDetail">
<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
id="detailData-<%- detailData.uid %>"
data-indicator-id="<%- detailData.indicatorId %>"
data-detail-id="<%- detailData.uid %>">
<div class="panel-heading greenbg">
<div class="col-xs-12 text-center detail-title-selector"><i class="fa fa-tasks fa-fw"></i> <span id="usrName"><%- detailData.name %></span> </div>
<div class="clearfix"></div>
</div>
<div class="text-center huge">
<div class="col-xs-12 vcenter-task">
<div class="col-xs-5 ">
<div id="usrEffic" class="blue small"><%- detailData.efficiencyIndexToShow%></div>
<div class="smallB grey fontMedium detail-efficiency-selector ellipsis"></div>
</div>
<div class="col-xs-5 ">
<div id="usrCost" class="blue small"><%- detailData.inefficiencyCostToShow%></div>
<div class="smallB grey detail-cost-selector ellipsis"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</script>
<script type="text/template" class="statusDetail">
<div class="process-div well hideme detail-button-selector" data-gs-no-resize="true"
id="detailData-<%- detailData.uid %>"
data-indicator-id="<%- detailData.indicatorId %>"
data-detail-id="<%- detailData.uid %>">
<div class="panel-heading greenbg">
<div class="col-xs-12 text-center detail-title-selector"><i class="fa fa-tasks fa-fw"></i> <span id="usrName"><%- detailData.taskTitle %></span> </div>
<div class="clearfix"></div>
</div>
<div class="text-center huge">
<div class="col-xs-12 vcenter-task">
<div class="col-xs-4 ">
<div class="blue small"><%- detailData.percentageOverdue%> %</div>
<div class="smallB grey fontMedium detail-efficiency-selector">Overdue</div>
</div>
<div class="col-xs-4">
<div class="blue small"><%- detailData.percentageAtRisk%> %</div>
<div class="smallB grey fontMedium detail-efficiency-selector">At Risk</div>
</div>
<div class="col-xs-4 ">
<div class="blue small"><%- detailData.percentageOnTime%> %</div>
<div class="smallB grey fontMedium detail-efficiency-selector">On Time</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</script>
<script type="text/template" class="dashboardButtonTemplate">
<div id="dashboardButton-<%- dashboard.id %>" class="btn-group pull-left"
data-dashboard-id="<%- dashboard.id %>" >
<button type="button" class="btn btn-success das-icon-selector">
<i class="fa fa-star fa-1x"></i>
</button>
<button type="button" class="btn btn-success das-title-selector" >
<%- dashboard.title %>
</button>
</div>
</script>
<script type="text/template" class="generalIndicatorMainPanel">
<div class="process-div well" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">
<div class="panel-heading bluebg">
<ol class="breadcrumb">
<li class="ind-title-selector"></li>
</ol>
</div>
<div class="text-center huge">
<div class="col-xs-6" id="generalGraph1" style="width:600px; height:300px;"><img src="../dist/img/graph.png" /></div>
<div class="col-xs-6" id="generalGraph2" style="width:600px; height:300px;margin-left:60px;"><img src="../dist/img/graph.png" /></div>
</div>
<div class="clearfix"></div>
</div>
</script>
<script type="text/template" class="statusIndicatorMainPanel">
<div class="process-div well" data-gs-no-resize="true" style="clear:both;position:relative;height:auto;">
<div class="panel-heading bluebg">
<ol class="breadcrumb">
<li class="ind-title-selector"></li>
</ol>
</div>
<div class="text-center huge" style="margin:0 auto; width:90%;">
<div class="col-xs-4" style="width:auto;">
<div class="status-graph-title-low">Overdue:</div>
<div id="graph1" style="width:450px; height:300px;"></div>
</div>
<div class="col-xs-4" style="width:auto;">
<div class="status-graph-title-medium">At Risk:</div>
<div id="graph2" style="width:450px; height:300px;"></div>
</div>
<div class="col-xs-4" style="width:auto;">
<div class="status-graph-title-high">On Time:</div>
<div id="graph3" style="width:450px; height:300px;"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</script>
</head>
<body id="page-top" class="index">
<img id="theImg" class="floating" src="/images/scrolldown.gif" width="80" height="80"/>
<img id="scrollImg" class="floating" src="viewDashboard_data/images/scrolldown.gif" width="80" height="80" style="border-radius:85px;"/>
<div id="wrapper">
<div id="page-wrapper">
<!--Cabezera-->
@@ -65,12 +330,12 @@
<div class="span4 pull-left">
<select id="year" class="form-control pull-right ">
{literal}
<script>
now = new Date();
<script>
now = new Date();
anio = now.getFullYear();
for(a=anio;a>=anio-7;a--){
document.write('<option value="'+a+'">'+a+'</option>');
}
for(a=anio;a>=anio-7;a--){
document.write('<option value="'+a+'">'+a+'</option>');
}
</script>
{/literal}
</select>
@@ -99,7 +364,7 @@
<p class="text-center">{translate label="ID_DASH_CLICK_TO_VIEW"}</p>
<p>
<!-- Split button -->
<div id="dasbuttons">
<div id="dashboardsList">
</div>
</p>
<div class="clearfix"></div>
@@ -123,9 +388,12 @@
<!--Here are added dynamically the Dat by indicator-->
</div>
</div>
<div id="relatedLabel"></div>
<div id="relatedLabel" style="clear:both;"><center><h3></h3></center></div>
<div class="col-lg-12 col-md-12">
<div id="relatedDataGridStack" class="grid-stack" data-gs-width="12" data-gs-animate="no" >
<div id="relatedDetailGridStack" class="grid-stack" data-gs-width="12"
data-gs-animate="no" style="clear:both;">
</div>
</div>
</div>
@@ -137,3 +405,5 @@
</html>

83
workflow/public_html/css/general.css
View File

@@ -1,4 +1,6 @@
.pm-charts-no-draw {
font-size:16px;
font-family:"Arial";
@@ -11,10 +13,56 @@
color:#e14333;
}
.status-graph-title-low,
.status-graph-title-medium,
.status-graph-title-high {
text-align:center;
font-size:17px;
font-family: 'Chivo', sans-serif;
width:90%;
margin:0 auto;
border:1px solid #eaeaea;
margin-top:10px;
border-radius: 5px;
}
.status-graph-title-low {
background-color: #e14333;
}
.status-graph-title-medium {
background-color:#fada5e;
}
.status-graph-title-high {
background-color:#1fbc99;
}
.status-indicator-low,
.status-indicator-medium,
.status-indicator-high {
padding:0px;
padding-top:30px;
color:#444;
float:left;
}
.section-title {
}
.status-indicator-low {
background-color: #e14333;
}
.status-indicator-medium {
background-color: #fada5e;
}
.status-indicator-high {
background-color: #1fbc99;
}
.hideme {opacity:0;}
.pie-label {font-size:10px;}
.axis-label {font-size:10px;}
.errorBar, .errorBarLowerMark, .errorBarUpperMark{
@@ -29,15 +77,34 @@
font-size:9px;
}
.das-title-selector {
width:160px;
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
}
.ind-title-selector {
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
}
img.floating {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
z-index:1000;
opacity: 0.9;
filter: alpha(opacity=90);
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
z-index:1000;
opacity: 0.9;
filter: alpha(opacity=90);
}

3
workflow/public_html/css/gridstack.css
View File

@@ -103,7 +103,7 @@
width: auto !important;
left: 0 !important;
top: auto !important;
margin-bottom: 20px;
margin-bottom:20px;
}
.grid-stack {
@@ -127,3 +127,4 @@
-o-transition: left .0s, top .0s, height .0s, width .0s;
transition: left .0s, top .0s, height .0s, width .0s;
}

23
workflow/public_html/css/sb-admin-2.css
View File

@@ -348,21 +348,21 @@ table.dataTable thead .sorting:after {
text-decoration: none;
}
.panel-yellow {
.panel-high {
border-color: #ddd;
}
.panel-yellow .panel-heading {
.panel-high .panel-heading {
border-color: #fcb322;
color: #fff;
background-color: #fcb322;
}
.panel-yellow a {
.panel-high a {
color: #606368;
}
.panel-yellow a:hover {
.panel-high a:hover {
color: #fcb322;
text-decoration: none;
}
@@ -520,15 +520,15 @@ table.dataTable thead .sorting:after {
/*title panel ends*/
.panel-primary{
.panel-low{
border-color: #ddd;
}
.panel-primary a{
.panel-low a{
color: #606368;
}
.panel-primary a:hover{
.panel-low a:hover{
color: #3397e1;
text-decoration: none;
}
@@ -549,7 +549,7 @@ table.dataTable thead .sorting:after {
margin-bottom: 20px;
}
.panel-green:hover, .panel-red:hover, .panel-yellow:hover, .panel-primary:hover{
.panel-green:hover, .panel-red:hover, .panel-high:hover, .panel-low:hover{
box-shadow:0px 3px 2px #dfdfdf;
}
@@ -566,7 +566,7 @@ table.dataTable thead .sorting:after {
}
.panel-active{
background-color: #fff;
background-color: #000;
position: relative;
}
@@ -583,6 +583,7 @@ table.dataTable thead .sorting:after {
.panel-active:after {
border-color: rgba(136, 183, 213, 0);
background-color: #000;
border-top-color: #fff;
border-width: 20px;
margin-left: -20px;
@@ -614,11 +615,11 @@ table.dataTable thead .sorting:after {
margin-top:10px;
}
.panel-red .panel-heading, .panel-primary .panel-heading{
.panel-red .panel-heading, .panel-low .panel-heading{
color:rgba(0,0,0,0.4) !important;
}
.panel-yellow .progress-bar{
.panel-high .progress-bar{
background: #fcb322;
}