Add JSON download modebar button

draftlogs/7963_add.md

@@ -0,0 +1 @@
+- Add an opt-in modebar button for downloading Plotly figures as JSON [[#7963](https://github.com/plotly/plotly.js/pull/7963)]

src/components/modebar/buttons.js

@@ -68,6 +68,18 @@ modeBarButtons.toImage = {
     }
 };
 
+modeBarButtons.downloadJson = {
+    name: 'downloadJson',
+    title: function(gd) { return _(gd, 'Download plot as JSON'); },
+    icon: Icons.disk,
+    click: function(gd) {
+        Registry.call('downloadImage', gd, {format: 'full-json'})
+            .catch(function() {
+                Lib.notifier(_(gd, 'Sorry, there was a problem downloading your JSON file!'), 'long', gd);
+            });
+    }
+};
+
 modeBarButtons.sendChartToCloud = {
     name: 'sendChartToCloud',
     title: function(gd) { return _(gd, 'Share with Plotly Cloud'); },

src/components/modebar/constants.js

@@ -18,7 +18,7 @@ var backButtons = [
     'hovercompare',
     'togglehover',
     'togglespikelines'
-].concat(DRAW_MODES);
+].concat(DRAW_MODES, ['downloadJson']);
 
 var foreButtons = [];
 var addToForeButtons = function(b) {

src/components/modebar/manage.js

@@ -258,6 +258,8 @@ function getButtonGroups(gd) {
                     enableHover('hoverClosestGeo');
                     enableHover('hoverClosest3d');
                     enableHover('hoverClosestPie');
+                } else if(b === 'downloadjson') {
+                    newList.push(modeBarButtons.downloadJson);
                 }
             } else newList.push(b);
         }

src/plot_api/plot_config.js

@@ -303,7 +303,8 @@ var configAttributes = {
             'To enable predefined modebar buttons e.g. shape drawing, hover and spikelines,',
             'simply provide their string name(s). This could include:',
             '*v1hovermode*, *hoverclosest*, *hovercompare*, *togglehover*, *togglespikelines*,',
-            '*drawline*, *drawopenpath*, *drawclosedpath*, *drawcircle*, *drawrect* and *eraseshape*.',
+            '*drawline*, *drawopenpath*, *drawclosedpath*, *drawcircle*, *drawrect*, *eraseshape*',
+            'and *downloadJson*.',
             'Please note that these predefined buttons will only be shown if they are compatible',
             'with all trace types used in a graph.'
         ].join(' ')

test/jasmine/tests/modebar_test.js

@@ -1102,6 +1102,27 @@ describe('ModeBar', function() {
             });
         });
 
+        describe('downloadJson handler', function() {
+            beforeEach(function() {
+                spyOn(Registry, 'call').and.callFake(function() {
+                    return Promise.resolve();
+                });
+                gd = createGraphDiv();
+            });
+
+            it('should request a full JSON download', function(done) {
+                Plotly.newPlot(gd, {data: [], layout: {}, config: {
+                    modeBarButtonsToAdd: ['downloadJson']
+                }})
+                .then(function() {
+                    selectButton(gd._fullLayout._modeBar, 'downloadJson').click();
+                    expect(Registry.call)
+                        .toHaveBeenCalledWith('downloadImage', gd, {format: 'full-json'});
+                })
+                .then(done, done.fail);
+            });
+        });
+
         describe('cartesian handlers', function() {
             beforeEach(function(done) {
                 var mockData = [{

test/plot-schema.json

@@ -255,7 +255,7 @@
       "valType": "any"
     },
     "modeBarButtonsToAdd": {
-      "description": "Add mode bar button using config objects See ./components/modebar/buttons.js for list of arguments. To enable predefined modebar buttons e.g. shape drawing, hover and spikelines, simply provide their string name(s). This could include: *v1hovermode*, *hoverclosest*, *hovercompare*, *togglehover*, *togglespikelines*, *drawline*, *drawopenpath*, *drawclosedpath*, *drawcircle*, *drawrect* and *eraseshape*. Please note that these predefined buttons will only be shown if they are compatible with all trace types used in a graph.",
+      "description": "Add mode bar button using config objects See ./components/modebar/buttons.js for list of arguments. To enable predefined modebar buttons e.g. shape drawing, hover and spikelines, simply provide their string name(s). This could include: *v1hovermode*, *hoverclosest*, *hovercompare*, *togglehover*, *togglespikelines*, *drawline*, *drawopenpath*, *drawclosedpath*, *drawcircle*, *drawrect*, *eraseshape* and *downloadJson*. Please note that these predefined buttons will only be shown if they are compatible with all trace types used in a graph.",
       "dflt": [],
       "valType": "any"
     },
@@ -4606,7 +4606,7 @@
         },
         "add": {
           "arrayOk": true,
-          "description": "Determines which predefined modebar buttons to add. Please note that these buttons will only be shown if they are compatible with all trace types used in a graph. Similar to `config.modeBarButtonsToAdd` option. This may include *v1hovermode*, *hoverclosest*, *hovercompare*, *togglehover*, *togglespikelines*, *drawline*, *drawopenpath*, *drawclosedpath*, *drawcircle*, *drawrect*, *eraseshape*.",
+          "description": "Determines which predefined modebar buttons to add. Please note that these buttons will only be shown if they are compatible with all trace types used in a graph. Similar to `config.modeBarButtonsToAdd` option. This may include *v1hovermode*, *hoverclosest*, *hovercompare*, *togglehover*, *togglespikelines*, *drawline*, *drawopenpath*, *drawclosedpath*, *drawcircle*, *drawrect*, *eraseshape*, *downloadJson*.",
           "dflt": "",
           "editType": "modebar",
           "valType": "string"