Mercurial > bottledash

comparison modules/web_view/graph.html @ 16:f89ad628f831

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