grunt-phantomas
Version:
Grunt plugin for phantomas
1 lines • 12.5 kB
JavaScript
!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,lastRuns){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.value?"lineChart--circle failed":"lineChart--circle":"lineChart--circle"}).attr("r",4).attr("cx",function(d){return x(d.date)+detailWidth/2}).attr("cy",function(d){return y(d.value[type])}).attr("data-average",function(d){return d.value.average}).attr("data-timestamp",function(d){return+d.date}).attr("data-max",function(d){return d.value.max}).attr("data-median",function(d){return d.value.median}).attr("data-metric",function(){return metric}).attr("data-min",function(d){return d.value.min}).attr("data-sum",function(d){return d.value.sum}).on("mouseenter",function(){d3.select(this).attr("class",function(d){return assertionValue?">"===assertionValue.type?assertionValue&&d.value[type]>assertionValue.value?"lineChart--circle highlighted failed":"lineChart--circle highlighted":assertionValue&&d.value[type]<assertionValue.value?"lineChart--circle highlighted failed":"lineChart--circle highlighted":"lineChart--circle highlighted"}).attr("r",6)}).on("mouseout",function(){d3.select(this).attr("class",function(d){return assertionValue?">"===assertionValue.type?d.value[type]>assertionValue.value?"lineChart--circle failed":"lineChart--circle":d.value[type]<assertionValue.value?"lineChart--circle failed":"lineChart--circle":"lineChart--circle"}).attr("r",4)})}function drawCircles(data){circleContainer||(circleContainer=svg.append("g")),circleContainer.selectAll("circle").remove(),data.forEach(drawCircle)}function redraw(){svg.select(".lineChart--xAxis").call(xAxis).selectAll("text").attr("transform","rotate(45)").style("text-anchor","start"),svg.select(".lineChart--xAxisTicks").call(xAxisTicks),svg.select(".p--lineChart--area").attr("d",area),svg.select(".p--lineChart--areaLine").attr("d",line),drawCircles(data)}function zoomed(){redraw(),svg.select(".p--lineChart--reset").attr("class","p--lineChart--reset active"),svg.select(".p--lineChart--resetText").attr("class","p--lineChart--resetText active")}function unZoomed(){zoom.translate([0,0]).scale(1),redraw(),svg.select(".p--lineChart--reset").attr("class","p--lineChart--reset"),svg.select(".p--lineChart--resetText").attr("class","p--lineChart--resetText")}var assertionValue=null;data[data.length-1].assertions[metric]&&(assertionValue=data[data.length-1].assertions[metric]),data=data.reduce(function(newData,datum){return datum.metrics[metric]&&newData.push({date:new Date(datum.timestamp),value:datum.metrics[metric]}),newData},[]);var assertionGroup,circleContainer,zoom,containerEl=document.getElementById("graph--"+metric),width=containerEl.clientWidth,height=.4*width,margin={top:20,bottom:60},detailWidth=115,container=d3.select(containerEl),svg=container.select(".p--graphs--svg").attr("width",width).attr("height",height+margin.top+margin.bottom).attr("class","p--graphs--svg is-initialized"),x=d3.time.scale().range([0,width-detailWidth]),xAxis=d3.svg.axis().scale(x).ticks(8).tickSize(-height),xAxisTicks=d3.svg.axis().scale(x).ticks(16).tickSize(-height).tickFormat(""),y=d3.scale.linear().range([height,margin.top]),yAxisTicks=d3.svg.axis().scale(y).ticks(12).tickSize(width).tickFormat("").orient("right"),area=d3.svg.area().interpolate("linear").x(function(d){return x(d.date)+detailWidth/2}).y0(height).y1(function(d){return y(d.value[type])}),line=d3.svg.line().interpolate("linear").x(function(d){return x(d.date)+detailWidth/2}).y(function(d){return y(d.value[type])}),loader=container.select(".p--graphs--loading");lastRuns=lastRuns||10;var startIndex=data.length>=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="<dl><dt>Average:</dt><dd>"+circle.attributes.getNamedItem("data-average").value+"</dd><dt>Max:</dt><dd>"+circle.attributes.getNamedItem("data-max").value+"</dd><dt>Median:</dt><dd>"+circle.attributes.getNamedItem("data-median").value+"</dd><dt>Min:</dt><dd>"+circle.attributes.getNamedItem("data-min").value+"</dd><dt>Sum:</dt><dd>"+circle.attributes.getNamedItem("data-sum").value+"</dd></dl>",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;i<loaders.length;++i)loaders[i].classList.add("is-active");type=type||"median";for(var metric in lastMetric.metrics)lastMetric.metrics[metric]&&"number"==typeof lastMetric.metrics[metric].median&&"timestamp"!==metric&&document.getElementById("graph--"+metric)&&setTimeout(drawLineChart.bind(null,data,metric,type,lastRuns),250)}drawLineCharts(window.results),attachEventListeners()}(d3,window,document);