149 lines
6.0 KiB
Plaintext
149 lines
6.0 KiB
Plaintext
<h4 class="modal-title">Projects by Type</h4>
|
|
<div class="graph-container form-group-margin" id="class-pie-container" style="min-height:260px">
|
|
<div id="pie-container" class="pa-flot-container"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var _dataForPie;
|
|
var C_DATA_PIE_INNER_RADUIS = 0.6; // SA. ENV-793
|
|
var C_DATA_PIE_OUTER_RADUIS = 1; // SA. ENV-793
|
|
|
|
function DrawPie() {
|
|
if (!_dataForPie) {
|
|
if ($('#chkShowChart').is(":checked")) {
|
|
LoadPieData();
|
|
}
|
|
return;
|
|
}
|
|
var data = new Array();
|
|
var sum = 0;
|
|
var i;
|
|
var title;
|
|
var palette = PixelAdmin.settings.consts.COLORS;
|
|
//var palette = ["#ef3e5b", "#4b256d", "#3f647e", "#00b0b2", "#677c8a",
|
|
// "#c0362c", "#816c5b", "#668d3c", "#0097ac", "#007996",
|
|
|
|
// "#f26279", "#6f5495", "#688fad", "#52ccce", "#b2a296",
|
|
// "#ff8642", "#e7e3d7", "#b1dda1", "#3cd6e6", "#06c2f4",
|
|
|
|
// "#f68fa0", "#a09ed6", "#9fc1d3", "#95d47a", "#c9c9c9",
|
|
// "#f4dcb5", "#c3b7ac", "#eff3cf", "#97eaf4", "#fad8fa"]
|
|
var chartColors = [];
|
|
|
|
for (i = 0; i < _dataForPie.length; i++) {
|
|
if (_dataForPie[i].PresetColor) {
|
|
data.push({ label: _dataForPie[i].Label, value: _dataForPie[i].Value, color: _dataForPie[i].PresetColor, idx: i });
|
|
chartColors.push(_dataForPie[i].PresetColor);
|
|
}
|
|
else {
|
|
var c = getColorFromPalette(palette, i);
|
|
data.push({ label: _dataForPie[i].Label, value: _dataForPie[i].Value, color: c, idx: i });
|
|
chartColors.push(c);
|
|
}
|
|
sum += _dataForPie[i].Value;
|
|
}
|
|
$('#pieModeForecast').prop('checked') ? title = '$' + sum.formatNumber() : title = sum + ' weeks';
|
|
|
|
|
|
// Init Chart
|
|
$('#class-pie-container').html('<div id="class-pie" style="height:205px"></div>');
|
|
Morris.Donut({
|
|
element: 'class-pie',
|
|
data: data,
|
|
colors: chartColors,
|
|
resize: true,
|
|
labelColor: '#888',
|
|
formatter: function (y) { return Math.round(y * 100 / (sum != 0 ? sum : 1)) + "%" }
|
|
}).on('click', function (i, row) {
|
|
// Set classification filter
|
|
if (row.idx == null || _dataForPie.length <= row.idx)
|
|
return;
|
|
|
|
$('#pieChartColor').val(row.color);
|
|
if ($('#filterClassification').data('select2'))
|
|
$('#filterClassification').select2('val', _dataForPie[row.idx].TypeId);
|
|
else
|
|
$('#filterClassification').val(_dataForPie[row.idx].TypeId);
|
|
|
|
if (typeof applyForecastDashboardFilter === 'function')
|
|
applyForecastDashboardFilter(!$('#pieReload').is(":checked"));
|
|
});
|
|
|
|
$("#class-pie svg").click(function (e) {
|
|
if (isClickedPieCenter(e)) {
|
|
if ($('#filterClassification').data('select2'))
|
|
$('#filterClassification').select2('val', []);
|
|
else
|
|
$('#filterClassification').val([]);
|
|
if (typeof applyForecastDashboardFilter === 'function')
|
|
applyForecastDashboardFilter(!$('#pieReload').is(":checked"));
|
|
}
|
|
});
|
|
|
|
//legend
|
|
var legend = "";
|
|
$(data).each(function (i, e) {
|
|
legend += "<span><i style=\"background:" + e.color + "\"></i>" + e.label + "</span>";
|
|
});
|
|
$('#class-pie-container').append("<div class=\"pa-flot-info\">" + legend + "</div>");
|
|
|
|
var center = $('<div style="text-align:center;font-weight: bold;width:100%;margin-top:-10px;">' + title + '</div>');
|
|
if (sum > 999999999)
|
|
center.css('font-size', 'smaller');
|
|
$('#class-pie').append(center);
|
|
if (typeof redrawFreezeColumn === 'function')
|
|
redrawFreezeColumn();
|
|
}
|
|
|
|
// SA. ENV-793
|
|
function isClickedPieCenter(pos) {
|
|
var pieDivLeft = $("#class-pie svg").offset().left;
|
|
var pieDivTop = $("#class-pie svg").offset().top;
|
|
var pieDivWidth = $("#class-pie svg").width();
|
|
var pieDivHeight = $("#class-pie svg").height();
|
|
|
|
var pieCenterPointX = Math.floor(pieDivLeft + pieDivWidth / 2);
|
|
var pieCenterPointY = Math.floor(pieDivTop + pieDivHeight / 2);
|
|
|
|
var pieExternalRadius = Math.floor(Math.min(pieDivWidth, pieDivHeight) * C_DATA_PIE_OUTER_RADUIS / 2);
|
|
var pieRadius = Math.floor(pieExternalRadius * C_DATA_PIE_INNER_RADUIS);
|
|
|
|
var lengthToPoint = Math.sqrt(Math.pow(pieCenterPointX - pos.pageX, 2) + Math.pow(pieCenterPointY - pos.pageY, 2))
|
|
|
|
return lengthToPoint <= pieRadius;
|
|
}
|
|
|
|
function LoadPieData() {
|
|
if ($('#chkShowChart').is(":checked")) {
|
|
$('#class-pie-container').html('<div id="class-pie"><span class="control-label" style="margin-left: 10px;"><img src="@Url.Content("~/Content/images/load.gif")" /> loading...</span></div>');
|
|
|
|
var additionalFilters = $('#' + _additionalFiltersId).val();
|
|
var requestData = {
|
|
StartDate: $('#filterStartDateChart').val(),
|
|
EndDate: $('#filterEndDateChart').val(),
|
|
IsLaborMode: $('#expendituresMode').prop('checked'),
|
|
AdditionalParams: additionalFilters ? JSON.parse(additionalFilters) : {},
|
|
FilterGroups: $('#group').val() || [],
|
|
ProjectTypes: $('#filterClassification').val() || [],
|
|
ProjectStatuses: $('#filterStatus').val() || [],
|
|
StrategicGoals: $('#filterGoal').val() || [],
|
|
Teams: getSelectedTeamsOrViews("Teams"),
|
|
Views: getSelectedTeamsOrViews("Views"),
|
|
PresetColor: $('#pieChartColor').val(),
|
|
PieForecastCost: $('#pieModeForecast').prop('checked')
|
|
};
|
|
|
|
$.post('/ForecastDashboard/GetClassPieData', requestData, function (data) {
|
|
_dataForPie = data;
|
|
DrawPie();
|
|
});
|
|
}
|
|
}
|
|
|
|
function getColorFromPalette(palette, idx) {
|
|
if (palette.length < 1)
|
|
return null;
|
|
if (palette.length == 1)
|
|
return palette[0];
|
|
return palette[idx % (palette.length - 1)];
|
|
}
|
|
</script> |