Mercurial > roundup-cc

view graph.html @ 6:a1e71b5e4d68

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Chaning .hgignore to show db and script files again, so hg status shows them.
author Bernhard Reiter <bernhard@intevation.de>
date Tue, 01 Dec 2015 09:01:52 +0100
parents 2df45f6ecd81
children f198a92dd37f
line wrap: on
line source
<!DOCTYPE html>
<html>
	<head>
		<title> Issues </title>
		<style type = text/css>

			* {
				font-family: "Sans-serif";
				font-size: 14px;
			}

			.svg div{
					font: 10px;
					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: 3px;
					opacity: 1;
			}

			.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: chartreuse;
					style: stroke-dasharray;
			}

			.line.feature.legend {
					fill: chartreuse;
			}

			.line.wish {
					stroke: blue;
			}

			.line.wish.legend {
					fill: blue;
			}

			.grid .tick {
					stroke: lightgrey;
					opacity: 0.7;
			}

			.grid path {
					stroke-width: 0;
			}

		</style>
	</head>
	<body>
		<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=[];
			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 limitDatesOnXAxis(limit){
				if ( timestamp.length < limit ){
					return timestamp.length;
				} else {
					return limit;
				}
			}

			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, lineShape){
				svg.append("path")
					.datum(assignIssueToDate(data_array, timestamp))
					.attr("class", css_class)
					.style("stroke-dasharray", (lineShape))
					.attr("d", line_object);
			}


			function makeLegend(svg, width){

				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: 100, bottom: 90, left: 60},
					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); });

				//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")
					.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()
					.scale(y)
					.orient("left");


				var svg = d3.select("#content")
					.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", function(){return Math.min(getMaxIssues(), 50);}())
						.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", "-.5em")
					.attr("dy", ".1em")
					.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", "text")
					.attr("x", 10)
					.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");


				makeLegend(svg, width);


			}

			makeChart();


		</script>
	</body>
</html>
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)