Initial Script

www/js/custom.js

@@ -0,0 +1,204 @@
+
+var avsdev = {
+  pivot: {
+    dataFile: null,
+    rowKey: 25,
+    colKey: 400,
+    active: false
+  },
+  geoView: {
+    active: false,
+    firstRun: true
+  },
+  cc: {
+"DZA":"DZA - Algeria","AGO":"AGO - Angola","BEN":"BEN - Benin","BWA":"BWA - Botswana","BFA":"BFA - Burkina Faso","BDI":"BDI - Burundi","CMR":"CMR - Cameroon","CPV":"CPV - Cape Verde","CAF":"CAF - Central African Republic","TCD":"TCD - Chad","COM":"COM - Comoros","COD":"COD - Democratic Republic of the Congo","DJI":"DJI - Djibouti","EGY":"EGY - Egypt","GNQ":"GNQ - Equatorial Guinea","ERI":"ERI - Eritrea","ETH":"ETH - Ethiopia","GAB":"GAB - Gabon","GMB":"GMB - Gambia","GHA":"GHA - Ghana","GIN":"GIN - Guinea","GNB":"GNB - Guinea-Bissau","CIV":"CIV - Côte d'Ivoire","KEN":"KEN - Kenya","LSO":"LSO - Lesotho","LBR":"LBR - Liberia","LBY":"LBY - Libya","MDG":"MDG - Madagascar","MWI":"MWI - Malawi","MLI":"MLI - Mali","MRT":"MRT - Mauritania","MUS":"MUS - Mauritius","MAR":"MAR - Morocco","MOZ":"MOZ - Mozambique","NAM":"NAM - Namibia","NER":"NER - Niger","NGA":"NGA - Nigeria","COG":"COG - Republic of the Congo","RWA":"RWA - Rwanda","SHN":"SHN - Saint Helena","STP":"STP - Sao Tome and Principe","SEN":"SEN - Senegal","SYC":"SYC - Seychelles","SLE":"SLE - Sierra Leone","SOM":"SOM - Somalia","ZAF":"ZAF - South Africa","SSD":"SSD - South Sudan","SDN":"SDN - Sudan","SWZ":"SWZ - Swaziland","TZA":"TZA - Tanzania","TGO":"TGO - Togo","TUN":"TUN - Tunisia","UGA":"UGA - Uganda","ESH":"ESH - Western Sahara","ZMB":"ZMB - Zambia","ZWE":"ZWE - Zimbabwe"
+  }
+};
+
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		clearTimeout(timeout);
+		timeout = setTimeout(function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		}, wait);
+		if (immediate && !timeout) func.apply(context, args);
+	};
+}
+
+
+$(document).on('shiny:inputchanged', function(event){
+
+  if (event.name == 'selectView') {
+    avsdev.pivot.active = false;
+    avsdev.geoView.active = false;
+
+    if (event.value == "Geo Image") {
+      avsdev.geoView.active = true;
+      if (avsdev.geoView.firstRun) {
+        zoomGeoView();
+        avsdev.geoView.firstRun = false;
+      }
+    }
+    if (event.value == "Pivot Table") {
+      avsdev.pivot.active = true;
+      drawPivot();
+    }
+  }
+
+  if (event.name == '.clientdata_output_geoView-mapImage_hidden') {
+    avsdev.geoView.active = !event.value;
+    if (avsdev.geoView.firstRun) {
+      zoomGeoView();
+      avsdev.geoView.firstRun = false;
+    }
+  }
+});
+
+
+
+//  GEO
+
+
+_zoomGeoView = function(){
+  if (avsdev.geoView.active === false) {
+    return;
+  }
+
+  var img = $($("#geoView-mapImage").children("img")[0]);
+
+  if (img.hasClass("zoomed")) {
+
+    if (document.querySelector('#geoView-mapImage img')) {
+      document.querySelector('#geoView-mapImage img').dispatchEvent(new CustomEvent('wheelzoom.destroy'));
+      img.removeClass("zoomed");
+    }
+  }
+
+  if (!img.hasClass("zoomed")) {
+    wheelzoom(img);
+    img.addClass("zoomed");
+  }
+};
+zoomGeoView = debounce(function(){ _zoomGeoView() }, 500);
+
+/*
+$(document).on('shiny:sessioninitialized', function(event){
+  console.log("shiny:sessioninitialized")
+  zoomGeoView()
+});
+*/
+
+$(document).on('shiny:value', function(event){
+  if (event.name == 'geoView-mapImage') {
+    zoomGeoView();
+  }
+});
+
+
+// PIVOT
+
+_drawPivot = function() {
+  if (avsdev.pivot.active === false) {
+    return;
+  }
+
+  $.getJSON(avsdev.pivot.dataFile, function(data) {
+    data = $(data).each(function(id, v){
+      v.Country = avsdev.cc[v.Country];
+    });
+    data = $.makeArray(data);
+
+    var renderers = $.extend($.pivotUtilities.renderers, $.pivotUtilities.plotly_renderers);
+    renderers = $.extend(renderers, $.pivotUtilities.avsdev_renderers);
+
+    $("#pivot-pivotRender").pivotUI(data, {
+      rows: ["Grid Dist."],
+      cols: ["Pop Density"],
+      aggregatorName: "Sum",
+      vals: ["Population"],
+      renderers: renderers,
+      rendererName: "Coloured Pivot Table",
+      hiddenFromDragDrop: ["Population"],
+      hiddenFromAggregators: ["Grid Dist.", "Country", "Pop Density"],
+      onRefresh: function(config) {
+        var config_copy = JSON.parse(JSON.stringify(config));
+        //delete some values which are functions
+        delete config_copy.aggregators;
+        delete config_copy.renderers;
+        //delete some bulky default values
+        delete config_copy.rendererOptions;
+        delete config_copy.localeStrings;
+        //console.log(JSON.stringify(config_copy, undefined, 2));
+
+        var grid = $("td[data-rowkey]").filter(function() {
+            return $(this).data("rowkey") <= avsdev.pivot.rowKey;
+        });
+        var solar = $("td[data-rowkey]").filter(function() {
+            return $(this).data("rowkey") > avsdev.pivot.rowKey;
+        }).filter(function() {
+            return $(this).data("colkey") <= avsdev.pivot.colKey;
+        });
+        var target = $("td[data-rowkey]").filter(function() {
+            return $(this).data("rowkey") > avsdev.pivot.rowKey;
+        }).filter(function() {
+            return $(this).data("colkey") > avsdev.pivot.colKey;
+        });
+
+        grid.addClass("power-grid");
+        solar.addClass("power-solar");
+        target.addClass("power-target");
+
+        var gridVal = grid.map(function() {
+          return $(this).data("value");
+        }).get().reduce(function(a, b) { return a + b; }, 0);
+
+        var solarVal = solar.map(function() {
+          return $(this).data("value");
+        }).get().reduce(function(a, b) { return a + b; }, 0);
+
+        var miniVal = target.map(function() {
+          return $(this).data("value");
+        }).get().reduce(function(a, b) { return a + b; }, 0);
+
+        var totalVal = gridVal + solarVal + miniVal;
+        var offGrid = parseInt($($("#summary-summaryTable table td")[6]).text())
+
+        $($("#summary-summaryTable table td")[1]).text(Math.round(totalVal - offGrid).toLocaleString('en'));
+        $($("#summary-summaryTable table td")[2]).text(Math.round(offGrid - solarVal - miniVal).toLocaleString('en'));
+        $($("#summary-summaryTable table td")[3]).text(Math.round(solarVal).toLocaleString('en'));
+        $($("#summary-summaryTable table td")[4]).text(Math.round(miniVal).toLocaleString('en'));
+        $($("#summary-summaryTable table td")[5]).text(Math.round(totalVal).toLocaleString('en'));
+      }
+    });
+  });
+
+  //console.log($("td").find(`[data-colKey > 500]`))
+  //$("#loading-pivot img").toggleClass("collapse");
+  //$("#pivot").toggleClass("collapse");
+};
+drawPivot = debounce(function(){ _drawPivot() }, 750);
+
+Shiny.addCustomMessageHandler("render-pivot",
+  function(message) {
+    avsdev.pivot.dataFile = message.countryTotPath[0] + ".json";
+    drawPivot();
+  }
+);
+
+
+$(document).on('shiny:inputchanged', function(event){
+  if (event.name == 'control-selectCountry') {
+    drawPivot();
+  } else if (event.name == 'control-selectGrid') {
+    avsdev.pivot.rowKey = event.value;
+    drawPivot();
+  } else if (event.name == 'control-selectPopDensity') {
+    avsdev.pivot.colKey = event.value;
+    drawPivot();
+  } else if (event.name == 'control-selectData') {
+    drawPivot();
+  }
+});

