Mercurial > roundup-cc > roundup-cc

diff graph.html @ 1:2df45f6ecd81

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new appereance (solid and dotted lines), resonsive layout, new legend, new structure, cronjob-friendly dynamic generation of search-strings, dynamic recognition of error-values, ignores non-numeric priority-IDs
author sean
date Tue, 14 Apr 2015 13:32:12 +0200
parents 3f139db894f1
children f198a92dd37f
line wrap: on
line diff
--- a/graph.html	Thu Apr 02 09:51:19 2015 +0200
+++ b/graph.html	Tue Apr 14 13:32:12 2015 +0200
@@ -3,8 +3,14 @@
 	<head>
 		<title> Issues </title>
 		<style type = text/css>
+
+			* {
+				font-family: "Sans-serif";
+				font-size: 14px;
+			}
+
 			.svg div{
-					font: 10px sans-serif;
+					font: 10px;
 					text-align: right;
 					float: left;
 					display: block;
@@ -23,7 +29,8 @@
 
 			.line {
 					fill: none;
-					stroke-width: 2px;
+					stroke-width: 3px;
+					opacity: 1;
 			}
 
 			.line.critical {
@@ -51,11 +58,12 @@
 			}
 
 			.line.feature {
-					stroke: green;
+					stroke: chartreuse;
+					style: stroke-dasharray;
 			}
 
 			.line.feature.legend {
-					fill: green;
+					fill: chartreuse;
 			}
 
 			.line.wish {
@@ -75,21 +83,17 @@
 					stroke-width: 0;
 			}
 
-			.title {
-            	font: 15px sans-serif;
-            }
-
-			.legend{
-				font: 15px sans-serif;
-			}
-
 		</style>
 	</head>
 	<body>
-		<div id="burndown_chart"></div>
+		<div id="content" style="display: inline-block"></div>
 		<script type="text/javascript" src="d3.v3.min.js"></script>
 		<script type="text/javascript">
 
+			window.onresize = function(){
+				document.getElementById("content").innerHTML = "";
+				makeChart();
+			};
 
 			var critical=[];
 			var urgent=[];
@@ -98,6 +102,8 @@
 			var wish=[];
 			var timestamp=[];
 
+
+
 			function assignIssueToDate(issueArray, dateArray){
 				a = [];
 				for (var i = 0; i < issueArray.length; i++) {
@@ -107,6 +113,13 @@
 				return a;
 			}
 
+			function limitDatesOnXAxis(limit){
+				if ( timestamp.length < limit ){
+					return timestamp.length;
+				} else {
+					return limit;
+				}
+			}
 
 			function maxInObject( array ){
 				var maxVal = 0;
@@ -154,39 +167,65 @@
 
 
 			//append a svg_path. pretty generic
-			function draw_line(svg, data_array, css_class, line_object){
+			function draw_line(svg, data_array, css_class, line_object, lineShape){
 				svg.append("path")
 					.datum(assignIssueToDate(data_array, timestamp))
 					.attr("class", css_class)
+					.style("stroke-dasharray", (lineShape))
 					.attr("d", line_object);
 			}
 
 
-			//helper for the legend
-			function draw_legend_line(svg, width, Ypos, text){
-				svg.append("svg:text")
-					.attr("class", "legend")
-					.attr("x", width+50)
-					.attr("y", Ypos)
-					.text(text);
+			function makeLegend(svg, width){
 
-				svg.append("rect")
-					.attr("class", "line " + text.toLowerCase() + " legend")
-					.attr("x", width+30)
-					.attr("y", Ypos-12)
-					.attr("width", 15)
-					.attr("height", 15);
+				var legend_distance = width+40;
+				var top_distance = 20;
+				var distance_steps = 50;
+
+
+				function set_propper_distance(steps){
+					top_distance += steps;
+					return top_distance;
+				}
+
+				function draw_legend_line(svg, width, Ypos, text, issues){
+					svg.append("svg:text")
+						.attr("class", "legend")
+						.attr("x", width-30	)
+						.attr("y", Ypos)
+						.text(text + ":");
+
+					svg.append("svg:text")
+						.attr("class", "legend")
+						.attr("x", width+35	)
+						.attr("y", Ypos)
+						.text(issues);
+
+					svg.append("rect")
+						.attr("class", "line " + text.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 the chart
 			function makeChart(){
 
 				//declaration
 				var sizeOfSystemBorders = 50;
-				var margin = {top: 20, right: 200, bottom: 200, left: 65},
+				var margin = {top: 20, right: 100, bottom: 90, left: 60},
 					width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right,
-					height = (document.documentElement.clientHeight-sizeOfSystemBorders) - (margin.top) - margin.bottom;
+					height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom;
 
 				var x = d3.time.scale()
 					.range([0, width]);
@@ -198,11 +237,6 @@
 					.x(function(d) { return x(d.date); })
 					.y(function(d) { return y(d.points); });
 
-				var color_hash = {  0 : ["apple", "green"],
-					    1 : ["mango", "orange"],
-					    2 : ["cherry", "red"]
-				};
-
 				//lines
 				var criticalLine = base_line;
 				var urgentLine = base_line;
@@ -213,7 +247,6 @@
 
 
 				//set domain of y axis
-
 				var yDomain = [	];
 				yDomain[0] = 0;
 				yDomain[1] = getMaxIssues();
@@ -226,7 +259,10 @@
 				var xAxis = d3.svg.axis()
 					.scale(x)
 					.orient("bottom")
-					.tickFormat(d3.time.format.iso);
+					.ticks(limitDatesOnXAxis(10))
+					.tickFormat(d3.time.format("%d.%m:%H:%M"));
+					// .tickFormat(d3.time.format("%X"));
+					// .tickFormat(d3.time.format.iso);
 
 
 				var yAxis = d3.svg.axis()
@@ -234,7 +270,7 @@
 					.orient("left");
 
 
-				var svg = d3.select("body")
+				var svg = d3.select("#content")
 					.append("svg")
 					.attr("class", "svg")
 					.attr("width", width + margin.left + margin.right)
@@ -259,7 +295,7 @@
 				// Draw the y Grid lines
 				svg.append("g")
 					.attr("class", "grid")
-					.call(makeGrid(y, "left", getMaxIssues())
+					.call(makeGrid(y, "left", function(){return Math.min(getMaxIssues(), 50);}())
 						.tickSize(-width, 0, 0)
 						.tickFormat("")
 					);
@@ -272,8 +308,8 @@
 					.call(xAxis)
 					.selectAll("text")
 					.style("text-anchor", "end")
-					.attr("dx", "-.8em")
-					.attr("dy", ".15em")
+					.attr("dx", "-.5em")
+					.attr("dy", ".1em")
 					.attr("transform", function() {
 						return "rotate(-65)";
 					});
@@ -303,24 +339,21 @@
 				//Titel und Legende
 
 				svg.append("svg:text")
-					.attr("class", "title")
+					.attr("class", "text")
 					.attr("x", 10)
 					.attr("y", -5)
 					.text("Issues Nach Zeit");
 
 
-				draw_legend_line(svg, width, 50, "Critical");
-				draw_legend_line(svg, width, 70, "Urgent");
-				draw_legend_line(svg, width, 90, "Bug");
-				draw_legend_line(svg, width, 110, "Feature");
-				draw_legend_line(svg, width, 130, "Wish");
+				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, critical, "line critical", criticalLine);
-				draw_line(svg, urgent, "line urgent", urgentLine);
-				draw_line(svg, bug, "line bug", bugLine);
-				draw_line(svg, feature, "line feature", featureLine);
-				draw_line(svg, wish, "line wish", wishLine);
+				makeLegend(svg, width);
+
 
 			}
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)