296 lines
10 KiB
Plaintext
296 lines
10 KiB
Plaintext
@* ROW 1 COL 1 - CARD: DONUT CHART ------------------------------------- *@
|
|
|
|
<table class="pv-abs pv-transparent" id="donut-total">
|
|
<tr>
|
|
<td align="center">
|
|
<div>Total </div>
|
|
<div style="font-weight:bold" id="donut-total-value"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div class="pv-menu k-content">
|
|
<div class="btn-group pull-right">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="fa fa-ellipsis-h"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<input type="checkbox" data-key="pieType" name="pieType" id="pieModeType" class="switcher px" />
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" data-key="pieMode" name="pieMode" id="pieModeForecast" class="switcher px" />
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" data-key="expendituresMode" name="expendituresMode" id="expendituresMode" class="switcher px" checked="checked" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="pv-chart" id="chartDonut1" style="height: 300px; z-index: 1;"></div>
|
|
<div id="legenddiv"></div>
|
|
|
|
<script>
|
|
var donutData = null;
|
|
var otherDonutData = null;
|
|
var projectsFilterArray = [];
|
|
var goalsFilterArray = [];
|
|
var donutRender = false;
|
|
|
|
init.push(function () {
|
|
@if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 11)
|
|
{
|
|
<text>AmCharts.ready(function (a) { loadDonutData(); });</text>
|
|
}
|
|
else
|
|
{
|
|
<text>loadDonutData();</text>
|
|
}
|
|
initDonutMenu();
|
|
totalPosition();
|
|
});
|
|
|
|
function totalPosition() {
|
|
if ($('#pieModeForecast').prop('checked')) {
|
|
if ($(window).width() > 1610) {
|
|
$("#donut-total").css('margin-left', '39%');
|
|
} else {
|
|
$("#donut-total").css('margin-left', '34%');
|
|
}
|
|
} else {
|
|
filterDonutChange("s2id_StrategicGoals");
|
|
if ($(window).width() > 1610) {
|
|
$("#donut-total").css('margin-left', '41%');
|
|
} else {
|
|
$("#donut-total").css('margin-left', '36%');
|
|
}
|
|
}
|
|
}
|
|
|
|
function initDonutMenu() {
|
|
$('#pieModeType').switcher({
|
|
on_state_content: 'Type',
|
|
off_state_content: 'Goal'
|
|
});
|
|
$('#pieModeForecast').switcher({
|
|
on_state_content: 'Cost',
|
|
off_state_content: 'Time'
|
|
});
|
|
$('#expendituresMode').switcher({
|
|
on_state_content: 'Labor',
|
|
off_state_content: 'Non-labor'
|
|
});
|
|
$('#pieModeForecast').click(function () {
|
|
saveForecastDashboardPreferences();
|
|
loadDonutData();
|
|
totalPosition();
|
|
});
|
|
$('#expendituresMode').click(function () {
|
|
saveForecastDashboardPreferences();
|
|
loadDonutData();
|
|
});
|
|
$('#pieModeType').click(function () {
|
|
saveForecastDashboardPreferences();
|
|
loadDonutData();
|
|
});
|
|
}
|
|
|
|
function addArrayToFilter(filterId, item) {
|
|
var filterArray = $("#" + filterId).select2('val');
|
|
filterArray.push(item);
|
|
$('#' + filterId).select2('val', filterArray);
|
|
}
|
|
|
|
function removeArrayFromFilter(filterId, item) {
|
|
var filterArray = $("#" + filterId).select2('val');
|
|
var index = filterArray.indexOf(item);
|
|
if (index > -1) {
|
|
filterArray.splice(index, 1);
|
|
}
|
|
$('#' + filterId).select2('val', filterArray);
|
|
}
|
|
|
|
function itemClick(event) {
|
|
if (event.dataItem.dataContext.TypeId.length > 0 && event.dataItem.dataContext.TypeId[0] == '00000000-0000-0000-0000-000000000000') {
|
|
return null;
|
|
} else {
|
|
if ($('#pieModeType').prop('checked')) {
|
|
for (var i = 0; i < event.dataItem.dataContext.TypeId.length; i++) {
|
|
if (projectsFilterArray.includes(event.dataItem.dataContext.TypeId[i])) {
|
|
if (!donutRender) {
|
|
removeArrayFromFilter('s2id_ProjectTypes', event.dataItem.dataContext.TypeId[i]);
|
|
}
|
|
|
|
var index = projectsFilterArray.indexOf(event.dataItem.dataContext.TypeId[i]);
|
|
if (index > -1) {
|
|
projectsFilterArray.splice(index, 1);
|
|
}
|
|
} else {
|
|
if (!donutRender) {
|
|
addArrayToFilter('s2id_ProjectTypes', event.dataItem.dataContext.TypeId[i]);
|
|
}
|
|
|
|
projectsFilterArray.push(event.dataItem.dataContext.TypeId[i]);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
for (var i = 0; i < event.dataItem.dataContext.TypeId.length; i++) {
|
|
if (goalsFilterArray.includes(event.dataItem.dataContext.TypeId[i])) {
|
|
if (!donutRender) {
|
|
removeArrayFromFilter('s2id_StrategicGoals', event.dataItem.dataContext.TypeId[i]);
|
|
}
|
|
|
|
var index = goalsFilterArray.indexOf(event.dataItem.dataContext.TypeId[i]);
|
|
if (index > -1) {
|
|
goalsFilterArray.splice(index, 1);
|
|
}
|
|
} else {
|
|
if (!donutRender) {
|
|
addArrayToFilter('s2id_StrategicGoals', event.dataItem.dataContext.TypeId[i]);
|
|
}
|
|
|
|
goalsFilterArray.push(event.dataItem.dataContext.TypeId[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!donutRender) {
|
|
var item = event.dataItem.dataContext;
|
|
if (item.PieDatas != null && donutData != null) {
|
|
var data = donutData.slice();
|
|
data.splice(donutData.length - 1, 1);
|
|
data = data.concat(item.PieDatas);
|
|
renderDonut(data);
|
|
}
|
|
applyForecastDashboardFilter();
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function renderDonut(data) {
|
|
var sum = 0;
|
|
var chartColors = [];
|
|
for (i = 0; i < data.length; i++) {
|
|
if (data[i].PresetColor) {
|
|
chartColors.push(data[i].PresetColor);
|
|
}
|
|
else {
|
|
var c = getColorFromPalette(i);
|
|
chartColors.push(c);
|
|
}
|
|
sum += data[i].Value;
|
|
}
|
|
var total = $('#pieModeForecast').prop('checked') ? title = '$' + sum.formatNumber() : title = sum + ' weeks';
|
|
$("#donut-total-value").html(total);
|
|
chart = findChart("chartDonut1");
|
|
var legend = new AmCharts.AmLegend();
|
|
legend.marginLeft = 5;
|
|
legend.markerLabelGap = 3;
|
|
legend.valueWidth = 30;
|
|
legend.align = "center";
|
|
legend.markerType = "square";
|
|
legend.markerSize = 11;
|
|
legend.position = "right";
|
|
legend.marginRight = 16;
|
|
legend.autoMargins = false;
|
|
legend.valueText = $('#pieModeForecast').prop('checked') ? "$[[value]]" : "[[value]]";
|
|
chart.addLegend(legend, "legenddiv");
|
|
|
|
chart.addListener("clickSlice", itemClick);
|
|
|
|
chart.validateNow();
|
|
|
|
updateChart("chartDonut1", data, chartColors);
|
|
|
|
$(".chartwrapper").toggleClass("loading");
|
|
|
|
//var index = data.length - donutData.length;
|
|
//if (index > 0) {
|
|
// donutRender = true;
|
|
// for (var i = (data.length - index - 1) ; i < data.length - 1; i++) {
|
|
// chart.clickSlice(i);
|
|
// }
|
|
// donutRender = false;
|
|
//}
|
|
|
|
////filterDonutChange("s2id_ProjectTypes");
|
|
////filterDonutChange("s2id_StrategicGoals");
|
|
}
|
|
|
|
function loadDonutData() {
|
|
//TODO: loading indicator
|
|
var filterDataDonut = {};
|
|
|
|
filterDataDonut["IsTypeMode"] = $('#pieModeType').prop('checked');
|
|
filterDataDonut["IsLaborMode"] = $('#expendituresMode').prop('checked');
|
|
filterDataDonut["PieForecastCost"] = $('#pieModeForecast').prop('checked');
|
|
|
|
//$(".chartwrapper").toggleClass("loading");
|
|
$.post("@Url.Action("GetClassPieDataForNewDashboard", "ForecastDashboard")", filterDataDonut)
|
|
.done(function (response) {
|
|
donutData = response.data;
|
|
otherDonutData = donutData[donutData.length - 1].PieDatas;
|
|
renderDonut(response.data);
|
|
});
|
|
}
|
|
|
|
function filterDonutChange(filterId) {
|
|
var filterArray = $("#" + filterId).select2('val');
|
|
var diff = [];
|
|
if (filterId == "s2id_ProjectTypes") {
|
|
diff = arrayDiff(filterArray, projectsFilterArray);
|
|
}
|
|
if (filterId == "s2id_StrategicGoals") {
|
|
diff = arrayDiff(filterArray, goalsFilterArray);
|
|
}
|
|
|
|
var chart = findChart("chartDonut1");
|
|
var chartData = chart.chartData;
|
|
donutRender = true;
|
|
for (var i = 0; i < chartData.length; i++) {
|
|
if (diff.includes(chartData[i].dataContext.TypeId[0])) {
|
|
chart.clickSlice(i);
|
|
} else {
|
|
var otherData = chartData[i].dataContext.PieDatas;
|
|
if (otherData != null) {
|
|
for (var j = 0; j < otherData.length; j++) {
|
|
if (diff.includes(otherData[j].TypeId[0])) {
|
|
var data = donutData.slice();
|
|
data.splice(donutData.length - 1, 0, otherData[j]);
|
|
otherData.splice(j, 1);
|
|
renderDonut(data);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
donutRender = false;
|
|
}
|
|
|
|
function arrayDiff(a1, a2) {
|
|
|
|
var a = [], diff = [];
|
|
|
|
for (var i = 0; i < a1.length; i++) {
|
|
a[a1[i]] = true;
|
|
}
|
|
|
|
for (var i = 0; i < a2.length; i++) {
|
|
if (a[a2[i]]) {
|
|
delete a[a2[i]];
|
|
} else {
|
|
a[a2[i]] = true;
|
|
}
|
|
}
|
|
|
|
for (var k in a) {
|
|
diff.push(k);
|
|
}
|
|
|
|
return diff;
|
|
};
|
|
|
|
</script> |