ordo
/
surveyor_indonesia_gantt
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

s curve zoom

pull/1/head
farhantock 1 year ago
parent
f31551a3bb
commit
04146eeae7
1 changed files with 132 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 206
      view-mode/function/overlaySCurve.js

206
view-mode/function/overlaySCurve.js
Unescape View File

@ -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,89 +67,147 @@ 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;
//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};
}
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();
return {planned: cumulativePlannedDurations, real: cumulativeRealDurations, 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 };
}
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];
function getScalePaddings(values){
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();
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);
@ -161,33 +219,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, {
@ -218,9 +276,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);
}
@ -232,7 +290,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] + "%";
}
@ -245,28 +303,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,
@ -279,4 +337,4 @@ var lineOverlay = overlayControl.addOverlay(function(container) {
}
});
return canvas;
});
});
Write Preview
Loading…
Cancel
Save