display bcwp

view-mode/function/overlaySCurve.js

@@ -7,6 +7,10 @@ var sCurvePayload = {
 	project_id: proyekId
 };
 
+function thousandSeparator(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+}
+
 function callback(response) {
 	return_first = response;
 }
@@ -59,7 +63,8 @@ function getProgressLine(){
 	getSCurveData();
 	var cumulativePlannedDurations = return_first.data[0].data.percentagePlan;
 	var cumulativeRealDurations = return_first.data[0].data.percentageReal;
-	return {planned: cumulativePlannedDurations, real: cumulativeRealDurations};
+	var bcwpCumulative = return_first.data[0].data.bcwp;
+	return {planned: cumulativePlannedDurations, real: cumulativeRealDurations, bcwp: bcwpCumulative};
 }
 
 function getScalePaddings(){
@@ -116,16 +121,16 @@ var lineOverlay = overlayControl.addOverlay(function(container) {
 					borderColor: "#001eff",
 					data: values.planned,
 					fill: false,
-					cubicInterpolationMode: 'monotone'
+					cubicInterpolationMode: 'default'
 				},
 				{
 					label: "Real progress",
-					backgroundColor: "#ff5454",
+					backgroundColor: "#f51b1b",
-					borderColor: "#ff5454",
+					borderColor: "#f51b1b",
 					data: values.real,
 					fill: false,
 					cubicInterpolationMode: 'monotone'
-				}
+				},
 			]
 		},
 		options: {
@@ -145,13 +150,84 @@ var lineOverlay = overlayControl.addOverlay(function(container) {
 				display: false
 			},
 			tooltips: {
-				mode: "index",
+				enabled: false,
-				intersect: false,
+				custom: function(tooltipModel, dataItem) {
-				callbacks: {
+					// Tooltip Element
-					label: function(tooltipItem, data) {
+					var tooltipEl = document.getElementById('chartjs-tooltip');
-						var dataset = data.datasets[tooltipItem.datasetIndex];
+
-						return dataset.label + ": " + dataset.data[tooltipItem.index] + "%";
+					// Create element on first render
+					if (!tooltipEl) {
+						tooltipEl = document.createElement('div');
+						tooltipEl.id = 'chartjs-tooltip';
+						tooltipEl.innerHTML = "<table></table>";
+						document.body.appendChild(tooltipEl);
+					}
+
+					// Hide if no tooltip
+					if (tooltipModel.opacity === 0) {
+						tooltipEl.style.opacity = 0;
+						return;
+					}
+
+					// Set caret Position
+					tooltipEl.classList.remove('above', 'below', 'no-transform');
+					if (tooltipModel.yAlign) {
+						tooltipEl.classList.add(tooltipModel.yAlign);
+					} else {
+						tooltipEl.classList.add('no-transform');
+					}
+
+					function getBody(bodyItem) {
+						return bodyItem.lines;
 					}
+
+					// Set Text
+					if (tooltipModel.body) {
+						var titleLines = tooltipModel.title || [];
+						var bodyLines = tooltipModel.body.map(getBody);
+
+						var innerHtml = '<thead>';
+
+						titleLines.forEach(function(title) {
+							innerHtml += '<tr><th>' + title + '</th></tr>';
+						});
+						innerHtml += '</thead><tbody>';
+
+						bodyLines.forEach(function(body, i) {
+							var colors = tooltipModel.labelColors[i];
+							var style = 'background:' + colors.backgroundColor;
+							style += '; border-color:' + colors.borderColor;
+							style += '; border-width: 2px';
+							var span = '<span style="' + style + '"></span>';
+							innerHtml += '<tr><td>' + "<span style='color: #001eff'>Planned Progress</span> : " + values.planned[tooltipModel.dataPoints[0].index] + '%</td></tr>';
+							innerHtml += '<tr><td>' + "<span style='color: #f51b1b'>Actual Progress</span> : " + values.real[tooltipModel.dataPoints[0].index] + '%</td></tr>';
+							innerHtml += '<tr><td>&nbsp</td></tr>';
+							innerHtml += '<tr><td>' + "BCWP :" + '</td></tr>';
+							// someone pls change this hard coded currency later
+							innerHtml += '<tr><td>Rp. ' + thousandSeparator(values.bcwp[tooltipModel.dataPoints[0].index]) + '</td></tr>';
+						});
+						innerHtml += '</tbody>';
+
+						var tableRoot = tooltipEl.querySelector('table');
+						tableRoot.innerHTML = innerHtml;
+					}
+
+					// `this` will be the overall tooltip
+					var position = this._chart.canvas.getBoundingClientRect();
+
+					// Display, position, and set styles for font
+					tooltipEl.style.opacity = 1;
+					tooltipEl.style.zIndex= 99999;
+					tooltipEl.style.position = 'absolute';
+					tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + -160 + 'px';
+					tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + -130 + 'px';
+					tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
+					tooltipEl.style.color= "#000000";
+					tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
+					tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
+					tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
+					tooltipEl.style.pointerEvents = 'none';
+					tooltipEl.style.backgroundColor = 'rgba(238,238,238,0.9)';
 				}
 			},
 			hover: {