comparison 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
comparison
equal deleted inserted replaced
24:89469aa41fe1 25:7161ce4e7ab1
31 fill: none; 31 fill: none;
32 stroke-width: 3px; 32 stroke-width: 3px;
33 opacity: 1; 33 opacity: 1;
34 } 34 }
35 35
36 .line.critical { 36 .line.red {
37 stroke: red; 37 stroke: red;
38 } 38 }
39 39
40 .line.critical.legend { 40 .line.red.legend {
41 fill: red; 41 fill: red;
42 } 42 }
43 43
44 .line.urgent { 44 .line.orange {
45 stroke: orange; 45 stroke: orange;
46 } 46 }
47 47
48 .line.urgent.legend { 48 .line.orange.legend {
49 fill: orange; 49 fill: orange;
50 } 50 }
51 51
52 .line.bug { 52 .line.violet {
53 stroke: violet; 53 stroke: violet;
54 } 54 }
55 55
56 .line.bug.legend { 56 .line.violet.legend {
57 fill: violet; 57 fill: violet;
58 } 58 }
59 59
60 .line.feature { 60 .line.chartreuse {
61 stroke: chartreuse; 61 stroke: chartreuse;
62 style: stroke-dasharray; 62 style: stroke-dasharray;
63 } 63 }
64 64
65 .line.feature.legend { 65 .line.chartreuse.legend {
66 fill: chartreuse; 66 fill: chartreuse;
67 } 67 }
68 68
69 .line.wish { 69 .line.blue {
70 stroke: blue; 70 stroke: blue;
71 } 71 }
72 72
73 .line.wish.legend { 73 .line.blue.legend {
74 fill: blue; 74 fill: blue;
75 } 75 }
76 76
77 .line.noprio { 77 .line.grey {
78 stroke: grey; 78 stroke: grey;
79 } 79 }
80 80
81 .line.noprio.legend { 81 .line.grey.legend {
82 fill: grey; 82 fill: grey;
83 }
84
85 .line.aqua{
86 stroke: aqua;
87 }
88
89 .line.aqua.legend {
90 fill: aqua;
91 }
92
93 .line.darkgreen {
94 stroke: darkgreen;
95 }
96
97 .line.darkgreen.legend {
98 fill: darkgreen;
83 } 99 }
84 100
85 .grid .tick { 101 .grid .tick {
86 stroke: lightgrey; 102 stroke: lightgrey;
87 opacity: 0.7; 103 opacity: 0.7;
104 window.onresize = function(){ 120 window.onresize = function(){
105 document.getElementById("content").innerHTML = ""; 121 document.getElementById("content").innerHTML = "";
106 makeChart(); 122 makeChart();
107 }; 123 };
108 124
109 var critical=[]; 125
110 var urgent=[];
111 var bug=[];
112 var feature=[];
113 var wish=[];
114 var noPrio=[];
115 var timestamp=[]; 126 var timestamp=[];
116 127 var data=js_data_dickt
128
129 var linesCSS = ["red", "orange", "violet", "chartreuse", "blue", "grey", "aqua", "darkgreen"]
117 130
118 131
119 function assignIssueToDate(issueArray, dateArray){ 132 function assignIssueToDate(issueArray, dateArray){
120 a = []; 133 a = [];
121 for (var i = 0; i < issueArray.length; i++) { 134 for (var i = 0; i < issueArray.length; i++) {
144 } 157 }
145 158
146 159
147 function getMaxIssues(){ 160 function getMaxIssues(){
148 maxIssuesOfAllArrays = []; 161 maxIssuesOfAllArrays = [];
149 maxIssuesOfAllArrays.push(maxInObject(critical)); 162 for (col in data){
150 maxIssuesOfAllArrays.push(maxInObject(urgent)); 163 maxIssuesOfAllArrays.push(maxInObject(data[col]))
151 maxIssuesOfAllArrays.push(maxInObject(bug)); 164 }
152 maxIssuesOfAllArrays.push(maxInObject(feature));
153 maxIssuesOfAllArrays.push(maxInObject(wish));
154 maxIssuesOfAllArrays.push(maxInObject(noPrio));
155
156 return Math.max.apply(Math, maxIssuesOfAllArrays)+1; 165 return Math.max.apply(Math, maxIssuesOfAllArrays)+1;
157 } 166 }
158 167
159 168
160 function dayDifference(first, second) { 169 function dayDifference(first, second) {
199 function set_propper_distance(steps){ 208 function set_propper_distance(steps){
200 top_distance += steps; 209 top_distance += steps;
201 return top_distance; 210 return top_distance;
202 } 211 }
203 212
204 function draw_legend_line(svg, width, Ypos, text, issues){ 213 function draw_legend_line(svg, width, Ypos, linesColour, text, issues){
205 svg.append("svg:text") 214 svg.append("svg:text")
206 .attr("class", "legend") 215 .attr("class", "legend")
207 .attr("x", width-30 ) 216 .attr("x", width-30 )
208 .attr("y", Ypos) 217 .attr("y", Ypos)
209 .text(text + ":"); 218 .text(text + ":");
210 219
211 svg.append("svg:text") 220 svg.append("svg:text")
212 .attr("class", "legend") 221 .attr("class", "legend")
213 .attr("x", width+35 ) 222 .attr("x", width+65 )
214 .attr("y", Ypos) 223 .attr("y", Ypos)
215 .text(issues); 224 .text(issues);
216 225
217 svg.append("rect") 226 svg.append("rect")
218 .attr("class", "line " + text.toLowerCase() + " legend") 227 .attr("class", "line " + linesColour.toLowerCase() + " legend")
219 .attr("x", width-30) 228 .attr("x", width-30)
220 .attr("y", Ypos-20) 229 .attr("y", Ypos-20)
221 .attr("width", 100) 230 .attr("width", 100)
222 .attr("height", 2); 231 .attr("height", 2);
223 } 232 }
224 233
225 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Critical", critical[critical.length-1].points); 234 var colourNume = 0
226 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Urgent", urgent[urgent.length-1].points); 235 for (col in data) {
227 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Bug", bug[bug.length-1].points); 236 graph = data[col]
228 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Feature", feature[feature.length-1].points); 237 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), linesCSS[colourNume], col, graph[graph.length-1].points);
229 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Wish", wish[wish.length-1].points); 238 colourNume += 1
230 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "NoPrio", noPrio[noPrio.length-1].points); 239 }
231 } 240 }
232 241
233 242
234 243
235 //draw the chart 244 //draw the chart
236 function makeChart(){ 245 function makeChart(){
237 246
238 //declaration 247 //declaration
239 var sizeOfSystemBorders = 50; 248 var sizeOfSystemBorders = 50;
240 var margin = {top: 20, right: 100, bottom: 90, left: 60}, 249 var margin = {top: 20, right: 150, bottom: 90, left: 60},
241 width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right, 250 width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right,
242 height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom; 251 height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom;
243 252
244 var x = d3.time.scale() 253 var x = d3.time.scale()
245 .range([0, width]); 254 .range([0, width]);
250 var base_line = d3.svg.line() 259 var base_line = d3.svg.line()
251 .x(function(d) { return x(d.date); }) 260 .x(function(d) { return x(d.date); })
252 .y(function(d) { return y(d.points); }); 261 .y(function(d) { return y(d.points); });
253 262
254 //lines 263 //lines
255 var criticalLine = base_line; 264
256 var urgentLine = base_line; 265 lines = {}
257 var bugLine = base_line; 266 for (col in data) {
258 var featureLine = base_line; 267 lines[col] = base_line
259 var wishLine = base_line; 268 }
260 var noPrioLine = base_line; 269
261 var timestampLine = base_line; 270 var timestampLine = base_line;
262 271
263 272
264 //set domain of y axis 273 //set domain of y axis
265 var yDomain = [ ]; 274 var yDomain = [ ];
357 .attr("class", "text") 366 .attr("class", "text")
358 .attr("x", 10) 367 .attr("x", 10)
359 .attr("y", -5) 368 .attr("y", -5)
360 .text("Issues Nach Zeit"); 369 .text("Issues Nach Zeit");
361 370
362 371 var shape = 0
363 draw_line(svg, wish, "line wish", wishLine, "0, 0"); 372 var colourNume = 0
364 draw_line(svg, feature, "line feature", featureLine, "3, 3"); 373 for (col in data){
365 draw_line(svg, bug, "line bug", bugLine, "7, 7"); 374 draw_line(svg, data[col], "line " + linesCSS[colourNume] , lines[col], shape + ", " +shape);
366 draw_line(svg, urgent, "line urgent", urgentLine, "13, 13"); 375 colourNume += 1
367 draw_line(svg, critical, "line critical", criticalLine, "17, 17"); 376 shape += 3
368 draw_line(svg, noPrio, "line noprio", noPrioLine, "17, 17"); 377 }
369
370 378
371 makeLegend(svg, width); 379 makeLegend(svg, width);
372 380
373 381
374 } 382 }
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)