www/js/draw.html

@@ -0,0 +1,58 @@
+var laydown = {
+  diagram: {
+    dataFile: null
+  }
+}
+
+var graph = new joint.dia.Graph;
+
+var paper = new joint.dia.Paper({
+    el: document.getElementById('myholder'),
+    model: graph,
+    width: 600,
+    height: 100,
+    gridSize: 1
+});
+
+var rect = new joint.shapes.standard.Rectangle();
+var rect2 = rect.clone();
+var link = new joint.shapes.standard.Link();
+
+drawDiagram = function() {
+	rect.position(100, 30);
+	rect.resize(100, 40);
+	rect.attr({
+	    body: {
+		fill: 'blue'
+	    },
+	    label: {
+		text: 'Hello',
+		fill: 'white'
+	    }
+	});
+	rect.addTo(graph);
+
+
+	rect2.translate(300, 0);
+	rect2.attr('label/text', 'World!');
+	rect2.addTo(graph);
+
+
+	link.source(rect);
+	link.target(rect2);
+	link.addTo(graph);
+}
+
+
+
+Shiny.addCustomMessageHandler("render-pivot",
+  function(message) {
+    laydown.diagram.dataFile = message.laydown + ".json";
+    drawDiagram();
+  }
+);
+
+
+$(document).on('shiny:inputchanged', function(event){
+   //TO BE INTEGRATED
+});

