Lodash Ideal Line Calculation
Nohting more to say...
by Trever Shick
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.4/highcharts.js"></script>
<div id="console-log"></div>
Workdays:<input id="w" size="3" type="text" value="10">
Total Points:<input size="3" id="t" type="text" value="83"/>
Accepted Points: <input size="3" id="a" type="text" value="40"/>
<input type="button" onclick="update()" value="Update"/>
<div id="chart"></div>
<script>
$(buildChart);
</script>
CSS
body {
background-color:black;
color: white;
}
.console-line {
font-family: monospace;
margin: 2px;
white-space: nowrap;
margin:0;
padding:2px;
}
JavaScript
var consoleLine = "<p class=\"console-line\"></p>";
c = {
log: function (text, obj) {
var objText = obj ? JSON.stringify(obj) : "";
$("#console-log").append($(consoleLine).html(text + " " + objText));
},
reset: function() { $("#console-log").html(""); }
};
c.reset();
var workdays = 10;
var totalPoints = 83;
var accepted = 40;
var late = 20; // gt 20
function update() {
workdays = parseInt($("#w").val(),10);
totalPoints = parseInt($("#t").val(),10);
accepted = parseInt($("#a").val(),10);
buildChart();
};
function buildChart() {
var ideal = _()
.range(workdays)
.map(function(value) {
return totalPoints / workdays * (1+value);
})
.map(function(idealPoints) {
var percentFromIdeal= Math.round(100 *(idealPoints-accepted)/idealPoints);
return {
ideal: Math.round(idealPoints),
accepted: accepted,
percentComplete: Math.round(100 * (accepted/idealPoints)),
risk: idealPoints,
late: idealPoints - ((totalPoints - idealPoints) * late /100)
};
})
.value();
console.table(ideal);
c.log("Out->",ideal);
$('#chart').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Accepted Points vs Ideal'
},
xAxis: {
categories: _.range(1,11)
},
yAxis: [{
title: {
text: 'Accepted Points',
color:'blue'
},
min:0,
},{
title: {
text: 'Percent'
},
labels: {
format: '{value} %'
},
min:0,
max:100,
dataLabels: {enabled:true},
opposite:true
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign:...