Mapbox

.dockerignore

@@ -3,6 +3,8 @@
 *.json
 *secrets*
 *.env
+*.mp4
+*.mkv
 
 mobileapp
 

docker-compose.yml

@@ -12,6 +12,7 @@ services:
       dockerfile: web/Dockerfile
       cache_from:
         - eu.gcr.io/tmrow-152415/electricitymap_web:production
+        - eu.gcr.io/tmrow-152415/electricitymap_web:staging
     command: npm run server-dev
     depends_on: ['mockserver']
     environment:

mobileapp/config.xml

@@ -59,12 +59,12 @@
         <host name="www.electricitymap.org" scheme="https" />
         <host name="www.electricitymap.org" scheme="http" />
     </universal-links>
-    <engine name="android" spec="^6.3.0" />
-    <engine name="ios" spec="^4.5.0" />
     <plugin name="cordova-plugin-whitelist" spec="1" />
     <plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
     <plugin name="cordova-plugin-globalization" spec="~1.0.6" />
     <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
     <plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
     <plugin name="cordova-plugin-code-push" spec="^1.10.1" />
+    <engine name="android" spec="^6.3.0" />
+    <engine name="ios" spec="^4.5.0" />
 </widget>

web/Dockerfile

@@ -2,6 +2,7 @@ FROM node:8.5.0
 WORKDIR /home/web
 
 ADD web/package.json /home/web/package.json
+ADD web/package-lock.json /home/web/package-lock.json
 RUN npm install
 
 ADD web /home/web

web/app/components/areagraph.js

@@ -1,6 +1,16 @@
 'use strict'
 
-var d3 = require('d3');
+const d3 = Object.assign(
+  {},
+  require('d3-array'),
+  require('d3-axis'),
+  require('d3-collection'),
+  require('d3-selection'),
+  require('d3-scale'),
+  require('d3-shape'),
+);
+// see https://stackoverflow.com/questions/36887428/d3-event-is-null-in-a-reactjs-d3js-component
+import {event as currentEvent} from 'd3-selection';
 var moment = require('moment');
 
 function AreaGraph(selector, modeColor, modeOrder) {
@@ -199,7 +209,7 @@ AreaGraph.prototype.render = function() {
 
     var datetimes = this._datetimes;
     function detectPosition(d3Event) {
-        if (!d3Event) { d3Event = d3.event; }
+        if (!d3Event) { d3Event = currentEvent; }
         if (!datetimes.length) return;
         var dx = d3Event.pageX ? (d3Event.pageX - this.parentNode.getBoundingClientRect().left) :
             (d3.touches(this)[0][0]);
@@ -278,7 +288,7 @@ AreaGraph.prototype.render = function() {
         .on('mouseout', function () {
             if (!data.length) { return; }
             var innerThis = this;
-            var d3Event = d3.event;
+            var d3Event = currentEvent;
             mouseOutTimeout = setTimeout(function() {
                 var i = detectPosition.call(innerThis, d3Event);
                 that.selectedIndex(i);

web/app/components/countrytable.js

@@ -1,4 +1,12 @@
-var d3 = require('d3');
+const d3 = Object.assign(
+  {},
+  require('d3-array'),
+  require('d3-axis'),
+  require('d3-collection'),
+  require('d3-format'),
+  require('d3-selection'),
+  require('d3-scale'),
+);
 var getSymbolFromCurrency = require('currency-symbol-map').getSymbolFromCurrency;
 var moment = require('moment');
 

web/app/components/horizontalcolorbar.js

@@ -70,8 +70,10 @@ function HorizontalColorbar(selector, d3ColorScale, d3TickFormat, d3TickValues)
 }
 
 HorizontalColorbar.prototype.render = function() {
-    this.width = this.root.node().getBoundingClientRect().width;
-    this.height = this.root.node().getBoundingClientRect().height;
+    const rootNode = this.root.node();
+    if (!rootNode) { return; }
+    this.width = rootNode.getBoundingClientRect().width;
+    this.height = rootNode.getBoundingClientRect().height;
     if (!this.width || !this.height) return this;
 
     this.colorbarWidth = this.width - 2 * this.PADDING_X;