diff --git a/view-mode/function/overlaySCurve.js b/view-mode/function/overlaySCurve.js index d75f4b9..0f28b21 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,30 +67,30 @@ 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; } @@ -105,109 +105,113 @@ function getProgressLine() { 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(); + // Determine the appropriate data points based on the Gantt chart zoom level + var chartScaleRange = getChartScaleRange(); + var zoomLevel = gantt.ext.zoom.getCurrentLevel(); - // Adjust data points based on the zoom level - var plannedDurations, realDurations; + // 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; + 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; + } 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; - + } else { + // Default: Use daily data points + plannedDurations = cumulativePlannedDurations; + realDurations = cumulativeRealDurations; + } - if (Math.floor(maxReal) > 100 || Math.floor(maxPlan) > 100) { + if (Math.floor(maxReal) > 110 || Math.floor(maxPlan) > 110) { plannedDurations = plannedDurations.map((item) => { - return item/maxPlan*100; + return item / maxPlan * 100; }) realDurations = realDurations.map((item) => { - return item/maxReal*100; + if (maxPlan >= 200) { + return item / maxPlan * 100; + } else { + return item / maxReal * 100; + } }) } - return { planned: plannedDurations, real: realDurations, dates: dates }; + 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 + // 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; + // 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]; + for (var i = 0; i < data.length; i++) { + aggregateValue = data[i]; - 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; - } - } + 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; + } + } - // 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]); - } + // 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 - }; + return { + data: newData, + dates: newDates + }; } -function getScalePaddings(values){ +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); @@ -219,33 +223,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 +280,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 +294,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 +307,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,