ecomp-portal-FE/client/kpi-dashboard/views/DCAE_DASH/dcae_locations.html

   1 <!DOCTYPE html>
   2 <!--
   3   ================================================================================
   4   eCOMP Portal
   5   ================================================================================
   6   Copyright (C) 2017 AT&T Intellectual Property
   7   ================================================================================
   8   Licensed under the Apache License, Version 2.0 (the "License");
   9   you may not use this file except in compliance with the License.
  10   You may obtain a copy of the License at
  11
  12        http://www.apache.org/licenses/LICENSE-2.0
  13
  14   Unless required by applicable law or agreed to in writing, software
  15   distributed under the License is distributed on an "AS IS" BASIS,
  16   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17   See the License for the specific language governing permissions and
  18   limitations under the License.
  19   ================================================================================
  20   -->
  21
  22 <html>
  23 <head>
  24         <title>DCAE Locations</title>
  25
  26     <link
  27         rel="stylesheet"
  28         href="./lib/leaflet.css"
  29     />
  30     <script src="./lib/d3.v3.min.js"></script>
  31
  32     <script
  33         src= "./lib/leaflet.js" >
  34     </script>
  35  <style>
  36   html,body {
  37     height: 100%;
  38     width: 100%;
  39     margin: 0;
  40   }
  41
  42   #map {
  43     height: 100%;
  44     width: 50%;
  45     position: absolute;
  46   }
  47
  48   .voronoi {
  49     fill-opacity: .3;
  50     stroke: black;
  51     stroke-width: 2;
  52   }
  53
  54   .cityhull {
  55     fill: purple;
  56     fill-opacity: .5;
  57     stroke: black;
  58     stroke-width: 1px;
  59   }
  60
  61   .point {
  62     fill: darkred;
  63     stroke: black;
  64     stroke-width: 1px;
  65   }
  66
  67   .wards {
  68     fill: gray;
  69     stroke: gray;
  70     stroke-width: 1px;
  71    }
  72
  73      .zip {
  74       fill: none;
  75       stroke: #CCC;
  76       stroke-width: .5px;
  77      }
  78
  79 .d3-tip {
  80   line-height: 1;
  81   font-weight: bold;
  82   padding: 12px;
  83   background: rgba(0, 0, 0, 0.8);
  84   color: #fff;
  85   border-radius: 2px;
  86 }
  87
  88 /* Creates a small triangle extender for the tooltip */
  89 .d3-tip:after {
  90   box-sizing: border-box;
  91   display: inline;
  92   font-size: 10px;
  93   width: 100%;
  94   line-height: 1;
  95   color: rgba(0, 0, 0, 0.8);
  96   content: "\25BC";
  97   position: absolute;
  98   text-align: center;
  99 }
 100
 101 /* Style northward tooltips differently */
 102 .d3-tip.n:after {
 103   margin: -1px 0 0 0;
 104   top: 100%;
 105   left: 0;
 106 }
 107
 108 cityname.tooltip {
 109   position: absolute;
 110   text-align: center;
 111   padding: 5px;
 112   font: 14px 'Raleway',Helvetica,sans-serif;
 113   color: white;
 114   background-color: rgba(0,0,0,0.7);
 115   border: 0px;
 116   border-radius: 4px;
 117   pointer-events: none;
 118   z-index:1;
 119 }
 120
 121 .canvas {
 122   vertical-align: middle;
 123   background: rgba(255,255,255, 0.2);
 124   box-shadow: inset 0 0 3px 0px #CECECE;
 125   position: absolute;
 126   left: 750px;
 127   top: 0px;
 128 }
 129
 130 .header rect{
 131   fill: #0099FF;
 132 }
 133
 134 .header text{
 135   fill: white;
 136   font: 10px sans-serif;
 137   text-anchor: middle;
 138 }
 139
 140 .cell rect{
 141   fill: #66FFFF;
 142 }
 143
 144 .cell text{
 145   fill: black;
 146   font: 10px sans-serif;
 147   text-anchor: middle;
 148 }
 149
 150 table.gridtable {
 151   font-family: verdana,arial,sans-serif;
 152   font-size:11px;
 153   color:#333333;
 154   border-width: 1px;
 155   border-color: #666666;
 156   border-collapse: collapse;
 157 }
 158 table.gridtable th {
 159   border-width: 1px;
 160   padding: 8px;
 161   border-style: solid;
 162   border-color: #666666;
 163   background-color: #dedede;
 164 }
 165 table.gridtable td {
 166   border-width: 1px;
 167   padding: 8px;
 168   border-style: solid;
 169   border-color: #666666;
 170   background-color: #ffffff;
 171 }
 172
 173 .dot {
 174   fill: #c7141a;
 175 }
 176
 177 .ring {
 178   fill: none;
 179   stroke: #c7141a;
 180 }
 181
 182  #legend {
 183     position: absolute;
 184     left: 20px;
 185     bottom: 20px;
 186     width: 250px;
 187     height: 50px;
 188     background: white;
 189     border-radius: 5px;
 190     border: 3px double gray;
 191     box-shadow: 3px 3px black;
 192   }
 193     </style>
 194 </head>
 195 <body>
 196
 197     <div id="map" style="width:75%;height:100%;position:absolute;top:2px;"></div>
 198     <div  id="cityDetail" style="width:25%;font-family: verdana,arial,sans-serif;
 199   font-size:10px;position:absolute;right: 0px">Details for that location</div>
 200     <div id="legend"></div>
 201
 202
 203     <!--<script type="text/javascript">-->
 204    <!--var req = new XMLHttpRequest();-->
 205
 206 <!--// Feature detection for CORS-->
 207 <!--if ('withCredentials' in req) {-->
 208     <!--req.open('GET', 'http://todo_url:8080/dcae-services?vnfLocation=Southfield,MI', true);-->
 209     <!--// Just like regular ol' XHR-->
 210     <!--req.onreadystatechange = function() {-->
 211         <!--if (req.readyState === 4) {-->
 212             <!--if (req.status >= 200 && req.status < 400) {-->
 213                 <!--// JSON.parse(req.responseText) etc.-->
 214             <!--} else {-->
 215                 <!--// Handle error case-->
 216             <!--}-->
 217         <!--}-->
 218     <!--};-->
 219     <!--req.send();-->
 220 <!--}-->
 221   <!--</script>-->
 222
 223         <script type="text/javascript">
 224
 225
 226
 227         var greaterthan75_text = "Existing UEB Prod Instances";
 228   var greaterthan75_color = "red";
 229
 230   var lessthan50_75_text = "Initial Message Router Prod Instances";
 231   var lessthan50_75_color = "yellow";
 232
 233   var lessthan50_text = "Existing Atlas Prod Instances";
 234   var lessthan50_color = "green";
 235
 236    var cityname = d3.select('body').append('cityname')
 237     .attr('class', 'tooltip')
 238     .style('opacity', 0);
 239
 240
 241
 242             //var CSV_URL = "test1.csv";
 243      // var CSV_URL = "customer_utilization2.csv";
 244       var CSV_URL = "dcae_locations1.csv";
 245         var map = L.map('map').setView([39,-99], 4);
 246         mapLink =
 247             '<a href="http://mapbox.com">Mapbox</a>';
 248         L.tileLayer(
 249             //'http://{s}.tiles.mapbox.com/v3/elijahmeeks.map-azn21pbi/{z}/{x}/{y}.png', {
 250                 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 251             attribution: '&copy; ' + mapLink + ' Contributors',
 252             maxZoom: 18,
 253             }).addTo(map);
 254
 255         /* Initialize the SVG layer */
 256         map._initPathRoot()
 257
 258         /* We simply pick up the SVG from the map object */
 259         var svg = d3.select("#map").select("svg"),
 260         g = svg.append("g");
 261
 262   var dispatcher = d3.dispatch('jsonLoad');
 263
 264    // optional dispatcher
 265 dispatcher.on('jsonLoad', function(data) {
 266     // triggered afer json is loaded (just if you want to do additional stuff here.)
 267     console.log(data);
 268 });
 269
 270         d3.csv(CSV_URL, function(data) {
 271                 // alert(data);
 272                 /* Add a LatLng object to each item in the dataset */
 273                 data.forEach(function(d) {
 274                         //console.log(d);
 275                         d.LatLng = new L.LatLng(d.lat,
 276                                                                         d.lon)
 277                         //alert(d.Latlng);
 278                 })
 279
 280
 281                 var feature = g.selectAll("circle")
 282                         .data(data)
 283                         .enter().append("circle")
 284                         .attr("id", function(d) {return 'circle_'+removeSpecialCharacters(d.id);} )
 285                         .style("stroke", "black")
 286                         .style("opacity", .6)
 287                         .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; } })
 288                         //.style("fill", "red")
 289                         .attr("r", 8)
 290
 291         .on("mouseover", function(d){ cityname.transition()
 292           .style('opacity', 1.0);
 293           cityname.style("visibility", "visible");
 294
 295         if(d.id) {
 296           cityname.html(d.id + "<br/>" + d.popup_note) ;
 297           var td_id = "#tdaddr_"+ removeSpecialCharacters(d.id);
 298           d3.selectAll(td_id).style('background-color', '#9999ff');
 299           //console.log(d3.selectAll(td_id));
 300         }
 301         var target_x = d3.event.target.cx.animVal.value;
 302         //console.log("Target_x" + target_x);
 303         //console.log(d3.select('#d3MapSVG'));
 304         //console.log(this.getCTM() );
 305         //console.log(this.getScreenCTM());
 306         //cityname.transition().style('left', Number(target_x)+Number(d3.select('#d3MapSVG')[0][0].offsetWidth)+ 'px');
 307         cityname.style('left', Number(this.getScreenCTM().e) + 10 + 'px');
 308         cityname.style('top', (Number(this.getScreenCTM().f) - 0) + 'px');
 309         cityname.style('zIndex', '1');
 310
 311         })
 312
 313 .on("click", function(d) {
 314       var city = d.popup_note;
 315       console.log(city)
 316       // d3.text('../../../portalApi/get_geo_map_api_url', function(error, pref_url) {
 317           /* ajax call to return api call url*/
 318           var prefix_url="https://todo_url:8080/dcae-services?vnfLocation=";
 319         d3.json(prefix_url+city, function(error, d) {
 320           console.log(prefix_url+city);
 321                   d3.selectAll("#cityDetail").text("Total Count: " + d.totalCount + "[" + d.popup_note + "]");
 322                 var out =  "";
 323                   out += "Total Count: " + JSON.stringify(d.totalCount, null,4) + "  [" + city + "]";
 324                  out += "<table class='gridtable'>";
 325                  out += "<tr><th>Service Id</th><th>Service Name</th><th> VNF Type </th> </tr>";
 326                 d.items.forEach(function(item) {
 327
 328                 out += "<tr><td>" +
 329                 item.serviceId +
 330                 "</td><td>" +
 331                 item.typeLink.title +
 332                  "</td><td>" +
 333                  item.vnfType +
 334                  "</td></tr>";
 335
 336                 })
 337             out += "</table>";
 338                 d3.select("#cityDetail").html(out);
 339               });
 340
 341
 342       // });
 343 })
 344 .on("mouseout", function(d){  if(d.id) { var td_id = "#tdaddr_"+ removeSpecialCharacters(d.id);
 345         d3.selectAll(td_id).style('background-color', '#ffffff');
 346         }
 347         //console.log("mouseout");
 348         return cityname.style("visibility", "hidden");}  );
 349
 350
 351                 map.on("viewreset", update);
 352                 update();
 353
 354                 function update() {
 355                         feature.attr("transform",
 356                         function(d) {
 357                                 return "translate("+
 358                                         map.latLngToLayerPoint(d.LatLng).x +","+
 359                                         map.latLngToLayerPoint(d.LatLng).y +")";
 360                                 }
 361                         )
 362                 }
 363         })
 364
 365
 366
 367 var callback = function (error, root) {
 368          dispatcher.jsonLoad(root);
 369         console.log(root);
 370     };
 371
 372
 373   function csvJSON(csv){
 374   //console.log(csv);
 375
 376   //csv1.map(function(csv) {
 377   //console.log(csv);
 378
 379   var lines=csv.split("\n");
 380
 381   //console.log(lines);
 382
 383   var result = [];
 384   //console.log("first line header");
 385   //console.log(lines[0]);
 386   var headers=lines[0].split(",");
 387   //console.log(headers);
 388   //console.log(headers[headers.length-1])
 389   //headers.splice(headers.length-1);
 390
 391   for(var i=1;i<lines.length;i++){
 392
 393     var obj = {};
 394     var currentline=lines[i].split(",");
 395     //console.log(currentline);
 396
 397     for(var j=0;j<headers.length;j++){
 398       obj[headers[j]] = currentline[j];
 399     }
 400
 401     result.push(obj);
 402     //console.log(result);
 403
 404   }
 405   //console.log(JSON.stringify(result));
 406   //return result; //JavaScript object
 407   jsonData =  result; //JSON
 408   //console.log(jsonData)
 409
 410   //refreshTable(null);
 411   return jsonData;
 412 }
 413
 414 function isString(o) {
 415     return typeof o == "string" || (typeof o == "object" && o.constructor === String);
 416 }
 417
 418  function hyperTrigger(var1, popup_note, bandwidth) {
 419           var res = var1.split("*");
 420     alert(res);
 421     //alert(bandwidth);
 422           //parent.hyperTrigger2(res[0],res[1],popup_note, bandwidth);
 423   }
 424
 425   function removeSpecialCharacters(var1) {
 426   return var1.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');
 427 }
 428 </script>
 429 <script src="static/visjs/legend_v2.js"></script>
 430 </body>
 431 </html>