Mercurial > roundup-cc
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 } |