fix:SCurve chart #5

Merged
farhantock merged 1 commits from dev-wahyun into master 4 months ago
  1. 105
      view-mode/function/overlaySCurve.js

105
view-mode/function/overlaySCurve.js

@ -167,9 +167,8 @@ function adjustDataToZoom(dates, data, chartScaleRange, zoomLevel) {
} }
} }
// If there are remaining data points after the loop, add them to the result
if (aggregateValue > 0) { if (aggregateValue > 0) {
newData.push(aggregateValue); newData.push(+(Math.round(aggregateValue+ "e+2") + "e-2"));
newDates.push(dates[data.length - 1]); newDates.push(dates[data.length - 1]);
} }
@ -179,42 +178,44 @@ function adjustDataToZoom(dates, data, chartScaleRange, zoomLevel) {
}; };
} }
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) { function getScalePaddings(values) {
let zoom = gantt.ext.zoom.getCurrentLevel(); let zoom = gantt.ext.zoom.getCurrentLevel();
var scale = gantt.getScale(); var scale = gantt.getScale();
var dataRange = gantt.getSubtaskDates(); var dataRange = gantt.getSubtaskDates();
// let minDate = new Date();
// let maxDate = new Date();
let minValueDate = new Date(values.dates[0]); 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;
// 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()));
// }
// })
var padding = { var padding = {
left: 0, left: 0,
right: 0 right: 0
}; };
if (dataRange.start_date) { if(dataRange.start_date){
var yScaleLabelsWidth = 48; var yScaleLabelsWidth = 48;
// fine tune values in order to align chart with the scale range let monthDifference = calculateMonthDifference(minValueDate, maxValueDate);
padding.left = gantt.posFromDate(minValueDate); if(monthDifference >= 0 && monthDifference <= 3) {
padding.right = scale.full_width - gantt.posFromDate(maxValueDate); 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;
}
padding.top = gantt.config.row_height - 12; padding.top = gantt.config.row_height - 12;
padding.bottom = gantt.config.row_height - 12; padding.bottom = gantt.config.row_height - 12;
} }
@ -222,33 +223,23 @@ function getScalePaddings(values) {
} }
var myChart; var myChart;
var lineOverlay = overlayControl.addOverlay(function (container) { var lineOverlay = overlayControl.addOverlay(function(container) {
var values = getProgressLine(); var values = getProgressLine();
var scaleLabels = []; var scaleLabels = [];
// if(parts[2] && parts[2] == '1'){ values.planned = values.planned.map(value => +(Math.round(value + "e+2") + "e-2"));
// values.dates.forEach(function(date){ values.real = values.real.map(value => +(Math.round(value + "e+2") + "e-2"));
// var dateScale = new Date(date); values.dates.forEach(function(date){
// scaleLabels.push(dateToStr(dateScale)); 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));
})
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
container.appendChild(canvas); container.appendChild(canvas);
canvas.style.height = container.offsetHeight + "px"; canvas.style.height = container.offsetHeight + "px";
canvas.style.width = container.offsetWidth + "px"; canvas.style.width = container.offsetWidth + "px";
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
if (myChart) { if(myChart){
myChart.destroy(); myChart.destroy();
} }
myChart = new Chart(ctx, { myChart = new Chart(ctx, {
@ -279,9 +270,9 @@ var lineOverlay = overlayControl.addOverlay(function (container) {
layout: { layout: {
padding: getScalePaddings(values) padding: getScalePaddings(values)
}, },
onResize: function (chart, newSize) { onResize: function(chart, newSize) {
var dataRange = gantt.getSubtaskDates(); var dataRange = gantt.getSubtaskDates();
if (dataRange.start_date) { if(dataRange.start_date){
// align chart with the scale range // align chart with the scale range
chart.options.layout.padding = getScalePaddings(values); chart.options.layout.padding = getScalePaddings(values);
} }
@ -293,7 +284,7 @@ var lineOverlay = overlayControl.addOverlay(function (container) {
mode: "index", mode: "index",
intersect: false, intersect: false,
callbacks: { callbacks: {
label: function (tooltipItem, data) { label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex]; var dataset = data.datasets[tooltipItem.datasetIndex];
return dataset.label + ": " + dataset.data[tooltipItem.index] + "%"; return dataset.label + ": " + dataset.data[tooltipItem.index] + "%";
} }
@ -306,28 +297,28 @@ var lineOverlay = overlayControl.addOverlay(function (container) {
scales: { scales: {
xAxes: [{ xAxes: [{
labels: scaleLabels, labels: scaleLabels,
gridLines: { gridLines:{
display: false display: false
}, },
ticks: { ticks: {
display: false display: false
} }
}, },
{ {
position: "top", position:"top",
labels: scaleLabels, labels: scaleLabels,
gridLines: { gridLines:{
display: false display: false
}, },
ticks: { ticks: {
display: false display: false
}
} }
}
], ],
yAxes: [{ yAxes: [{
display: true, display: true,
gridLines: { gridLines: {
display: false display:false
}, },
ticks: { ticks: {
display: true, display: true,

Loading…
Cancel
Save