Mercurial > roundup-cc
annotate graph.html @ 8:4490a9f737da
Upgraded d3js to v3.5.10.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Tue, 01 Dec 2015 09:07:17 +0100 |
parents | 2df45f6ecd81 |
children | f198a92dd37f |
rev | line source |
---|---|
0 | 1 <!DOCTYPE html> |
2 <html> | |
3 <head> | |
4 <title> Issues </title> | |
5 <style type = text/css> | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
6 |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
7 * { |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
8 font-family: "Sans-serif"; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
9 font-size: 14px; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
10 } |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
11 |
0 | 12 .svg div{ |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
13 font: 10px; |
0 | 14 text-align: right; |
15 float: left; | |
16 display: block; | |
17 padding: 10px; | |
18 margin: 10px; | |
19 color: white; | |
20 } | |
21 | |
22 .axis path, | |
23 | |
24 .axis line { | |
25 fill: none; | |
26 stroke: black; | |
27 stroke-width: 1px; | |
28 } | |
29 | |
30 .line { | |
31 fill: none; | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
32 stroke-width: 3px; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
33 opacity: 1; |
0 | 34 } |
35 | |
36 .line.critical { | |
37 stroke: red; | |
38 } | |
39 | |
40 .line.critical.legend { | |
41 fill: red; | |
42 } | |
43 | |
44 .line.urgent { | |
45 stroke: orange; | |
46 } | |
47 | |
48 .line.urgent.legend { | |
49 fill: orange; | |
50 } | |
51 | |
52 .line.bug { | |
53 stroke: violet; | |
54 } | |
55 | |
56 .line.bug.legend { | |
57 fill: violet; | |
58 } | |
59 | |
60 .line.feature { | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
61 stroke: chartreuse; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
62 style: stroke-dasharray; |
0 | 63 } |
64 | |
65 .line.feature.legend { | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
66 fill: chartreuse; |
0 | 67 } |
68 | |
69 .line.wish { | |
70 stroke: blue; | |
71 } | |
72 | |
73 .line.wish.legend { | |
74 fill: blue; | |
75 } | |
76 | |
77 .grid .tick { | |
78 stroke: lightgrey; | |
79 opacity: 0.7; | |
80 } | |
81 | |
82 .grid path { | |
83 stroke-width: 0; | |
84 } | |
85 | |
86 </style> | |
87 </head> | |
88 <body> | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
89 <div id="content" style="display: inline-block"></div> |
0 | 90 <script type="text/javascript" src="d3.v3.min.js"></script> |
91 <script type="text/javascript"> | |
92 | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
93 window.onresize = function(){ |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
94 document.getElementById("content").innerHTML = ""; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
95 makeChart(); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
96 }; |
0 | 97 |
98 var critical=[]; | |
99 var urgent=[]; | |
100 var bug=[]; | |
101 var feature=[]; | |
102 var wish=[]; | |
103 var timestamp=[]; | |
104 | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
105 |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
106 |
0 | 107 function assignIssueToDate(issueArray, dateArray){ |
108 a = []; | |
109 for (var i = 0; i < issueArray.length; i++) { | |
110 a.push({points: issueArray[i].points, date : dateArray[i].date}); | |
111 } | |
112 | |
113 return a; | |
114 } | |
115 | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
116 function limitDatesOnXAxis(limit){ |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
117 if ( timestamp.length < limit ){ |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
118 return timestamp.length; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
119 } else { |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
120 return limit; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
121 } |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
122 } |
0 | 123 |
124 function maxInObject( array ){ | |
125 var maxVal = 0; | |
126 for (var i = 0; i < array.length; i++) { | |
127 if (maxVal < array[i].points){ | |
128 maxVal = array[i].points; | |
129 } | |
130 } | |
131 return maxVal; | |
132 } | |
133 | |
134 | |
135 function getMaxIssues(){ | |
136 maxIssuesOfAllArrays = []; | |
137 maxIssuesOfAllArrays.push(maxInObject(critical)); | |
138 maxIssuesOfAllArrays.push(maxInObject(urgent)); | |
139 maxIssuesOfAllArrays.push(maxInObject(bug)); | |
140 maxIssuesOfAllArrays.push(maxInObject(feature)); | |
141 maxIssuesOfAllArrays.push(maxInObject(wish)); | |
142 | |
143 return Math.max.apply(Math, maxIssuesOfAllArrays)+1; | |
144 } | |
145 | |
146 | |
147 function dayDifference(first, second) { | |
148 "use strict"; | |
149 var difference = (second - first) / (1000 * 60 * 60 * 24); | |
150 | |
151 // just to avoid the get thousands of lines... would look ugly. | |
152 if (difference > 60){ | |
153 difference = 60; | |
154 } | |
155 | |
156 return difference; | |
157 } | |
158 | |
159 | |
160 // function for the grid lines | |
161 function makeGrid(direction, orientation, ticknumber) { | |
162 return d3.svg.axis() | |
163 .scale(direction) | |
164 .orient(orientation) | |
165 .ticks( ticknumber ); | |
166 } | |
167 | |
168 | |
169 //append a svg_path. pretty generic | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
170 function draw_line(svg, data_array, css_class, line_object, lineShape){ |
0 | 171 svg.append("path") |
172 .datum(assignIssueToDate(data_array, timestamp)) | |
173 .attr("class", css_class) | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
174 .style("stroke-dasharray", (lineShape)) |
0 | 175 .attr("d", line_object); |
176 } | |
177 | |
178 | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
179 function makeLegend(svg, width){ |
0 | 180 |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
181 var legend_distance = width+40; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
182 var top_distance = 20; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
183 var distance_steps = 50; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
184 |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
185 |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
186 function set_propper_distance(steps){ |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
187 top_distance += steps; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
188 return top_distance; |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
189 } |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
190 |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
191 function draw_legend_line(svg, width, Ypos, text, issues){ |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
192 svg.append("svg:text") |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
193 .attr("class", "legend") |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
194 .attr("x", width-30 ) |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
195 .attr("y", Ypos) |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
196 .text(text + ":"); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
197 |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
198 svg.append("svg:text") |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
199 .attr("class", "legend") |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
200 .attr("x", width+35 ) |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
201 .attr("y", Ypos) |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
202 .text(issues); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
203 |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
204 svg.append("rect") |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
205 .attr("class", "line " + text.toLowerCase() + " legend") |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
206 .attr("x", width-30) |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
207 .attr("y", Ypos-20) |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
208 .attr("width", 100) |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
209 .attr("height", 2); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
210 } |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
211 |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
212 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Critical", critical[critical.length-1].points); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
213 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Urgent", urgent[urgent.length-1].points); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
214 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Bug", bug[bug.length-1].points); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
215 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Feature", feature[feature.length-1].points); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
216 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Wish", wish[wish.length-1].points); |
0 | 217 } |
218 | |
219 | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
220 |
0 | 221 //draw the chart |
222 function makeChart(){ | |
223 | |
224 //declaration | |
225 var sizeOfSystemBorders = 50; | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
226 var margin = {top: 20, right: 100, bottom: 90, left: 60}, |
0 | 227 width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right, |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
228 height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom; |
0 | 229 |
230 var x = d3.time.scale() | |
231 .range([0, width]); | |
232 | |
233 var y = d3.scale.linear() | |
234 .range([height, 0]); | |
235 | |
236 var base_line = d3.svg.line() | |
237 .x(function(d) { return x(d.date); }) | |
238 .y(function(d) { return y(d.points); }); | |
239 | |
240 //lines | |
241 var criticalLine = base_line; | |
242 var urgentLine = base_line; | |
243 var bugLine = base_line; | |
244 var featureLine = base_line; | |
245 var wishLine = base_line; | |
246 var timestampLine = base_line; | |
247 | |
248 | |
249 //set domain of y axis | |
250 var yDomain = [ ]; | |
251 yDomain[0] = 0; | |
252 yDomain[1] = getMaxIssues(); | |
253 y.domain(d3.extent(yDomain, function(d){return d; })); | |
254 | |
255 //set domain of y axis | |
256 x.domain(d3.extent(timestamp, function(d){return d.date; })); | |
257 | |
258 | |
259 var xAxis = d3.svg.axis() | |
260 .scale(x) | |
261 .orient("bottom") | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
262 .ticks(limitDatesOnXAxis(10)) |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
263 .tickFormat(d3.time.format("%d.%m:%H:%M")); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
264 // .tickFormat(d3.time.format("%X")); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
265 // .tickFormat(d3.time.format.iso); |
0 | 266 |
267 | |
268 var yAxis = d3.svg.axis() | |
269 .scale(y) | |
270 .orient("left"); | |
271 | |
272 | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
273 var svg = d3.select("#content") |
0 | 274 .append("svg") |
275 .attr("class", "svg") | |
276 .attr("width", width + margin.left + margin.right) | |
277 .attr("height", height + margin.top + margin.bottom) | |
278 .append("g") | |
279 .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
280 | |
281 | |
282 // creation | |
283 | |
284 | |
285 // Draw the x Grid lines | |
286 svg.append("g") | |
287 .attr("class", "grid") | |
288 .attr("transform", "translate(0," + height + ")") | |
289 .call(makeGrid(x, "bottom", timestamp.length) | |
290 .tickSize(-height, 0, 0) | |
291 .tickFormat("") | |
292 ); | |
293 | |
294 | |
295 // Draw the y Grid lines | |
296 svg.append("g") | |
297 .attr("class", "grid") | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
298 .call(makeGrid(y, "left", function(){return Math.min(getMaxIssues(), 50);}()) |
0 | 299 .tickSize(-width, 0, 0) |
300 .tickFormat("") | |
301 ); | |
302 | |
303 | |
304 // Draw the x-axis | |
305 svg.append("g") | |
306 .attr("class", "x axis") | |
307 .attr("transform", "translate(0," + height + ")") | |
308 .call(xAxis) | |
309 .selectAll("text") | |
310 .style("text-anchor", "end") | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
311 .attr("dx", "-.5em") |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
312 .attr("dy", ".1em") |
0 | 313 .attr("transform", function() { |
314 return "rotate(-65)"; | |
315 }); | |
316 | |
317 | |
318 // Draw the y-axis | |
319 svg.append("g") | |
320 .attr("class", "y axis") | |
321 .call(yAxis) | |
322 .append("text") | |
323 .attr("transform", "rotate(-90)") | |
324 .attr("y", 6) | |
325 .attr("dy", ".71em") | |
326 .style("text-anchor", "end"); | |
327 | |
328 | |
329 // Text for y-axis | |
330 svg.append("text") | |
331 .attr("transform", "rotate(-90)") | |
332 .attr("y", 10 - margin.left) | |
333 .attr("x", 0 - (height / 2)) | |
334 .attr("dy", "1em") | |
335 .style("text-anchor", "middle") | |
336 .text("Issues"); | |
337 | |
338 | |
339 //Titel und Legende | |
340 | |
341 svg.append("svg:text") | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
342 .attr("class", "text") |
0 | 343 .attr("x", 10) |
344 .attr("y", -5) | |
345 .text("Issues Nach Zeit"); | |
346 | |
347 | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
348 draw_line(svg, wish, "line wish", wishLine, "0, 0"); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
349 draw_line(svg, feature, "line feature", featureLine, "3, 3"); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
350 draw_line(svg, bug, "line bug", bugLine, "7, 7"); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
351 draw_line(svg, urgent, "line urgent", urgentLine, "13, 13"); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
352 draw_line(svg, critical, "line critical", criticalLine, "17, 17"); |
0 | 353 |
354 | |
1
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
355 makeLegend(svg, width); |
2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents:
0
diff
changeset
|
356 |
0 | 357 |
358 } | |
359 | |
360 makeChart(); | |
361 | |
362 | |
363 </script> | |
364 </body> | |
365 </html> |