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;
+}