From 967e20d181e708dfdfc9f596e51c5dbc1f366fc5 Mon Sep 17 00:00:00 2001 From: stefan judis Date: Sun, 30 Nov 2014 14:39:58 +0100 Subject: [PATCH 1/2] add number limited graph display for results - fix #119 --- tasks/assets/sass/components/_header.scss | 2 +- tasks/assets/scripts/phantomas.js | 48 +++++++++++++++++------ tasks/public/scripts/phantomas.min.js | 2 +- tasks/public/styles/phantomas.css | 2 +- tasks/tpl/index.tpl | 6 +++ 5 files changed, 44 insertions(+), 16 deletions(-) diff --git a/tasks/assets/sass/components/_header.scss b/tasks/assets/sass/components/_header.scss index 1e7dfd7..d25dedc 100644 --- a/tasks/assets/sass/components/_header.scss +++ b/tasks/assets/sass/components/_header.scss @@ -99,6 +99,6 @@ [class*="p--switcher"] { float: right; - margin : 0; + margin : 0 0 0 0.5em; padding: 0; } diff --git a/tasks/assets/scripts/phantomas.js b/tasks/assets/scripts/phantomas.js index 38f642b..59762bb 100644 --- a/tasks/assets/scripts/phantomas.js +++ b/tasks/assets/scripts/phantomas.js @@ -64,11 +64,12 @@ /** * draw the fancy line chart * - * @param {Array} data data - * @param {String} metric metric - * @param {String} type median|max|min|... + * @param {Array} data data + * @param {String} metric metric + * @param {String} type median|max|min|... + * @param {Number|undefined} lastRuns number of last displayed runs */ - function drawLineChart( data, metric, type ) { + function drawLineChart( data, metric, type, lastRuns ) { // Helper functions on top of 8-) /** @@ -333,8 +334,10 @@ circleContainer, zoom; - // Compute the minimum and maximum date - x.domain( [ data[ 0 ].date, data[ data.length - 1 ].date ] ); + // Compute x-positions for the minimum and maximum date + lastRuns = lastRuns || 10; + var startIndex = ( data.length >= lastRuns ) ? data.length - lastRuns : 0; + x.domain( [ data[ startIndex ].date, data[ data.length - 1 ].date ] ); // hacky hacky hacky :( y.domain( [ 0, @@ -434,7 +437,7 @@ // configure zoom zoom = d3.behavior.zoom() .x( x ) - .scaleExtent( [ 1, 100 ] ) + .scaleExtent( [ 0, 100 ] ) .on( 'zoom', zoomed ); // set up zoom pane @@ -683,15 +686,32 @@ } + /** + * Attach event to select box to rerender + * graphs depending on chosen tyoe + */ + function attachLastRunsChangeEvent() { + var switcher = document.getElementById( 'p--switcher--lastRuns' ); + + addEvent( switcher, 'change', function( event ) { + var currentMetric = document.getElementById( 'p--switcher--metrics' ).value; + + drawLineCharts( window.results, currentMetric, +event.target.value ); + } ); + } + + /** * Attach event to select box to rerender * graphs depending on chosen tyoe */ function attachMetricChangeEvent() { - var switcher = document.getElementById( 'p--switcher--metrics' ); + var switcher = document.getElementById( 'p--switcher--metrics' ); addEvent( switcher, 'change', function( event ) { - drawLineCharts( window.results, event.target.value ); + var currentLastRuns = +document.getElementById( 'p--switcher--lastRuns' ).value; + + drawLineCharts( window.results, event.target.value, currentLastRuns ); } ); } @@ -705,6 +725,7 @@ attachDescriptionEvents(); attachHeaderEvents(); attachMetricChangeEvent(); + attachLastRunsChangeEvent(); } @@ -758,10 +779,11 @@ * Check all metrics if numeric values are * included and initialize all graphs for it * - * @param {Array} data data - * @param {String|undefined} type type of displayed data + * @param {Array} data data + * @param {String|undefined} type type of displayed data + * @parem {Number|undefined} lastRuns number of last displayed runs */ - function drawLineCharts( data, type ) { + function drawLineCharts( data, type, lastRuns ) { var lastMetric = data[ data.length - 1 ]; var loaders = document.querySelectorAll( '.p--graphs--loading' ); @@ -778,7 +800,7 @@ metric !== 'timestamp' && document.getElementById( 'graph--' + metric ) ) { - setTimeout( drawLineChart.bind( null, data, metric, type ), 250 ); + setTimeout( drawLineChart.bind( null, data, metric, type, lastRuns ), 250 ); } } } diff --git a/tasks/public/scripts/phantomas.min.js b/tasks/public/scripts/phantomas.min.js index 50558b5..9dd2794 100644 --- a/tasks/public/scripts/phantomas.min.js +++ b/tasks/public/scripts/phantomas.min.js @@ -1 +1 @@ -!function(d3,window,document){function addEvent(obj,type,fn){obj.attachEvent?(obj["e"+type+fn]=fn,obj[type+fn]=function(){obj["e"+type+fn](window.event)},obj.attachEvent("on"+type,obj[type+fn])):obj.addEventListener(type,fn,!1)}function getParent(el,className){for(var parent=null,p=el.parentNode;null!==p;){var o=p;if(o.classList.contains(className)){parent=o;break}p=o.parentNode}return parent}function drawLineChart(data,metric,type){function drawCircle(datum){circleContainer.datum(datum).append("circle").attr("class",function(d){return assertionValue?">"===assertionValue.type?d.value[type]>assertionValue.value?"lineChart--circle failed":"lineChart--circle":d.value[type]"===assertionValue.type?assertionValue&&d.value[type]>assertionValue.value?"lineChart--circle highlighted failed":"lineChart--circle highlighted":assertionValue&&d.value[type]"===assertionValue.type?d.value[type]>assertionValue.value?"lineChart--circle failed":"lineChart--circle":d.value[type]assertionValue.value?d.value[type]:assertionValue.value:0})]),loader.attr("class","p--graphs--loading"),svg.empty()||svg.selectAll("g, path, rect, text, line").remove(),svg.append("g").attr("class","lineChart--xAxisTicks").attr("transform","translate("+detailWidth/2+","+height+")").call(xAxisTicks),svg.append("g").attr("class","lineChart--xAxis").attr("transform","translate("+detailWidth/2+","+(height+5)+")").call(xAxis).selectAll("text").attr("transform","rotate(45)").style("text-anchor","start"),svg.append("g").attr("class","lineChart--yAxisTicks").call(yAxisTicks),null!==assertionValue&&(assertionGroup=svg.append("g").attr("transform","translate( 0,"+y(assertionValue.value)+")").attr("class","p--lineChart--assertion"),">"===assertionValue.type?assertionGroup.append("rect").attr("class","p--lineChart--assertionBox").attr("x",0).attr("y",-y(assertionValue.value)).attr("width",width).attr("height",y(assertionValue.value)).attr("fill","rgba( 255, 0, 0, 0.5 )"):assertionGroup.append("rect").attr("class","p--lineChart--assertionBox").attr("x",0).attr("y",0).attr("width",width).attr("height",height-y(assertionValue.value)).attr("fill","rgba( 255, 0, 0, 0.5 )"),assertionGroup.append("line").attr("x1",0).attr("y1",0).attr("x2",width).attr("y2",0).attr("class","p--lineChart--assertion"),assertionGroup.append("rect").attr("class","p--lineChart--assertionTextBg").attr("width",50).attr("height",20).attr("x",0).attr("y",-10),assertionGroup.append("text").attr("x",25).attr("y",4).text(assertionValue.type+" "+assertionValue.value)),svg.append("path").datum(data).attr("class","p--lineChart--area").attr("d",area),svg.append("path").datum(data).attr("class","p--lineChart--areaLine").attr("d",line),zoom=d3.behavior.zoom().x(x).scaleExtent([1,100]).on("zoom",zoomed),svg.append("rect").attr("class","p--lineChart--pane").attr("width",width).attr("height",height).call(zoom),drawCircles(data),svg.append("rect").attr("class","p--lineChart--reset").attr("width",77).attr("height",23).attr("x",width-77).attr("y",2).on("click",unZoomed),svg.append("text").attr("class","p--lineChart--resetText").attr("x",width-38).attr("y",17).text("reset").on("click",unZoomed)}function appendDetailBoxForCircle(circle){removeDetailBoxForCircle(circle);var bBox=circle.getBBox(),detailBox=document.createElement("div"),listContainer=getParent(circle,"p--graphs--graph");detailBox.innerHTML="
Average:
"+circle.attributes.getNamedItem("data-average").value+"
Max:
"+circle.attributes.getNamedItem("data-max").value+"
Median:
"+circle.attributes.getNamedItem("data-median").value+"
Min:
"+circle.attributes.getNamedItem("data-min").value+"
Sum:
"+circle.attributes.getNamedItem("data-sum").value+"
",detailBox.style.left=bBox.x-71+"px",detailBox.style.top=bBox.y-75+"px",detailBox.classList.add("p--graphs--detailBox"),listContainer.appendChild(detailBox)}function removeDetailBoxForCircle(circle){var listContainer=getParent(circle,"p--graphs--graph"),detailBox=listContainer.querySelector(".p--graphs--detailBox");detailBox&&listContainer.removeChild(detailBox)}function attachCircleEvents(){var mainContainer=document.getElementsByTagName("main")[0];addEvent(mainContainer,"mouseover",function(event){"circle"===event.target.tagName&&(appendDetailBoxForCircle(event.target),highlightTableRow(event.target))}),addEvent(mainContainer,"mouseout",function(event){"circle"===event.target.tagName&&(removeDetailBoxForCircle(event.target),unhighlightTableRow(event.target))})}function attachClickEvents(){var body=document.querySelector("body"),headerHeight=document.getElementsByTagName("header")[0].getBoundingClientRect().height,overlay=document.getElementById("p--modal__overlay"),closeButton=document.getElementById("p--modal__close");addEvent(body,"click",function(event){if(event.target.classList.contains("js-expand")&&document.getElementById("p--table--container--"+event.target.attributes.getNamedItem("data-metric").value).classList.toggle("expanded"),event.target.classList.contains("js-offenders")&&(overlay.style.display="block",overlay.style.opacity=.5,closeButton.style.display="block",document.getElementById("offender--"+event.target.attributes.getNamedItem("data-metric").value).classList.toggle("in-modal")),(event.target===overlay||event.target===closeButton)&&(overlay.style.opacity=0,overlay.style.display="none",closeButton.style.display="none",document.querySelector(".in-modal").classList.toggle("in-modal")),event.target.classList.contains("js-scroll")){event.preventDefault();var yPosition=0,element=document.getElementById(event.target.href.split("#")[1]);if(element.offsetParent)do yPosition+=element.offsetTop;while(element=element.offsetParent);window.scrollTo(0,yPosition-headerHeight-20)}})}function attachDescriptionEvents(){var body=document.querySelector("body");addEvent(body,"mouseover",function(event){if("A"===event.target.tagName&&event.target.classList.contains("active")&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))){var target=document.getElementById(event.target.href.split("#")[1]);target.removeAttribute("hidden"),event.preventDefault()}}),addEvent(body,"mouseout",function(event){if("A"===event.target.tagName&&event.target.classList.contains("active")&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))){var target=document.getElementById(event.target.href.split("#")[1]);target.setAttribute("hidden","hidden"),event.preventDefault()}}),addEvent(body,"click",function(event){"A"===event.target.tagName&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))&&event.preventDefault()})}function attachHeaderEvents(){var body=document.querySelector("body"),container=document.getElementById("p--header--notification");addEvent(body,"mouseover",function(event){event.target.classList.contains("js-warning")&&(container.innerHTML=event.target.innerHTML)})}function attachMetricChangeEvent(){var switcher=document.getElementById("p--switcher--metrics");addEvent(switcher,"change",function(event){drawLineCharts(window.results,event.target.value)})}function attachEventListeners(){attachCircleEvents(),attachClickEvents(),attachDescriptionEvents(),attachHeaderEvents(),attachMetricChangeEvent()}function unhighlightTableRow(target){var row=document.querySelectorAll("#"+target.attributes.getNamedItem("data-metric").value+"--row--"+target.attributes.getNamedItem("data-timestamp").value);row.length&&row[0].classList.remove("active")}function highlightTableRow(target){var metric=target.attributes.getNamedItem("data-metric").value,row=document.getElementById(metric+"--row--"+target.attributes.getNamedItem("data-timestamp").value),scrollContainer=document.getElementById("p--table--container--"+metric);row&&scrollContainer&&(scrollContainer.scrollTop=row.offsetTop,row.classList.add("active"))}function drawLineCharts(data,type){for(var lastMetric=data[data.length-1],loaders=document.querySelectorAll(".p--graphs--loading"),i=0;i"===assertionValue.type?d.value[type]>assertionValue.value?"lineChart--circle failed":"lineChart--circle":d.value[type]"===assertionValue.type?assertionValue&&d.value[type]>assertionValue.value?"lineChart--circle highlighted failed":"lineChart--circle highlighted":assertionValue&&d.value[type]"===assertionValue.type?d.value[type]>assertionValue.value?"lineChart--circle failed":"lineChart--circle":d.value[type]=lastRuns?data.length-lastRuns:0;x.domain([data[startIndex].date,data[data.length-1].date]),y.domain([0,d3.max(data,function(d){return d.value?!assertionValue||d.value[type]>assertionValue.value?d.value[type]:assertionValue.value:0})]),loader.attr("class","p--graphs--loading"),svg.empty()||svg.selectAll("g, path, rect, text, line").remove(),svg.append("g").attr("class","lineChart--xAxisTicks").attr("transform","translate("+detailWidth/2+","+height+")").call(xAxisTicks),svg.append("g").attr("class","lineChart--xAxis").attr("transform","translate("+detailWidth/2+","+(height+5)+")").call(xAxis).selectAll("text").attr("transform","rotate(45)").style("text-anchor","start"),svg.append("g").attr("class","lineChart--yAxisTicks").call(yAxisTicks),null!==assertionValue&&(assertionGroup=svg.append("g").attr("transform","translate( 0,"+y(assertionValue.value)+")").attr("class","p--lineChart--assertion"),">"===assertionValue.type?assertionGroup.append("rect").attr("class","p--lineChart--assertionBox").attr("x",0).attr("y",-y(assertionValue.value)).attr("width",width).attr("height",y(assertionValue.value)).attr("fill","rgba( 255, 0, 0, 0.5 )"):assertionGroup.append("rect").attr("class","p--lineChart--assertionBox").attr("x",0).attr("y",0).attr("width",width).attr("height",height-y(assertionValue.value)).attr("fill","rgba( 255, 0, 0, 0.5 )"),assertionGroup.append("line").attr("x1",0).attr("y1",0).attr("x2",width).attr("y2",0).attr("class","p--lineChart--assertion"),assertionGroup.append("rect").attr("class","p--lineChart--assertionTextBg").attr("width",50).attr("height",20).attr("x",0).attr("y",-10),assertionGroup.append("text").attr("x",25).attr("y",4).text(assertionValue.type+" "+assertionValue.value)),svg.append("path").datum(data).attr("class","p--lineChart--area").attr("d",area),svg.append("path").datum(data).attr("class","p--lineChart--areaLine").attr("d",line),zoom=d3.behavior.zoom().x(x).scaleExtent([0,100]).on("zoom",zoomed),svg.append("rect").attr("class","p--lineChart--pane").attr("width",width).attr("height",height).call(zoom),drawCircles(data),svg.append("rect").attr("class","p--lineChart--reset").attr("width",77).attr("height",23).attr("x",width-77).attr("y",2).on("click",unZoomed),svg.append("text").attr("class","p--lineChart--resetText").attr("x",width-38).attr("y",17).text("reset").on("click",unZoomed)}function appendDetailBoxForCircle(circle){removeDetailBoxForCircle(circle);var bBox=circle.getBBox(),detailBox=document.createElement("div"),listContainer=getParent(circle,"p--graphs--graph");detailBox.innerHTML="
Average:
"+circle.attributes.getNamedItem("data-average").value+"
Max:
"+circle.attributes.getNamedItem("data-max").value+"
Median:
"+circle.attributes.getNamedItem("data-median").value+"
Min:
"+circle.attributes.getNamedItem("data-min").value+"
Sum:
"+circle.attributes.getNamedItem("data-sum").value+"
",detailBox.style.left=bBox.x-71+"px",detailBox.style.top=bBox.y-75+"px",detailBox.classList.add("p--graphs--detailBox"),listContainer.appendChild(detailBox)}function removeDetailBoxForCircle(circle){var listContainer=getParent(circle,"p--graphs--graph"),detailBox=listContainer.querySelector(".p--graphs--detailBox");detailBox&&listContainer.removeChild(detailBox)}function attachCircleEvents(){var mainContainer=document.getElementsByTagName("main")[0];addEvent(mainContainer,"mouseover",function(event){"circle"===event.target.tagName&&(appendDetailBoxForCircle(event.target),highlightTableRow(event.target))}),addEvent(mainContainer,"mouseout",function(event){"circle"===event.target.tagName&&(removeDetailBoxForCircle(event.target),unhighlightTableRow(event.target))})}function attachClickEvents(){var body=document.querySelector("body"),headerHeight=document.getElementsByTagName("header")[0].getBoundingClientRect().height,overlay=document.getElementById("p--modal__overlay"),closeButton=document.getElementById("p--modal__close");addEvent(body,"click",function(event){if(event.target.classList.contains("js-expand")&&document.getElementById("p--table--container--"+event.target.attributes.getNamedItem("data-metric").value).classList.toggle("expanded"),event.target.classList.contains("js-offenders")&&(overlay.style.display="block",overlay.style.opacity=.5,closeButton.style.display="block",document.getElementById("offender--"+event.target.attributes.getNamedItem("data-metric").value).classList.toggle("in-modal")),(event.target===overlay||event.target===closeButton)&&(overlay.style.opacity=0,overlay.style.display="none",closeButton.style.display="none",document.querySelector(".in-modal").classList.toggle("in-modal")),event.target.classList.contains("js-scroll")){event.preventDefault();var yPosition=0,element=document.getElementById(event.target.href.split("#")[1]);if(element.offsetParent)do yPosition+=element.offsetTop;while(element=element.offsetParent);window.scrollTo(0,yPosition-headerHeight-20)}})}function attachDescriptionEvents(){var body=document.querySelector("body");addEvent(body,"mouseover",function(event){if("A"===event.target.tagName&&event.target.classList.contains("active")&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))){var target=document.getElementById(event.target.href.split("#")[1]);target.removeAttribute("hidden"),event.preventDefault()}}),addEvent(body,"mouseout",function(event){if("A"===event.target.tagName&&event.target.classList.contains("active")&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))){var target=document.getElementById(event.target.href.split("#")[1]);target.setAttribute("hidden","hidden"),event.preventDefault()}}),addEvent(body,"click",function(event){"A"===event.target.tagName&&(event.target.classList.contains("p--graphs--descriptionBtn")||event.target.classList.contains("p--graphs--warningBtn")||event.target.classList.contains("p--graphs--experimentalBtn"))&&event.preventDefault()})}function attachHeaderEvents(){var body=document.querySelector("body"),container=document.getElementById("p--header--notification");addEvent(body,"mouseover",function(event){event.target.classList.contains("js-warning")&&(container.innerHTML=event.target.innerHTML)})}function attachLastRunsChangeEvent(){var switcher=document.getElementById("p--switcher--lastRuns");addEvent(switcher,"change",function(event){var currentMetric=document.getElementById("p--switcher--metrics").value;drawLineCharts(window.results,currentMetric,+event.target.value)})}function attachMetricChangeEvent(){var switcher=document.getElementById("p--switcher--metrics");addEvent(switcher,"change",function(event){var currentLastRuns=+document.getElementById("p--switcher--lastRuns").value;drawLineCharts(window.results,event.target.value,currentLastRuns)})}function attachEventListeners(){attachCircleEvents(),attachClickEvents(),attachDescriptionEvents(),attachHeaderEvents(),attachMetricChangeEvent(),attachLastRunsChangeEvent()}function unhighlightTableRow(target){var row=document.querySelectorAll("#"+target.attributes.getNamedItem("data-metric").value+"--row--"+target.attributes.getNamedItem("data-timestamp").value);row.length&&row[0].classList.remove("active")}function highlightTableRow(target){var metric=target.attributes.getNamedItem("data-metric").value,row=document.getElementById(metric+"--row--"+target.attributes.getNamedItem("data-timestamp").value),scrollContainer=document.getElementById("p--table--container--"+metric);row&&scrollContainer&&(scrollContainer.scrollTop=row.offsetTop,row.classList.add("active"))}function drawLineCharts(data,type,lastRuns){for(var lastMetric=data[data.length-1],loaders=document.querySelectorAll(".p--graphs--loading"),i=0;ia{position:relative;display:block;margin:0 0.25em;width:2em;height:0;padding-top:2em;overflow:hidden;background:#a33838;cursor:pointer}.p--header--warnings li>a:before{position:absolute;content:'!';top:0;left:0;bottom:0;right:0;line-height:1.5;text-align:center;font-size:1.5em;color:#fff}[class*="p--switcher"]{float:right;margin:0;padding:0}.p--filmstrip{list-style:none;margin:0;padding:0 1em}.p--filmstrip li{width:99%;position:relative;background:#fff;margin:0.5%;padding:0;display:inline-block;vertical-align:top}@media screen and (min-width: 700px){.p--filmstrip li{width:49%}}@media screen and (min-width: 1000px){.p--filmstrip li{width:24%}}.p--filmstrip img{width:100%}.p--filmstrip--time{position:relative;padding:0.5em;color:#fff;background:#45b5b3;-moz-box-shadow:0 0.125em 0.125em #1a2d38;-webkit-box-shadow:0 0.125em 0.125em #1a2d38;box-shadow:0 0.125em 0.125em #1a2d38}.p--filmstrip--time:before,.p--filmstrip--time:after{position:absolute;z-index:-1;content:'';right:0;top:100%;border-top:solid 0.5em transparent;border-left:solid 0.5em #45b5b3;border-bottom:solid 0.5em transparent;margin-top:-0.5em}.p--filmstrip--wrapper{position:absolute;z-index:5;top:1em;right:-0.5em}.p--footer{text-align:center}.p--graphs{position:relative;list-style:none;padding:0;margin:0}.p--graphs--button__expand,.p--graphs--button__offenders{position:absolute;height:2em;width:5.5em;top:0.25em;margin:0 0 1em 0;background-color:#45b5b3;border:none;color:#fff;text-align:center;-moz-transition:background-color 0.25s ease-in;-o-transition:background-color 0.25s ease-in;-webkit-transition:background-color 0.25s ease-in;transition:background-color 0.25s ease-in}.p--graphs--button__expand:hover,.p--graphs--button__offenders:hover{background-color:#68c5c4}.p--graphs--button__expand{left:0}.p--graphs--button__offenders{left:6em}.p--graphs--description,.p--graphs--warning{width:calc(80% - 5em );max-height:14em;position:absolute;top:0;right:7em;padding:1em 1em;overflow:hidden;color:#45b5b3;background-color:rgba(26,45,56,0.9)}.p--graphs--description[hidden],.p--graphs--warning[hidden]{display:none}.p--graphs--descriptionBtn,.p--graphs--warningBtn{position:absolute;top:0.25em;width:1.5em;height:0;padding:1.5em 0 0 0;overflow:hidden;cursor:default;-moz-transition:background-color 0.2s ease-in;-o-transition:background-color 0.2s ease-in;-webkit-transition:background-color 0.2s ease-in;transition:background-color 0.2s ease-in}.p--graphs--descriptionBtn.active,.p--graphs--warningBtn.active{cursor:pointer}.p--graphs--descriptionBtn:before,.p--graphs--warningBtn:before{position:absolute;content:'?';color:#fff;top:0;right:0;bottom:0;left:0;text-align:center;line-height:1.5em}.p--graphs--descriptionBtn{right:0;background-color:rgba(69,181,179,0.1)}.p--graphs--descriptionBtn.active{background-color:#45b5b3}.p--graphs--descriptionBtn.active:hover{background-color:#68c5c4}.p--graphs--descriptionBtn:before{content:'?'}.p--graphs--warningBtn{right:2em;background-color:rgba(155,142,180,0.1)}.p--graphs--warningBtn.active{background-color:#9b8eb4}.p--graphs--warningBtn.active:hover{background-color:#b6adc8}.p--graphs--warningBtn:before{content:'!'}.p--graphs--detailBox{position:absolute;width:150px;padding:0.5em;background-color:rgba(26,45,56,0.9);color:#45b5b3;text-align:center;border-radius:3px}.p--graphs--detailBox:before{position:absolute;content:'';width:0;height:0;top:100%;left:50%;margin-left:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(26,45,56,0.9)}.p--graphs--detailBox dl{margin:0;padding:0}.p--graphs--detailBox dt,.p--graphs--detailBox dd{display:inline-block;width:calc(50% );margin:0;padding:0}.p--graphs--detailBox dt{text-align:left}.p--graphs--detailBox dd{text-align:right}.p--graphs--graph{position:relative;width:100%;min-height:250px;display:inline-block;vertical-align:top;border-bottom:1px solid #45b5b3;box-shadow:0 1px 0 #1a2d38;margin:0 2.5% 2.5em 2.5%}.p--graphs--graph.failed{box-shadow:0 0 0 3px #a33838,0 0 1px 4px #1a2d38}@media screen and (min-width: 700px){.p--graphs--graph{width:45%;margin:0 2.5% 2.5em 2.5%}}@media screen and (min-width: 1000px){.p--graphs--graph{width:31.333%;margin:0 1% 2.5em 1%}} +@charset "UTF-8";*{-moz-box-sizing:border-box;box-sizing:border-box}a{color:#9b8eb4;position:relative;text-decoration:none}a.fancy:before{content:attr(data-url);position:absolute;color:#45b5b3;text-overflow:clip;white-space:nowrap;text-align:left;text-shadow:0 1px 1px #000;width:0;height:105%;left:0;top:0;overflow:hidden;-moz-transition:width 0.5s ease-in;-o-transition:width 0.5s ease-in;-webkit-transition:width 0.5s ease-in;transition:width 0.5s ease-in}a.fancy:hover:before,a.fancy:active:before,a.fancy a:focus:before{width:100%}body{background-color:#253f50;color:#d3d8dc;font-size:14px;font-family:sans-serif;font-weight:100;letter-spacing:1px}main{width:98%;margin:0 auto 1em;padding:0;background:#223a49}h1,h2,h3,h4,h5{color:#45b5b3;text-align:center;margin:0;padding:0}h2{position:relative;margin:0.5em 0;padding:1em 0;font-size:28px;font-weight:100;background:#253f50}h2:first-child{margin-top:3em}h3{position:relative;margin:0.75em -0.5em;padding:0.5em 0;font-size:21px;font-weight:100;line-height:28px;color:#fff;background-color:#45b5b3;-moz-box-shadow:0 0.125em 0.125em #1a2d38;-webkit-box-shadow:0 0.125em 0.125em #1a2d38;box-shadow:0 0.125em 0.125em #1a2d38}h3:before,h3:after{position:absolute;z-index:-1;content:'';top:100%;border-top:solid 0.5em transparent;border-bottom:solid 0.5em transparent;margin-top:-0.5em}h3:before{left:0;border-right:solid 0.5em #45b5b3}h3:after{right:0;border-left:solid 0.5em #45b5b3}h4{margin:0.5em 0;font-size:14px;font-weight:100}.p--header{position:fixed;top:0;left:0;z-index:6;width:100%;height:4em;padding:1em;background-color:#1a2d38;-moz-box-shadow:0 1px 0.125em #000;-webkit-box-shadow:0 1px 0.125em #000;box-shadow:0 1px 0.125em #000;-moz-transform:translateZ(0);-webkit-transform:translateZ(0);transform:translateZ(0)}.p--header h2{display:inline;color:#45b5b3}.p--header--notification{float:right;background:#a33838;height:2em;line-height:2;margin:0;padding:0 1em}.p--header--span{font-size:21px}.p--header--warnings{list-style:none;margin:0 0.25em;padding:0}.p--header--warnings,.p--header--warnings li{float:right}.p--header--warnings li>a{position:relative;display:block;margin:0 0.25em;width:2em;height:0;padding-top:2em;overflow:hidden;background:#a33838;cursor:pointer}.p--header--warnings li>a:before{position:absolute;content:'!';top:0;left:0;bottom:0;right:0;line-height:1.5;text-align:center;font-size:1.5em;color:#fff}[class*="p--switcher"]{float:right;margin:0 0 0 0.5em;padding:0}.p--filmstrip{list-style:none;margin:0;padding:0 1em}.p--filmstrip li{width:99%;position:relative;background:#fff;margin:0.5%;padding:0;display:inline-block;vertical-align:top}@media screen and (min-width: 700px){.p--filmstrip li{width:49%}}@media screen and (min-width: 1000px){.p--filmstrip li{width:24%}}.p--filmstrip img{width:100%}.p--filmstrip--time{position:relative;padding:0.5em;color:#fff;background:#45b5b3;-moz-box-shadow:0 0.125em 0.125em #1a2d38;-webkit-box-shadow:0 0.125em 0.125em #1a2d38;box-shadow:0 0.125em 0.125em #1a2d38}.p--filmstrip--time:before,.p--filmstrip--time:after{position:absolute;z-index:-1;content:'';right:0;top:100%;border-top:solid 0.5em transparent;border-left:solid 0.5em #45b5b3;border-bottom:solid 0.5em transparent;margin-top:-0.5em}.p--filmstrip--wrapper{position:absolute;z-index:5;top:1em;right:-0.5em}.p--footer{text-align:center}.p--graphs{position:relative;list-style:none;padding:0;margin:0}.p--graphs--button__expand,.p--graphs--button__offenders{position:absolute;height:2em;width:5.5em;top:0.25em;margin:0 0 1em 0;background-color:#45b5b3;border:none;color:#fff;text-align:center;-moz-transition:background-color 0.25s ease-in;-o-transition:background-color 0.25s ease-in;-webkit-transition:background-color 0.25s ease-in;transition:background-color 0.25s ease-in}.p--graphs--button__expand:hover,.p--graphs--button__offenders:hover{background-color:#68c5c4}.p--graphs--button__expand{left:0}.p--graphs--button__offenders{left:6em}.p--graphs--description,.p--graphs--warning{width:calc(80% - 5em );max-height:14em;position:absolute;top:0;right:7em;padding:1em 1em;overflow:hidden;color:#45b5b3;background-color:rgba(26,45,56,0.9)}.p--graphs--description[hidden],.p--graphs--warning[hidden]{display:none}.p--graphs--descriptionBtn,.p--graphs--warningBtn{position:absolute;top:0.25em;width:1.5em;height:0;padding:1.5em 0 0 0;overflow:hidden;cursor:default;-moz-transition:background-color 0.2s ease-in;-o-transition:background-color 0.2s ease-in;-webkit-transition:background-color 0.2s ease-in;transition:background-color 0.2s ease-in}.p--graphs--descriptionBtn.active,.p--graphs--warningBtn.active{cursor:pointer}.p--graphs--descriptionBtn:before,.p--graphs--warningBtn:before{position:absolute;content:'?';color:#fff;top:0;right:0;bottom:0;left:0;text-align:center;line-height:1.5em}.p--graphs--descriptionBtn{right:0;background-color:rgba(69,181,179,0.1)}.p--graphs--descriptionBtn.active{background-color:#45b5b3}.p--graphs--descriptionBtn.active:hover{background-color:#68c5c4}.p--graphs--descriptionBtn:before{content:'?'}.p--graphs--warningBtn{right:2em;background-color:rgba(155,142,180,0.1)}.p--graphs--warningBtn.active{background-color:#9b8eb4}.p--graphs--warningBtn.active:hover{background-color:#b6adc8}.p--graphs--warningBtn:before{content:'!'}.p--graphs--detailBox{position:absolute;width:150px;padding:0.5em;background-color:rgba(26,45,56,0.9);color:#45b5b3;text-align:center;border-radius:3px}.p--graphs--detailBox:before{position:absolute;content:'';width:0;height:0;top:100%;left:50%;margin-left:-6px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(26,45,56,0.9)}.p--graphs--detailBox dl{margin:0;padding:0}.p--graphs--detailBox dt,.p--graphs--detailBox dd{display:inline-block;width:calc(50% );margin:0;padding:0}.p--graphs--detailBox dt{text-align:left}.p--graphs--detailBox dd{text-align:right}.p--graphs--graph{position:relative;width:100%;min-height:250px;display:inline-block;vertical-align:top;border-bottom:1px solid #45b5b3;box-shadow:0 1px 0 #1a2d38;margin:0 2.5% 2.5em 2.5%}.p--graphs--graph.failed{box-shadow:0 0 0 3px #a33838,0 0 1px 4px #1a2d38}@media screen and (min-width: 700px){.p--graphs--graph{width:45%;margin:0 2.5% 2.5em 2.5%}}@media screen and (min-width: 1000px){.p--graphs--graph{width:31.333%;margin:0 1% 2.5em 1%}} .p--graphs--loading{display:none;position:absolute;z-index:5;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.25)}.p--graphs--loading .spinner{position:absolute;top:40%;left:50%;margin-left:-2em;height:4em;width:4em;border:0.5em solid #45b5b3;border-top:0.5em solid #8dd3d2;border-radius:100%;-moz-animation:rotator 2s infinite linear;-webkit-animation:rotator 2s infinite linear;animation:rotator 2s infinite linear}.p--graphs--loading.is-active{display:block}.p--graphs--svg{width:100%;height:0;padding-top:calc(40% + 80px )}.p--graphs--svg.is-initialized{height:auto;padding:0}.p--lineChart--area{fill:rgba(77,98,109,0.5)}.p--lineChart--assertion>line{stroke:rgba(163,56,56,0.85);stroke-width:2;fill:none}.p--lineChart--assertion>text{stroke:#fff;text-anchor:middle;font-size:0.75em}.p--lineChart--assertionBox{fill:rgba(255,0,0,0.2)}.p--lineChart--assertionTextBg{fill:#a33838;stroke:none}.p--lineChart--areaLine{fill:none;stroke:#45b5b3;stroke-width:2}.p--lineChart--pane{cursor:move;fill:none;pointer-events:all}.p--lineChart--reset,.p--lineChart--resetText{display:none;cursor:pointer}.p--lineChart--reset.active,.p--lineChart--resetText.active{display:block}.p--lineChart--reset{fill:rgba(69,181,179,0.8)}.p--lineChart--reset:hover{fill:rgba(104,197,196,0.8)}.p--lineChart--resetText{fill:#fff;text-anchor:middle;font-size:0.8em}.lineChart--bubble--label{fill:none;font-style:italic}.lineChart--bubble--value{fill:#fff;stroke:#fff}.lineChart--circle{fill:#49a2dc;stroke:#fff;stroke-width:2;cursor:pointer}.lineChart--circle.failed{fill:#a33838}.lineChart--circle.failed.highlighted{fill:#a33838}.lineChart--circle.highlighted{fill:#9b8eb4;stroke:#fff}.lineChart--gradientBackgroundArea--top{stop-opacity:0.1}.lineChart--gradientBackgroundArea--bottom{stop-opacity:0.6}.lineChart--xAxisTicks .domain,.lineChart--xAxis .domain,.lineChart--yAxisTicks .domain{display:none}.lineChart--xAxis .tick line{display:none}.lineChart--xAxis .tick text{fill:#fff}.lineChart--xAxisTicks .tick line,.lineChart--yAxisTicks .tick line{fill:none;stroke:#4d626d;stroke-width:1}@-moz-keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@-webkit-keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes rotator{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.p--offenders{margin:0}.p--offenders:before,.p--offenders:after{content:" ";display:table}.p--offenders:after{clear:both}.p--offenders dt{position:relative;margin:0.75em 0 1em -0.5em;padding:0.5em;font-size:1.25em;font-weight:100;line-height:1.25em;color:#fff;background-color:#9b8eb4;display:inline-block;-moz-box-shadow:0 0.125em 0.125em #1a2d38;-webkit-box-shadow:0 0.125em 0.125em #1a2d38;box-shadow:0 0.125em 0.125em #1a2d38}.p--offenders dt:before{position:absolute;z-index:-1;left:0;top:100%;margin-top:-0.5em;content:'';border-top:solid 0.5em transparent;border-right:solid 0.5em #9b8eb4;border-bottom:solid 0.5em transparent}.p--offenders dd{margin:0 0 0.25em 1%;line-height:1.25em;font-size:0.9em;width:98%;display:block;overflow:auto;padding:0.75em}.p--offenders dd:nth-child(2n){background:#223a49}.p--offenders--headline{margin-left:-0.5em}#p--modal__overlay{opacity:0;position:fixed;top:0;bottom:0;left:0;right:0;z-index:100;background:#000;display:none}.p--offenders__header{display:none}.p--offenders__container{display:none;opacity:0;transition:opacity 1s linear}.p--offenders__container.in-modal{display:block;opacity:1;position:fixed;left:5em;right:5em;top:3em;max-height:80vh;padding-bottom:2em;z-index:11000;background:#253f50}.p--offenders__terms{overflow-y:auto;max-height:65vh}#p--modal__close{position:fixed;right:6.4em;top:3.8em;z-index:12000;display:none;color:#fff;border:none;background:none;width:6em;height:0;margin:0;padding:6em 0 0 0;overflow:hidden}#p--modal__close:hover,#p--modal__close:focus{border-color:transparent #68c5c4 transparent transparent}#p--modal__close:active:before{border-color:transparent #37908e transparent transparent}#p--modal__close:before{position:absolute;top:0;left:0;content:'';border-style:solid;border-width:0 6em 6em 0;border-color:transparent #45b5b3 transparent transparent}#p--modal__close:after{content:'×';position:absolute;top:1em;left:2.8em;font-size:1.25em}.p--table{width:100%;color:#fff;font-size:11.2px;margin:0;border-top:1px solid #274354}.p--table--column,.p--table--column__highlight{width:12.5%;text-align:center}.p--table--column__highlight{color:#45b5b3;-moz-transition:color 0.1s ease-in;-o-transition:color 0.1s ease-in;-webkit-transition:color 0.1s ease-in;transition:color 0.1s ease-in}.p--table--container{max-height:0;margin:0;overflow:scroll;-moz-transition:max-height 1s;-o-transition:max-height 1s;-webkit-transition:max-height 1s;transition:max-height 1s}.p--table--container.expanded{max-height:500em}.p--table--head{color:#45b5b3;font-weight:100}.p--table--head th{padding:1em 0;border-bottom:1px solid #1a2d38;font-weight:100}.p--table--body .p--table--row{-moz-transition:background-color 0.1s ease-in;-o-transition:background-color 0.1s ease-in;-webkit-transition:background-color 0.1s ease-in;transition:background-color 0.1s ease-in}.p--table--body .p--table--row.active{background-color:#45b5b3 !important}.p--table--body .p--table--row.active .p--table--column__highlight{color:#fff}.p--table--body .p--table--row:nth-child(2n+1){background-color:#274354}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both} diff --git a/tasks/tpl/index.tpl b/tasks/tpl/index.tpl index 55d08bf..13dbe69 100644 --- a/tasks/tpl/index.tpl +++ b/tasks/tpl/index.tpl @@ -15,6 +15,12 @@ + <% if( failedAssertions.length ) { %>
    <% _.each( failedAssertions, function( assertion ) { %> From e5d30b1d8f5170f3a4c1bc4d38f9f92fc5a6a048 Mon Sep 17 00:00:00 2001 From: stefan judis Date: Sun, 30 Nov 2014 14:44:40 +0100 Subject: [PATCH 2/2] softened jshint config - #119 --- .jshintrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.jshintrc b/.jshintrc index 705f8b2..f21cd8e 100644 --- a/.jshintrc +++ b/.jshintrc @@ -13,7 +13,7 @@ "quotmark": "single", "unused": true, "trailing": true, - "maxparams": 3, + "maxparams": 4, "maxdepth": 3, "predef": [ "-Promise" ] }