Mercurial > roundup-cc

view graph.html @ 27:cdab667c6abb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Delete Code Duplication and Clean Up. * The search for the status does not require the "-1". * If the parameter you are looking for is not available in the tracker, an error message is issued and the program terminates, to avoid incorrect entries in the database
author Magnus Schieder <mschieder@intevation.de>
date Tue, 13 Nov 2018 21:04:22 +0100
parents 7161ce4e7ab1
children 9aca070c86bd
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.red {
					stroke: red;
			}

			.line.red.legend {
					fill: red;
			}

			.line.orange {
					stroke: orange;
			}

			.line.orange.legend {
					fill: orange;
			}

			.line.violet {
					stroke: violet;
			}

			.line.violet.legend {
					fill: violet;
			}

			.line.chartreuse {
					stroke: chartreuse;
					style: stroke-dasharray;
			}

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

			.line.blue {
					stroke: blue;
			}

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

			.line.grey {
					stroke: grey;
			}

			.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;
			}

			.grid path {
					stroke-width: 0;
			}

		</style>
	</head>
	<body>
	 	<h1>Filter</h1>
		<p>States:  status</p>
		<p>Keywords: keywords</p>
		<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 timestamp=[];
			var data=js_data_dickt

			var linesCSS = ["red", "orange", "violet", "chartreuse", "blue", "grey", "aqua", "darkgreen"]


			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 = [];
				for (col in data){
					maxIssuesOfAllArrays.push(maxInObject(data[col]))
				}
				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, linesColour, 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+65	)
						.attr("y", Ypos)
						.text(issues);

					svg.append("rect")
						.attr("class", "line " + linesColour.toLowerCase() + " legend")
						.attr("x", width-30)
						.attr("y", Ypos-20)
						.attr("width", 100)
						.attr("height", 2);
				}

				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
				}
			}



			//draw the chart
			function makeChart(){

				//declaration
				var sizeOfSystemBorders = 50;
				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;

				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

				lines = {}
				for (col in data) {
					lines[col] = 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");

				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);


			}

			makeChart();


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