Browse Source

update before merge from adw

pull/1/head
farhantock 1 year ago
parent
commit
5f20af482a
  1. 204
      view-mode/function/overlaySCurve.js

204
view-mode/function/overlaySCurve.js

@ -6,7 +6,7 @@ var parts = [];
var sCurvePayload = {
period: 'week',
project_id: proyekId,
gantt_id: ganttId
gantt_id: ganttId
};
function callback(response) {
@ -16,7 +16,7 @@ function callback(response) {
function messageListener(event) {
if (event.data && event.data.action === 'sendUrl') {
const parentUrl = event.data.url;
const isHierarchy = event.data.isHierarchy;
const isHierarchy = event.data.isHierarchy;
// Split the remaining path by "/"
parts = parentUrl.split("/");
@ -67,147 +67,89 @@ function getSCurveData() {
};
function toggleOverlay() {
if (overlayControl.isOverlayVisible(lineOverlay)) {
if(overlayControl.isOverlayVisible(lineOverlay)){
gantt.config.readonly = false;
overlayControl.hideOverlay(lineOverlay);
gantt.$root.classList.remove("overlay_visible");
} else {
}else{
gantt.config.readonly = true;
overlayControl.showOverlay(lineOverlay);
gantt.$root.classList.add("overlay_visible");
}
}
function getChartScaleRange() {
function getChartScaleRange(){
var tasksRange = gantt.getSubtaskDates();
var cells = [];
var scale = gantt.getScale();
if (!tasksRange.start_date) {
if(!tasksRange.start_date){
return scale.trace_x;
}
scale.trace_x.forEach(function (date) {
scale.trace_x.forEach(function(date){
// if(date >= tasksRange.start_date && date <= tasksRange.end_date){
// cells.push(date);
// }
cells.push(date);
cells.push(date);
});
return cells;
}
function getProgressLine() {
function getProgressLine(){
// As long as the progress data length is same with chart scale range (period) then it's fine.
getSCurveData();
// console.log("apa ", return_first);
var cumulativePlannedDurations = return_first.data[0].data.percentagePlan;
var cumulativeRealDurations = return_first.data[0].data.percentageReal;
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();
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;
//jika summary s curve
if (maxReal > 100 || maxPlan > 100) {
var plannedDurations = cumulativePlannedDurations.map((item) => {
return item/maxPlan*100;
})
var realDurations = cumulativeRealDurations.map((item) => {
return item/maxPlan*100;
})
return {planned: plannedDurations, real: realDurations, dates: dates};
}
// Adjust data points based on the zoom level
var plannedDurations, realDurations;
if (zoomLevel === 2) {
// Adjust data to monthly points
plannedDurations = adjustDataToZoom(dates, cumulativePlannedDurations, chartScaleRange, 2).data;
realDurations = adjustDataToZoom(dates, cumulativeRealDurations, chartScaleRange, 2).data;
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;
dates = adjustDataToZoom(dates, cumulativeRealDurations, chartScaleRange, 1).dates;
} else {
// Default: Use daily data points
plannedDurations = cumulativePlannedDurations;
realDurations = cumulativeRealDurations;
}
if (maxReal > 100 || maxPlan > 100) {
plannedDurations = plannedDurations.map((item) => {
return item / maxPlan * 100;
})
realDurations = realDurations.map((item) => {
return item / maxReal * 100;
})
}
return { planned: plannedDurations, real: realDurations, dates: dates };
return {planned: cumulativePlannedDurations, real: cumulativeRealDurations, dates: dates};
}
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
// Placeholder logic: This example assumes that the chartScaleRange is in days
var newData = [];
var newDates = [];
var aggregateValue = 0;
for (var i = 0; i < data.length; i++) {
aggregateValue = data[i];
if (zoomLevel === 2 && i % 30 === 29) {
// 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 === 0) {
// Aggregate data for each week
newData.push(aggregateValue);
newDates.push(dates[i]);
aggregateValue = 0;
}
}
// If there are remaining data points after the loop, add them to the result
if (aggregateValue > 0) {
newData.push(aggregateValue);
newDates.push(dates[data.length - 1]);
}
return {
data: newData,
dates: newDates
};
}
function getScalePaddings(values) {
let zoom = gantt.ext.zoom.getCurrentLevel();
function getScalePaddings(values){
var scale = gantt.getScale();
var dataRange = gantt.getSubtaskDates();
// let minDate = new Date();
// let maxDate = new Date();
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;
// 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 (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()));
// }
// 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 = {
left: 0,
right: 0
left:0,
right:0
};
if (dataRange.start_date) {
if(dataRange.start_date){
var yScaleLabelsWidth = 48;
// fine tune values in order to align chart with the scale range
padding.left = gantt.posFromDate(minValueDate);
@ -219,33 +161,33 @@ function getScalePaddings(values) {
}
var myChart;
var lineOverlay = overlayControl.addOverlay(function (container) {
var lineOverlay = overlayControl.addOverlay(function(container) {
var values = getProgressLine();
var scaleLabels = [];
var scaleLabels = [];
// if(parts[2] && parts[2] == '1'){
// values.dates.forEach(function(date){
// var dateScale = new Date(date);
// scaleLabels.push(dateToStr(dateScale));
// })
// } else {
// var chartScale = getChartScaleRange();
// if(parts[2] && parts[2] == '1'){
// values.dates.forEach(function(date){
// 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));
})
// 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");
container.appendChild(canvas);
canvas.style.height = container.offsetHeight + "px";
canvas.style.width = container.offsetWidth + "px";
var ctx = canvas.getContext("2d");
if (myChart) {
if(myChart){
myChart.destroy();
}
myChart = new Chart(ctx, {
@ -276,9 +218,9 @@ var lineOverlay = overlayControl.addOverlay(function (container) {
layout: {
padding: getScalePaddings(values)
},
onResize: function (chart, newSize) {
onResize: function(chart, newSize) {
var dataRange = gantt.getSubtaskDates();
if (dataRange.start_date) {
if(dataRange.start_date){
// align chart with the scale range
chart.options.layout.padding = getScalePaddings(values);
}
@ -290,7 +232,7 @@ var lineOverlay = overlayControl.addOverlay(function (container) {
mode: "index",
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
return dataset.label + ": " + dataset.data[tooltipItem.index] + "%";
}
@ -303,28 +245,28 @@ var lineOverlay = overlayControl.addOverlay(function (container) {
scales: {
xAxes: [{
labels: scaleLabels,
gridLines: {
gridLines:{
display: false
},
ticks: {
display: false
}
},
{
position: "top",
labels: scaleLabels,
gridLines: {
display: false
},
ticks: {
display: false
{
position:"top",
labels: scaleLabels,
gridLines:{
display: false
},
ticks: {
display: false
}
}
}
],
yAxes: [{
display: true,
gridLines: {
display: false
display:false
},
ticks: {
display: true,

Loading…
Cancel
Save