aster_plot.js

looker.plugins.visualizations.add({options:{legend:{section:"Data",type:"string",label:"Legend",values:[{Left:"left"},{Right:"right"},{Off:"off"}],display:"radio",default:"off"},label_value:{section:"Data",type:"string",label:"Data Labels",values:[{On:"on"},{Off:"off"}],display:"radio",default:"on"},center_value:{section:"Data",type:"string",label:"Center Value",values:[{"Weighted Avg":"avg"},{Min:"min"},{Max:"max"},{None:"off"}],display:"select",default:"avg"},color_range:{section:"Format",order:1,type:"array",label:"Color Range",display:"colors",default:["#9E0041","#C32F4B","#E1514B","#F47245","#FB9F59","#FEC574","#FAE38C","#EAF195","#C7E89E","#9CD6A4","#6CC4A4","#4D9DB4","#4776B4","#5E4EA1"]},inner_circle_color:{section:"Format",order:2,type:"string",label:"Inner Circle",display:"color",default:"#ffffff"},text_color:{section:"Format",order:3,type:"string",label:"Text Color",display:"color",default:"#000000"},font_size:{section:"Format",order:4,type:"number",label:"Font Size",display:"range",min:10,max:100,default:40},radius:{section:"Data",type:"number",label:"Range Override",placeholder:"Value represented by radius of circle"},threshold:{section:"Format",type:"number",label:"Label Minimum Slice Size (radians)",default:.2},label_size:{section:"Format",type:"number",label:"Label Font Size (px)",default:10},chart_size:{section:"Format",order:4,type:"string",label:"Chart Size",default:"100%"}},create:function(e,t){e.innerHTML='\n      <style>\n        body {\n      font: 10px sans-serif;\n    }\n\n    .axis path,\n    .axis line {\n      fill: none;\n      stroke: #000;\n      shape-rendering: crispEdges;\n    }\n\n    .bar {\n      fill: orange;\n    }\n\n    .solidArc:hover {\n      fill: orangered ;\n    }\n\n    .solidArc {\n        -moz-transition: all 0.3s;\n        -o-transition: all 0.3s;\n        -webkit-transition: all 0.3s;\n        transition: all 0.3s;\n    }\n\n    .x.axis path {\n      display: none;\n    }\n\n    .aster-score {\n      line-height: 1;\n      font-weight: bold;\n    }\n\n    .d3-tip {\n      line-height: 1;\n      font-weight: bold;\n      padding: 12px;\n      background: rgba(0, 0, 0, 0.8);\n      color: #fff;\n      border-radius: 2px;\n    }\n\n    /* Creates a small triangle extender for the tooltip */\n    .d3-tip:after {\n      box-sizing: border-box;\n      display: inline;\n      font-size: 10px;\n      width: 100%;\n      line-height: 1;\n      color: rgba(0, 0, 0, 0.8);\n      content: "\\25BC";\n      position: absolute;\n      text-align: center;\n    }\n\n    /* Style northward tooltips differently */\n    .d3-tip.n:after {\n      margin: -1px 0 0 0;\n      top: 100%;\n      left: 0;\n    }\n\n    .legend rect {\n      fill:white;\n      stroke:black;\n      opacity:0.8;\n    }\n\n      </style> ';var n=e.appendChild(document.createElement("div"));this.container=n,n.className="d3-aster-plot",this._textElement=n.appendChild(document.createElement("div"))},updateAsync:function(e,t,n,a,r,l){if(this.container.innerHTML="",this.clearErrors(),i=this,o={min_pivots:0,max_pivots:0,min_dimensions:1,max_dimensions:1,min_measures:2,max_measures:2},s=function(e,t,n,a,r){return!(!i.addError||!i.clearErrors)&&(n<a?(i.addError({title:"Not Enough "+t+"s",message:"This visualization requires "+(a===r?"exactly":"at least")+" "+a+" "+t.toLowerCase()+(1===a?"":"s")+".",group:e}),!1):n>r?(i.addError({title:"Too Many "+t+"s",message:"This visualization requires "+(a===r?"exactly":"no more than")+" "+r+" "+t.toLowerCase()+(1===a?"":"s")+".",group:e}),!1):(i.clearErrors(e),!0))},d=a.fields,c=d.pivots,u=d.dimension_like,f=d.measure_like,s("pivot-req","Pivot",c.length,o.min_pivots,o.max_pivots)&&s("dim-req","Dimension",u.length,o.min_dimensions,o.max_dimensions)&&s("mes-req","Measure",f.length,o.min_measures,o.max_measures)){var i,o,s,d,c,u,f,p=a.fields.dimension_like[0].name,g=a.fields.measure_like[0].name,h=a.fields.measure_like[1].name,m=30,x=30,y=30,v=30,_=t.clientWidth-v-x,b=t.clientHeight-m-y,A=Math.min(_,b)/2,E=.3*A;if(!isNaN(parseFloat(n.chart_size))){var k=parseFloat(n.chart_size)/100;A*=k>2?2:k<.2?.2:k}n.color_range||(n.color_range=["#9E0041","#C32F4B","#E1514B","#F47245","#FB9F59","#FEC574","#FAE38C","#EAF195","#C7E89E","#9CD6A4","#6CC4A4","#4D9DB4","#4776B4","#5E4EA1"]);var C=[],z=[],F=n.color_range.length,w={};for(let t=0;t<e.length;t++){if(t>=F){let a=Math.floor(t/F);e[t].color=n.color_range[t-a*F]}else e[t].color=n.color_range[t];e[t].label=e[t][p].value,e[t].score=+e[t][g].value,e[t].weight=+e[t][h].value,e[t].width=+e[t][h].value,e[t].rendered=e[t][g].rendered?e[t][g].rendered:e[t][g].value,C.push(e[t][g].value),z.push(e[t][h].value),w[e[t][p].value]=e[t][g].rendered?e[t][g].rendered:e[t][g].value}if(n.radius?console.log("Radius config set to: "+n.radius):(console.log("Radius not set. Defaulting to max score: "+V(C)),n.radius=V(C)),n.keyword_search){for(let t=0;t<e.length;t++)if(e[t].label.toLowerCase().includes(n.keyword_search.toLowerCase())){B=e[t].weight,D=Math.min(...z),L=Math.max(...z);var M=(B-D)/(L-D);e.splice(t,1),E=(.4*M+.2)*A;break}}else var B=Math.round(e.reduce(function(e,t){return e+t.score*t.weight},0)/e.reduce(function(e,t){return e+t.weight},0)),D=Math.round(Math.min(...C)),L=Math.round(Math.max(...C));var O=d3.layout.pie().sort(null).value(function(e){return e.width}),R=d3.tip().attr("class","d3-tip").offset([0,0]).html(function(e){return e.data.label+": <span style='color:orangered'>"+e.data.rendered+"</span>"}),N=d3.svg.arc().innerRadius(E).outerRadius(function(e){return(A-E)*(e.data.score/(1*n.radius))+E}),S=d3.svg.arc().innerRadius(E).outerRadius(A),T=d3.select(".d3-aster-plot").append("svg").attr("width",_+v+x).attr("height",b+m+y).append("g").attr("transform","translate("+(_/2+v)+","+(b/2+m)+")");T.call(R);T.append("circle").attr("cx",0).attr("cy",0).attr("r",E).attr("fill",n.inner_circle_color),T.append("svg:text").attr("class","aster-score").attr("dy",".35em").attr("text-anchor","middle").style("fill",n.text_color).attr("font-size",n.font_size).text(()=>{if("off"!=n.center_value)return"avg"==n.center_value?B:"min"==n.center_value?D:"max"==n.center_value?L:void 0});T.append("text").attr("class","score-sublabel").attr("dy","2em").attr("text-anchor","middle").style("fill","#282828").attr("font-size",.4*n.font_size).text(()=>{if("off"!=n.center_value)return"avg"==n.center_value?"AVG":"min"==n.center_value?"MIN":"max"==n.center_value?"MAX":void 0});T.selectAll(".solidArc").data(O(e)).enter().append("path").attr("data-legend",function(e){return e.data.label}).attr("fill",function(e){return e.data.color}).attr("class","solidArc").attr("stroke","gray").attr("d",N).on("mouseover",R.show).on("mouseout",R.hide),T.selectAll(".outlineArc").data(O(e)).enter().append("path").attr("fill","none").attr("stroke","gray").attr("class","outlineArc").attr("d",S).each(function(e,t){var n=/(^.+?)L/.exec(d3.select(this).attr("d"))[1];if(n=n.replace(/,/g," "),q(e.startAngle,e.endAngle)){var a=/0 0 1 (.*?)$/.exec(n)[1],r=/M(.*?)A/.exec(n)[1];n="M"+a+"A"+/A(.*?)0 0 1/.exec(n)[1]+"0 0 0 "+r}T.append("path").attr("class","hiddenDonutArcs").attr("id","sliceOutlineArc_"+t).attr("d",n).style("fill","none")});if("on"==n.label_value&&(T.selectAll(".label-line-1").data(O(e)).enter().append("text").attr("class","label-line-1").attr("dy",function(e,t){return q(e.startAngle,e.endAngle)?18:-21}).append("textPath").attr("startOffset","50%").style("text-anchor","middle").attr("xlink:href",function(e,t){return"#sliceOutlineArc_"+t}).attr("font-size",n.label_size).text(function(e){if(e.endAngle-e.startAngle>n.threshold)return e.data.label}),T.selectAll(".label-line-2").data(O(e)).enter().append("text").attr("class","label-line-2").attr("dy",function(e,t){return q(e.startAngle,e.endAngle)?28:-11}).append("textPath").attr("startOffset","50%").style("text-anchor","middle").attr("font-size",n.label_size).attr("xlink:href",function(e,t){return"#sliceOutlineArc_"+t}).text(function(e){if(e.endAngle-e.startAngle>n.threshold)return e.data.rendered})),"left"==n.legend)T.append("g").attr("class","legend").attr("transform","translate(-"+_/2.2+" ,-"+b/2.5+")").style("font-size","12px").call(H);else if("right"==n.legend)T.append("g").attr("class","legend").attr("transform","translate("+_/3+" ,-"+b/2.5+")").style("font-size","12px").call(H);l()}function q(e,t){return P(t)>90&&P(t)<270&&P(t-e)<180}function P(e){return 180*e/Math.PI}function V(e){return Math.max.apply(null,e)}function H(e){return e.each(function(){var e=d3.select(this),t={},n=d3.select(e.property("nearestViewportElement")),a=e.attr("data-style-padding")||5,r=e.selectAll(".legend-box").data([!0]),l=e.selectAll(".legend-items").data([!0]);r.enter().append("rect").classed("legend-box",!0),l.enter().append("g").classed("legend-items",!0),n.selectAll("[data-legend]").each(function(){var e=d3.select(this);t[e.attr("data-legend")]={pos:e.attr("data-legend-pos")||this.getBBox().y,color:null!=e.attr("data-legend-color")?e.attr("data-legend-color"):"none"!=e.style("fill")?e.style("fill"):e.style("stroke"),rendered:"100"}}),t=d3.entries(t).sort(function(e,t){return e.key<t.key?-1:e.key>t.key?1:0});for(let e=0;e<t.length;e++)t[e].value.rendered=w[t[e].key];l.selectAll("text").data(t,function(e){return e.key}).call(function(e){e.enter().append("text")}).call(function(e){e.exit().remove()}).attr("y",function(e,t){return t+"em"}).attr("x","1em").text(function(e){return e.key+" "+e.value.rendered}),l.selectAll("circle").data(t,function(e){return e.key}).call(function(e){e.enter().append("circle")}).call(function(e){e.exit().remove()}).attr("cy",function(e,t){return t-.25+"em"}).attr("cx",0).attr("r","0.4em").style("fill",function(e){return e.value.color});var i=l[0][0].getBBox();r.attr("x",i.x-a).attr("y",i.y-a).attr("height",i.height+2*a).attr("width",i.width+2*a)}),e}}});