diff options
author | Morgan Richomme <morgan.richomme@orange.com> | 2017-03-31 15:13:32 +0200 |
---|---|---|
committer | Morgan Richomme <morgan.richomme@orange.com> | 2017-03-31 15:24:29 +0200 |
commit | 3a625a5f4b176147e288dbee01734a666a25e34f (patch) | |
tree | d1db1369404266185a40322311c39df07564dbfc /docs/results/js | |
parent | 82232b46489314d70c566c015bab4eac88d4e83f (diff) |
Backup of reporting status for Danube 1.0
- reporting html pages for apex, compass, fuel and joid
- text file with history of Danube scenarios
- text file of validated Danube scenarios (100% in functest)
Change-Id: If5585acc5bf56406c0c92e8b132157ed742244f1
Signed-off-by: Morgan Richomme <morgan.richomme@orange.com>
Diffstat (limited to 'docs/results/js')
-rw-r--r-- | docs/results/js/default.css | 194 | ||||
-rw-r--r-- | docs/results/js/gauge.js | 165 | ||||
-rw-r--r-- | docs/results/js/trend.js | 75 |
3 files changed, 434 insertions, 0 deletions
diff --git a/docs/results/js/default.css b/docs/results/js/default.css new file mode 100644 index 00000000..e32fa5fb --- /dev/null +++ b/docs/results/js/default.css @@ -0,0 +1,194 @@ +.panel-header-item { + position: relative; + display: inline-block; + padding-left: 17px; + padding-right: 17px; +} + +.panel-pod-name { + margin-top: 10px; + margin-right: 27px; + float:right; + padding: 6px; +} + +.panel-default > .panel-heading .badge { + background-color: #007e88; + position: relative; + display: inline-block; +} + +.panel-default > .panel-heading .progress-bar { + height: 100%; + position: absolute; + left: 0; + top: 0; + width: 100%; + background-color: #0095a2 +} +.panel-default > .panel-heading h4 { + color: white; +} + +.panel-default > .panel-heading { + background-color: #00ADBB; + overflow: hidden; + position: relative; + width: 100%; +} + +th{ + text-align: center; +} + +td{ + text-align: center; +} + +.tr-danger { + background-color: #177870; + color: white; +} + +.btn-more { + color: white; + background-color: #0095a2; +} + +h1 { + display: block; + font-size: 2em; + margin-top: 0.67em; + margin-bottom: 0.67em; + margin-left: 0; + margin-right: 0; + font-weight: bold; +} + +h2 { + display: block; + font-size: 1.5em; + margin-top: 0.83em; + margin-bottom: 0.83em; + margin-left: 0; + margin-right: 0; + font-weight: bold; + color:rgb(128, 128, 128) +} + +#power-gauge g.arc { + fill: steelblue; +} + +#power-gauge g.pointer { + fill: #e85116; + stroke: #b64011; +} + +#power-gauge g.label text { + text-anchor: middle; + font-size: 14px; + font-weight: bold; + fill: #666; +} + +#power-gauge path { + +} + +.axis path, +.axis line { + fill: none; + stroke: #000; + shape-rendering: crispEdges; +} + +.dot { + fill: steelblue; + stroke: steelblue; + stroke-width: 1.5px; +} + +.myButtonPdf { + -moz-box-shadow:inset 0px 1px 0px 0px #f29c93; + -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93; + box-shadow:inset 0px 1px 0px 0px #f29c93; + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100)); + background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%); + background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%); + background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%); + background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%); + background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0); + background-color:#fe1a00; + -moz-border-radius:6px; + -webkit-border-radius:6px; + border-radius:6px; + border:1px solid #d83526; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:15px; + font-weight:bold; + padding:6px 24px; + text-decoration:none; + text-shadow:0px 1px 0px #b23e35; +} +.myButtonPdf:hover { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00)); + background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%); + background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%); + background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%); + background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%); + background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0); + background-color:#ce0100; +} +.myButtonPdf:active { + position:relative; + top:1px; +} + + +.myButtonCSV { + -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; + -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; + box-shadow:inset 0px 1px 0px 0px #bbdaf7; + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5)); + background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%); + background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%); + background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%); + background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%); + background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0); + background-color:#79bbff; + -moz-border-radius:6px; + -webkit-border-radius:6px; + border-radius:6px; + border:1px solid #84bbf3; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:15px; + font-weight:bold; + padding:6px 24px; + text-decoration:none; + text-shadow:0px 1px 0px #528ecc; +} +.myButtonCSV:hover { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff)); + background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%); + background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%); + background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%); + background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%); + background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0); + background-color:#378de5; +} +.myButtonCSV:active { + position:relative; + top:1px; +} + diff --git a/docs/results/js/gauge.js b/docs/results/js/gauge.js new file mode 100644 index 00000000..4cad16c6 --- /dev/null +++ b/docs/results/js/gauge.js @@ -0,0 +1,165 @@ +// ****************************************** +// Gauge for reporting +// Each scenario has a score +// We use a gauge to indicate the trust level +// ****************************************** +var gauge = function(container) { + var that = {}; + var config = { + size : 150, + clipWidth : 250, + clipHeight : 100, + ringInset : 20, + ringWidth : 40, + + pointerWidth : 7, + pointerTailLength : 5, + pointerHeadLengthPercent : 0.8, + + minValue : 0, + maxValue : 100, + + minAngle : -90, + maxAngle : 90, + + transitionMs : 4000, + + majorTicks : 7, + labelFormat : d3.format(',g'), + labelInset : 10, + + arcColorFn : d3.interpolateHsl(d3.rgb('#ff0000'), d3.rgb('#00ff00')) + }; + + +var range = undefined; +var r = undefined; +var pointerHeadLength = undefined; +var value = 0; + +var svg = undefined; +var arc = undefined; +var scale = undefined; +var ticks = undefined; +var tickData = undefined; +var pointer = undefined; + +var donut = d3.layout.pie(); + +function deg2rad(deg) { + return deg * Math.PI / 180; +} + +function newAngle(d) { + var ratio = scale(d); + var newAngle = config.minAngle + (ratio * range); + return newAngle; +} + +function configure() { + range = config.maxAngle - config.minAngle; + r = config.size / 2; + pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent); + + // a linear scale that maps domain values to a percent from 0..1 + scale = d3.scale.linear() + .range([0,1]) + .domain([config.minValue, config.maxValue]); + + ticks = scale.ticks(config.majorTicks); + tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;}); + + arc = d3.svg.arc() + .innerRadius(r - config.ringWidth - config.ringInset) + .outerRadius(r - config.ringInset) + .startAngle(function(d, i) { + var ratio = d * i; + return deg2rad(config.minAngle + (ratio * range)); + }) + .endAngle(function(d, i) { + var ratio = d * (i+1); + return deg2rad(config.minAngle + (ratio * range)); + }); +} +that.configure = configure; + +function centerTranslation() { + return 'translate('+r +','+ r +')'; +} + +function isRendered() { + return (svg !== undefined); +} +that.isRendered = isRendered; + +function render(newValue) { + svg = d3.select(container) + .append('svg:svg') + .attr('class', 'gauge') + .attr('width', config.clipWidth) + .attr('height', config.clipHeight); + + var centerTx = centerTranslation(); + + var arcs = svg.append('g') + .attr('class', 'arc') + .attr('transform', centerTx); + + arcs.selectAll('path') + .data(tickData) + .enter().append('path') + .attr('fill', function(d, i) { + return config.arcColorFn(d * i); + }) + .attr('d', arc); + + var lg = svg.append('g') + .attr('class', 'label') + .attr('transform', centerTx); + lg.selectAll('text') + .data(ticks) + .enter().append('text') + .attr('transform', function(d) { + var ratio = scale(d); + var newAngle = config.minAngle + (ratio * range); + return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')'; + }) + .text(config.labelFormat); + + var lineData = [ [config.pointerWidth / 2, 0], + [0, -pointerHeadLength], + [-(config.pointerWidth / 2), 0], + [0, config.pointerTailLength], + [config.pointerWidth / 2, 0] ]; + var pointerLine = d3.svg.line().interpolate('monotone'); + var pg = svg.append('g').data([lineData]) + .attr('class', 'pointer') + .attr('transform', centerTx); + + pointer = pg.append('path') + .attr('d', pointerLine/*function(d) { return pointerLine(d) +'Z';}*/ ) + .attr('transform', 'rotate(' +config.minAngle +')'); + + update(newValue === undefined ? 0 : newValue); +} +that.render = render; + +function update(newValue, newConfiguration) { + if ( newConfiguration !== undefined) { + configure(newConfiguration); + } + var ratio = scale(newValue); + var newAngle = config.minAngle + (ratio * range); + pointer.transition() + .duration(config.transitionMs) + .ease('elastic') + .attr('transform', 'rotate(' +newAngle +')'); +} +that.update = update; + +configure(); + +render(); + +return that; +}; diff --git a/docs/results/js/trend.js b/docs/results/js/trend.js new file mode 100644 index 00000000..f2421338 --- /dev/null +++ b/docs/results/js/trend.js @@ -0,0 +1,75 @@ +// ****************************************** +// Trend line for reporting +// based on scenario_history.txt +// where data looks like +// date,scenario,installer,detail,score +// 2016-09-22 13:12,os-nosdn-fdio-noha,apex,4/12,33.0 +// 2016-09-22 13:13,os-odl_l2-fdio-noha,apex,12/15,80.0 +// 2016-09-22 13:13,os-odl_l2-sfc-noha,apex,18/24,75.0 +// ..... +// ****************************************** +// Set the dimensions of the canvas / graph +var trend_margin = {top: 20, right: 30, bottom: 50, left: 40}, + trend_width = 300 - trend_margin.left - trend_margin.right, + trend_height = 130 - trend_margin.top - trend_margin.bottom; + +// Parse the date / time +var parseDate = d3.time.format("%Y-%m-%d %H:%M").parse; + +// Set the ranges +var trend_x = d3.time.scale().range([0, trend_width]); +var trend_y = d3.scale.linear().range([trend_height, 0]); + +// Define the axes +var trend_xAxis = d3.svg.axis().scale(trend_x) + .orient("bottom").ticks(2).tickFormat(d3.time.format("%m-%d")); + +var trend_yAxis = d3.svg.axis().scale(trend_y) + .orient("left").ticks(2); + +// Define the line +var valueline = d3.svg.line() + .x(function(d) { return trend_x(d.date); }) + .y(function(d) { return trend_y(d.score); }); + +var trend = function(container, trend_data) { + + var trend_svg = d3.select(container) + .append("svg") + .attr("width", trend_width + trend_margin.left + trend_margin.right) + .attr("height", trend_height + trend_margin.top + trend_margin.bottom) + .append("g") + .attr("transform", + "translate(" + trend_margin.left + "," + trend_margin.top + ")"); + + // Scale the range of the data + trend_x.domain(d3.extent(trend_data, function(d) { return d.date; })); + trend_y.domain([0, d3.max(trend_data, function(d) { return d.score; })]); + + // Add the X Axis + trend_svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + trend_height + ")") + .call(trend_xAxis); + + // Add the Y Axis + trend_svg.append("g") + .attr("class", "y axis") + .call(trend_yAxis); + + // Add the valueline path. + trend_svg.append("path") + .attr("class", "line") + .attr("d", valueline(trend_data)) + .attr("stroke", "steelblue") + .attr("fill", "none"); + + trend_svg.selectAll(".dot") + .data(trend_data) + .enter().append("circle") + .attr("r", 2.5) + .attr("cx", function(d) { return trend_x(d.date); }) + .attr("cy", function(d) { return trend_y(d.score); }); + + return trend; +} |