|
|
@ -167,9 +167,8 @@ function adjustDataToZoom(dates, data, chartScaleRange, zoomLevel) { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// If there are remaining data points after the loop, add them to the result
|
|
|
|
|
|
|
|
if (aggregateValue > 0) { |
|
|
|
if (aggregateValue > 0) { |
|
|
|
newData.push(aggregateValue); |
|
|
|
newData.push(+(Math.round(aggregateValue+ "e+2") + "e-2")); |
|
|
|
newDates.push(dates[data.length - 1]); |
|
|
|
newDates.push(dates[data.length - 1]); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -179,42 +178,44 @@ function adjustDataToZoom(dates, data, chartScaleRange, zoomLevel) { |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function calculateMonthDifference(startDate, endDate) { |
|
|
|
|
|
|
|
let startYear = startDate.getFullYear(); |
|
|
|
|
|
|
|
let startMonth = startDate.getMonth(); |
|
|
|
|
|
|
|
let endYear = endDate.getFullYear(); |
|
|
|
|
|
|
|
let endMonth = endDate.getMonth(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let totalMonths = (endYear - startYear) * 12 + (endMonth - startMonth); |
|
|
|
|
|
|
|
return totalMonths; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function getScalePaddings(values) { |
|
|
|
function getScalePaddings(values) { |
|
|
|
let zoom = gantt.ext.zoom.getCurrentLevel(); |
|
|
|
let zoom = gantt.ext.zoom.getCurrentLevel(); |
|
|
|
var scale = gantt.getScale(); |
|
|
|
var scale = gantt.getScale(); |
|
|
|
var dataRange = gantt.getSubtaskDates(); |
|
|
|
var dataRange = gantt.getSubtaskDates(); |
|
|
|
// let minDate = new Date();
|
|
|
|
|
|
|
|
// let maxDate = new Date();
|
|
|
|
|
|
|
|
let minValueDate = new Date(values.dates[0]); |
|
|
|
let minValueDate = new Date(values.dates[0]); |
|
|
|
let maxValueDate = new Date(values.dates[values.dates.length - 1]); |
|
|
|
let maxValueDate = new Date(values.dates[values.dates.length - 1]); |
|
|
|
|
|
|
|
|
|
|
|
// gantt.eachTask(function(task){
|
|
|
|
|
|
|
|
// let plannedEarlier = task.planned_start < task.start_date;
|
|
|
|
|
|
|
|
// let plannedLater = task.planned_end > task.end_date;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (plannedEarlier) {
|
|
|
|
|
|
|
|
// minDate = new Date(Math.min(minDate.getTime(), task.planned_start.getTime()));
|
|
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
|
|
// minDate = new Date(Math.min(minDate.getTime(), task.start_date.getTime()));
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (plannedLater) {
|
|
|
|
|
|
|
|
// maxDate = new Date(Math.max(maxDate.getTime(), task.planned_end.getTime()));
|
|
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
|
|
// maxDate = new Date(Math.max(maxDate.getTime(), task.end_date.getTime()));
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var padding = { |
|
|
|
var padding = { |
|
|
|
left: 0, |
|
|
|
left: 0, |
|
|
|
right: 0 |
|
|
|
right: 0 |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
if (dataRange.start_date) { |
|
|
|
if(dataRange.start_date){ |
|
|
|
var yScaleLabelsWidth = 48; |
|
|
|
var yScaleLabelsWidth = 48; |
|
|
|
// fine tune values in order to align chart with the scale range
|
|
|
|
let monthDifference = calculateMonthDifference(minValueDate, maxValueDate); |
|
|
|
padding.left = gantt.posFromDate(minValueDate); |
|
|
|
if(monthDifference >= 0 && monthDifference <= 3) { |
|
|
|
padding.right = scale.full_width - gantt.posFromDate(maxValueDate); |
|
|
|
padding.left = gantt.posFromDate(minValueDate) +5; |
|
|
|
|
|
|
|
padding.right = scale.full_width - gantt.posFromDate(maxValueDate) - yScaleLabelsWidth; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if(monthDifference >= 4 && monthDifference <= 7) { |
|
|
|
|
|
|
|
padding.left = gantt.posFromDate(minValueDate) - 2; |
|
|
|
|
|
|
|
padding.right = scale.full_width - gantt.posFromDate(maxValueDate) - yScaleLabelsWidth; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if(monthDifference >= 8) { |
|
|
|
|
|
|
|
padding.left = gantt.posFromDate(minValueDate) - 2; |
|
|
|
|
|
|
|
padding.right = scale.full_width - gantt.posFromDate(maxValueDate) - yScaleLabelsWidth; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
padding.top = gantt.config.row_height - 12; |
|
|
|
padding.top = gantt.config.row_height - 12; |
|
|
|
padding.bottom = gantt.config.row_height - 12; |
|
|
|
padding.bottom = gantt.config.row_height - 12; |
|
|
|
} |
|
|
|
} |
|
|
@ -222,33 +223,23 @@ function getScalePaddings(values) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var myChart; |
|
|
|
var myChart; |
|
|
|
var lineOverlay = overlayControl.addOverlay(function (container) { |
|
|
|
var lineOverlay = overlayControl.addOverlay(function(container) { |
|
|
|
var values = getProgressLine(); |
|
|
|
var values = getProgressLine(); |
|
|
|
var scaleLabels = []; |
|
|
|
var scaleLabels = []; |
|
|
|
|
|
|
|
|
|
|
|
// if(parts[2] && parts[2] == '1'){
|
|
|
|
values.planned = values.planned.map(value => +(Math.round(value + "e+2") + "e-2")); |
|
|
|
// values.dates.forEach(function(date){
|
|
|
|
values.real = values.real.map(value => +(Math.round(value + "e+2") + "e-2")); |
|
|
|
// var dateScale = new Date(date);
|
|
|
|
values.dates.forEach(function(date){ |
|
|
|
// scaleLabels.push(dateToStr(dateScale));
|
|
|
|
var dateScale = new Date(date); |
|
|
|
// })
|
|
|
|
scaleLabels.push(dateToStr(dateScale)); |
|
|
|
// } else {
|
|
|
|
}) |
|
|
|
// var chartScale = getChartScaleRange();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// chartScale.forEach(function(date){
|
|
|
|
|
|
|
|
// scaleLabels.push(dateToStr(date));
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
values.dates.forEach(function (date) { |
|
|
|
|
|
|
|
var dateScale = new Date(date); |
|
|
|
|
|
|
|
scaleLabels.push(dateToStr(dateScale)); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
var canvas = document.createElement("canvas"); |
|
|
|
var canvas = document.createElement("canvas"); |
|
|
|
container.appendChild(canvas); |
|
|
|
container.appendChild(canvas); |
|
|
|
canvas.style.height = container.offsetHeight + "px"; |
|
|
|
canvas.style.height = container.offsetHeight + "px"; |
|
|
|
canvas.style.width = container.offsetWidth + "px"; |
|
|
|
canvas.style.width = container.offsetWidth + "px"; |
|
|
|
|
|
|
|
|
|
|
|
var ctx = canvas.getContext("2d"); |
|
|
|
var ctx = canvas.getContext("2d"); |
|
|
|
if (myChart) { |
|
|
|
if(myChart){ |
|
|
|
myChart.destroy(); |
|
|
|
myChart.destroy(); |
|
|
|
} |
|
|
|
} |
|
|
|
myChart = new Chart(ctx, { |
|
|
|
myChart = new Chart(ctx, { |
|
|
@ -279,9 +270,9 @@ var lineOverlay = overlayControl.addOverlay(function (container) { |
|
|
|
layout: { |
|
|
|
layout: { |
|
|
|
padding: getScalePaddings(values) |
|
|
|
padding: getScalePaddings(values) |
|
|
|
}, |
|
|
|
}, |
|
|
|
onResize: function (chart, newSize) { |
|
|
|
onResize: function(chart, newSize) { |
|
|
|
var dataRange = gantt.getSubtaskDates(); |
|
|
|
var dataRange = gantt.getSubtaskDates(); |
|
|
|
if (dataRange.start_date) { |
|
|
|
if(dataRange.start_date){ |
|
|
|
// align chart with the scale range
|
|
|
|
// align chart with the scale range
|
|
|
|
chart.options.layout.padding = getScalePaddings(values); |
|
|
|
chart.options.layout.padding = getScalePaddings(values); |
|
|
|
} |
|
|
|
} |
|
|
@ -293,7 +284,7 @@ var lineOverlay = overlayControl.addOverlay(function (container) { |
|
|
|
mode: "index", |
|
|
|
mode: "index", |
|
|
|
intersect: false, |
|
|
|
intersect: false, |
|
|
|
callbacks: { |
|
|
|
callbacks: { |
|
|
|
label: function (tooltipItem, data) { |
|
|
|
label: function(tooltipItem, data) { |
|
|
|
var dataset = data.datasets[tooltipItem.datasetIndex]; |
|
|
|
var dataset = data.datasets[tooltipItem.datasetIndex]; |
|
|
|
return dataset.label + ": " + dataset.data[tooltipItem.index] + "%"; |
|
|
|
return dataset.label + ": " + dataset.data[tooltipItem.index] + "%"; |
|
|
|
} |
|
|
|
} |
|
|
@ -306,28 +297,28 @@ var lineOverlay = overlayControl.addOverlay(function (container) { |
|
|
|
scales: { |
|
|
|
scales: { |
|
|
|
xAxes: [{ |
|
|
|
xAxes: [{ |
|
|
|
labels: scaleLabels, |
|
|
|
labels: scaleLabels, |
|
|
|
gridLines: { |
|
|
|
gridLines:{ |
|
|
|
display: false |
|
|
|
display: false |
|
|
|
}, |
|
|
|
}, |
|
|
|
ticks: { |
|
|
|
ticks: { |
|
|
|
display: false |
|
|
|
display: false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
position: "top", |
|
|
|
position:"top", |
|
|
|
labels: scaleLabels, |
|
|
|
labels: scaleLabels, |
|
|
|
gridLines: { |
|
|
|
gridLines:{ |
|
|
|
display: false |
|
|
|
display: false |
|
|
|
}, |
|
|
|
}, |
|
|
|
ticks: { |
|
|
|
ticks: { |
|
|
|
display: false |
|
|
|
display: false |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
], |
|
|
|
yAxes: [{ |
|
|
|
yAxes: [{ |
|
|
|
display: true, |
|
|
|
display: true, |
|
|
|
gridLines: { |
|
|
|
gridLines: { |
|
|
|
display: false |
|
|
|
display:false |
|
|
|
}, |
|
|
|
}, |
|
|
|
ticks: { |
|
|
|
ticks: { |
|
|
|
display: true, |
|
|
|
display: true, |
|
|
|