www/js/draw.js

@@ -0,0 +1,124 @@
+var dataFile = null;
+
+addPort = function() {
+  
+}
+
+drawDiagram = function() {
+  var graph = new joint.dia.Graph();
+
+  var paper = new joint.dia.Paper({
+    el: document.getElementById('laydown'),
+    model: graph,
+    width: 1600,
+    height: 1000,
+    gridSize: 1
+  });
+  
+
+  //Declare an array of rectangles - assign icon, name, 
+  //for each asset in datafile.assets add a rectangle
+  var row=0;
+  var col=0;
+  var space=" ";
+  var port = {
+    // id: 'abc', // generated if `id` value is not present
+    group: 'a',
+    args: {}, // extra arguments for the port layout function, see `layout.Port` section
+    label: {
+        position: {
+            name: 'right',
+            args: { y: 6 } // extra arguments for the label layout function, see `layout.PortLabel` section
+        },
+        markup: '<text class="label-text" fill="blue"/>'
+    },
+    attrs: { text: { text: 'port1' } },
+    //markup: '<rect width="16" height="16" x="-8" strokegit ="red" fill="gray"/>'
+  };
+
+  var assetRects = [];
+  
+  dataFile.assets.id.forEach(function(n) {
+    var rect = new joint.shapes.standard.Rectangle({
+      position: {x:  (160*col+120), y: (240*row +120) },
+      size: {width: 120, height: 80},
+      ports: {
+        groups: {
+          'a': { position: 'top'},
+          'b': { position: 'bottom'}
+        },
+        items: [port]
+      }
+    });
+    
+    name = dataFile.assets.stencil[n-1].concat(space, dataFile.assets.testRole[n-1]);
+    //rect.position(240*row, 160*col);
+	  //rect.resize(120, 80);
+	  rect.attr({
+	    body: {
+		    fill: 'blue'
+	    },
+	    label: {
+		    text: name,
+		    fill: 'white'
+	    }
+	  });
+	  assetRects.push(rect);
+    rect.addTo(graph);
+    col++;
+    if (col==5) {
+      col=0;
+      row++;
+    }
+  });
+  
+  var linkArray = [];
+  
+  console.log(dataFile.logConns);
+  thisObj="Links ";
+  //Declare an array of links - assign names
+  dataFile.logConns.id.forEach(function(lc) {
+  //for (var id in dataFile.logConns) {
+    fromAsset = dataFile.logConns.fromId[lc-1];
+    toAsset= dataFile.logConns.toId[lc-1];
+    //console.log(thisObj.concat(lc, " ; ", fromAsset, " : ",toAsset, " : ", fromAsset, " ; ", assetRects[toAsset]));
+    var link = new joint.shapes.standard.Link();
+    link.source(assetRects[fromAsset-1]);
+	  link.target(assetRects[toAsset-1]);
+	  link.router('manhattan');
+    link.connector('jumpover');
+	  linkArray.push(link);
+	  link.addTo(graph);
+  });
+  
+  paper.options.defaultRouter = {
+    name: 'manhattan',
+    args: {
+        elementPadding: 10
+    }
+  };
+
+  paper.on('cell:pointerclick', function(cellView) {
+    cellView.highlight();
+    console.log(cellView);
+  });
+	
+};
+
+Shiny.addCustomMessageHandler("render-laydown",
+    function(message){
+      try {
+        console.log("Draw diagram");
+        dataFile = message;
+        drawDiagram();
+      } catch(e) {
+        console.log("error object:");
+        console.log(e);
+      }
+    }
+);
+
+
+$(document).on('shiny:inputchanged', function(event){
+   //TO BE INTEGRATED
+});

