+++ /dev/null
-<!DOCTYPE html>
-<!--
- ================================================================================
- eCOMP Portal
- ================================================================================
- Copyright (C) 2017 AT&T Intellectual Property
- ================================================================================
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- ================================================================================
- -->
-
-<html>
-<head>
- <title>DCAE Locations</title>
-
- <link
- rel="stylesheet"
- href="./lib/leaflet.css"
- />
- <script src="./lib/d3.v3.min.js"></script>
-
- <script
- src= "./lib/leaflet.js" >
- </script>
- <style>
- html,body {
- height: 100%;
- width: 100%;
- margin: 0;
- }
-
- #map {
- height: 100%;
- width: 50%;
- position: absolute;
- }
-
- .voronoi {
- fill-opacity: .3;
- stroke: black;
- stroke-width: 2;
- }
-
- .cityhull {
- fill: purple;
- fill-opacity: .5;
- stroke: black;
- stroke-width: 1px;
- }
-
- .point {
- fill: darkred;
- stroke: black;
- stroke-width: 1px;
- }
-
- .wards {
- fill: gray;
- stroke: gray;
- stroke-width: 1px;
- }
-
- .zip {
- fill: none;
- stroke: #CCC;
- stroke-width: .5px;
- }
-
-.d3-tip {
- line-height: 1;
- font-weight: bold;
- padding: 12px;
- background: rgba(0, 0, 0, 0.8);
- color: #fff;
- border-radius: 2px;
-}
-
-/* Creates a small triangle extender for the tooltip */
-.d3-tip:after {
- box-sizing: border-box;
- display: inline;
- font-size: 10px;
- width: 100%;
- line-height: 1;
- color: rgba(0, 0, 0, 0.8);
- content: "\25BC";
- position: absolute;
- text-align: center;
-}
-
-/* Style northward tooltips differently */
-.d3-tip.n:after {
- margin: -1px 0 0 0;
- top: 100%;
- left: 0;
-}
-
-cityname.tooltip {
- position: absolute;
- text-align: center;
- padding: 5px;
- font: 14px 'Raleway',Helvetica,sans-serif;
- color: white;
- background-color: rgba(0,0,0,0.7);
- border: 0px;
- border-radius: 4px;
- pointer-events: none;
- z-index:1;
-}
-
-.canvas {
- vertical-align: middle;
- background: rgba(255,255,255, 0.2);
- box-shadow: inset 0 0 3px 0px #CECECE;
- position: absolute;
- left: 750px;
- top: 0px;
-}
-
-.header rect{
- fill: #0099FF;
-}
-
-.header text{
- fill: white;
- font: 10px sans-serif;
- text-anchor: middle;
-}
-
-.cell rect{
- fill: #66FFFF;
-}
-
-.cell text{
- fill: black;
- font: 10px sans-serif;
- text-anchor: middle;
-}
-
-table.gridtable {
- font-family: verdana,arial,sans-serif;
- font-size:11px;
- color:#333333;
- border-width: 1px;
- border-color: #666666;
- border-collapse: collapse;
-}
-table.gridtable th {
- border-width: 1px;
- padding: 8px;
- border-style: solid;
- border-color: #666666;
- background-color: #dedede;
-}
-table.gridtable td {
- border-width: 1px;
- padding: 8px;
- border-style: solid;
- border-color: #666666;
- background-color: #ffffff;
-}
-
-.dot {
- fill: #c7141a;
-}
-
-.ring {
- fill: none;
- stroke: #c7141a;
-}
-
- #legend {
- position: absolute;
- left: 20px;
- bottom: 20px;
- width: 250px;
- height: 50px;
- background: white;
- border-radius: 5px;
- border: 3px double gray;
- box-shadow: 3px 3px black;
- }
- </style>
-</head>
-<body>
-
- <div id="map" style="width:75%;height:100%;position:absolute;top:2px;"></div>
- <div id="cityDetail" style="width:25%;font-family: verdana,arial,sans-serif;
- font-size:10px;position:absolute;right: 0px">Details for that location</div>
- <div id="legend"></div>
-
-
- <!--<script type="text/javascript">-->
- <!--var req = new XMLHttpRequest();-->
-
-<!--// Feature detection for CORS-->
-<!--if ('withCredentials' in req) {-->
- <!--req.open('GET', 'http://todo_url:8080/dcae-services?vnfLocation=Southfield,MI', true);-->
- <!--// Just like regular ol' XHR-->
- <!--req.onreadystatechange = function() {-->
- <!--if (req.readyState === 4) {-->
- <!--if (req.status >= 200 && req.status < 400) {-->
- <!--// JSON.parse(req.responseText) etc.-->
- <!--} else {-->
- <!--// Handle error case-->
- <!--}-->
- <!--}-->
- <!--};-->
- <!--req.send();-->
-<!--}-->
- <!--</script>-->
-
- <script type="text/javascript">
-
-
-
- var greaterthan75_text = "Existing UEB Prod Instances";
- var greaterthan75_color = "red";
-
- var lessthan50_75_text = "Initial Message Router Prod Instances";
- var lessthan50_75_color = "yellow";
-
- var lessthan50_text = "Existing Atlas Prod Instances";
- var lessthan50_color = "green";
-
- var cityname = d3.select('body').append('cityname')
- .attr('class', 'tooltip')
- .style('opacity', 0);
-
-
-
- //var CSV_URL = "test1.csv";
- // var CSV_URL = "customer_utilization2.csv";
- var CSV_URL = "dcae_locations1.csv";
- var map = L.map('map').setView([39,-99], 4);
- mapLink =
- '<a href="http://mapbox.com">Mapbox</a>';
- L.tileLayer(
- //'http://{s}.tiles.mapbox.com/v3/elijahmeeks.map-azn21pbi/{z}/{x}/{y}.png', {
- 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '© ' + mapLink + ' Contributors',
- maxZoom: 18,
- }).addTo(map);
-
- /* Initialize the SVG layer */
- map._initPathRoot()
-
- /* We simply pick up the SVG from the map object */
- var svg = d3.select("#map").select("svg"),
- g = svg.append("g");
-
- var dispatcher = d3.dispatch('jsonLoad');
-
- // optional dispatcher
-dispatcher.on('jsonLoad', function(data) {
- // triggered afer json is loaded (just if you want to do additional stuff here.)
- console.log(data);
-});
-
- d3.csv(CSV_URL, function(data) {
- // alert(data);
- /* Add a LatLng object to each item in the dataset */
- data.forEach(function(d) {
- //console.log(d);
- d.LatLng = new L.LatLng(d.lat,
- d.lon)
- //alert(d.Latlng);
- })
-
-
- var feature = g.selectAll("circle")
- .data(data)
- .enter().append("circle")
- .attr("id", function(d) {return 'circle_'+removeSpecialCharacters(d.id);} )
- .style("stroke", "black")
- .style("opacity", .6)
- .style("fill", function(d) {/*return p.leaf ? "darkred" : "#FFE6E6"*/ if(d!=null) { var perf = d.bandwidth; if (perf>=50000 && perf <=120000) return lessthan50_75_color; else if (perf> 150001) { console.log("&&&&&&&&&&&&&&&&&&&&" + perf); return greaterthan75_color;} else return lessthan50_color; } })
- //.style("fill", "red")
- .attr("r", 8)
-
- .on("mouseover", function(d){ cityname.transition()
- .style('opacity', 1.0);
- cityname.style("visibility", "visible");
-
- if(d.id) {
- cityname.html(d.id + "<br/>" + d.popup_note) ;
- var td_id = "#tdaddr_"+ removeSpecialCharacters(d.id);
- d3.selectAll(td_id).style('background-color', '#9999ff');
- //console.log(d3.selectAll(td_id));
- }
- var target_x = d3.event.target.cx.animVal.value;
- //console.log("Target_x" + target_x);
- //console.log(d3.select('#d3MapSVG'));
- //console.log(this.getCTM() );
- //console.log(this.getScreenCTM());
- //cityname.transition().style('left', Number(target_x)+Number(d3.select('#d3MapSVG')[0][0].offsetWidth)+ 'px');
- cityname.style('left', Number(this.getScreenCTM().e) + 10 + 'px');
- cityname.style('top', (Number(this.getScreenCTM().f) - 0) + 'px');
- cityname.style('zIndex', '1');
-
- })
-
-.on("click", function(d) {
- var city = d.popup_note;
- console.log(city)
- // d3.text('../../../portalApi/get_geo_map_api_url', function(error, pref_url) {
- /* ajax call to return api call url*/
- var prefix_url="https://todo_url:8080/dcae-services?vnfLocation=";
- d3.json(prefix_url+city, function(error, d) {
- console.log(prefix_url+city);
- d3.selectAll("#cityDetail").text("Total Count: " + d.totalCount + "[" + d.popup_note + "]");
- var out = "";
- out += "Total Count: " + JSON.stringify(d.totalCount, null,4) + " [" + city + "]";
- out += "<table class='gridtable'>";
- out += "<tr><th>Service Id</th><th>Service Name</th><th> VNF Type </th> </tr>";
- d.items.forEach(function(item) {
-
- out += "<tr><td>" +
- item.serviceId +
- "</td><td>" +
- item.typeLink.title +
- "</td><td>" +
- item.vnfType +
- "</td></tr>";
-
- })
- out += "</table>";
- d3.select("#cityDetail").html(out);
- });
-
-
- // });
-})
-.on("mouseout", function(d){ if(d.id) { var td_id = "#tdaddr_"+ removeSpecialCharacters(d.id);
- d3.selectAll(td_id).style('background-color', '#ffffff');
- }
- //console.log("mouseout");
- return cityname.style("visibility", "hidden");} );
-
-
- map.on("viewreset", update);
- update();
-
- function update() {
- feature.attr("transform",
- function(d) {
- return "translate("+
- map.latLngToLayerPoint(d.LatLng).x +","+
- map.latLngToLayerPoint(d.LatLng).y +")";
- }
- )
- }
- })
-
-
-
-var callback = function (error, root) {
- dispatcher.jsonLoad(root);
- console.log(root);
- };
-
-
- function csvJSON(csv){
- //console.log(csv);
-
- //csv1.map(function(csv) {
- //console.log(csv);
-
- var lines=csv.split("\n");
-
- //console.log(lines);
-
- var result = [];
- //console.log("first line header");
- //console.log(lines[0]);
- var headers=lines[0].split(",");
- //console.log(headers);
- //console.log(headers[headers.length-1])
- //headers.splice(headers.length-1);
-
- for(var i=1;i<lines.length;i++){
-
- var obj = {};
- var currentline=lines[i].split(",");
- //console.log(currentline);
-
- for(var j=0;j<headers.length;j++){
- obj[headers[j]] = currentline[j];
- }
-
- result.push(obj);
- //console.log(result);
-
- }
- //console.log(JSON.stringify(result));
- //return result; //JavaScript object
- jsonData = result; //JSON
- //console.log(jsonData)
-
- //refreshTable(null);
- return jsonData;
-}
-
-function isString(o) {
- return typeof o == "string" || (typeof o == "object" && o.constructor === String);
-}
-
- function hyperTrigger(var1, popup_note, bandwidth) {
- var res = var1.split("*");
- alert(res);
- //alert(bandwidth);
- //parent.hyperTrigger2(res[0],res[1],popup_note, bandwidth);
- }
-
- function removeSpecialCharacters(var1) {
- return var1.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');
-}
-</script>
-<script src="static/visjs/legend_v2.js"></script>
-</body>
-</html>
Code Review / portal.git / blobdiff