Introducing plotly.js + Mapbox GL

CONTRIBUTING.md

@@ -157,6 +157,18 @@ which shows the baseline image, the generated image, the diff and the json mocks
 
 To view the results of a run on CircleCI, download the `build/test_images/` and `build/test_images_diff/` artifacts into your local repo and then run `npm run start-image_viewer`.
 
+### Note on testing our `mapbox-gl` integration
+
+Creating `mapbox-gl` graphs requires an
+[`accessToken`](https://www.mapbox.com/help/define-access-token/). To make sure
+that mapbox image and jasmine tests run properly, locate your Mapbox access
+token and run:
+
+
+```bash
+export MAPBOX_ACCESS_TOKEN="<your access token>" && npm run pretest
+```
+
 
 ## Repo organization
 

circle.yml

@@ -15,12 +15,13 @@ dependencies:
     - docker pull plotly/testbed:latest
   post:
     - npm run cibuild
+    - npm run pretest
     - docker run -d --name mytestbed -v $PWD:/var/www/streambed/image_server/plotly.js -p 9010:9010 plotly/testbed:latest
     - sudo ./tasks/run_in_testbed.sh mytestbed "cp -f test/image/index.html ../server_app/index.html"
     - wget --server-response --spider --tries=8 --retry-connrefused http://localhost:9010/ping
 test:
   override:
-    - sudo ./tasks/run_in_testbed.sh mytestbed "node test/image/compare_pixels_test.js"
+    - sudo ./tasks/run_in_testbed.sh mytestbed "export CIRCLECI=1 && node test/image/compare_pixels_test.js"
     - sudo ./tasks/run_in_testbed.sh mytestbed "node test/image/export_test.js"
     - npm run citest-jasmine
     - npm run test-bundle

devtools/test_dashboard/devtools.js

@@ -4,6 +4,7 @@
 
 var Fuse = require('fuse.js');
 var mocks = require('../../build/test_dashboard_mocks.json');
+var credentials = require('../../build/credentials.json');
 
 // put d3 in window scope
 var d3 = window.d3 = Plotly.d3;
@@ -14,8 +15,15 @@ var Tabs = {
     // Set plot config options
     setPlotConfig: function() {
         Plotly.setPlotConfig({
+
             // use local topojson files
             topojsonURL: '../../dist/topojson/',
+
+            // register mapbox access token
+            // run `npm run preset` if you haven't yet
+            mapboxAccessToken: credentials.MAPBOX_ACCESS_TOKEN,
+
+            // show all logs in console
             logging: 2
         });
     },

lib/scattermapbox.js

@@ -0,0 +1,9 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+module.exports = require('../src/traces/scattermapbox');

package.json

@@ -29,6 +29,7 @@
     "watch": "node tasks/watch_plotly.js",
     "lint": "eslint . || true",
     "lint-fix": "eslint . --fix",
+    "pretest": "node tasks/pretest.js",
     "test-jasmine": "karma start test/jasmine/karma.conf.js",
     "citest-jasmine": "karma start test/jasmine/karma.ciconf.js",
     "test-image": "./tasks/test_image.sh",
@@ -70,6 +71,7 @@
     "gl-select-box": "^1.0.1",
     "gl-spikes2d": "^1.0.1",
     "gl-surface3d": "^1.2.3",
+    "mapbox-gl": "^0.18.0",
     "mouse-change": "^1.1.1",
     "mouse-wheel": "^1.0.2",
     "ndarray": "^1.0.16",

src/plot_api/plot_api.js

@@ -1648,7 +1648,7 @@ Plotly.restyle = function restyle(gd, astr, val, traces) {
     // to not go through a full replot
     var doPlotWhiteList = ['cartesian', 'pie', 'ternary'];
     fullLayout._basePlotModules.forEach(function(_module) {
-        if(doPlotWhiteList.indexOf(_module.name) === -1) doplot = true;
+        if(doPlotWhiteList.indexOf(_module.name) === -1) docalc = true;
     });
 
     // make a new empty vals array for undoit
@@ -2286,6 +2286,19 @@ Plotly.relayout = function relayout(gd, astr, val) {
             Images.supplyLayoutDefaults(gd.layout, gd._fullLayout);
             Images.draw(gd);
         }
+        else if(p.parts[0] === 'mapbox' && p.parts[1] === 'layers') {
+            Lib.extendDeepAll(gd.layout, Lib.objectFromPath(ai, vi));
+
+            // append empty container to mapbox.layers
+            // so that relinkPrivateKeys does not complain
+
+            var fullLayers = (gd._fullLayout.mapbox || {}).layers || [];
+            var diff = (p.parts[2] + 1) - fullLayers.length;
+
+            for(i = 0; i < diff; i++) fullLayers.push({});
+
+            doplot = true;
+        }
         // alter gd.layout
         else {
             // check whether we can short-circuit a full redraw

src/plot_api/plot_config.js

@@ -87,6 +87,9 @@ module.exports = {
     // URL to topojson files used in geo charts
     topojsonURL: 'https://cdn.plot.ly/',
 
+    // Mapbox access token (required to plot mapbox trace types)
+    mapboxAccessToken: null,
+
     // Turn all console logging on or off (errors will be thrown)
     // This should ONLY be set via Plotly.setPlotConfig
     logging: false

src/plots/layout_attributes.js

@@ -187,6 +187,7 @@ module.exports = {
         'annotations': 'Annotations',
         'shapes': 'Shapes',
         'images': 'Images',
-        'ternary': 'ternary'
+        'ternary': 'ternary',
+        'mapbox': 'mapbox'
     }
 };

src/plots/mapbox/constants.js

@@ -0,0 +1,28 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+
+module.exports = {
+    styleUrlPrefix: 'mapbox://styles/mapbox/',
+    styleUrlSuffix: 'v9',
+
+    controlContainerClassName: 'mapboxgl-control-container',
+
+    noAccessTokenErrorMsg: [
+        'Missing Mapbox access token.',
+        'Mapbox trace type require a Mapbox access token to be registered.',
+        'For example:',
+        '  Plotly.plot(gd, data, layout, { mapboxAccessToken: \'my-access-token\' });',
+        'More info here: https://www.mapbox.com/help/define-access-token/'
+    ].join('\n'),
+
+    mapOnErrorMsg: 'Mapbox error.'
+};

src/plots/mapbox/index.js

@@ -0,0 +1,133 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var mapboxgl = require('mapbox-gl');
+
+var Plots = require('../plots');
+var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
+
+var createMapbox = require('./mapbox');
+var constants = require('./constants');
+
+
+exports.name = 'mapbox';
+
+exports.attr = 'subplot';
+
+exports.idRoot = 'mapbox';
+
+exports.idRegex = /^mapbox([2-9]|[1-9][0-9]+)?$/;
+
+exports.attrRegex = /^mapbox([2-9]|[1-9][0-9]+)?$/;
+
+exports.attributes = {
+    subplot: {
+        valType: 'subplotid',
+        role: 'info',
+        dflt: 'mapbox',
+        description: [
+            'Sets a reference between this trace\'s data coordinates and',
+            'a mapbox subplot.',
+            'If *mapbox* (the default value), the data refer to `layout.mapbox`.',
+            'If *mapbox2*, the data refer to `layout.mapbox2`, and so on.'
+        ].join(' ')
+    }
+};
+
+exports.layoutAttributes = require('./layout_attributes');
+
+exports.supplyLayoutDefaults = require('./layout_defaults');
+
+exports.plot = function plotMapbox(gd) {
+
+    if(!gd._context.mapboxAccessToken) {
+        throw new Error(constants.noAccessTokenErrorMsg);
+    }
+    else {
+        mapboxgl.accessToken = gd._context.mapboxAccessToken;
+    }
+
+    var fullLayout = gd._fullLayout,
+        calcData = gd.calcdata,
+        mapboxIds = Plots.getSubplotIds(fullLayout, 'mapbox');
+
+    for(var i = 0; i < mapboxIds.length; i++) {
+        var id = mapboxIds[i],
+            subplotCalcData = getSubplotCalcData(calcData, id),
+            mapbox = fullLayout[id]._subplot;
+
+        if(!mapbox) {
+            mapbox = createMapbox({
+                gd: gd,
+                container: fullLayout._glcontainer.node(),
+                id: id,
+                fullLayout: fullLayout,
+                staticPlot: gd._context.staticPlot
+            });
+
+            fullLayout[id]._subplot = mapbox;
+        }
+
+        mapbox.plot(subplotCalcData, fullLayout, gd._promises);
+    }
+};
+
+exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
+    var oldMapboxKeys = Plots.getSubplotIds(oldFullLayout, 'mapbox');
+
+    for(var i = 0; i < oldMapboxKeys.length; i++) {
+        var oldMapboxKey = oldMapboxKeys[i];
+
+        if(!newFullLayout[oldMapboxKey] && !!oldFullLayout[oldMapboxKey]._subplot) {
+            oldFullLayout[oldMapboxKey]._subplot.destroy();
+        }
+    }
+};
+
+exports.toSVG = function(gd) {
+    var fullLayout = gd._fullLayout,
+        subplotIds = Plots.getSubplotIds(fullLayout, 'mapbox'),
+        size = fullLayout._size;
+
+    for(var i = 0; i < subplotIds.length; i++) {
+        var opts = fullLayout[subplotIds[i]],
+            domain = opts.domain,
+            mapbox = opts._subplot;
+
+        var imageData = mapbox.toImage('png');
+        var image = fullLayout._glimages.append('svg:image');
+
+        image.attr({
+            xmlns: xmlnsNamespaces.svg,
+            'xlink:href': imageData,
+            x: size.l + size.w * domain.x[0],
+            y: size.t + size.h * (1 - domain.y[1]),
+            width: size.w * (domain.x[1] - domain.x[0]),
+            height: size.h * (domain.y[1] - domain.y[0]),
+            preserveAspectRatio: 'none'
+        });
+
+        mapbox.destroy();
+    }
+};
+
+function getSubplotCalcData(calcData, id) {
+    var subplotCalcData = [];
+
+    for(var i = 0; i < calcData.length; i++) {
+        var calcTrace = calcData[i],
+            trace = calcTrace[0].trace;
+
+        if(trace.subplot === id) subplotCalcData.push(calcTrace);
+    }
+
+    return subplotCalcData;
+}