Mercurial > roundup-cc
diff graph.html @ 1:2df45f6ecd81
new appereance (solid and dotted lines), resonsive layout, new legend,
new structure, cronjob-friendly
dynamic generation of search-strings, dynamic recognition of error-values,
ignores non-numeric priority-IDs
| author | sean |
|---|---|
| date | Tue, 14 Apr 2015 13:32:12 +0200 |
| parents | 3f139db894f1 |
| children | f198a92dd37f |
line wrap: on
line diff
--- a/graph.html Thu Apr 02 09:51:19 2015 +0200 +++ b/graph.html Tue Apr 14 13:32:12 2015 +0200 @@ -3,8 +3,14 @@ <head> <title> Issues </title> <style type = text/css> + + * { + font-family: "Sans-serif"; + font-size: 14px; + } + .svg div{ - font: 10px sans-serif; + font: 10px; text-align: right; float: left; display: block; @@ -23,7 +29,8 @@ .line { fill: none; - stroke-width: 2px; + stroke-width: 3px; + opacity: 1; } .line.critical { @@ -51,11 +58,12 @@ } .line.feature { - stroke: green; + stroke: chartreuse; + style: stroke-dasharray; } .line.feature.legend { - fill: green; + fill: chartreuse; } .line.wish { @@ -75,21 +83,17 @@ stroke-width: 0; } - .title { - font: 15px sans-serif; - } - - .legend{ - font: 15px sans-serif; - } - </style> </head> <body> - <div id="burndown_chart"></div> + <div id="content" style="display: inline-block"></div> <script type="text/javascript" src="d3.v3.min.js"></script> <script type="text/javascript"> + window.onresize = function(){ + document.getElementById("content").innerHTML = ""; + makeChart(); + }; var critical=[]; var urgent=[]; @@ -98,6 +102,8 @@ var wish=[]; var timestamp=[]; + + function assignIssueToDate(issueArray, dateArray){ a = []; for (var i = 0; i < issueArray.length; i++) { @@ -107,6 +113,13 @@ return a; } + function limitDatesOnXAxis(limit){ + if ( timestamp.length < limit ){ + return timestamp.length; + } else { + return limit; + } + } function maxInObject( array ){ var maxVal = 0; @@ -154,39 +167,65 @@ //append a svg_path. pretty generic - function draw_line(svg, data_array, css_class, line_object){ + function draw_line(svg, data_array, css_class, line_object, lineShape){ svg.append("path") .datum(assignIssueToDate(data_array, timestamp)) .attr("class", css_class) + .style("stroke-dasharray", (lineShape)) .attr("d", line_object); } - //helper for the legend - function draw_legend_line(svg, width, Ypos, text){ - svg.append("svg:text") - .attr("class", "legend") - .attr("x", width+50) - .attr("y", Ypos) - .text(text); + function makeLegend(svg, width){ - svg.append("rect") - .attr("class", "line " + text.toLowerCase() + " legend") - .attr("x", width+30) - .attr("y", Ypos-12) - .attr("width", 15) - .attr("height", 15); + var legend_distance = width+40; + var top_distance = 20; + var distance_steps = 50; + + + function set_propper_distance(steps){ + top_distance += steps; + return top_distance; + } + + function draw_legend_line(svg, width, Ypos, text, issues){ + svg.append("svg:text") + .attr("class", "legend") + .attr("x", width-30 ) + .attr("y", Ypos) + .text(text + ":"); + + svg.append("svg:text") + .attr("class", "legend") + .attr("x", width+35 ) + .attr("y", Ypos) + .text(issues); + + svg.append("rect") + .attr("class", "line " + text.toLowerCase() + " legend") + .attr("x", width-30) + .attr("y", Ypos-20) + .attr("width", 100) + .attr("height", 2); + } + + draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Critical", critical[critical.length-1].points); + draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Urgent", urgent[urgent.length-1].points); + draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Bug", bug[bug.length-1].points); + draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Feature", feature[feature.length-1].points); + draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Wish", wish[wish.length-1].points); } + //draw the chart function makeChart(){ //declaration var sizeOfSystemBorders = 50; - var margin = {top: 20, right: 200, bottom: 200, left: 65}, + var margin = {top: 20, right: 100, bottom: 90, left: 60}, width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right, - height = (document.documentElement.clientHeight-sizeOfSystemBorders) - (margin.top) - margin.bottom; + height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom; var x = d3.time.scale() .range([0, width]); @@ -198,11 +237,6 @@ .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.points); }); - var color_hash = { 0 : ["apple", "green"], - 1 : ["mango", "orange"], - 2 : ["cherry", "red"] - }; - //lines var criticalLine = base_line; var urgentLine = base_line; @@ -213,7 +247,6 @@ //set domain of y axis - var yDomain = [ ]; yDomain[0] = 0; yDomain[1] = getMaxIssues(); @@ -226,7 +259,10 @@ var xAxis = d3.svg.axis() .scale(x) .orient("bottom") - .tickFormat(d3.time.format.iso); + .ticks(limitDatesOnXAxis(10)) + .tickFormat(d3.time.format("%d.%m:%H:%M")); + // .tickFormat(d3.time.format("%X")); + // .tickFormat(d3.time.format.iso); var yAxis = d3.svg.axis() @@ -234,7 +270,7 @@ .orient("left"); - var svg = d3.select("body") + var svg = d3.select("#content") .append("svg") .attr("class", "svg") .attr("width", width + margin.left + margin.right) @@ -259,7 +295,7 @@ // Draw the y Grid lines svg.append("g") .attr("class", "grid") - .call(makeGrid(y, "left", getMaxIssues()) + .call(makeGrid(y, "left", function(){return Math.min(getMaxIssues(), 50);}()) .tickSize(-width, 0, 0) .tickFormat("") ); @@ -272,8 +308,8 @@ .call(xAxis) .selectAll("text") .style("text-anchor", "end") - .attr("dx", "-.8em") - .attr("dy", ".15em") + .attr("dx", "-.5em") + .attr("dy", ".1em") .attr("transform", function() { return "rotate(-65)"; }); @@ -303,24 +339,21 @@ //Titel und Legende svg.append("svg:text") - .attr("class", "title") + .attr("class", "text") .attr("x", 10) .attr("y", -5) .text("Issues Nach Zeit"); - draw_legend_line(svg, width, 50, "Critical"); - draw_legend_line(svg, width, 70, "Urgent"); - draw_legend_line(svg, width, 90, "Bug"); - draw_legend_line(svg, width, 110, "Feature"); - draw_legend_line(svg, width, 130, "Wish"); + draw_line(svg, wish, "line wish", wishLine, "0, 0"); + draw_line(svg, feature, "line feature", featureLine, "3, 3"); + draw_line(svg, bug, "line bug", bugLine, "7, 7"); + draw_line(svg, urgent, "line urgent", urgentLine, "13, 13"); + draw_line(svg, critical, "line critical", criticalLine, "17, 17"); - draw_line(svg, critical, "line critical", criticalLine); - draw_line(svg, urgent, "line urgent", urgentLine); - draw_line(svg, bug, "line bug", bugLine); - draw_line(svg, feature, "line feature", featureLine); - draw_line(svg, wish, "line wish", wishLine); + makeLegend(svg, width); + }