You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

334 lines
9.4 KiB

2 years ago
var overlayControl = gantt.ext.overlay;
var today = new Date();
var return_first;
var parts = [];
var sCurvePayload = {
period: 'week',
project_id: proyekId,
gantt_id: ganttId
};
function callback(response) {
return_first = response;
}
function messageListener(event) {
if (event.data && event.data.action === 'sendUrl') {
const parentUrl = event.data.url;
const isHierarchy = event.data.isHierarchy;
// Split the remaining path by "/"
parts = parentUrl.split("/");
if (parts[7] && parts[7] == "1" && isHierarchy) {
$.ajax({
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
url: `${base_url}project/calculate-s-curve`,
type: "POST",
data: JSON.stringify(sCurvePayload),
success: function (data) {
callback(data)
window.removeEventListener('message', messageListener);
}
});
$.ajax({
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
url: `${base_url}project/s-curve-command`,
type: "POST",
data: JSON.stringify(sCurvePayload),
});
} else {
$.ajax({
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${token}`
},
url: `${base_url}project/get-s-curve`,
type: "POST",
data: JSON.stringify(sCurvePayload),
success: function (data) {
callback(data)
window.removeEventListener('message', messageListener);
}
});
}
}
}
function getSCurveData() {
window.parent.postMessage({ action: 'getUrl' }, '*');
window.addEventListener('message', messageListener);
};
2 years ago
function toggleOverlay() {
if (overlayControl.isOverlayVisible(lineOverlay)) {
2 years ago
gantt.config.readonly = false;
overlayControl.hideOverlay(lineOverlay);
gantt.$root.classList.remove("overlay_visible");
} else {
2 years ago
gantt.config.readonly = true;
overlayControl.showOverlay(lineOverlay);
gantt.$root.classList.add("overlay_visible");
}
}
function getChartScaleRange() {
2 years ago
var tasksRange = gantt.getSubtaskDates();
var cells = [];
var scale = gantt.getScale();
if (!tasksRange.start_date) {
2 years ago
return scale.trace_x;
}
scale.trace_x.forEach(function (date) {
2 years ago
// if(date >= tasksRange.start_date && date <= tasksRange.end_date){
// cells.push(date);
// }
cells.push(date);
2 years ago
});
return cells;
}
1 year ago
function getProgressLine() {
// As long as the progress data length is same with chart scale range (period) then it's fine.
getSCurveData();
var cumulativePlannedDurations = return_first.data[0].data.percentagePlan;
var cumulativeRealDurations = return_first.data[0].data.percentageReal;
1 year ago
cumulativeRealDurations[cumulativeRealDurations.length - 1] = Math.ceil(cumulativeRealDurations[cumulativeRealDurations.length - 1]);
var maxPlan = cumulativePlannedDurations[cumulativePlannedDurations.length - 1]
var maxReal = cumulativeRealDurations[cumulativeRealDurations.length - 1]
var dates = return_first.data[0].data.date;
// Determine the appropriate data points based on the Gantt chart zoom level
var chartScaleRange = getChartScaleRange();
var zoomLevel = gantt.ext.zoom.getCurrentLevel();
1 year ago
// Adjust data points based on the zoom level
var plannedDurations, realDurations;
1 year ago
if (zoomLevel === 2) {
// Adjust data to monthly points
plannedDurations = adjustDataToZoom(dates, cumulativePlannedDurations, chartScaleRange, 2).data;
realDurations = adjustDataToZoom(dates, cumulativeRealDurations, chartScaleRange, 2).data;
1 year ago
dates = adjustDataToZoom(dates, cumulativeRealDurations, chartScaleRange, 2).dates;
} else if (zoomLevel === 1) {
// Adjust data to weekly points
plannedDurations = adjustDataToZoom(dates, cumulativePlannedDurations, chartScaleRange, 1).data;
realDurations = adjustDataToZoom(dates, cumulativeRealDurations, chartScaleRange, 1).data;
1 year ago
dates = adjustDataToZoom(dates, cumulativeRealDurations, chartScaleRange, 1).dates;
} else {
// Default: Use daily data points
plannedDurations = cumulativePlannedDurations;
realDurations = cumulativeRealDurations;
1 year ago
}
if (Math.floor(maxReal) > 110 || Math.floor(maxPlan) > 110) {
1 year ago
plannedDurations = plannedDurations.map((item) => {
return item / maxPlan * 100;
1 year ago
})
realDurations = realDurations.map((item) => {
if (maxPlan >= 200) {
return item / maxPlan * 100;
} else {
return item / maxReal * 100;
}
1 year ago
})
}
return { planned: plannedDurations, real: realDurations, dates: dates };
1 year ago
}
function adjustDataToZoom(dates, data, chartScaleRange, zoomLevel) {
// Implement logic to adjust data points based on the Gantt chart zoom level
// For example, if zoomLevel is 'month', aggregate daily data to monthly data
1 year ago
// Placeholder logic: This example assumes that the chartScaleRange is in days
var newData = [];
var newDates = [];
var aggregateValue = 0;
1 year ago
for (var i = 0; i < data.length; i++) {
aggregateValue = data[i];
1 year ago
if (zoomLevel === 2 && i % 30 === 0) {
// Aggregate data for each month (assuming 30 days in a month)
newData.push(aggregateValue);
newDates.push(dates[i]);
aggregateValue = 0;
} else if (zoomLevel === 1 && (i + 1) % 7 === 1) {
// Aggregate data for each week
newData.push(aggregateValue);
newDates.push(dates[i]);
aggregateValue = 0;
}
}
1 year ago
if (aggregateValue > 0) {
5 months ago
newData.push(+(Math.round(aggregateValue+ "e+2") + "e-2"));
newDates.push(dates[data.length - 1]);
}
1 year ago
return {
data: newData,
dates: newDates
};
2 years ago
}
5 months ago
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) {
1 year ago
let zoom = gantt.ext.zoom.getCurrentLevel();
2 years ago
var scale = gantt.getScale();
var dataRange = gantt.getSubtaskDates();
let minValueDate = new Date(values.dates[0]);
let maxValueDate = new Date(values.dates[values.dates.length - 1]);
1 year ago
2 years ago
var padding = {
left: 0,
right: 0
2 years ago
};
5 months ago
if(dataRange.start_date){
1 year ago
var yScaleLabelsWidth = 48;
5 months ago
let monthDifference = calculateMonthDifference(minValueDate, maxValueDate);
if(monthDifference >= 0 && monthDifference <= 3) {
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;
}
2 years ago
padding.top = gantt.config.row_height - 12;
padding.bottom = gantt.config.row_height - 12;
}
return padding;
}
var myChart;
5 months ago
var lineOverlay = overlayControl.addOverlay(function(container) {
var values = getProgressLine();
var scaleLabels = [];
2 years ago
5 months ago
values.planned = values.planned.map(value => +(Math.round(value + "e+2") + "e-2"));
values.real = values.real.map(value => +(Math.round(value + "e+2") + "e-2"));
values.dates.forEach(function(date){
var dateScale = new Date(date);
scaleLabels.push(dateToStr(dateScale));
})
2 years ago
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");
5 months ago
if(myChart){
2 years ago
myChart.destroy();
}
myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "Planned progress",
2 years ago
backgroundColor: "#0000cc",
borderColor: "#0000cc",
2 years ago
data: values.planned,
fill: false,
cubicInterpolationMode: 'monotone'
2 years ago
},
{
label: "Real progress",
2 years ago
backgroundColor: "#006600",
borderColor: "#006600",
2 years ago
data: values.real,
fill: false,
cubicInterpolationMode: 'monotone'
}
2 years ago
]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: getScalePaddings(values)
2 years ago
},
5 months ago
onResize: function(chart, newSize) {
2 years ago
var dataRange = gantt.getSubtaskDates();
5 months ago
if(dataRange.start_date){
2 years ago
// align chart with the scale range
chart.options.layout.padding = getScalePaddings(values);
2 years ago
}
},
legend: {
display: false
},
tooltips: {
mode: "index",
intersect: false,
callbacks: {
5 months ago
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
return dataset.label + ": " + dataset.data[tooltipItem.index] + "%";
2 years ago
}
}
},
hover: {
mode: "nearest",
intersect: true
},
scales: {
xAxes: [{
labels: scaleLabels,
5 months ago
gridLines:{
2 years ago
display: false
},
ticks: {
display: false
}
},
5 months ago
{
position:"top",
labels: scaleLabels,
gridLines:{
display: false
},
ticks: {
display: false
}
2 years ago
}
],
yAxes: [{
display: true,
gridLines: {
5 months ago
display:false
2 years ago
},
ticks: {
display: true,
min: 0,
stepSize: 10,
2 years ago
}
},
]
}
}
});
return canvas;
1 year ago
});