Fix #8 and #9

Author: kimbtech

README.md

@@ -73,10 +73,10 @@ and no data from itself. (So create a new device for a full export!)
 It is possible to create custom graph-views for the stats view.
 
 ### Create your own stats function
-> See an example e.g. [PieCategory](https://github.com/KIMB-technologies/TaskTimeTerminateServer/blob/master/php/load/graphs/Pie.js)
+> See an example e.g. [Pie](https://github.com/KIMB-technologies/TaskTimeTerminateServer/blob/master/php/load/graphs/Pie.js)
 
 When the user selects a graph and clicks on *Display Graph* the corresponding JS-file is loaded and the the function `createGraph(combiData, plainData, singleDayData, canvas)`
-of this file will be executed. In a file like [PieCategory](https://github.com/KIMB-technologies/TaskTimeTerminateServer/blob/master/php/load/graphs/Pie.js)
+of this file will be executed. In a file like [Pie](https://github.com/KIMB-technologies/TaskTimeTerminateServer/blob/master/php/load/graphs/Pie.js)
 such function like `createGraph(combiData, plainData, singleDayData, canvas)` can be defined.
 
 Each function gets four parameters, three `*Data` and one `canvas`.

VERSION

@@ -1,4 +1,4 @@
 latest
-0.4.4
+0.4.5
 0.4
 0

php/core/templates/stats_en.html

@@ -198,13 +198,20 @@ <h3>Graph</h3>
 				if(chart !== null){
 					chart.destroy();
 				}
-				Chart.defaults.global.legend.labels.fontColor = getComputedStyle(document.documentElement).getPropertyValue('--main-text-color');
+				// text color according to theme
+				Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--main-text-color');
+				
 				chart = createGraph(
 					combiData,
 					plainData,
 					singleDayData,
 					document.getElementById('maingraph').getContext('2d')
 				);
+
+				// grid color according to theme 
+				Object.keys(chart.scales).forEach(k => {
+					chart.scales[k].options.gridLines.color = getComputedStyle(document.documentElement).getPropertyValue('--chart-grid-color');
+				})
 			}
 		});
 	});

php/load/graphs/BarDays.js

@@ -61,9 +61,15 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 	});
 
 	// convert to hours
+	stacksMap = {}
 	Object.keys(plotdata).forEach(function(label) {
 		Object.keys(plotdata[label]).forEach(function(category) {
 			plotdata[label][category] = Math.round((plotdata[label][category] / 3600) * 100) / 100;
+
+			if(!stacksMap.hasOwnProperty(category)){
+				let pos = category.indexOf('::');
+				stacksMap[category] = ( pos === -1 ? '' : category.substr(0, pos) );
+			}
 		});
 	});
 
@@ -89,7 +95,8 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 				chartData.datasets.push({
 					label : category,
 					backgroundColor: baseColors[datasetIndex % baseColors.length],
-					data: []
+					data: [],
+					stack: stacksMap[category]
 				});
 				datasetIndex++;
 			}

php/load/graphs/BarHours.js

@@ -46,10 +46,15 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 		}
 	});
 
+	stacksMap = {}
 	Object.keys(plotdata).forEach(function(category) {
 		for(var h = 0; h < 24; h++){
 			plotdata[category][h] = Math.round((plotdata[category][h]/3600) * 100) / 100;
 		}
+		if(!stacksMap.hasOwnProperty(category)){
+			let pos = category.indexOf('::');
+			stacksMap[category] = ( pos === -1 ? '' : category.substr(0, pos) );
+		}
 	});
 
 	/**
@@ -70,7 +75,8 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 		chartData.datasets.push({
 			label : category,
 			backgroundColor: baseColors[index % baseColors.length],
-			data: plotdata[category]
+			data: plotdata[category],
+			stack : stacksMap[category]
 		});
 	})
 

php/load/graphs/BarWeekdays.js

@@ -34,10 +34,15 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 		plotdata[v[catsColumn]][day] += v.duration;
 	});
 
+	stacksMap = {}
 	Object.keys(plotdata).forEach(function(category) {
 		for(var d = 0; d < 7; d++){
 			plotdata[category][d] = Math.round((plotdata[category][d]/3600) * 100) / 100;
 		}
+		if(!stacksMap.hasOwnProperty(category)){
+			let pos = category.indexOf('::');
+			stacksMap[category] = ( pos === -1 ? '' : category.substr(0, pos) );
+		}
 	});
 
 	/**
@@ -56,7 +61,8 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 		chartData.datasets.push({
 			label : category,
 			backgroundColor: baseColors[index % baseColors.length],
-			data: plotdata[category]
+			data: plotdata[category],
+			stack : stacksMap[category]
 		});
 	})
 

php/load/graphs/BarWeeks.js

@@ -84,9 +84,15 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 	});
 
 	// convert to hours
+	stacksMap = {}
 	Object.keys(plotdata).forEach(function(label) {
 		Object.keys(plotdata[label]).forEach(function(category) {
 			plotdata[label][category] = Math.round((plotdata[label][category] / 3600) * 100) / 100;
+
+			if(!stacksMap.hasOwnProperty(category)){
+				let pos = category.indexOf('::');
+				stacksMap[category] = ( pos === -1 ? '' : category.substr(0, pos) );
+			}
 		});
 	});
 
@@ -112,7 +118,8 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 				chartData.datasets.push({
 					label : category,
 					backgroundColor: baseColors[datasetIndex % baseColors.length],
-					data: []
+					data: [],
+					stack : stacksMap[category]
 				});
 				datasetIndex++;
 			}

php/load/main.css

@@ -4,6 +4,8 @@
 	--main-bg-color: white;
 	--main-link-color: blue;
 	--main-border-color: black;
+	
+	--chart-grid-color: #ddd;
 
 	--body-bg: #777;
 }
@@ -15,6 +17,8 @@
 		--main-link-color: lightblue;
 		--main-border-color: #aaa;
 
+		--chart-grid-color: #444;
+
 		--body-bg: black;
 	}