Merge pull request #4 from Malte311/master

Improved chart labels on hover && added new chart

Author: kimbtech

VERSION

@@ -1,4 +1,4 @@
 latest
-0.2.1
+0.2.2
 0.2
 0

php/load/graphs/BarDailyWork.js

@@ -0,0 +1,62 @@
+function createGraph(combiData, plainData, singleDayData, canvas){
+	/**
+	 * The DOM has jQuery as $ and the ChartJS library.
+	 * The data can be found in the three first data parameters and canvas is the canvas for the chart.
+	 * The function should return the ChartJS object.
+	 */
+
+	let plotdata = {};
+	plainData.forEach(data => {
+		let date = new Date(data.begin * 1000);
+		let day = (date.getDate() > 9 ? '' : '0') + date.getDate();
+		let month = (date.getMonth() + 1 > 9 ? '' : '0') + (date.getMonth() + 1);
+		
+		let key = `${day}.${month}.${date.getFullYear()}`;
+		if (!plotdata.hasOwnProperty(key)) {
+			plotdata[key] = 0;
+		}
+
+		plotdata[key] += data.duration;
+	});
+
+	Object.keys(plotdata).forEach(key => {
+		plotdata[key] = Math.round((plotdata[key] / 3600) * 100) / 100;
+	});
+
+	let plotdataSorted = {};
+	Object.keys(plotdata).sort().forEach(key => {
+		plotdataSorted[key] = plotdata[key];
+	});
+	
+	/**
+	 * Colors from
+	 * 	chartjs-plugin-colorschemes MIT License
+	 * 	Copyright (c) 2019 Akihiko Kusanagi
+	 * 	https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/src/colorschemes/colorschemes.tableau.js
+	 */
+	let config = {
+		type: 'bar',
+		data: {
+			datasets: [{
+				data: Object.values(plotdataSorted),
+				label: 'Daily work',
+				backgroundColor: '#A0CBE8',
+				borderColor: '#4E79A7',
+				borderWidth: 1
+			}],
+			labels: Object.keys(plotdataSorted)
+		},
+		options: {
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return `Daily work: ${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
+					}
+				}
+			}
+		}
+	};
+
+	return new Chart(canvas, config);
+}

php/load/graphs/BarDayTimes.js

@@ -70,7 +70,14 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 		type: 'bar',
 		data: chartData,
 		options: {
-			responsive: true
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return `${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
+					}
+				}
+			}
 		}
 	};
 	return new Chart(canvas, config);

php/load/graphs/BarDays.js

@@ -49,7 +49,14 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 		type: 'bar',
 		data: chartData,
 		options: {
-			responsive: true
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return `${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
+					}
+				}
+			}
 		}
 	};
 	return new Chart(canvas, config);

php/load/graphs/PieCategory.js

@@ -38,7 +38,15 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 			labels: Object.keys(plotdata)
 		},
 		options: {
-			responsive: true
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return chartData.labels[tooltipItem.index] + ': ' +
+							chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + ' hours';
+					}
+				}
+			}
 		}
 	};
 	return new Chart(canvas, config);

php/load/graphs/PieTask.js

@@ -38,7 +38,15 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 			labels: Object.keys(plotdata)
 		},
 		options: {
-			responsive: true
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return chartData.labels[tooltipItem.index] + ': ' +
+							chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + ' hours';
+					}
+				}
+			}
 		}
 	};
 	return new Chart(canvas, config);