Mercurial > bottledash

comparison modules/web_view/graph.html @ 25:05e5441c5160

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
charts will now be displayed as they should!
author sean
date Fri, 14 Aug 2015 00:31:48 +0200
parents f730dd0bcf85
children d7856a645ea8
comparison
equal deleted inserted replaced
24:7d431b779512 25:05e5441c5160
1 <style type = text/css> 1 <style type = text/css>
2 2
3 * { 3 * {
4 font-family: "Sans-serif"; 4 font-family: "Sans-serif";
5 font-size: 14px; 5 /*font-size: 20px;*/
6 } 6 }
7 7
8 .svg div{ 8 .svg div{
9 font: 10px; 9 /*font: 10px;*/
10 text-align: right; 10 /*text-align: right;*/
11 float: left; 11 /*float: left;*/
12 display: block; 12 /*display: block;*/
13 padding: 10px; 13 /*padding: 10px;*/
14 margin: 10px; 14 /*margin: 10px;*/
15 color: white; 15 color: white;
16 } 16 }
17 17
18 .axis path, 18 .axis path,
19 19
20 .axis line { 20 .axis line {
21 fill: none; 21 fill: none;
22 stroke: lightgrey; 22 stroke: lightgrey;
23 /*opacity: 0.7;*/ 23 /*opacity: 0.7;*/
24 stroke-width: 1px; 24 /*stroke-width: 1px;*/
25 } 25 }
26 26
27 .y.axis path { 27 .y.axis path {
28 display: none; 28 display: none;
29 } 29 }
30 30
31 .line { 31 .line {
32 fill: none; 32 fill: none;
33 stroke-width: 3px; 33 stroke-width: 4px;
34 opacity: 1; 34 opacity: 1;
35 } 35 }
36 36
37 .line.critical { 37 .line.critical {
38 stroke: red; 38 stroke: red;
215 .ticks( ticknumber ); 215 .ticks( ticknumber );
216 } 216 }
217 217
218 218
219 //append a svg_path. pretty generic 219 //append a svg_path. pretty generic
220 function draw_line(svg, data_array, css_class, line_object, lineShape){ 220 function draw_line(svg, data_array, css_class, line_object){
221 svg.append("path") 221 svg.append("path")
222 .datum(assignIssueToDate(data_array, timestamp)) 222 .datum(assignIssueToDate(data_array, timestamp))
223 .attr("class", css_class) 223 .attr("class", css_class)
224 .style("stroke-dasharray", (lineShape))
225 .attr("d", line_object); 224 .attr("d", line_object);
226 } 225 }
227 226
228 227
229 function makeLegend(svg, width){ 228 function makeLegend(svg, width){
270 269
271 //draw the chart 270 //draw the chart
272 function makeChart(div_name){ 271 function makeChart(div_name){
273 272
274 //declaration 273 //declaration
275 var sizeOfSystemBorders = 20; 274 var targetDiv = document.getElementById(d3jsInjectionTarget)
276 // var margin = {top: 20, right: 100, bottom: 90, left: 60}; 275 // var sizeOfSystemBorders = 20;
277 // var margin = {top: 0, right: 0, bottom: 0, left: 0} 276
278 277 var margin = {top: 20, right: 10, bottom: 50, left:50}
279 var width = document.getElementsByClassName("chart")[0].clientWidth; 278
280 var height = document.getElementsByClassName("chart")[0].clientHeight; 279 var width = targetDiv.clientWidth - margin.left - margin.right
281 // var width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right; 280 var height = targetDiv.clientHeight - margin.top - margin.bottom
282 // var height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom;
283 281
284 var x = d3.time.scale() 282 var x = d3.time.scale()
285 .range([0, width]); 283 .range([0, width]);
286 284
287 var y = d3.scale.linear() 285 var y = d3.scale.linear()
311 309
312 310
313 var xAxis = d3.svg.axis() 311 var xAxis = d3.svg.axis()
314 .scale(x) 312 .scale(x)
315 .orient("bottom") 313 .orient("bottom")
316 .ticks(limitDatesOnXAxis(10)) 314 .ticks(limitDatesOnXAxis(4))
317 .tickFormat(d3.time.format("%d.%m")); 315 .tickFormat(d3.time.format("%d.%m"));
318 // .tickFormat(d3.time.format("%d.%m:%H:%M"));
319 // .tickFormat(d3.time.format("%X"));
320 // .tickFormat(d3.time.format.iso);
321
322 316
323 var yAxis = d3.svg.axis() 317 var yAxis = d3.svg.axis()
324 .scale(y) 318 .scale(y)
325 .orient("left"); 319 .orient("left");
326 320
327 321 var svg = d3.select("#" + d3jsInjectionTarget)
328 var svg = d3.select("." + d3jsInjectionTarget)
329 .append("svg") 322 .append("svg")
330 .attr("class", "svg") 323 .attr("class", "svg")
331 // .attr("width", width) 324 .attr("width", width + margin.left + margin.right)
332 // .attr("height", height) 325 .attr("height", height + margin.top + margin.bottom)
333 .attr("width", width-20)
334 .attr("height", height-10)
335 .append("g") 326 .append("g")
336 // .attr("transform", "translate( +50,+0,+0,+0)"); 327 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
337 .attr("transform", "translate(40 , 0)");
338 328
339 329
340 // creation 330 // creation
341 331
342 332
361 351
362 // Draw the x-axis 352 // Draw the x-axis
363 svg.append("g") 353 svg.append("g")
364 .attr("class", "x axis") 354 .attr("class", "x axis")
365 // .attr("transform", "translate(0, " + 20-height + ")") 355 // .attr("transform", "translate(0, " + 20-height + ")")
356 .attr("transform", "translate(0," + height + ")")
366 .call(xAxis) 357 .call(xAxis)
367 .selectAll("text") 358 .selectAll("text")
368 .style("text-anchor", "end") 359 // .style("text-anchor", "end")
369 // .attr("dx", "-.5em") 360 // .attr("dx", "-.5em")
370 // .attr("dy", ".1em") 361 // .attr("dy", ".1em")
371 // .attr("transform", function() { 362 // .attr("transform", function() {
372 // return "rotate(-30)"; 363 // return "rotate(-30)";
373 // }); 364 // });
377 svg.append("g") 368 svg.append("g")
378 .attr("class", "y axis") 369 .attr("class", "y axis")
379 .call(yAxis) 370 .call(yAxis)
380 .append("text") 371 .append("text")
381 .attr("transform", "rotate(-90)") 372 .attr("transform", "rotate(-90)")
382 .attr("y", 6) 373 // .attr("y", 6)
383 .attr("dy", ".71em") 374 // .attr("dy", ".71em")
384 .style("text-anchor", "end"); 375 .style("text-anchor", "end");
385 376
386 377
387 // Text for y-axis 378 // Text for y-axis
388 // svg.append("text") 379 // svg.append("text")
399 // .attr("class", "text") 390 // .attr("class", "text")
400 // .attr("x", 10) 391 // .attr("x", 10)
401 // .attr("y", -5) 392 // .attr("y", -5)
402 // .text("Issues Nach Zeit"); 393 // .text("Issues Nach Zeit");
403 394
404 draw_line(svg, wish, "line wish", wishLine, "0, 0"); 395 draw_line(svg, wish, "line wish", wishLine);
405 draw_line(svg, feature, "line feature", featureLine, "3, 3"); 396 draw_line(svg, feature, "line feature", featureLine);
406 draw_line(svg, bug, "line bug", bugLine, "7, 7"); 397 draw_line(svg, bug, "line bug", bugLine);
407 draw_line(svg, urgent, "line urgent", urgentLine, "13, 13"); 398 draw_line(svg, urgent, "line urgent", urgentLine);
408 draw_line(svg, critical, "line critical", criticalLine, "17, 17"); 399 draw_line(svg, critical, "line critical", criticalLine);
409 400
410 401
411 // makeLegend(svg, width); 402 // makeLegend(svg, width);
412 } 403 }
413 404
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)