Mercurial > roundup-cc
diff 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 |
line wrap: on
line diff
--- a/graph.html Fri Nov 02 17:06:45 2018 +0100 +++ b/graph.html Mon Nov 12 18:03:26 2018 +0100 @@ -33,55 +33,71 @@ opacity: 1; } - .line.critical { + .line.red { stroke: red; } - .line.critical.legend { + .line.red.legend { fill: red; } - .line.urgent { + .line.orange { stroke: orange; } - .line.urgent.legend { + .line.orange.legend { fill: orange; } - .line.bug { + .line.violet { stroke: violet; } - .line.bug.legend { + .line.violet.legend { fill: violet; } - .line.feature { + .line.chartreuse { stroke: chartreuse; style: stroke-dasharray; } - .line.feature.legend { + .line.chartreuse.legend { fill: chartreuse; } - .line.wish { + .line.blue { stroke: blue; } - .line.wish.legend { + .line.blue.legend { fill: blue; } - .line.noprio { + .line.grey { stroke: grey; } - .line.noprio.legend { + .line.grey.legend { fill: grey; } + .line.aqua{ + stroke: aqua; + } + + .line.aqua.legend { + fill: aqua; + } + + .line.darkgreen { + stroke: darkgreen; + } + + .line.darkgreen.legend { + fill: darkgreen; + } + .grid .tick { stroke: lightgrey; opacity: 0.7; @@ -106,14 +122,11 @@ makeChart(); }; - var critical=[]; - var urgent=[]; - var bug=[]; - var feature=[]; - var wish=[]; - var noPrio=[]; + var timestamp=[]; + var data=js_data_dickt + var linesCSS = ["red", "orange", "violet", "chartreuse", "blue", "grey", "aqua", "darkgreen"] function assignIssueToDate(issueArray, dateArray){ @@ -146,13 +159,9 @@ function getMaxIssues(){ maxIssuesOfAllArrays = []; - maxIssuesOfAllArrays.push(maxInObject(critical)); - maxIssuesOfAllArrays.push(maxInObject(urgent)); - maxIssuesOfAllArrays.push(maxInObject(bug)); - maxIssuesOfAllArrays.push(maxInObject(feature)); - maxIssuesOfAllArrays.push(maxInObject(wish)); - maxIssuesOfAllArrays.push(maxInObject(noPrio)); - + for (col in data){ + maxIssuesOfAllArrays.push(maxInObject(data[col])) + } return Math.max.apply(Math, maxIssuesOfAllArrays)+1; } @@ -201,7 +210,7 @@ return top_distance; } - function draw_legend_line(svg, width, Ypos, text, issues){ + function draw_legend_line(svg, width, Ypos, linesColour, text, issues){ svg.append("svg:text") .attr("class", "legend") .attr("x", width-30 ) @@ -210,24 +219,24 @@ svg.append("svg:text") .attr("class", "legend") - .attr("x", width+35 ) + .attr("x", width+65 ) .attr("y", Ypos) .text(issues); svg.append("rect") - .attr("class", "line " + text.toLowerCase() + " legend") + .attr("class", "line " + linesColour.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_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "NoPrio", noPrio[noPrio.length-1].points); + var colourNume = 0 + for (col in data) { + graph = data[col] + draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), linesCSS[colourNume], col, graph[graph.length-1].points); + colourNume += 1 + } } @@ -237,7 +246,7 @@ //declaration var sizeOfSystemBorders = 50; - var margin = {top: 20, right: 100, bottom: 90, left: 60}, + var margin = {top: 20, right: 150, bottom: 90, left: 60}, width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right, height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom; @@ -252,12 +261,12 @@ .y(function(d) { return y(d.points); }); //lines - var criticalLine = base_line; - var urgentLine = base_line; - var bugLine = base_line; - var featureLine = base_line; - var wishLine = base_line; - var noPrioLine = base_line; + + lines = {} + for (col in data) { + lines[col] = base_line + } + var timestampLine = base_line; @@ -359,14 +368,13 @@ .attr("y", -5) .text("Issues Nach Zeit"); - - 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, noPrio, "line noprio", noPrioLine, "17, 17"); - + var shape = 0 + var colourNume = 0 + for (col in data){ + draw_line(svg, data[col], "line " + linesCSS[colourNume] , lines[col], shape + ", " +shape); + colourNume += 1 + shape += 3 + } makeLegend(svg, width);