From 5f20af482a06cbdd7e930eaadc0cc005869bce5a Mon Sep 17 00:00:00 2001 From: farhantock Date: Wed, 27 Dec 2023 12:28:19 +0700 Subject: [PATCH] update before merge from adw --- view-mode/function/overlaySCurve.js | 204 ++++++++++------------------ 1 file changed, 73 insertions(+), 131 deletions(-) diff --git a/view-mode/function/overlaySCurve.js b/view-mode/function/overlaySCurve.js index 3ad5488..0d6a082 100644 --- a/view-mode/function/overlaySCurve.js +++ b/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,