diff graph.html @ 25:7161ce4e7ab1

The web-based display is dynamically generated. * All graphs are passed in one object. All graphs are passed in one object. The graphs are generated iteratiev and assigned a color. * roundup_cc.py can count how many issues are in which state.
author Magnus Schieder <mschieder@intevation.de>
date Mon, 12 Nov 2018 18:03:26 +0100
parents 3bb3d9a9f1b7
children 9aca070c86bd
line wrap: on
line diff
--- a/graph.html	Fri Nov 02 17:06:45 2018 +0100
+++ b/graph.html	Mon Nov 12 18:03:26 2018 +0100
@@ -33,55 +33,71 @@
 					opacity: 1;
 			}
 
-			.line.critical {
+			.line.red {
 					stroke: red;
 			}
 
-			.line.critical.legend {
+			.line.red.legend {
 					fill: red;
 			}
 
-			.line.urgent {
+			.line.orange {
 					stroke: orange;
 			}
 
-			.line.urgent.legend {
+			.line.orange.legend {
 					fill: orange;
 			}
 
-			.line.bug {
+			.line.violet {
 					stroke: violet;
 			}
 
-			.line.bug.legend {
+			.line.violet.legend {
 					fill: violet;
 			}
 
-			.line.feature {
+			.line.chartreuse {
 					stroke: chartreuse;
 					style: stroke-dasharray;
 			}
 
-			.line.feature.legend {
+			.line.chartreuse.legend {
 					fill: chartreuse;
 			}
 
-			.line.wish {
+			.line.blue {
 					stroke: blue;
 			}
 
-			.line.wish.legend {
+			.line.blue.legend {
 					fill: blue;
 			}
 
-			.line.noprio {
+			.line.grey {
 					stroke: grey;
 			}
 
-			.line.noprio.legend {
+			.line.grey.legend {
 					fill: grey;
 			}
 
+			.line.aqua{
+					stroke: aqua;
+			}
+
+			.line.aqua.legend {
+					fill: aqua;
+			}
+
+			.line.darkgreen {
+					stroke: darkgreen;
+			}
+
+			.line.darkgreen.legend {
+					fill: darkgreen;
+			}
+
 			.grid .tick {
 					stroke: lightgrey;
 					opacity: 0.7;
@@ -106,14 +122,11 @@
 				makeChart();
 			};
 
-			var critical=[];
-			var urgent=[];
-			var bug=[];
-			var feature=[];
-			var wish=[];
-			var noPrio=[];
+
 			var timestamp=[];
+			var data=js_data_dickt
 
+			var linesCSS = ["red", "orange", "violet", "chartreuse", "blue", "grey", "aqua", "darkgreen"]
 
 
 			function assignIssueToDate(issueArray, dateArray){
@@ -146,13 +159,9 @@
 
 			function getMaxIssues(){
 				maxIssuesOfAllArrays = [];
-				maxIssuesOfAllArrays.push(maxInObject(critical));
-				maxIssuesOfAllArrays.push(maxInObject(urgent));
-				maxIssuesOfAllArrays.push(maxInObject(bug));
-				maxIssuesOfAllArrays.push(maxInObject(feature));
-				maxIssuesOfAllArrays.push(maxInObject(wish));
-				maxIssuesOfAllArrays.push(maxInObject(noPrio));
-
+				for (col in data){
+					maxIssuesOfAllArrays.push(maxInObject(data[col]))
+				}
 				return Math.max.apply(Math, maxIssuesOfAllArrays)+1;
 			}
 
@@ -201,7 +210,7 @@
 					return top_distance;
 				}
 
-				function draw_legend_line(svg, width, Ypos, text, issues){
+				function draw_legend_line(svg, width, Ypos, linesColour, text, issues){
 					svg.append("svg:text")
 						.attr("class", "legend")
 						.attr("x", width-30	)
@@ -210,24 +219,24 @@
 
 					svg.append("svg:text")
 						.attr("class", "legend")
-						.attr("x", width+35	)
+						.attr("x", width+65	)
 						.attr("y", Ypos)
 						.text(issues);
 
 					svg.append("rect")
-						.attr("class", "line " + text.toLowerCase() + " legend")
+						.attr("class", "line " + linesColour.toLowerCase() + " legend")
 						.attr("x", width-30)
 						.attr("y", Ypos-20)
 						.attr("width", 100)
 						.attr("height", 2);
 				}
 
-				draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Critical", critical[critical.length-1].points);
-				draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Urgent", urgent[urgent.length-1].points);
-				draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Bug", bug[bug.length-1].points);
-				draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Feature", feature[feature.length-1].points);
-				draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Wish", wish[wish.length-1].points);
-				draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "NoPrio", noPrio[noPrio.length-1].points);
+				var colourNume = 0
+				for (col in data) {
+					graph = data[col]
+					draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), linesCSS[colourNume], col, graph[graph.length-1].points);
+					colourNume += 1
+				}
 			}
 
 
@@ -237,7 +246,7 @@
 
 				//declaration
 				var sizeOfSystemBorders = 50;
-				var margin = {top: 20, right: 100, bottom: 90, left: 60},
+				var margin = {top: 20, right: 150, bottom: 90, left: 60},
 					width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right,
 					height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom;
 
@@ -252,12 +261,12 @@
 					.y(function(d) { return y(d.points); });
 
 				//lines
-				var criticalLine = base_line;
-				var urgentLine = base_line;
-				var bugLine = base_line;
-				var featureLine = base_line;
-				var wishLine = base_line;
-				var noPrioLine = base_line;
+
+				lines = {}
+				for (col in data) {
+					lines[col] = base_line
+				}
+
 				var timestampLine = base_line;
 
 
@@ -359,14 +368,13 @@
 					.attr("y", -5)
 					.text("Issues Nach Zeit");
 
-
-				draw_line(svg, wish, "line wish", wishLine, "0, 0");
-				draw_line(svg, feature, "line feature", featureLine, "3, 3");
-				draw_line(svg, bug, "line bug", bugLine, "7, 7");
-				draw_line(svg, urgent, "line urgent", urgentLine, "13, 13");
-				draw_line(svg, critical, "line critical", criticalLine, "17, 17");
-				draw_line(svg, noPrio, "line noprio", noPrioLine, "17, 17");
-
+				var shape = 0
+				var colourNume = 0
+				for (col in data){
+					draw_line(svg, data[col], "line " + linesCSS[colourNume] , lines[col], shape + ", " +shape);
+					colourNume += 1
+					shape += 3
+				}
 
 				makeLegend(svg, width);
 
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)