276 lines
8.7 KiB
Plaintext
276 lines
8.7 KiB
Plaintext
@using EnVisage.Code
|
|
<h4 class="modal-title" id="performanceGraphTitle">Project Performance Diagramm</h4>
|
|
<div>
|
|
<div class="col-md-4">
|
|
<div class="graph-container form-group-margin" id="graph-container-PC">
|
|
<div id="jq-flot-graph-PC"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="graph-container form-group-margin" id="graph-container-PP">
|
|
<div id="jq-flot-graph-PP">
|
|
<span class="control-label" style="margin-left: 10px;"><img src="@Url.Content("~/Content/images/load.gif")" /> loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="graph-container form-group-margin" id="graph-container-PN">
|
|
<div id="jq-flot-graph-PN"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="performanceGraphPeriodsLabel" style="display: none;">
|
|
<div class="col-md-4">
|
|
<div style="text-align: center;"><h4 class="modal-title">Current</h4></div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div style="text-align: center;"><h4 class="modal-title">Last Quarter</h4></div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div style="text-align: center;"><h4 class="modal-title">Upcoming</h4></div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var _perfDataForChart = null;
|
|
|
|
var C_PERFORMANCE_CHART_BASE_COLOR = "#31a663";
|
|
var C_PERFORMANCE_CHART_RED_COLOR = "#d6494a";
|
|
var C_PERFORMANCE_CHART_BLUE_COLOR = "#3155bd";
|
|
var C_PERFORMANCE_CHART_BAR_WIDTH = 0.75;
|
|
|
|
function PrepareDataForPerformanceChart(periodKey) {
|
|
var dataStruct = [
|
|
{
|
|
data: _perfDataForChart[periodKey].series[0].data,
|
|
bars: {
|
|
order: 1,
|
|
fillColor: {
|
|
colors: [C_PERFORMANCE_CHART_BASE_COLOR, C_PERFORMANCE_CHART_BASE_COLOR]
|
|
}
|
|
},
|
|
color: C_PERFORMANCE_CHART_BASE_COLOR
|
|
},
|
|
{
|
|
data: _perfDataForChart[periodKey].series[1].data,
|
|
bars: {
|
|
order: 2,
|
|
fillColor: {
|
|
colors: [C_PERFORMANCE_CHART_RED_COLOR, C_PERFORMANCE_CHART_RED_COLOR]
|
|
}
|
|
},
|
|
color: C_PERFORMANCE_CHART_RED_COLOR
|
|
},
|
|
{
|
|
data: _perfDataForChart[periodKey].series[2].data,
|
|
bars: {
|
|
order: 3,
|
|
fillColor: {
|
|
colors: [C_PERFORMANCE_CHART_BLUE_COLOR, C_PERFORMANCE_CHART_BLUE_COLOR]
|
|
}
|
|
},
|
|
color: C_PERFORMANCE_CHART_BLUE_COLOR
|
|
},
|
|
];
|
|
|
|
return dataStruct;
|
|
}
|
|
|
|
function PrepareOptionsForPerformanceChart(periodKey) {
|
|
for (var index = 0; index < _perfDataForChart[periodKey].barOptions.length; index++) {
|
|
var itemName = _perfDataForChart[periodKey].barOptions[index][1];
|
|
|
|
if (itemName.length >= 26) {
|
|
itemName = itemName.substr(0, 23) + "...";
|
|
_perfDataForChart[periodKey].barOptions[index][1] = itemName;
|
|
}
|
|
}
|
|
|
|
|
|
var perfChartOptions = {
|
|
xaxis: {
|
|
rotateTicks: 90,
|
|
ticks: _perfDataForChart[periodKey].barOptions,
|
|
},
|
|
yaxis: {
|
|
tickFormatter: function (val, axis) {
|
|
var formatted = '$' + val.formatNumber();
|
|
|
|
if (formatted.indexOf('.') > 0)
|
|
formatted = formatted.substring(0, formatted.indexOf('.'));
|
|
|
|
return formatted;
|
|
}
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: false,
|
|
borderWidth: 0,
|
|
borderColor: '#f0f0f0',
|
|
},
|
|
series: {
|
|
stack: true,
|
|
bars: {
|
|
show: true,
|
|
fill: true,
|
|
barWidth: C_PERFORMANCE_CHART_BAR_WIDTH,
|
|
lineWidth: 0,
|
|
}
|
|
},
|
|
bars: {
|
|
align: "center",
|
|
},
|
|
|
|
legend: {
|
|
show: false,
|
|
},
|
|
tooltip: false,
|
|
};
|
|
|
|
return perfChartOptions;
|
|
}
|
|
|
|
function PrepareExtraOptionsForPerformanceChart(periodKey) {
|
|
var options = {
|
|
height: 400,
|
|
tooltipText: "_perfDataForChart['" + periodKey + "'].hints[x]"
|
|
}
|
|
|
|
return options;
|
|
}
|
|
|
|
function PrepareHintsForPerformanceChart(periodKey)
|
|
{
|
|
_perfDataForChart[periodKey].hints = [];
|
|
_perfDataForChart[periodKey].hints.push(""); // element with 0 index (set it dummy)
|
|
|
|
for(var index = 0; index <_perfDataForChart[periodKey].series[0].data.length; index++) {
|
|
var hintText = _perfDataForChart[periodKey].barOptions[index][1] + "<br/>";
|
|
|
|
if (_perfDataForChart[periodKey].series[3].data[index][1] > 0) {
|
|
var summaryCosts = _perfDataForChart[periodKey].series[3].data[index][1];
|
|
var varianceCost = 0;
|
|
var sign = "";
|
|
|
|
hintText += ("Actual Costs: $" + summaryCosts.formatNumber());
|
|
|
|
if (_perfDataForChart[periodKey].series[1].data[index][1] > 0) {
|
|
varianceCost = _perfDataForChart[periodKey].series[1].data[index][1];
|
|
sign = "+";
|
|
}
|
|
|
|
if (_perfDataForChart[periodKey].series[2].data[index][1] > 0) {
|
|
varianceCost = _perfDataForChart[periodKey].series[2].data[index][1];
|
|
sign = "-";
|
|
}
|
|
|
|
if (varianceCost != 0)
|
|
hintText += " (" + sign + "$" + varianceCost.formatNumber() + " to forecast)";
|
|
else
|
|
hintText += " (the same as forecast)";
|
|
}
|
|
else {
|
|
var forecastCosts = _perfDataForChart[periodKey].series[0].data[index][1];
|
|
hintText += ("No actuals present (forecast costs: $" + forecastCosts.formatNumber() + ")");
|
|
}
|
|
|
|
_perfDataForChart[periodKey].hints.push(hintText);
|
|
}
|
|
}
|
|
|
|
function DrawPerformanceGraph() {
|
|
if (!_perfDataForChart) {
|
|
if ($('#performanceMode').is(":checked")) {
|
|
LoadPerformanceData();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Create hints for bars
|
|
PrepareHintsForPerformanceChart("PrevPeriod");
|
|
PrepareHintsForPerformanceChart("CurrentPeriod");
|
|
PrepareHintsForPerformanceChart("NextPeriod");
|
|
|
|
var perfChartDataPrev = PrepareDataForPerformanceChart("PrevPeriod");
|
|
var perfChartDataCurr = PrepareDataForPerformanceChart("CurrentPeriod");
|
|
var perfChartDataNext = PrepareDataForPerformanceChart("NextPeriod");
|
|
|
|
var perfChartOptionsPrev = PrepareOptionsForPerformanceChart("PrevPeriod");
|
|
var perfChartOptionsCurr = PrepareOptionsForPerformanceChart("CurrentPeriod");
|
|
var perfChartOptionsNext = PrepareOptionsForPerformanceChart("NextPeriod");
|
|
|
|
var perfExtraOptionsPrev = PrepareExtraOptionsForPerformanceChart("PrevPeriod");
|
|
var perfExtraOptionsCurr = PrepareExtraOptionsForPerformanceChart("CurrentPeriod");
|
|
var perfExtraOptionsNext = PrepareExtraOptionsForPerformanceChart("NextPeriod");
|
|
|
|
// Init Chart
|
|
InitPerformanceChart(false);
|
|
|
|
$('#jq-flot-graph-PP').pixelPlot(perfChartDataPrev, perfChartOptionsPrev, perfExtraOptionsPrev);
|
|
$('#jq-flot-graph-PC').pixelPlot(perfChartDataCurr, perfChartOptionsCurr, perfExtraOptionsCurr);
|
|
$('#jq-flot-graph-PN').pixelPlot(perfChartDataNext, perfChartOptionsNext, perfExtraOptionsNext);
|
|
|
|
ShowCustomLegend();
|
|
}
|
|
|
|
function InitPerformanceChart(showWaitPannel) {
|
|
$('#performanceGraphPeriodsLabel').hide();
|
|
|
|
$('#graph-container-PP').html('<div id="jq-flot-graph-PP"> </div>');
|
|
$('#graph-container-PC').html('<div id="jq-flot-graph-PC"> </div>');
|
|
$('#graph-container-PN').html('<div id="jq-flot-graph-PN"> </div>');
|
|
|
|
if (showWaitPannel) {
|
|
$('#graph-container-PP').children('div#jq-flot-graph-PP').html('<span class="control-label" style="margin-left: 10px;"><img src="@Url.Content("~/Content/images/load.gif")" /> loading...</span>');
|
|
}
|
|
}
|
|
|
|
function ShowCustomLegend() {
|
|
$('#graph-container-PP').find('.pa-flot-info').remove();
|
|
$('#graph-container-PC').find('.pa-flot-info').remove();
|
|
$('#graph-container-PN').find('.pa-flot-info').remove();
|
|
|
|
$('#performanceGraphPeriodsLabel').show();
|
|
}
|
|
|
|
function LoadPerformanceData() {
|
|
if (!$('#performanceChartMode').prop('checked'))
|
|
$("#performanceGraphTitle").text("Performance for Top 5 Project Types");
|
|
else
|
|
$("#performanceGraphTitle").text("Performance for Top 5 Projects by Costs");
|
|
|
|
if ($('#performanceMode').is(":checked")) {
|
|
InitPerformanceChart(true);
|
|
|
|
var graphMode = 0;
|
|
|
|
if (!$('#performanceChartMode').prop('checked'))
|
|
// Top 5 Project Types
|
|
graphMode = 2;
|
|
else
|
|
// Top 5 projects
|
|
graphMode = 1;
|
|
|
|
var url = '@Url.Action("GetPerformanceGraphData", "ForecastDashboard")';
|
|
var requestData = {
|
|
GraphMode: graphMode,
|
|
FilterGroups: $('#group').val() || [],
|
|
ProjectTypes: $('#filterClassification').val() || [],
|
|
Teams: getSelectedTeamsOrViews("Teams"),
|
|
Views: getSelectedTeamsOrViews("Views")
|
|
};
|
|
|
|
$.post(url, requestData, function (data) {
|
|
_perfDataForChart = data;
|
|
DrawPerformanceGraph();
|
|
})
|
|
.fail(function(jqXHR, textStatus, errorThrown) {
|
|
alert("Error");
|
|
});
|
|
}
|
|
else {
|
|
_perfDataForChart = null;
|
|
}
|
|
};
|
|
</script>
|