Mercurial > roundup-cc

diff graph.html @ 0:3f139db894f1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initial commit
author sean
date Thu, 02 Apr 2015 09:51:19 +0200
parents
children 2df45f6ecd81
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/graph.html	Thu Apr 02 09:51:19 2015 +0200
@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title> Issues </title>
+		<style type = text/css>
+			.svg div{
+					font: 10px sans-serif;
+					text-align: right;
+					float: left;
+					display: block;
+					padding: 10px;
+					margin: 10px;
+					color: white;
+			}
+
+			.axis path,
+
+			.axis line {
+					fill: none;
+					stroke: black;
+					stroke-width: 1px;
+			}
+
+			.line {
+					fill: none;
+					stroke-width: 2px;
+			}
+
+			.line.critical {
+					stroke: red;
+			}
+
+			.line.critical.legend {
+					fill: red;
+			}
+
+			.line.urgent {
+					stroke: orange;
+			}
+
+			.line.urgent.legend {
+					fill: orange;
+			}
+
+			.line.bug {
+					stroke: violet;
+			}
+
+			.line.bug.legend {
+					fill: violet;
+			}
+
+			.line.feature {
+					stroke: green;
+			}
+
+			.line.feature.legend {
+					fill: green;
+			}
+
+			.line.wish {
+					stroke: blue;
+			}
+
+			.line.wish.legend {
+					fill: blue;
+			}
+
+			.grid .tick {
+					stroke: lightgrey;
+					opacity: 0.7;
+			}
+
+			.grid path {
+					stroke-width: 0;
+			}
+
+			.title {
+            	font: 15px sans-serif;
+            }
+
+			.legend{
+				font: 15px sans-serif;
+			}
+
+		</style>
+	</head>
+	<body>
+		<div id="burndown_chart"></div>
+		<script type="text/javascript" src="d3.v3.min.js"></script>
+		<script type="text/javascript">
+
+
+			var critical=[];
+			var urgent=[];
+			var bug=[];
+			var feature=[];
+			var wish=[];
+			var timestamp=[];
+
+			function assignIssueToDate(issueArray, dateArray){
+				a = [];
+				for (var i = 0; i < issueArray.length; i++) {
+					a.push({points: issueArray[i].points, date : dateArray[i].date});
+				}
+
+				return a;
+			}
+
+
+			function maxInObject( array ){
+				var maxVal = 0;
+				for (var i = 0; i < array.length; i++) {
+					if (maxVal < array[i].points){
+						maxVal = array[i].points;
+					}
+				}
+				return maxVal;
+			}
+
+
+			function getMaxIssues(){
+				maxIssuesOfAllArrays = [];
+				maxIssuesOfAllArrays.push(maxInObject(critical));
+				maxIssuesOfAllArrays.push(maxInObject(urgent));
+				maxIssuesOfAllArrays.push(maxInObject(bug));
+				maxIssuesOfAllArrays.push(maxInObject(feature));
+				maxIssuesOfAllArrays.push(maxInObject(wish));
+
+				return Math.max.apply(Math, maxIssuesOfAllArrays)+1;
+			}
+
+
+			function dayDifference(first, second) {
+				"use strict";
+				var difference = (second - first) / (1000 * 60 * 60 * 24);
+
+				// just to avoid the get thousands of lines... would look ugly.
+				if (difference > 60){
+					difference = 60;
+				}
+
+				return difference;
+			}
+
+
+			// function for the grid lines
+			function makeGrid(direction, orientation, ticknumber) {
+				return d3.svg.axis()
+					.scale(direction)
+					.orient(orientation)
+					.ticks( ticknumber );
+			}
+
+
+			//append a svg_path. pretty generic
+			function draw_line(svg, data_array, css_class, line_object){
+				svg.append("path")
+					.datum(assignIssueToDate(data_array, timestamp))
+					.attr("class", css_class)
+					.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);
+
+				svg.append("rect")
+					.attr("class", "line " + text.toLowerCase() + " legend")
+					.attr("x", width+30)
+					.attr("y", Ypos-12)
+					.attr("width", 15)
+					.attr("height", 15);
+			}
+
+
+			//draw the chart
+			function makeChart(){
+
+				//declaration
+				var sizeOfSystemBorders = 50;
+				var margin = {top: 20, right: 200, bottom: 200, left: 65},
+					width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right,
+					height = (document.documentElement.clientHeight-sizeOfSystemBorders) - (margin.top) - margin.bottom;
+
+				var x = d3.time.scale()
+					.range([0, width]);
+
+				var y = d3.scale.linear()
+					.range([height, 0]);
+
+				var base_line = d3.svg.line()
+					.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;
+				var bugLine = base_line;
+				var featureLine = base_line;
+				var wishLine = base_line;
+				var timestampLine = base_line;
+
+
+				//set domain of y axis
+
+				var yDomain = [	];
+				yDomain[0] = 0;
+				yDomain[1] = getMaxIssues();
+				y.domain(d3.extent(yDomain, function(d){return d; }));
+
+				//set domain of y axis
+				x.domain(d3.extent(timestamp, function(d){return d.date; }));
+
+
+				var xAxis = d3.svg.axis()
+					.scale(x)
+					.orient("bottom")
+					.tickFormat(d3.time.format.iso);
+
+
+				var yAxis = d3.svg.axis()
+					.scale(y)
+					.orient("left");
+
+
+				var svg = d3.select("body")
+					.append("svg")
+					.attr("class", "svg")
+					.attr("width", width + margin.left + margin.right)
+					.attr("height", height + margin.top + margin.bottom)
+					.append("g")
+					.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+				// creation
+
+
+				// Draw the x Grid lines
+				svg.append("g")
+					.attr("class", "grid")
+					.attr("transform", "translate(0," + height + ")")
+					.call(makeGrid(x, "bottom", timestamp.length)
+						.tickSize(-height, 0, 0)
+						.tickFormat("")
+					);
+
+
+				// Draw the y Grid lines
+				svg.append("g")
+					.attr("class", "grid")
+					.call(makeGrid(y, "left", getMaxIssues())
+						.tickSize(-width, 0, 0)
+						.tickFormat("")
+					);
+
+
+				// Draw the x-axis
+				svg.append("g")
+					.attr("class", "x axis")
+					.attr("transform", "translate(0," + height + ")")
+					.call(xAxis)
+					.selectAll("text")
+					.style("text-anchor", "end")
+					.attr("dx", "-.8em")
+					.attr("dy", ".15em")
+					.attr("transform", function() {
+						return "rotate(-65)";
+					});
+
+
+				// Draw the y-axis
+				svg.append("g")
+					.attr("class", "y axis")
+					.call(yAxis)
+					.append("text")
+					.attr("transform", "rotate(-90)")
+					.attr("y", 6)
+					.attr("dy", ".71em")
+					.style("text-anchor", "end");
+
+
+				// Text for y-axis
+				svg.append("text")
+					.attr("transform", "rotate(-90)")
+					.attr("y", 10 - margin.left)
+					.attr("x", 0 - (height / 2))
+					.attr("dy", "1em")
+					.style("text-anchor", "middle")
+					.text("Issues");
+
+
+				//Titel und Legende
+
+				svg.append("svg:text")
+					.attr("class", "title")
+					.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, 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);
+
+			}
+
+			makeChart();
+
+
+		</script>
+	</body>
+</html>
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)