diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html')
18 files changed, 789 insertions, 0 deletions
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/area_chart.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/area_chart.html new file mode 100644 index 00000000..30ef2011 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/area_chart.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<meta http-equiv="content-type" content="text/html; charset=UTF8"> +<meta http-equiv="X-UA-Compatible" content="IE=edge" /> +<link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css"> +<style> + body { + overflow-y:scroll; + } + text { + font: 12px sans-serif; + } + svg { + display: block; + } + #chart461 svg { + height: 175px; + width: 300px; + min-width: 100px; + min-height: 100px; + } + tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } +.nodatadiv { + display: table-cell; + width: 700px; + height:370px; + text-align:center; + vertical-align: middle; +} +.nodatainner { + padding: 10px; +} + </style> +<body> +<div align="center"><H3></H3></div><div id="chart461"> <svg></svg> </div> +<script src="../../d3/js/d3.v3.min.js"></script> +<script src="../../d3/js/nv.d3.min.js"></script> +<script src="../../d3/js/models/axis.min.js"></script> +<script> +historicalBarChart = [ + { "type":"line", "key": "AP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":2.13}, { "x":1388552400000 , "y":5.0}, { "x":1388552400000 , "y":2.36}, { "x":1388552400000 , "y":10.0}, { "x":1391230800000 , "y":3.15}, { "x":1391230800000 , "y":2.88}, { "x":1391230800000 , "y":3.0}, { "x":1391230800000 , "y":4.0}, { "x":1393650000000 , "y":8.0}, { "x":1393650000000 , "y":3.93}, { "x":1393650000000 , "y":4.27}, { "x":1393650000000 , "y":4.0}, { "x":1396324800000 , "y":4.25}, { "x":1396324800000 , "y":5.35}, { "x":1396324800000 , "y":5.92}, { "x":1396324800000 , "y":12.0}, { "x":1398916800000 , "y":5.55}, { "x":1398916800000 , "y":4.89}, { "x":1398916800000 , "y":5.01}, { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.27}, { "x":1401595200000 , "y":9.17}, { "x":1401595200000 , "y":9.31}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.37}, { "x":1404187200000 , "y":8.11}, { "x":1404187200000 , "y":8.84}, { "x":1404187200000 , "y":8.93}, { "x":1406865600000 , "y":11.79}, { "x":1406865600000 , "y":12.22}, { "x":1406865600000 , "y":12.6}, { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":15.27}, { "x":1409544000000 , "y":19.09}, { "x":1409544000000 , "y":16.09}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":18.4}, { "x":1412136000000 , "y":22.05}, { "x":1412136000000 , "y":21.66}, { "x":1412136000000 , "y":19.04}, { "x":1414814400000 , "y":19.13}, { "x":1414814400000 , "y":19.61}, { "x":1414814400000 , "y":17.61}, { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":19.0}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.67}, { "x":1420088400000 , "y":15.19}, { "x":1420088400000 , "y":15.02}, { "x":1420088400000 , "y":9.62333333333333}, { "x":1422766800000 , "y":16.95}, { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":12.9}, { "x":1425186000000 , "y":16.1166666666667} ] } , + { "type":"line", "key": "ROUTER_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":3.0}, { "x":1388552400000 , "y":4.0}, { "x":1388552400000 , "y":4.89}, { "x":1388552400000 , "y":7.0}, { "x":1391230800000 , "y":4.57}, { "x":1391230800000 , "y":4.0}, { "x":1391230800000 , "y":4.0}, { "x":1391230800000 , "y":7.0}, { "x":1393650000000 , "y":7.0}, { "x":1393650000000 , "y":4.18}, { "x":1393650000000 , "y":5.0}, { "x":1393650000000 , "y":5.0}, { "x":1396324800000 , "y":5.0}, { "x":1396324800000 , "y":5.0}, { "x":1396324800000 , "y":5.06}, { "x":1396324800000 , "y":6.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1401595200000 , "y":6.0}, { "x":1401595200000 , "y":6.09}, { "x":1401595200000 , "y":6.0}, { "x":1401595200000 , "y":6.0}, { "x":1404187200000 , "y":6.36}, { "x":1404187200000 , "y":7.0}, { "x":1404187200000 , "y":7.0}, { "x":1404187200000 , "y":7.0}, { "x":1406865600000 , "y":7.0}, { "x":1406865600000 , "y":7.02}, { "x":1406865600000 , "y":7.24}, { "x":1406865600000 , "y":7.0}, { "x":1409544000000 , "y":8.23}, { "x":1409544000000 , "y":8.11}, { "x":1409544000000 , "y":8.12}, { "x":1409544000000 , "y":8.03}, { "x":1412136000000 , "y":9.0}, { "x":1412136000000 , "y":8.93}, { "x":1412136000000 , "y":8.57}, { "x":1412136000000 , "y":9.0}, { "x":1414814400000 , "y":5.97}, { "x":1414814400000 , "y":6.0}, { "x":1414814400000 , "y":9.0}, { "x":1414814400000 , "y":9.0}, { "x":1417410000000 , "y":9.0}, { "x":1417410000000 , "y":8.78}, { "x":1420088400000 , "y":3.0}, { "x":1420088400000 , "y":2.01}, { "x":1420088400000 , "y":3.0}, { "x":1420088400000 , "y":3.01}, { "x":1422766800000 , "y":2.67}, { "x":1422766800000 , "y":2.0}, { "x":1425186000000 , "y":2.8}, { "x":1425186000000 , "y":3.63333333333333} ] } , + { "type":"line", "key": "SCTP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":7.0}, { "x":1388552400000 , "y":10.0}, { "x":1388552400000 , "y":8.27}, { "x":1388552400000 , "y":8.0}, { "x":1391230800000 , "y":10.02}, { "x":1391230800000 , "y":8.04}, { "x":1391230800000 , "y":9.0}, { "x":1391230800000 , "y":10.0}, { "x":1393650000000 , "y":12.0}, { "x":1393650000000 , "y":10.04}, { "x":1393650000000 , "y":11.16}, { "x":1393650000000 , "y":10.0}, { "x":1396324800000 , "y":10.7}, { "x":1396324800000 , "y":13.31}, { "x":1396324800000 , "y":12.73}, { "x":1396324800000 , "y":9.0}, { "x":1398916800000 , "y":12.41}, { "x":1398916800000 , "y":11.95}, { "x":1398916800000 , "y":12.82}, { "x":1398916800000 , "y":9.58}, { "x":1401595200000 , "y":11.28}, { "x":1401595200000 , "y":14.01}, { "x":1401595200000 , "y":14.63}, { "x":1401595200000 , "y":11.83}, { "x":1404187200000 , "y":14.06}, { "x":1404187200000 , "y":13.96}, { "x":1404187200000 , "y":14.66}, { "x":1404187200000 , "y":14.36}, { "x":1406865600000 , "y":16.6}, { "x":1406865600000 , "y":16.95}, { "x":1406865600000 , "y":17.11}, { "x":1406865600000 , "y":15.94}, { "x":1409544000000 , "y":19.86}, { "x":1409544000000 , "y":22.97}, { "x":1409544000000 , "y":21.56}, { "x":1409544000000 , "y":24.55}, { "x":1412136000000 , "y":22.66}, { "x":1412136000000 , "y":26.79}, { "x":1412136000000 , "y":26.54}, { "x":1412136000000 , "y":25.35}, { "x":1414814400000 , "y":21.0}, { "x":1414814400000 , "y":20.35}, { "x":1414814400000 , "y":21.93}, { "x":1414814400000 , "y":23.63}, { "x":1417410000000 , "y":24.0}, { "x":1417410000000 , "y":21.43}, { "x":1420088400000 , "y":12.63}, { "x":1420088400000 , "y":25.14}, { "x":1420088400000 , "y":21.85}, { "x":1420088400000 , "y":12.5766666666667}, { "x":1422766800000 , "y":26.3}, { "x":1422766800000 , "y":24.4}, { "x":1425186000000 , "y":23.3833333333333}, { "x":1425186000000 , "y":24.5833333333333} ] } , + { "type":"line", "key": "DP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":2.0}, { "x":1388552400000 , "y":5.0}, { "x":1388552400000 , "y":2.17}, { "x":1388552400000 , "y":2.0}, { "x":1391230800000 , "y":3.01}, { "x":1391230800000 , "y":2.56}, { "x":1391230800000 , "y":3.0}, { "x":1391230800000 , "y":9.0}, { "x":1393650000000 , "y":10.0}, { "x":1393650000000 , "y":3.64}, { "x":1393650000000 , "y":4.06}, { "x":1393650000000 , "y":4.0}, { "x":1396324800000 , "y":4.04}, { "x":1396324800000 , "y":5.11}, { "x":1396324800000 , "y":5.9}, { "x":1396324800000 , "y":8.0}, { "x":1398916800000 , "y":5.08}, { "x":1398916800000 , "y":4.65}, { "x":1398916800000 , "y":4.74}, { "x":1398916800000 , "y":2.98}, { "x":1401595200000 , "y":6.13}, { "x":1401595200000 , "y":8.98}, { "x":1401595200000 , "y":9.22}, { "x":1401595200000 , "y":5.84}, { "x":1404187200000 , "y":8.12}, { "x":1404187200000 , "y":7.89}, { "x":1404187200000 , "y":8.41}, { "x":1404187200000 , "y":8.47}, { "x":1406865600000 , "y":11.06}, { "x":1406865600000 , "y":11.84}, { "x":1406865600000 , "y":11.92}, { "x":1406865600000 , "y":10.8}, { "x":1409544000000 , "y":14.58}, { "x":1409544000000 , "y":18.39}, { "x":1409544000000 , "y":15.5}, { "x":1409544000000 , "y":18.33}, { "x":1412136000000 , "y":18.01}, { "x":1412136000000 , "y":21.3}, { "x":1412136000000 , "y":21.11}, { "x":1412136000000 , "y":18.37}, { "x":1414814400000 , "y":18.59}, { "x":1414814400000 , "y":18.81}, { "x":1414814400000 , "y":17.13}, { "x":1414814400000 , "y":16.92}, { "x":1417410000000 , "y":18.0}, { "x":1417410000000 , "y":15.18}, { "x":1420088400000 , "y":9.16}, { "x":1420088400000 , "y":12.13}, { "x":1420088400000 , "y":11.76}, { "x":1420088400000 , "y":9.31}, { "x":1422766800000 , "y":13.47}, { "x":1422766800000 , "y":13.41}, { "x":1425186000000 , "y":12.2333333333333}, { "x":1425186000000 , "y":12.4} ] } +]; + +</script> +<script src="js/area_chart.min.js"></script> +</body> </html>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/bar_chart.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/bar_chart.html new file mode 100644 index 00000000..0be16ec1 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/bar_chart.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> +<meta http-equiv="content-type" content="text/html; charset=UTF8"> +<meta http-equiv="X-UA-Compatible" content="IE=edge" /> +<link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css"> +<style> + body { + overflow-y:scroll; + } + text { + font: 12px sans-serif; + } + svg { + display: block; + } + #chart461 svg { + height: 420px; + width: 700px; + min-width: 100px; + min-height: 100px; + } + tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } +.nodatadiv { + display: table-cell; + width: 700px; + height:370px; + text-align:center; + vertical-align: middle; +} +.nodatainner { + padding: 10px; +} + </style> +<body> +<div align="center"><H3></H3></div><div id="chart461"> <svg></svg> </div> +<script src="../../d3/js/d3.v3.min.js"></script> +<script src="../../d3/js/nv.d3.min.js"></script> +<script src="../../d3/js/tooltip.js"></script> +<script src="../../d3/js/utils.js"></script> +<script src="../../d3/js/models/axis.min.js"></script> +<script src="../../d3/js/models/multiChart.js"></script> +<script> +historicalBarChart = [ + { "type":"bar", "key": "AP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":10}, { "x":1391230800000 , "y":4}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":12}, { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.93}, { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":19.04}, { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.62333333333333}, { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":16.1166666666667} ] } , + { "type":"bar", "key": "ROUTER_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":7}, { "x":1391230800000 , "y":7}, { "x":1393650000000 , "y":5}, { "x":1396324800000 , "y":6}, { "x":1398916800000 , "y":5}, { "x":1401595200000 , "y":6}, { "x":1404187200000 , "y":7}, { "x":1406865600000 , "y":7}, { "x":1409544000000 , "y":8.03}, { "x":1412136000000 , "y":9}, { "x":1414814400000 , "y":9}, { "x":1417410000000 , "y":8.78}, { "x":1420088400000 , "y":3.01}, { "x":1422766800000 , "y":2}, { "x":1425186000000 , "y":3.63333333333333} ] } , + { "type":"bar", "key": "SCTP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":8}, { "x":1391230800000 , "y":10}, { "x":1393650000000 , "y":10}, { "x":1396324800000 , "y":9}, { "x":1398916800000 , "y":9.58}, { "x":1401595200000 , "y":11.83}, { "x":1404187200000 , "y":14.36}, { "x":1406865600000 , "y":15.94}, { "x":1409544000000 , "y":24.55}, { "x":1412136000000 , "y":25.35}, { "x":1414814400000 , "y":23.63}, { "x":1417410000000 , "y":21.43}, { "x":1420088400000 , "y":12.5766666666667}, { "x":1422766800000 , "y":24.4}, { "x":1425186000000 , "y":24.5833333333333} ] } , + { "type":"bar", "key": "DP_CPU", "yAxis": "1", "values": [{ "x":1388552400000 , "y":2}, { "x":1391230800000 , "y":9}, { "x":1393650000000 , "y":4}, { "x":1396324800000 , "y":8}, { "x":1398916800000 , "y":2.98}, { "x":1401595200000 , "y":5.84}, { "x":1404187200000 , "y":8.47}, { "x":1406865600000 , "y":10.8}, { "x":1409544000000 , "y":18.33}, { "x":1412136000000 , "y":18.37}, { "x":1414814400000 , "y":16.92}, { "x":1417410000000 , "y":15.18}, { "x":1420088400000 , "y":9.31}, { "x":1422766800000 , "y":13.41}, { "x":1425186000000 , "y":12.4} ] } +]; +var chart; +nv.addGraph(function() { + chart = nv.models.multiBarChart() + .margin({top: 30, right: 60, bottom: 50, left: 100}) + .showLegend(true) + .reduceXTicks(false) + .forceY([0, 34.0]) + .showControls(true) + .stacked(false) + .logScale(false) + .legendPos('top') + .color(d3.scale.category10().range()); + chart.xAxis + .tickValues([1388552400000,1391230800000,1393650000000,1396324800000,1398916800000,1401595200000,1404187200000,1406865600000,1409544000000,1412136000000,1414814400000,1417410000000,1420088400000,1422766800000]) + .staggerLabels(false) + .showMaxMin(false) + .rotateLabels(90) + .axisLabel('Timestamp') + .tickFormat(function(d) { + return d3.time.format('%b %y')(new Date(d)) }); + chart.yAxis + .logScale(false) + .axisLabel('') + .tickFormat(d3.format(',.1f')); + d3.select('#chart461 svg') + .datum(historicalBarChart) + .transition().duration(1000) + .call(chart); +nv.utils.windowResize(chart.update); +return chart; +}); +function redraw() { + d3.select('#chart461 svg') + .datum(historicalBarChart) + .transition().duration(500) + .call(chart); +} + + setInterval(function () { + redraw(); + }, 1500) +if(historicalBarChart.length <= 0 ) { + document.getElementById("chart461").innerHTML = "<div id='noData'><b>No Data Available</b></div>"; + document.getElementById("chart461").className="nodatadiv"; + document.getElementById("nodata").className="nodatainner"; +} +</script> </body></html>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/busy_hour_traffic.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/busy_hour_traffic.html new file mode 100644 index 00000000..54ff7849 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/busy_hour_traffic.html @@ -0,0 +1,188 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html;charset=utf-8"> + +<title>Busy hour traffic analysis by day of week</title> + +<link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/scribble.css" /> +<link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/flexslider.css" /> +<link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/welcome.css" /> +<script src="../../../../../app/fusion/external/angular-1.4.8/angular.js"></script> +<script src="../../../../../static/js/jquery-1.10.2.js"></script> +<script src="../../../../fusion/external/angular-ui/ui-bootstrap-tpls-1.1.2.min.js"></script> +<!--for line Chart and Area Chart--> +<script src="../../../../../static/fusion/d3/js/d3.v3.min.js"></script> +<script src="../../../../../static/fusion/d3/js/nv.d3.min.js"></script> +<script src="../../../../../static/fusion/d3/js/models/axis.min.js"></script> +<!-- Style for line Chart and area chart --> +<link rel="stylesheet" type="text/css" href="../../../../../static/fusion/d3/css/nv.d3.css"> +<script type="text/javascript" src="../../../../../static/fusion/sample/js/FusionCharts.js"></script> +<script type="text/javascript" src="../../../../../static/fusion/sample/js/scribble.js"></script> +<script> + var app = angular.module("myApp", []); + app.controller('trafficController',function($scope) { + $scope.BusyHourTraffic = [ { + title : 'BH SNRC DLSTX - Incoming', + url : '#Incoming' + }, { + title : 'BH SNRC DLSTX - Outgoing', + url : '#Outgoing' + }, { + title : 'BH National - Default', + url : '#Default' + }, { + title : 'BH National - Priority', + url : '#Priority' + }, { + title : 'BH National', + url : '#BHNational' + } + + ]; + $scope.currentSelectedBusyHourTraffic = '#Incoming'; + $scope.onClickTab2 = function (TrafficTab) { + $scope.currentSelectedBusyHourTraffic = TrafficTab.url; + } + $scope.isActiveTab2 = function(tabUrl) { + return tabUrl == $scope.currentSelectedBusyHourTraffic; + } + $scope.activeTabId2 = 'Incoming'; + //for generic tabs + $scope.gTabs2 = [ { + title : 'BH SNRC DLSTX - Incoming', + id : 'Incoming', + url : '#Incoming', + selected : true + }, { + title : 'BH SNRC DLSTX - Outgoing', + id : 'Outgoing', + url : '#Outgoing' + }, { + title : 'BH National - Default', + id : 'Default', + url : '#Default' + }, { + title : 'BH National - Priority', + id : 'Priority', + url : '#Priority' + }, { + title : 'BH National', + id : 'BHNational', + url : '#BHNational' + }]; + + $scope.activeTabId3 = 'Incoming'; + //for generic tabs + $scope.gTabs3 = [ { + title : 'BH SNRC DLSTX - Incoming', + id: 'Incoming', + url : '#Incoming', + selected : true + }, { + title : 'BH SNRC DLSTX - Outgoing', + id : 'Outgoing', + url : '#Outgoing' + }, { + title : 'BH National - Default', + id : 'Default', + url : '#Default' + }, { + title : 'BH National - Priority', + id : 'Priority', + url : '#Priority' + }, { + title : 'BH National', + id : 'BHNational', + url : '#BHNational' + }]; + $scope.currentSelectedBusyHourTraffic = '#Incoming'; + $scope.onClickTab2 = function (TrafficTab) { + $scope.currentSelectedBusyHourTraffic = TrafficTab.url; + } + $scope.isActiveTab2 = function(tabUrl) { + return tabUrl == $scope.currentSelectedBusyHourTraffic; + } + $scope.toggleEastToWest = function() { + $("#toggle").toggle('slide'); + if ($("#leftIcon").is(":visible")) { + $("#rightIcon").show(); + $("#leftIcon").hide(); + } + else if ($("#rightIcon").is(":visible")) { + $("#rightIcon").hide(); + $("#leftIcon").show(); + } + }; + + $scope.group1 = { + open : true + }; + $scope.group2 = { + open : true + }; + $scope.group3 = { + open : true + }; + $scope.group4 = { + open : true + }; + $scope.group5 = { + open : true + }; + $scope.group6 = { + open : true + }; + $scope.group7 = { + open : true + }; + $scope.group71 = { + open : true + }; + $scope.group8 = { + open : true + }; + $scope.group9 = { + open : true + }; + $scope.group10 = { + open : true + }; + $scope.group11 = { + open : true + }; + $scope.group12 = { + open : false + }; +}); +</script> + +</head> + <body ng-app="myApp"> + <div ng-controller="trafficController"> + <div id = "BusyHourTraffic"> + <ul> + <li ng-repeat="TrafficTab in BusyHourTraffic" ng-class="{active2:isActiveTab2(TrafficTab.url)}" ng-click="onClickTab2(TrafficTab)">{{TrafficTab.title}}</li> + </ul> + <div id = "BusyHourTrafficView"> + <div ng-include="currentSelectedBusyHourTraffic"></div> + </div> + <script type="text/ng-template" id="#Incoming"> + <div id="Incoming" align="left"><img src="../../../../../static/fusion/sample/images/tunnels/BH_DLSTX_IN.png" width=100% height=100%></div> + </script> + <script type="text/ng-template" id="#Outgoing"> + <div id="Outgoing" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/BH_DLSTX_OUT.png" width=100% height=100%></div> + </script> + <script type="text/ng-template" id="#Default"> + <div id="Default" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/BH_Nat_Def.png" width=100% height=100%></div> + </script> + <script type="text/ng-template" id="#Priority"> + <div id="Priority" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/BH_Nat_Priority.png" width=100% height=100%></div> + </script> + <script type="text/ng-template" id="#BHNational"> + <div id="BHNational" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/BH_Nat.png" width=100% height=100%></div> + </script> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/d3_gauges_demo.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/d3_gauges_demo.html new file mode 100644 index 00000000..94596e73 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/d3_gauges_demo.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> + <head> + <meta http-equiv="content-type" content="text/html;charset=utf-8"> + <title>d3.js gauges</title> + + <style> + + body + { + font: 10px arial; + } + + </style> + + <script src="../../d3/js/d3.v3.min.js" charset="utf-8"></script> + + + <script> + + var dataURL = "data/speedometer2.csv"; + var gauges = []; + var recordLength = 0; + var dataset ; + + </script> + <script type="text/javascript" src="js/gauges.min.js"></script> + + </head> + + <body onload="initialize()"> + <span id="Bedminster"></span> + <span id="Piscataway"></span> + <br/> + <span id="Middletown"></span> + <span id="Paramus"></span> + </body> + +</html>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/data/speedometer2.csv b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/data/speedometer2.csv new file mode 100644 index 00000000..406143ea --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/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/app/fusion/external/samples/html/data/speedometer3.csv b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/data/speedometer3.csv new file mode 100644 index 00000000..046383e4 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/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/app/fusion/external/samples/html/data/worddata.csv b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/data/worddata.csv new file mode 100644 index 00000000..6a74cded --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/data/worddata.csv @@ -0,0 +1,22 @@ +text,frequency +video,100 +Domain 2.0,75 +spectrum,60 +4GLTE,60 +research,50 +UVerse,60 +DirectTV,30 +Iusacell,89 +Gamma,79 +BigData,55 +RCloud,45 +Raptor,20 +SDN,50 +NFV,50 +ASC,70 +AVPN,40 +Web-RTC,68 +MIS,40 +UDNC,30 +3G,30 +2G,10
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/donut_d3.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/donut_d3.html new file mode 100644 index 00000000..afcac359 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/donut_d3.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + +body { + font: 10px sans-serif; +} + +svg { + padding: 10px 0 0 10px; +} + +.arc { + stroke: #fff; +} + + .slice text { + font-size: 16pt; + font-family: Arial; + } +</style> +<body> +<script src="../../d3/js/d3.js"></script> + +<script> + +var radius = 74, + padding = 10; + +var width = 200, + height = 200; + +var outerRadius = height / 2 - 20, + innerRadius = outerRadius / 3, + cornerRadius = 10; +//var color = d3.scale.ordinal() + // .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); + var color = d3.scale.category10(); + var dataURL = "data/speedometer3.csv"; + + +</script> +<script src="js/donut.min.js"></script>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/area_chart.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/area_chart.min.js new file mode 100644 index 00000000..9b3decb9 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/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="<div id='noData'><b>No Data Available</b></div>",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/app/fusion/external/samples/html/js/donut.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/donut.min.js new file mode 100644 index 00000000..60c4fd4b --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/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/app/fusion/external/samples/html/js/gauges.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/gauges.min.js new file mode 100644 index 00000000..c0fd7484 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/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<Math.min(o+e,this.config.max);r+=a){var s=this.valueToPoint(r,.75),c=this.valueToPoint(r,.85);this.body.append("svg:line").attr("x1",s.x).attr("y1",s.y).attr("x2",c.x).attr("y2",c.y).style("stroke","#666").style("stroke-width","1px")}var s=this.valueToPoint(o,.7),c=this.valueToPoint(o,.85);if(this.body.append("svg:line").attr("x1",s.x).attr("y1",s.y).attr("x2",c.x).attr("y2",c.y).style("stroke","#333").style("stroke-width","2px"),o==this.config.min||o==this.config.max){var g=this.valueToPoint(o,.63);this.body.append("svg:text").attr("x",g.x).attr("y",g.y).attr("dy",i/3).attr("text-anchor",o==this.config.min?"start":"end").text(o).style("font-size",i+"px").style("fill","#333").style("stroke-width","0px")}}var f=this.body.append("svg:g").attr("class","pointerContainer"),h=(this.config.min+this.config.max)/2,l=this.buildPointerPath(h),d=d3.svg.line().x(function(t){return t.x}).y(function(t){return t.y}).interpolate("basis");f.selectAll("path").data([l]).enter().append("svg:path").attr("d",d).style("fill","#dc3912").style("stroke","#c63310").style("fill-opacity",.7),f.append("svg:circle").attr("cx",this.config.cx).attr("cy",this.config.cy).attr("r",.12*this.config.raduis).style("fill","#4684EE").style("stroke","#666").style("opacity",1);var i=Math.round(this.config.size/10);f.selectAll("text").data([h]).enter().append("svg:text").attr("x",this.config.cx).attr("y",this.config.size-this.config.cy/4-i).attr("dy",i/2).attr("text-anchor","middle").style("font-size",i+"px").style("fill","#000").style("stroke-width","0px"),this.redraw(this.config.min,0)},this.buildPointerPath=function(t){function i(t,i){var e=n.valueToPoint(t,i);return e.x-=n.config.cx,e.y-=n.config.cy,e}var e=this.config.range/13,o=i(t,.85),a=i(t-e,.12),r=i(t+e,.12),s=t-this.config.range*(1/.75)/2,c=i(s,.28),g=i(s-e,.12),f=i(s+e,.12);return[o,a,f,c,g,r,o]},this.drawBand=function(t,i,e){0>=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:t<n.config.min&&(i=n.config.min-.02*n.config.range);var e=n.valueToDegrees(i)-90,o=n._currentRotation||e;return n._currentRotation=e,function(t){var i=o+(e-o)*t;return"translate("+n.config.cx+", "+n.config.cy+") rotate("+i+")"}})},this.valueToDegrees=function(t){return t/this.config.range*270-(this.config.min/this.config.range*270+45)},this.valueToRadians=function(t){return this.valueToDegrees(t)*Math.PI/180},this.valueToPoint=function(t,i){return{x:this.config.cx-this.config.raduis*i*Math.cos(this.valueToRadians(t)),y:this.config.cy-this.config.raduis*i*Math.sin(this.valueToRadians(t))}},this.configure(i)}function createGauge(t,i,n,e){var o={size:100,label:i,min:void 0!=n?n:0,max:void 0!=e?e:100,minorTicks:5},a=o.max-o.min;o.yellowZones=[{from:o.min+.5*a,to:o.min+.9*a}],o.redZones=[{from:o.min+.9*a,to:o.max}],gauges[t]=new Gauge(t,o),gauges[t].render()}function createGauges(){createGauge("Bedminster","Bedminster",0,50),createGauge("Piscataway","Piscataway",0,50),createGauge("Middletown","Middletown",0,50),createGauge("Paramus","Paramus",0,50)}function updateGauges(t){for(var i in gauges){var n=getValue(i,t),e=getDate1(i,t);n&&gauges[i].redraw(n,e,100)}}function getValue(gauge_id,index){var d=dataset[index];return eval("d."+gauge_id)}function getDate1(t,i){var n=dataset[i];return n.YEARMONTH}function getROUTER_CPU_Value(t){d3.csv(dataURL,function(i){i.forEach(function(i,n){return n==t?i.ROUTER_CPU:void 0})})}function getAP_CPU_Value(t){d3.csv(dataURL,function(i){i.forEach(function(i,n){return n==t?i.AP_CPU:void 0})})}function updateData(){for(var t=0;t<recordLength;t++);}function initialize(){createGauges(),d3.csv(dataURL,function(t){dataset=t,recordLength=t.length,dataset.some(function(t,i){return 1==i?(updateGauges(i),1==i):void 0});var i=1e3,n=2,e=function(){return function(){return updateGauges(n++),n<recordLength?(d3.timer(e(),i),!0):(n=0,d3.timer(e(),i),!0)}};d3.timer(e(),i)})}
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/line_chart.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/line_chart.min.js new file mode 100644 index 00000000..e501260b --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/line_chart.min.js @@ -0,0 +1 @@ +function redrawLineChart(){d3.select("#lineChart svg").datum(historicalBarChart).call(line_chart)}var line_chart;nv.addGraph(function(){return line_chart=nv.models.multiChart().dualaxis(!1).legendPos("top").margin({top:30,right:60,bottom:50,left:100}).showLegend(!1).color(d3.scale.category10().range()),line_chart.lines1.forceY([0,34]),line_chart.lines2.forceY([0,1]),line_chart.xAxis.axisLabel("").staggerLabels(!1).showMaxMin(!1).rotateLabels(90).tickFormat(function(a){return d3.time.format("%b %y")(new Date(a))}),line_chart.yAxis1.axisLabel("").tickFormat(d3.format(",.1f")),d3.select("#lineChart svg").datum(historicalBarChart).call(line_chart),nv.utils.windowResize(line_chart.update),line_chart}),redrawLineChart(),historicalBarChart.length<=0&&(document.getElementById("lineChart").innerHTML="<div id='noData2'><b>No Data Available</b></div>",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/app/fusion/external/samples/html/js/pie_chart.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/pie_chart.min.js new file mode 100644 index 00000000..f78eec70 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/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="<div id='noData'><b>No Data Available</b></div>",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/app/fusion/external/samples/html/js/worddata.min.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/js/worddata.min.js new file mode 100644 index 00000000..6b827460 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/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/app/fusion/external/samples/html/line_chart.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/line_chart.html new file mode 100644 index 00000000..d4ba57a4 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/line_chart.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<meta http-equiv="content-type" content="text/html; charset=UTF8"> +<meta http-equiv="X-UA-Compatible" content="IE=edge" /> +<link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css"> +<style> + body { + overflow-y:scroll; + } + text { + font: 12px sans-serif; + } + svg { + display: block; + } + #chart461 svg { + height: 175px; + width: 300px; + min-width: 100px; + min-height: 100px; + } + tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } +.nodatadiv { + display: table-cell; + width: 700px; + height:370px; + text-align:center; + vertical-align: middle; +} +.nodatainner { + padding: 10px; +} + </style> +<body> +<div align="center"><H3></H3></div><div id="chart461"> <svg></svg> </div> +<script src="../../d3/js/d3.v3.min.js"></script> +<script src="../../d3/js/nv.d3.min.js"></script> +<script src="../../d3/js/models/axis.min.js"></script> +<script> +historicalBarChart = [ + { "type":"line", "key": "AP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":2.13}, { "x":1388552400000 , "y":5.0}, { "x":1388552400000 , "y":2.36}, { "x":1388552400000 , "y":10.0}, { "x":1391230800000 , "y":3.15}, { "x":1391230800000 , "y":2.88}, { "x":1391230800000 , "y":3.0}, { "x":1391230800000 , "y":4.0}, { "x":1393650000000 , "y":8.0}, { "x":1393650000000 , "y":3.93}, { "x":1393650000000 , "y":4.27}, { "x":1393650000000 , "y":4.0}, { "x":1396324800000 , "y":4.25}, { "x":1396324800000 , "y":5.35}, { "x":1396324800000 , "y":5.92}, { "x":1396324800000 , "y":12.0}, { "x":1398916800000 , "y":5.55}, { "x":1398916800000 , "y":4.89}, { "x":1398916800000 , "y":5.01}, { "x":1398916800000 , "y":3.27}, { "x":1401595200000 , "y":6.27}, { "x":1401595200000 , "y":9.17}, { "x":1401595200000 , "y":9.31}, { "x":1401595200000 , "y":6.07}, { "x":1404187200000 , "y":8.37}, { "x":1404187200000 , "y":8.11}, { "x":1404187200000 , "y":8.84}, { "x":1404187200000 , "y":8.93}, { "x":1406865600000 , "y":11.79}, { "x":1406865600000 , "y":12.22}, { "x":1406865600000 , "y":12.6}, { "x":1406865600000 , "y":11.61}, { "x":1409544000000 , "y":15.27}, { "x":1409544000000 , "y":19.09}, { "x":1409544000000 , "y":16.09}, { "x":1409544000000 , "y":18.66}, { "x":1412136000000 , "y":18.4}, { "x":1412136000000 , "y":22.05}, { "x":1412136000000 , "y":21.66}, { "x":1412136000000 , "y":19.04}, { "x":1414814400000 , "y":19.13}, { "x":1414814400000 , "y":19.61}, { "x":1414814400000 , "y":17.61}, { "x":1414814400000 , "y":17.5}, { "x":1417410000000 , "y":19.0}, { "x":1417410000000 , "y":15.73}, { "x":1420088400000 , "y":9.67}, { "x":1420088400000 , "y":15.19}, { "x":1420088400000 , "y":15.02}, { "x":1420088400000 , "y":9.62333333333333}, { "x":1422766800000 , "y":16.95}, { "x":1422766800000 , "y":14.29}, { "x":1425186000000 , "y":12.9}, { "x":1425186000000 , "y":16.1166666666667} ] } , + { "type":"line", "key": "ROUTER_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":3.0}, { "x":1388552400000 , "y":4.0}, { "x":1388552400000 , "y":4.89}, { "x":1388552400000 , "y":7.0}, { "x":1391230800000 , "y":4.57}, { "x":1391230800000 , "y":4.0}, { "x":1391230800000 , "y":4.0}, { "x":1391230800000 , "y":7.0}, { "x":1393650000000 , "y":7.0}, { "x":1393650000000 , "y":4.18}, { "x":1393650000000 , "y":5.0}, { "x":1393650000000 , "y":5.0}, { "x":1396324800000 , "y":5.0}, { "x":1396324800000 , "y":5.0}, { "x":1396324800000 , "y":5.06}, { "x":1396324800000 , "y":6.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1398916800000 , "y":5.0}, { "x":1401595200000 , "y":6.0}, { "x":1401595200000 , "y":6.09}, { "x":1401595200000 , "y":6.0}, { "x":1401595200000 , "y":6.0}, { "x":1404187200000 , "y":6.36}, { "x":1404187200000 , "y":7.0}, { "x":1404187200000 , "y":7.0}, { "x":1404187200000 , "y":7.0}, { "x":1406865600000 , "y":7.0}, { "x":1406865600000 , "y":7.02}, { "x":1406865600000 , "y":7.24}, { "x":1406865600000 , "y":7.0}, { "x":1409544000000 , "y":8.23}, { "x":1409544000000 , "y":8.11}, { "x":1409544000000 , "y":8.12}, { "x":1409544000000 , "y":8.03}, { "x":1412136000000 , "y":9.0}, { "x":1412136000000 , "y":8.93}, { "x":1412136000000 , "y":8.57}, { "x":1412136000000 , "y":9.0}, { "x":1414814400000 , "y":5.97}, { "x":1414814400000 , "y":6.0}, { "x":1414814400000 , "y":9.0}, { "x":1414814400000 , "y":9.0}, { "x":1417410000000 , "y":9.0}, { "x":1417410000000 , "y":8.78}, { "x":1420088400000 , "y":3.0}, { "x":1420088400000 , "y":2.01}, { "x":1420088400000 , "y":3.0}, { "x":1420088400000 , "y":3.01}, { "x":1422766800000 , "y":2.67}, { "x":1422766800000 , "y":2.0}, { "x":1425186000000 , "y":2.8}, { "x":1425186000000 , "y":3.63333333333333} ] } , + { "type":"line", "key": "SCTP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":7.0}, { "x":1388552400000 , "y":10.0}, { "x":1388552400000 , "y":8.27}, { "x":1388552400000 , "y":8.0}, { "x":1391230800000 , "y":10.02}, { "x":1391230800000 , "y":8.04}, { "x":1391230800000 , "y":9.0}, { "x":1391230800000 , "y":10.0}, { "x":1393650000000 , "y":12.0}, { "x":1393650000000 , "y":10.04}, { "x":1393650000000 , "y":11.16}, { "x":1393650000000 , "y":10.0}, { "x":1396324800000 , "y":10.7}, { "x":1396324800000 , "y":13.31}, { "x":1396324800000 , "y":12.73}, { "x":1396324800000 , "y":9.0}, { "x":1398916800000 , "y":12.41}, { "x":1398916800000 , "y":11.95}, { "x":1398916800000 , "y":12.82}, { "x":1398916800000 , "y":9.58}, { "x":1401595200000 , "y":11.28}, { "x":1401595200000 , "y":14.01}, { "x":1401595200000 , "y":14.63}, { "x":1401595200000 , "y":11.83}, { "x":1404187200000 , "y":14.06}, { "x":1404187200000 , "y":13.96}, { "x":1404187200000 , "y":14.66}, { "x":1404187200000 , "y":14.36}, { "x":1406865600000 , "y":16.6}, { "x":1406865600000 , "y":16.95}, { "x":1406865600000 , "y":17.11}, { "x":1406865600000 , "y":15.94}, { "x":1409544000000 , "y":19.86}, { "x":1409544000000 , "y":22.97}, { "x":1409544000000 , "y":21.56}, { "x":1409544000000 , "y":24.55}, { "x":1412136000000 , "y":22.66}, { "x":1412136000000 , "y":26.79}, { "x":1412136000000 , "y":26.54}, { "x":1412136000000 , "y":25.35}, { "x":1414814400000 , "y":21.0}, { "x":1414814400000 , "y":20.35}, { "x":1414814400000 , "y":21.93}, { "x":1414814400000 , "y":23.63}, { "x":1417410000000 , "y":24.0}, { "x":1417410000000 , "y":21.43}, { "x":1420088400000 , "y":12.63}, { "x":1420088400000 , "y":25.14}, { "x":1420088400000 , "y":21.85}, { "x":1420088400000 , "y":12.5766666666667}, { "x":1422766800000 , "y":26.3}, { "x":1422766800000 , "y":24.4}, { "x":1425186000000 , "y":23.3833333333333}, { "x":1425186000000 , "y":24.5833333333333} ] } , + { "type":"line", "key": "DP_CPU", "yAxis": "1","values": [{ "x":1388552400000 , "y":2.0}, { "x":1388552400000 , "y":5.0}, { "x":1388552400000 , "y":2.17}, { "x":1388552400000 , "y":2.0}, { "x":1391230800000 , "y":3.01}, { "x":1391230800000 , "y":2.56}, { "x":1391230800000 , "y":3.0}, { "x":1391230800000 , "y":9.0}, { "x":1393650000000 , "y":10.0}, { "x":1393650000000 , "y":3.64}, { "x":1393650000000 , "y":4.06}, { "x":1393650000000 , "y":4.0}, { "x":1396324800000 , "y":4.04}, { "x":1396324800000 , "y":5.11}, { "x":1396324800000 , "y":5.9}, { "x":1396324800000 , "y":8.0}, { "x":1398916800000 , "y":5.08}, { "x":1398916800000 , "y":4.65}, { "x":1398916800000 , "y":4.74}, { "x":1398916800000 , "y":2.98}, { "x":1401595200000 , "y":6.13}, { "x":1401595200000 , "y":8.98}, { "x":1401595200000 , "y":9.22}, { "x":1401595200000 , "y":5.84}, { "x":1404187200000 , "y":8.12}, { "x":1404187200000 , "y":7.89}, { "x":1404187200000 , "y":8.41}, { "x":1404187200000 , "y":8.47}, { "x":1406865600000 , "y":11.06}, { "x":1406865600000 , "y":11.84}, { "x":1406865600000 , "y":11.92}, { "x":1406865600000 , "y":10.8}, { "x":1409544000000 , "y":14.58}, { "x":1409544000000 , "y":18.39}, { "x":1409544000000 , "y":15.5}, { "x":1409544000000 , "y":18.33}, { "x":1412136000000 , "y":18.01}, { "x":1412136000000 , "y":21.3}, { "x":1412136000000 , "y":21.11}, { "x":1412136000000 , "y":18.37}, { "x":1414814400000 , "y":18.59}, { "x":1414814400000 , "y":18.81}, { "x":1414814400000 , "y":17.13}, { "x":1414814400000 , "y":16.92}, { "x":1417410000000 , "y":18.0}, { "x":1417410000000 , "y":15.18}, { "x":1420088400000 , "y":9.16}, { "x":1420088400000 , "y":12.13}, { "x":1420088400000 , "y":11.76}, { "x":1420088400000 , "y":9.31}, { "x":1422766800000 , "y":13.47}, { "x":1422766800000 , "y":13.41}, { "x":1425186000000 , "y":12.2333333333333}, { "x":1425186000000 , "y":12.4} ] } +]; + +</script> +<script src="js/line_chart.min.js"></script> +</body> </html>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/pie_chart.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/pie_chart.html new file mode 100644 index 00000000..ebbdd9c0 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/pie_chart.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<meta http-equiv="content-type" content="text/html; charset=UTF8"> +<meta http-equiv="X-UA-Compatible" content="IE=edge" /> +<link href="../../d3/css/nv.d3.css" rel="stylesheet" type="text/css"> +<style> + body { + overflow-y:scroll; + } + text { + font: 12px sans-serif; + } + tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); } svg { display: block; } #chart423 svg { + height: 275px; + width: 300px; + min-width: 100px; + min-height: 100px; + } + </style> +<body> +<div id="chart423"><svg></svg></div> +<script src="../../d3/js/d3.v3.min.js"></script> +<script src="../../d3/js/nv.d3.min.js"></script> +<script src="../../d3/js/models/legend.js"></script> +<script src="../../d3/js/models/pie.js"></script> +<script src="../../d3/js/models/pieChart.js"></script> +<script src="../../d3/js/utils.js"></script> +<script> +historicalBarChart = [ +{ "key":"Bedminster", "y":8.27}, +{ "key":"Middletown", "y":2.36}, +{ "key":"Paramus", "y":2.17}, +{ "key":"Piscataway", "y":4.89} +]; + +</script> +<script src="js/pie_chart.min.js"></script> +</body> </html>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/traffic_distribution.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/traffic_distribution.html new file mode 100644 index 00000000..0b196bae --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/traffic_distribution.html @@ -0,0 +1,205 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html;charset=utf-8"> + +<title>Traffic distribution by day of week</title> + +<script src="../../d3/js/d3.v3.min.js" charset="utf-8"></script> + + +<link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/scribble.css" /> +<link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/flexslider.css" /> +<link rel="stylesheet" type="text/css" href="../../../../../static/fusion/sample/css/welcome.css" /> + +<script src="../../../../../app/fusion/external/angular-1.4.8/angular.js"></script> + +<script src="../../../../../static/js/jquery-1.10.2.js"></script> +<script src="../../../../fusion/external/angular-ui/ui-bootstrap-tpls-1.1.2.min.js"></script> + + +<!--for line Chart and Area Chart--> +<script src="../../../../../static/fusion/d3/js/d3.v3.min.js"></script> +<script src="../../../../../static/fusion/d3/js/nv.d3.min.js"></script> +<script src="../../../../../static/fusion/d3/js/models/axis.min.js"></script> + +<!-- Style for line Chart and area chart --> +<link rel="stylesheet" type="text/css" href="../../../../../static/fusion/d3/css/nv.d3.css"> +<!-- Charts --> +<script type="text/javascript" src="../../../../../static/fusion/sample/js/charts.js"></script> +<!-- Charts --> +<script type="text/javascript" src="../../../../../static/fusion/sample/js/scribble.js"></script> + + +<script> + var app = angular.module("myApp", []); + app.controller('trafficController',function($scope) { + $scope.activeTabId = 'Monday'; + $scope.selectedTrafficDay = [{ + title : 'Mon', + url : '#Monday' + }, { + title : 'Tue', + url : '#Tuesday' + }, { + title : 'Wed', + url : '#Wednesday' + }, { + title : 'Thu', + url : '#Thursday' + }, { + title : 'Fri', + url : '#Friday' + }, { + title : 'Sat', + url : '#Saturday' + }, { + title : 'Sun', + url : '#Sunday' + }]; + + $scope.currentSelectedDayTab = '#Monday'; + + $scope.onClickTab1 = function (Daytab) { + $scope.currentSelectedDayTab = Daytab.url; + } + + $scope.isActiveTab1 = function(tabUrl) { + return tabUrl == $scope.currentSelectedDayTab; + } + + + $scope.gTabs = [ { + title : 'Monday', + id : 'Monday', + url : '#Monday', + selected : true + }, { + title : 'Tuesday', + id : 'Tuesday', + url : '#Tuesday' + }, { + title : 'Wednesday', + id : 'Wednesday', + url : '#Wednesday' + }, { + title : 'Thursday', + id : 'Thursday', + url : '#Thursday' + }, { + title : 'Friday', + id : 'Friday', + url : '#Friday' + }, { + title : 'Saturday', + id : 'Saturday', + url : '#Saturday' + }, { + title : 'Sunday', + id : 'Sunday', + url : '#Sunday' + }]; + + + + + + $scope.currentSelectedBusyHourTraffic = '#Incoming'; + + $scope.onClickTab2 = function (TrafficTab) { + $scope.currentSelectedBusyHourTraffic = TrafficTab.url; + } + + $scope.isActiveTab2 = function(tabUrl) { + return tabUrl == $scope.currentSelectedBusyHourTraffic; + } + + $scope.toggleEastToWest = function() { + $("#toggle").toggle('slide'); + if ($("#leftIcon").is(":visible")) { + $("#rightIcon").show(); + $("#leftIcon").hide(); + } + else if ($("#rightIcon").is(":visible")) { + $("#rightIcon").hide(); + $("#leftIcon").show(); + } + }; + + $scope.group1 = { + open : true + }; + $scope.group2 = { + open : true + }; + $scope.group3 = { + open : true + }; + $scope.group4 = { + open : true + }; + $scope.group5 = { + open : true + }; + $scope.group6 = { + open : true + }; + $scope.group7 = { + open : true + }; + $scope.group71 = { + open : true + }; + $scope.group8 = { + open : true + }; + $scope.group9 = { + open : true + }; + $scope.group10 = { + open : true + }; + $scope.group11 = { + open : true + }; + $scope.group12 = { + open : false + }; + }); +</script> + +</head> + <body ng-app="myApp"> + <div ng-controller="trafficController"> + <div id="selectedTrafficDay"> + <ul> + <li ng-repeat="Daytab in selectedTrafficDay" ng-class="{active1:isActiveTab1(Daytab.url)}" ng-click="onClickTab1(Daytab)">{{Daytab.title}}</li> + </ul> + <div id="SelectedTrafficeDayView"> + <div ng-include="currentSelectedDayTab"></div> + </div> + <script type="text/ng-template" id="#Monday"> + <div id="Monday" align="centers"><img src="../../../../../static/fusion/sample/images/tunnels/1_mon.png" width=100% height=100% alt="Monday"></div> + </script> + <script type="text/ng-template" id="#Tuesday"> + <div id="Tuesday" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/2_tue.png" width=100% height=100% alt="Tuesday"></div> + </script> + <script type="text/ng-template" id="#Wednesday"> + <div id="Wednesday" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/3_wed.png" width=100% height=100% alt="Wednesday"></div> + </script> + <script type="text/ng-template" id="#Thursday"> + <div id="Thursday" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/4_thu.png" width=100% height=100% alt="Thursday"></div> + </script> + <script type="text/ng-template" id="#Friday"> + <div id="Friday" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/5_fri.png" width=100% height=100% alt="Friday"></div> + </script> + <script type="text/ng-template" id="#Saturday"> + <div id="Saturday" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/6_sat.png" width=100% height=100% alt="Saturday"></div> + </script> + <script type="text/ng-template" id="#Sunday"> + <div id="Sunday" align="center"><img src="../../../../../static/fusion/sample/images/tunnels/7_sun.png" width=100% height=100% alt="Sunday"></div> + </script> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/wordcloud.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/wordcloud.html new file mode 100644 index 00000000..d9fc53fb --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/external/samples/html/wordcloud.html @@ -0,0 +1,37 @@ +<html> +<head> + <title>Word Cloud Example</title> + <meta charset="utf-8" /> +<script src="../../d3/js/d3.v3.min.js" type="text/JavaScript"></script> +<script src="../../d3/js/colorbrewer.js" type="text/JavaScript"></script> +<script src="../../d3/js/d3.layout.cloud.js" type="text/JavaScript"></script> + +</head> +<style> + svg { + height: 350px; + width: 420px; + border: 1px solid gray; + } + +</style> +<body> + +<div id="viz"> + <svg> + </svg> +</div> +<div id="controls" /> +</body> + <footer> + +<script> +var cloudSize = 200; +var dataURL = "data/worddata.csv"; +var keywords = ["video", "raptor", "4GLTE", "style", "append", "attr"]; + +</script> +<script src="js/worddata.min.js" type="text/JavaScript"></script> + </footer> + +</html>
\ No newline at end of file |