diff options
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, 0 insertions, 434 deletions
diff --git a/docs/results/js/default.css b/docs/results/js/default.css deleted file mode 100644 index e32fa5fb..00000000 --- a/docs/results/js/default.css +++ /dev/null @@ -1,194 +0,0 @@ -.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 deleted file mode 100644 index 4cad16c6..00000000 --- a/docs/results/js/gauge.js +++ /dev/null @@ -1,165 +0,0 @@ -// ****************************************** -// 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 deleted file mode 100644 index f2421338..00000000 --- a/docs/results/js/trend.js +++ /dev/null @@ -1,75 +0,0 @@ -// ****************************************** -// 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; -} |