www/js/getMouse.js

@@ -0,0 +1,61 @@
+/**
+  * Retrieve the coordinates of the given event relative to the center
+* of the widget.
+*
+  * @param event
+*   A mouse-related DOM event.
+* @param reference
+*   A DOM element whose position we want to transform the mouse coordinates to.
+* @return
+*    A hash containing keys 'x' and 'y'.
+*/
+function getRelativeCoordinates(event, reference) {
+    var x, y;
+    event = event || window.event;
+    var el = event.target || event.srcElement;
+    console.log(el);
+    if (!window.opera && typeof event.offsetX != 'undefined') {
+      // Use offset coordinates and find common offsetParent
+      var pos = { x: event.offsetX, y: event.offsetY };
+      
+      // Send the coordinates upwards through the offsetParent chain.
+      var e = el;
+      while (e) {
+        e.mouseX = pos.x;
+        e.mouseY = pos.y;
+        pos.x += e.offsetLeft;
+        pos.y += e.offsetTop;
+        e = e.offsetParent;
+      }
+      
+      // Look for the coordinates starting from the reference element.
+      var ref = reference;
+      var offset = { x: 0, y: 0 };
+      while (ref) {
+        if (typeof ref.mouseX != 'undefined') {
+          x = ref.mouseX - offset.x;
+          y = ref.mouseY - offset.y;
+          break;
+        }
+        offset.x += ref.offsetLeft;
+        offset.y += ref.offsetTop;
+        ref = ref.offsetParent;
+      }
+      
+      // Reset stored coordinates
+      ref = el;
+      while (ref) {
+        ref.mouseX = undefined;
+        reference.mouseY = undefined;
+        ref = ref.offsetParent;
+      }
+    }
+    else {
+      // Use absolute coordinates
+      var pos = getAbsolutePosition(reference);
+      x = event.pageX  - pos.x;
+      y = event.pageY - pos.y;
+    }
+    // Subtract distance to middle
+    return { x: x, y: y };
+  }