d3.js gauges

From 6beb446925c967aca92f5513adf36c5db77c00d6 Mon Sep 17 00:00:00 2001 From: TATTAVARADA Date: Thu, 27 Apr 2017 07:53:18 -0400 Subject: [PORTAL-7] Rebase This rebasing includes common libraries and common overlays projects abstraction of components Change-Id: Ia1efa4deacdc5701e6205104ac021a6c80ed60ba Signed-off-by: st782s --- .../static/fusion/sample/html/area_chart.html | 49 +++++++++++ .../static/fusion/sample/html/bar_chart.html | 95 ++++++++++++++++++++++ .../static/fusion/sample/html/d3_gauges_demo.html | 39 +++++++++ .../fusion/sample/html/data/speedometer2.csv | 16 ++++ .../fusion/sample/html/data/speedometer3.csv | 2 + .../static/fusion/sample/html/data/worddata.csv | 1 + .../webapp/static/fusion/sample/html/donut_d3.html | 43 ++++++++++ .../static/fusion/sample/html/js/area_chart.min.js | 1 + .../static/fusion/sample/html/js/donut.min.js | 1 + .../static/fusion/sample/html/js/gauges.min.js | 1 + .../static/fusion/sample/html/js/line_chart.min.js | 1 + .../static/fusion/sample/html/js/pie_chart.min.js | 1 + .../static/fusion/sample/html/js/worddata.min.js | 1 + .../static/fusion/sample/html/line_chart.html | 49 +++++++++++ .../static/fusion/sample/html/pie_chart.html | 38 +++++++++ .../static/fusion/sample/html/wordcloud.html | 36 ++++++++ 16 files changed, 374 insertions(+) create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/area_chart.html create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/bar_chart.html create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/d3_gauges_demo.html create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/speedometer2.csv create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/speedometer3.csv create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/worddata.csv create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/donut_d3.html create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/area_chart.min.js create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/donut.min.js create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/gauges.min.js create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/line_chart.min.js create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/pie_chart.min.js create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/worddata.min.js create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/line_chart.html create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/pie_chart.html create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/wordcloud.html (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html') diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/area_chart.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/area_chart.html new file mode 100644 index 00000000..30ef2011 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/area_chart.html @@ -0,0 +1,49 @@ + + + + + + + +

+ + + + + + \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/bar_chart.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/bar_chart.html new file mode 100644 index 00000000..0be16ec1 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/bar_chart.html @@ -0,0 +1,95 @@ + + + + + + + +

+ + + + + + + \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/d3_gauges_demo.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/d3_gauges_demo.html new file mode 100644 index 00000000..94596e73 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/d3_gauges_demo.html @@ -0,0 +1,39 @@ + + + + + d3.js gauges + + + + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/speedometer2.csv b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/speedometer2.csv new file mode 100644 index 00000000..406143ea --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/speedometer2.csv @@ -0,0 +1,16 @@ +"YEARMONTH","Bedminster","Piscataway","Middletown","Paramus" +"201401",8.27,4.89,2.36,2.17 +"201402",10.02,4.57,3.15,3.01 +"201403",11.16,5.00,4.27,4.06 +"201404",13.31,5.00,5.35,5.11 +"201405",12.82,5.00,5.01,4.74 +"201406",14.01,6.09,9.17,8.98 +"201407",14.66,7.00,8.84,8.41 +"201408",16.95,7.02,12.22,11.84 +"201409",21.56,8.12,16.09,15.50 +"201410",25.35,9.00,19.04,18.37 +"201411",21.93,9.00,17.61,17.13 +"201412",24.00,9.00,19.00,18.00 +"201501",25.14,2.01,15.19,12.13 +"201502",26.30,2.67,16.95,13.47 +"201503",26.5833333333333,45.63333333333333,16.1166666666667,12.40 diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/speedometer3.csv b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/speedometer3.csv new file mode 100644 index 00000000..046383e4 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/speedometer3.csv @@ -0,0 +1,2 @@ +"YEARMONTH","Bedminster","Piscataway","Middletown","Paramus" +"201401",8.27,4.89,2.36,2.17 \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/worddata.csv b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/worddata.csv new file mode 100644 index 00000000..762cb423 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/data/worddata.csv @@ -0,0 +1 @@ +text,frequency service,98 portal,70 management,70 virtual,56 design,56 VNF,56 studio,42 operations,42 inventory,42 POLO,42 D2.0,42 ASDC,42 router,28 restart,28 process,28 platform,28 manage,28 loop,28 licensing,28 license,28 integrated,28 flow-through,28 enable,28 data,28 controller,28 control,28 configure,28 component,28 common,28 asset,28 application,28 ECOMP,28 workflow,14 waterfall,14 visual,14 view,14 vCTS,14 utilization,14 user,14 usage,14 troubleshoot,14 transformation,14 track,14 topolgies,14 topics,14 time,14 tickets,14 thresholds,14 templates,14 structures,14 standards-based,14 software,14 reuse,14 repository,14 reports,14 release,14 recipes,14 real-time,14 provisioning,14 properties,14 project-based,14 processes,14 physical,14 oversight,14 openl-loop,14 network,14 monitor,14 modeling,14 model-driven,14 model,14 message,14 maximize,14 manually,14 machine,14 layer,14 interact,14 instances,14 initiate,14 increase,14 imported,14 impacts,14 host,14 function,14 feeds,14 features,14 faults,14 extended,14 engines,14 engine,14 dynamic,14 document-driven,14 determine,14 dashboard,14 current,14 creation,14 created,14 create,14 configuration,14 composer,14 components,14 collective,14 certification,14 bus,14 basis,14 available,14 automation,14 automated,14 associated,14 assignment,14 appropriate,14 against,14 aervice,14 adminstrators,14 activation,14 action,14 VMs,14 VM,14 VLAN,14 SDN,14 SDK,14 SBG,14 SAM,14 RUBY,14 Policy,14 PODS,14 Ops,14 GFP,14 F5FW,14 DMaaP,14 DCAE,14 DBC,14 CPADS,14 AT&T,14 APP-C,14 AOTS-TM,14 ALTS,14 A&AI,14 diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/donut_d3.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/donut_d3.html new file mode 100644 index 00000000..afcac359 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/donut_d3.html @@ -0,0 +1,43 @@ + + + + + + + + \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/area_chart.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/area_chart.min.js new file mode 100644 index 00000000..9b3decb9 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/area_chart.min.js @@ -0,0 +1 @@ +function redrawAreaChart(){d3.select("#areaChart svg").datum(historicalBarChart).call(area_chart)}var area_chart;nv.addGraph(function(){return area_chart=nv.models.stackedAreaChart().showControls(!1).margin({top:30,right:60,bottom:50,left:100}).showLegend(!1).yAxisTooltipFormat(d3.format(",.1f")).x(function(a){return a.x}).y(function(a){return a.y}).color(d3.scale.category10().range()),area_chart.xAxis.axisLabel("").staggerLabels(!1).showMaxMin(!1).rotateLabels(90).tickFormat(function(a){return d3.time.format("%b %y")(new Date(a))}),area_chart.yAxis.axisLabel("").tickFormat(d3.format(",.1f")),d3.select("#areaChart svg").datum(historicalBarChart).call(area_chart),nv.utils.windowResize(area_chart.update),area_chart}),redrawAreaChart(),historicalBarChart.length<=0&&(document.getElementById("areaChart").innerHTML="

No Data Available

",document.getElementById("areaChart").className="nodatadiv",document.getElementById("nodata").className="nodatainner"); \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/donut.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/donut.min.js new file mode 100644 index 00000000..60c4fd4b --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/donut.min.js @@ -0,0 +1 @@ +function angle(t){var e=90*(t.startAngle+t.endAngle)/Math.PI-90;return e>90?e-180:e}function arcTween(t,e){return function(){d3.select(this).transition().delay(e).attrTween("d",function(e){var r=d3.interpolate(e.outerRadius,t);return function(t){return e.outerRadius=r(t),arc(e)}})}}var arc=d3.svg.arc().padRadius(outerRadius).innerRadius(innerRadius),pie=d3.layout.pie().sort(null).padAngle(.02).value(function(t){return t.performance});d3.csv(dataURL,function(t,e){color.domain(d3.keys(e[0]).filter(function(t){return"YEARMONTH"!==t})),e.forEach(function(t){t.performance=color.domain().map(function(e){return{name:e,performance:+t[e]}})});var r=d3.select("body").append("svg").attr("class","legend").attr("width",radius).attr("height",2*radius).selectAll("g").data(color.domain().slice().reverse()).enter().append("g").attr("transform",function(t,e){return"translate(0,"+20*e+")"});r.append("rect").attr("width",18).attr("height",18).style("fill",color),r.append("text").attr("x",24).attr("y",9).attr("dy",".35em").text(function(t){return t});var a=d3.select("body").append("svg").attr("width",width).attr("height",height).data(e).append("g").attr("transform","translate("+radius+","+height/2+")"),n=a.selectAll("g.slice").data(function(t){return pie(t.performance)}).enter().append("g").attr("class","slice");n.append("path").each(function(t){t.outerRadius=outerRadius-10}).attr("class","arc").attr("d",arc).style("fill",function(t){return color(t.data.name)}).on("mouseover",arcTween(outerRadius,0)).on("mouseout",arcTween(outerRadius-10,150)),n.append("text").attr("dy",".35em").attr("transform",function(t){return t.outerRadius=outerRadius,t.innerRadius=outerRadius/2,"translate("+arc.centroid(t)+")rotate("+angle(t)+")"}).attr("text-anchor","middle").style("fill","white").style("font","bold 12px Arial").text(function(t){return t.value}),a.append("text").attr("dy",".35em").style("text-anchor","middle").text(function(t){return t.YEARMONTH})}); \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/gauges.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/gauges.min.js new file mode 100644 index 00000000..c0fd7484 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/gauges.min.js @@ -0,0 +1 @@ +function Gauge(t,i){this.placeholderName=t;var n=this;this.configure=function(t){this.config=t,this.config.size=.9*this.config.size,this.config.raduis=.97*this.config.size/2,this.config.cx=this.config.size/2,this.config.cy=this.config.size/2,this.config.min=void 0!=t.min?t.min:0,this.config.max=void 0!=t.max?t.max:100,this.config.range=this.config.max-this.config.min,this.config.majorTicks=t.majorTicks||5,this.config.minorTicks=t.minorTicks||2,this.config.greenColor=t.greenColor||"#109618",this.config.yellowColor=t.yellowColor||"#FF9900",this.config.redColor=t.redColor||"#DC3912",this.config.transitionDuration=t.transitionDuration||500},this.render=function(){this.body=d3.select("#"+this.placeholderName).append("svg:svg").attr("class","gauge").attr("width",this.config.size).attr("height",this.config.size),this.body.append("svg:circle").attr("cx",this.config.cx).attr("cy",this.config.cy).attr("r",this.config.raduis).style("fill","#ccc").style("stroke","#000").style("stroke-width","0.5px"),this.body.append("svg:circle").attr("cx",this.config.cx).attr("cy",this.config.cy).attr("r",.9*this.config.raduis).style("fill","#fff").style("stroke","#e0e0e0").style("stroke-width","2px");for(var t in this.config.greenZones)this.drawBand(this.config.greenZones[t].from,this.config.greenZones[t].to,n.config.greenColor);for(var t in this.config.yellowZones)this.drawBand(this.config.yellowZones[t].from,this.config.yellowZones[t].to,n.config.yellowColor);for(var t in this.config.redZones)this.drawBand(this.config.redZones[t].from,this.config.redZones[t].to,n.config.redColor);if(void 0!=this.config.label){var i=Math.round(this.config.size/12);this.body.append("svg:text").attr("x",this.config.cx).attr("y",this.config.cy/2+i/2).attr("dy",i/2).attr("text-anchor","middle").text(this.config.label).style("font-size",i+"px").style("fill","#333").style("stroke-width","0px")}for(var i=Math.round(this.config.size/16),e=this.config.range/(this.config.majorTicks-1),o=this.config.min;o<=this.config.max;o+=e){for(var a=e/this.config.minorTicks,r=o+a;r=i-t||this.body.append("svg:path").style("fill",e).attr("d",d3.svg.arc().startAngle(this.valueToRadians(t)).endAngle(this.valueToRadians(i)).innerRadius(.65*this.config.raduis).outerRadius(.85*this.config.raduis)).attr("transform",function(){return"translate("+n.config.cx+", "+n.config.cy+") rotate(270)"})},this.redraw=function(t,i,e){var o=this.body.select(".pointerContainer"),a=o.selectAll("text");y=a.attr("y"),dy=parseFloat(a.attr("dy")),a.selectAll("tspan").remove(),a.append("tspan").attr("x",45).attr("dy",0).text(Math.round(t)),a.append("tspan").attr("x",45).attr("dy",10).text(i),o.selectAll("text").style("fill",function(){var i=n.config.max-n.config.min;return Math.round(t)>.9*i?"#DC3912":Math.round(t)>.5*i&&Math.round(t)<.9*i?"#FF9900":"#000000"});var r=o.selectAll("path");r.transition().duration(void 0!=e?e:this.config.transitionDuration).attrTween("transform",function(){var i=t;t>n.config.max?i=n.config.max+.02*n.config.range:tNo Data Available",document.getElementById("lineChart").className="nodatadiv",document.getElementById("nodata2").className="nodatainner"); \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/pie_chart.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/pie_chart.min.js new file mode 100644 index 00000000..f78eec70 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/pie_chart.min.js @@ -0,0 +1 @@ +function redraw(){d3.select("#chart423 svg").datum(historicalBarChart).transition().duration(500).call(chart)}var chart;nv.addGraph(function(){return chart=nv.models.pieChart().margin({top:30,right:60,bottom:50,left:100}).x(function(t){return t.key}).y(function(t){return t.y}),chart.showLegend(!1),d3.select("#chart423 svg").datum(historicalBarChart).transition().duration(1200).call(chart),nv.utils.windowResize(chart.update),chart}),setInterval(function(){redraw()},1500),historicalBarChart.length<=0&&(document.getElementById("chart423").innerHTML="

No Data Available

",document.getElementById("chart423").className="nodatadiv",document.getElementById("nodata").className="nodatainner"); \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/worddata.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/worddata.min.js new file mode 100644 index 00000000..6b827460 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/js/worddata.min.js @@ -0,0 +1 @@ +function dataViz(t){function e(t){var e=d3.select("svg").append("g").attr("id","wordCloudG").attr("transform","translate(210,175)");e.selectAll("text").data(t).enter().append("text").style("font-size",function(t){return 1*t.size+"px"}).style("fill",function(t){return keywords.indexOf(t.text)>-1?"red":"black"}).style("opacity",.75).attr("text-anchor","middle").attr("transform",function(t){return"translate("+[t.x,t.y]+")rotate("+t.rotate+")"}).text(function(t){return t.text})}d3.layout.cloud().size([420,350]).words(t).rotate(function(t){return t.text.length>5?0:90}).fontSize(function(t){return wordScale(t.frequency)}).on("end",e).start()}d3.csv(dataURL,function(t){dataViz(t)}),wordScale=d3.scale.linear().domain([0,100]).range([0,70]).clamp(!0); \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/line_chart.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/line_chart.html new file mode 100644 index 00000000..d4ba57a4 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/line_chart.html @@ -0,0 +1,49 @@ + + + + + + + +

+ + + + + + \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/pie_chart.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/pie_chart.html new file mode 100644 index 00000000..ebbdd9c0 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/pie_chart.html @@ -0,0 +1,38 @@ + + + + + + + +

+ + + + + + + + + \ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/wordcloud.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/wordcloud.html new file mode 100644 index 00000000..6cf00079 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/static/fusion/sample/html/wordcloud.html @@ -0,0 +1,36 @@ + + + Word Cloud Example + + + + + + + + + +

+ +

+ + + + \ No newline at end of file -- cgit 1.2.3-korg