Last active
October 21, 2017 04:50
-
-
Save Sampath-Lokuge/e4ba50011b421dc25fe51bb60f5966af to your computer and use it in GitHub Desktop.
Formula of paid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this.remainingAmount = this.totalOfBudgetAndContingency - spent; | |
| this.paidPercentage = (this.amountPaid / this.totalOfBudgetAndContingency) * 100; | |
| if (this.paidPercentage > 80) { | |
| this.remainingPercentageExcludingPaid = 0; | |
| this.contingencyPercentage = (totalContingency / this.totalOfBudgetAndContingency) * 100; | |
| this.paidPercentage = 100 - this.contingencyPercentage; | |
| } else { | |
| this.remainingPercentageExcludingPaid = (this.remainingAmount / this.totalOfBudgetAndContingency) * 100; | |
| this.contingencyPercentage = (totalContingency / this.totalOfBudgetAndContingency) * 100; | |
| } |
Author
Sampath-Lokuge
commented
Oct 21, 2017
•
//show Chart
showChart(totalOfBudgetAndContingency: number, paidPercentage: number, remainingPercentageExcludingPaid: number, contingencyPercentage: number,
spent: number, spentOnChart: number, remainingAmount: number, daysToGo: number) {
let chart = HighCharts.chart('chartContainer', {
"chart": {
"height": 400,
"renderTo": "container",
"plotBackgroundColor": null,
"plotBackgroundImage": null,
"plotBorderWidth": 0,
"plotShadow": false,
"backgroundColor": "white"
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": true
},
"title": {
"useHtml": true,
"text": "<div style=\"font-size: 20px;\">Remaining</div><br><div style=\"font-size: 20px;color:" + this.spentOverColor + "\">" + remainingAmount.toLocaleString() + "</div>",
"align": "center",
"verticalAlign": "top",
"y": 120,
},
"subtitle": {
"useHtml": true,
"text": "<div style=\"font-size: 12px;\">Days To Go<br><div style=\"font-size: 12px;\">" + daysToGo + "</div>",
"align": "center",
"verticalAlign": "top",
"y": 165,
},
"pane": {
"center": ["50%", "47%"],
"size": "78%",
"startAngle": -90,
"endAngle": 90,
"background": {
"borderWidth": 0,
"backgroundColor": "transparent",
"innerRadius": "95%",
"outerRadius": "100%",
"shape": "arc"
}
},
"yAxis": [{
"lineWidth": 0,
"min": 0,
"max": totalOfBudgetAndContingency, /* Budget + Contingency */
tickColor: 'white',
tickWidth: 4,
minorTickInterval: 'auto',
minorTickLength: 3,
minorTickPosition: 'inside',
tickPixelInterval: 50,
tickPosition: '',
tickLength: 30,
"labels": {
"enabled": true,
distance: 30,
style: {
color: '#50a2a7',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
"title": {
"text": "",
"useHTML": false,
"y": 80
},
"pane": 0
}],
"plotOptions": {
"series": {
"enableMouseTracking": false
},
"pie": {
"dataLabels": {
"enabled": true,
"distance": 0,
"style": {
"fontWeight": "bold",
"color": "white",
"textShadow": "0px 1px 2px black"
}
},
"startAngle": -90,
"endAngle": 90,
"center": ["50%", "47%"]
},
"gauge": {
"dataLabels": {
"enabled": false
},
"pivot": {
"radius": 80,
"borderWidth": 1,
"borderColor": "transparent",
"backgroundColor": "white"
},
"dial": {
"radius": "100%",
"backgroundColor": "#e9b44c",
"borderColor": "",
"baseWidth": 60,
"topWidth": 1,
"baseLength": "5%",
"rearLength": "5%"
}
}
},
"series": [{
"type": "pie",
"name": "Budget",
"innerSize": "85%",
"data": [{
"y": paidPercentage, /* Paid as percentage */
"name": "",
color: 'rgba(80,162,167, 0.3)'
}, {
"y": remainingPercentageExcludingPaid, /* Remaining as percentage excluding paid */
"name": "",
color: 'rgba(187,187,187, 0.2)'
}, {
"y": contingencyPercentage, /* Contingency as percentage */
"name": "",
color: 'rgba(155,41,21, 0.9)'
}]
}, {
"type": "gauge",
"name": "Spent",
"data": [spentOnChart], /* Spent */
"dial": {
"rearLength": 0
}
}],
});
}
//calculate Chart Details
calculateChartDetails(data: ProjectDetail) {
this.budgetGroupViewList = [];
let totalContingency: number = 0;
let totalOfBudgetAndContingency: number = 0;
let totalBudget: number = 0;
if (data.budgetList == null) return;
forEach(data.budgetList, (b: Budget) => {
let budgetGroupViewData = new DtoBudgetGroup();
budgetGroupViewData.budgetGroup = b.budgetGroup;
budgetGroupViewData.budgetTotal = b.amount;
budgetGroupViewData.transactions = data.transactions;
totalContingency = totalContingency + Number(b.amount) * b.contingency / 100;
totalOfBudgetAndContingency = totalOfBudgetAndContingency + Number(b.amount) + totalContingency;
totalBudget = totalBudget + Number(b.amount);
let transactionTotal = 0;
forEach(data.transactions, (t: Transaction) => {
if (b.budgetGroup.id == t.budget.budgetGroup.id) {
transactionTotal = transactionTotal + t.totalPrice;
}
});
if (transactionTotal > budgetGroupViewData.budgetTotal) {
budgetGroupViewData.isTransactionOver = true;
}
budgetGroupViewData.transactionTotal = transactionTotal;
this.budgetGroupViewList.push(budgetGroupViewData);
});
this.totalOfBudgetAndContingency = totalOfBudgetAndContingency;
this.daysToGo = moment(data.completionDate).diff(moment(), 'days');
let amountPaid: number = 0;
let spent: number = 0;
forEach(data.transactions, (t: Transaction) => {
if (t.isPaid) amountPaid = amountPaid + t.totalPrice;
spent = spent + t.totalPrice;
});
this.amountPaid = amountPaid;
if (spent > this.totalOfBudgetAndContingency) {
this.spentOnChart = this.totalOfBudgetAndContingency;
this.spent = spent;
} else {
this.spent = this.spentOnChart = spent;
}
if (spent > totalBudget) {
this.spentOverColor = "#9B2915";
}
this.remainingAmount = this.totalOfBudgetAndContingency - spent;
this.paidPercentage = (this.amountPaid / this.totalOfBudgetAndContingency) * 100;
this.contingencyPercentage = (totalContingency / this.totalOfBudgetAndContingency) * 100;
if (this.paidPercentage > (100 - this.contingencyPercentage)) {
this.remainingPercentageExcludingPaid = 0;
this.paidPercentage = 100 - this.contingencyPercentage;
} else {
this.remainingPercentageExcludingPaid = (this.remainingAmount / this.totalOfBudgetAndContingency) * 100;
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment