Muhammad Sulaiman Yusuf
2 years ago
8 changed files with 430 additions and 1376 deletions
@ -0,0 +1,284 @@
|
||||
var overlayControl = gantt.ext.overlay; |
||||
var today = new Date(); |
||||
|
||||
function toggleOverlay() { |
||||
if(overlayControl.isOverlayVisible(lineOverlay)){ |
||||
gantt.config.readonly = false; |
||||
overlayControl.hideOverlay(lineOverlay); |
||||
gantt.$root.classList.remove("overlay_visible"); |
||||
}else{ |
||||
gantt.config.readonly = true; |
||||
overlayControl.showOverlay(lineOverlay); |
||||
gantt.$root.classList.add("overlay_visible"); |
||||
} |
||||
} |
||||
|
||||
function getChartScaleRange(){ |
||||
var tasksRange = gantt.getSubtaskDates(); |
||||
var cells = []; |
||||
var scale = gantt.getScale(); |
||||
if(!tasksRange.start_date){ |
||||
return scale.trace_x; |
||||
} |
||||
|
||||
scale.trace_x.forEach(function(date){ |
||||
if(date >= tasksRange.start_date && date <= tasksRange.end_date){ |
||||
cells.push(date); |
||||
} |
||||
}); |
||||
return cells; |
||||
} |
||||
|
||||
function getProgressLine(){ |
||||
var tasks = gantt.getTaskByTime(); |
||||
var scale = gantt.getScale(); |
||||
var step = scale.unit; |
||||
|
||||
var timegrid = {}; |
||||
|
||||
var totalDuration = 0; |
||||
|
||||
gantt.eachTask(function(task){ |
||||
if(gantt.isSummaryTask(task)){ |
||||
return; |
||||
} |
||||
if(!task.duration){ |
||||
return; |
||||
} |
||||
|
||||
var currDate = gantt.date[scale.unit + "_start"](new Date(task.start_date)); |
||||
|
||||
while (currDate < task.end_date) { |
||||
var date = currDate; |
||||
currDate = gantt.date.add(currDate, 1, step); |
||||
|
||||
if (!gantt.isWorkTime({date: date, task: task, unit: step})) { |
||||
continue; |
||||
} |
||||
|
||||
var timestamp = currDate.valueOf(); |
||||
if (!timegrid[timestamp]){ |
||||
timegrid[timestamp] = { |
||||
planned: 0, |
||||
real: 0 |
||||
}; |
||||
} |
||||
timegrid[timestamp].planned += 1; |
||||
if (date <= today){ |
||||
timegrid[timestamp].real += 1 * (task.progress || 0); |
||||
} |
||||
totalDuration += 1; |
||||
} |
||||
|
||||
}); |
||||
|
||||
var cumulativePlannedDurations = []; |
||||
var cumulativeRealDurations = []; |
||||
var cumulativePredictedDurations = [] |
||||
var totalPlanned = 0; |
||||
var totalReal = 0; |
||||
|
||||
var chartScale = getChartScaleRange(); |
||||
var dailyRealProgress = -1; |
||||
var totalPredictedProgress = 0; |
||||
for(var i = 0; i < chartScale.length; i++){ |
||||
start = new Date(chartScale[i]); |
||||
end = gantt.date.add(start, 1, step); |
||||
var cell = timegrid[start.valueOf()] || {planned:0, real:0}; |
||||
totalPlanned = cell.planned + totalPlanned; |
||||
cumulativePlannedDurations.push(totalPlanned); |
||||
|
||||
if(start <= today) { |
||||
totalReal = (cell.real||0) + totalReal; |
||||
cumulativeRealDurations.push(totalReal); |
||||
cumulativePredictedDurations.push(null); |
||||
} else { |
||||
if(dailyRealProgress < 0){ |
||||
dailyRealProgress = totalReal / cumulativeRealDurations.length; |
||||
totalPredictedProgress = totalReal; |
||||
cumulativePredictedDurations.pop(); |
||||
cumulativePredictedDurations.push(totalPredictedProgress); |
||||
} |
||||
totalPredictedProgress += dailyRealProgress; |
||||
cumulativePredictedDurations.push(totalPredictedProgress); |
||||
} |
||||
} |
||||
|
||||
for(var i = 0; i < cumulativePlannedDurations.length; i++){ |
||||
cumulativePlannedDurations[i] = Math.round(cumulativePlannedDurations[i] / totalPlanned * 100); |
||||
if(cumulativeRealDurations[i] !== undefined){ |
||||
cumulativeRealDurations[i] = Math.round(cumulativeRealDurations[i] / totalPlanned * 100); |
||||
} |
||||
|
||||
if(cumulativePredictedDurations[i] !== null){ |
||||
cumulativePredictedDurations[i] = Math.round(cumulativePredictedDurations[i] / totalPlanned * 100); |
||||
} |
||||
} |
||||
return {planned: cumulativePlannedDurations, real: cumulativeRealDurations, predicted: cumulativePredictedDurations}; |
||||
} |
||||
|
||||
function getScalePaddings(){ |
||||
var scale = gantt.getScale(); |
||||
var dataRange = gantt.getSubtaskDates(); |
||||
|
||||
var chartScale = getChartScaleRange(); |
||||
var newWidth = scale.col_width; |
||||
var padding = { |
||||
left:0, |
||||
right:0 |
||||
}; |
||||
|
||||
if(dataRange.start_date){ |
||||
var yScaleLabelsWidth = 48; |
||||
// fine tune values in order to align chart with the scale range
|
||||
padding.left = gantt.posFromDate(dataRange.start_date) - yScaleLabelsWidth; |
||||
padding.right = scale.full_width - gantt.posFromDate(dataRange.end_date) - yScaleLabelsWidth; |
||||
padding.top = gantt.config.row_height - 12; |
||||
padding.bottom = gantt.config.row_height - 12; |
||||
} |
||||
return padding; |
||||
} |
||||
|
||||
var myChart; |
||||
var lineOverlay = overlayControl.addOverlay(function(container) { |
||||
|
||||
var scaleLabels = []; |
||||
|
||||
var chartScale = getChartScaleRange(); |
||||
|
||||
chartScale.forEach(function(date){ |
||||
scaleLabels.push(dateToStr(date)); |
||||
}); |
||||
|
||||
var values = getProgressLine(); |
||||
|
||||
var canvas = document.createElement("canvas"); |
||||
container.appendChild(canvas); |
||||
canvas.style.height = container.offsetHeight + "px"; |
||||
canvas.style.width = container.offsetWidth + "px"; |
||||
|
||||
var ctx = canvas.getContext("2d"); |
||||
if(myChart){ |
||||
myChart.destroy(); |
||||
} |
||||
myChart = new Chart(ctx, { |
||||
type: "line", |
||||
data: { |
||||
datasets: [ |
||||
{ |
||||
label: "Planned progress", |
||||
backgroundColor: "#001eff", |
||||
borderColor: "#001eff", |
||||
data: values.planned, |
||||
fill: false, |
||||
cubicInterpolationMode: 'monotone' |
||||
}, |
||||
{ |
||||
label: "Real progress", |
||||
backgroundColor: "#ff5454", |
||||
borderColor: "#ff5454", |
||||
data: values.real, |
||||
fill: false, |
||||
cubicInterpolationMode: 'monotone' |
||||
} |
||||
, |
||||
{ |
||||
label: "Real progress (predicted)", |
||||
backgroundColor: "#ff5454", |
||||
borderColor: "#ff5454", |
||||
data: values.predicted, |
||||
borderDash: [5, 10], |
||||
fill: false, |
||||
cubicInterpolationMode: 'monotone' |
||||
} |
||||
] |
||||
}, |
||||
options: { |
||||
responsive: true, |
||||
maintainAspectRatio: false, |
||||
layout: { |
||||
padding: getScalePaddings() |
||||
}, |
||||
onResize: function(chart, newSize) { |
||||
var dataRange = gantt.getSubtaskDates(); |
||||
if(dataRange.start_date){ |
||||
// align chart with the scale range
|
||||
chart.options.layout.padding = getScalePaddings(); |
||||
} |
||||
}, |
||||
legend: { |
||||
display: false |
||||
}, |
||||
tooltips: { |
||||
mode: "index", |
||||
intersect: false, |
||||
callbacks: { |
||||
label: function(tooltipItem, data) { |
||||
var dataset = data.datasets[tooltipItem.datasetIndex]; |
||||
return dataset.label + ": " + dataset.data[tooltipItem.index] + "%"; |
||||
} |
||||
} |
||||
}, |
||||
hover: { |
||||
mode: "nearest", |
||||
intersect: true |
||||
}, |
||||
scales: { |
||||
xAxes: [{ |
||||
labels: scaleLabels, |
||||
gridLines:{ |
||||
display: false |
||||
}, |
||||
ticks: { |
||||
display: false |
||||
} |
||||
}, |
||||
{ |
||||
position:"top", |
||||
labels: scaleLabels, |
||||
gridLines:{ |
||||
display: false |
||||
}, |
||||
ticks: { |
||||
display: false |
||||
} |
||||
} |
||||
], |
||||
yAxes: [{ |
||||
display: true, |
||||
gridLines: { |
||||
display:false |
||||
}, |
||||
ticks: { |
||||
display: true, |
||||
min: 0, |
||||
max: 100, |
||||
stepSize: 10, |
||||
callback: function(current) { |
||||
if (current > 100) {return "";} |
||||
return current + "%"; |
||||
} |
||||
} |
||||
}, |
||||
{ |
||||
display: true, |
||||
position: "right", |
||||
gridLines: { |
||||
display:false |
||||
}, |
||||
ticks: { |
||||
display: true, |
||||
min: 0, |
||||
max: 100, |
||||
stepSize: 10, |
||||
callback: function(current) { |
||||
if (current > 100) {return "";} |
||||
return current + "%"; |
||||
} |
||||
}} |
||||
] |
||||
} |
||||
} |
||||
}); |
||||
return canvas; |
||||
}); |
||||
Loading…
Reference in new issue