Merge pull request #1668 from plotly/update-modebar

Joseph Damiba · web-flow · commit d77e39ed713f · 2020-01-29T15:46:16.000-05:00
update modebar docs
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html
@@ -1,6 +1,5 @@
 ---
 name: Change the Default Locale
-plot_url: https://codepen.io/plotly/embed/rqrgEQ/?height=600&theme-id=15263&default-tab=result
 language: plotly_js
 suite: configuration
 order: 7.5
@@ -36,5 +35,4 @@
 
 var config = {locale: 'fr'};
 
-Plotly.newPlot('myDiv', data, layout, config);
-
+Plotly.newPlot('myDiv', data, layout, config);
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html
@@ -1,6 +1,5 @@
 ---
 name: Hide the Plotly Logo on the Modebar
-plot_url: https://codepen.io/plotly/embed/EVgeWb/?height=450&theme-id=15263&default-tab=result
 language: plotly_js
 suite: configuration
 order: 8
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html
@@ -1,11 +1,14 @@
 ---
-name: Hide the Modebar
-plot_url: https://codepen.io/plotly/embed/YyGOLg/?height=450&theme-id=15263&default-tab=result
+name: Never Display The Modebar
 language: plotly_js
 suite: configuration
 order: 5
 sitemap: false
 arrangement: horizontal
+markdown_content: |
+    When users hover over a figure generated with `plotly.js`, a `modebar` appears in the top-right of the figure. This presents users with several options for interacting with the figure. 
+    
+    By default, the `modebar` is only visible while the user is hovering over the chart. If you would like the `modebar` to never be visible, then set the `displayModeBar` attribute in the `config` of your figure to `false`.
 ---
 var trace1 = {
     x:['Zebras', 'Lions', 'Pelicans'],
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html
@@ -1,21 +1,16 @@
 ---
-name: Modify the "Edit Chart" Link Text
-plot_url: https://codepen.io/plotly/embed/WQGgbe/?height=600&theme-id=15263&default-tab=result
+name: Customize The `Edit Chart` Link Text
 language: plotly_js
 suite: configuration
 order: 7
 sitemap: false
 arrangement: horizontal
 ---
-var trace1 = {
-    z: [[0, 1, 2, 3, 4, 5, 6], [1, 9, 4, 7, 5, 2, 4], [2, 4, 2, 1, 6, 9, 3]],
-    type: 'heatmap'
-};
+var data = [{
+  z: [[0, 1, 2, 3, 4, 5, 6],
+      [1, 9, 4, 7, 5, 2, 4],
+      [2, 4, 2, 1, 6, 9, 3]],
+  type: 'heatmap'}]
 
-var data = [trace1];
-
-var layout = {
-    title: 'Change the Link Text'
-};
-
-Plotly.newPlot('myDiv', data, layout, {linkText: 'Change this text'});
+var layout = {title: 'Customize The Edit Chart Link Text'}
+Plotly.newPlot('myDiv', data, layout, {showLink: true, linkText: 'This text is custom!'})
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html
@@ -1,6 +1,5 @@
 ---
 name: Scroll and Zoom
-plot_url: https://codepen.io/plotly/embed/QjKZbg/?height=450&theme-id=15263&default-tab=result
 language: plotly_js
 suite: configuration
 order: 1
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html
@@ -1,6 +1,5 @@
 ---
-name: Display the "Edit Chart" Link
-plot_url: https://codepen.io/plotly/embed/epdjem/?height=600&theme-id=15263&default-tab=result
+name: Display the `Edit Chart` Link
 language: plotly_js
 suite: configuration
 order: 6
@@ -18,7 +17,9 @@
 };
 
 var data = [trace1];
+
 var layout = {
 	title: 'Display the Edit Chart Link'
 };
+
 Plotly.newPlot('myDiv', data, layout, {showLink: true});
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html
@@ -1,6 +1,5 @@
 ---
 name: Making a Static Chart
-plot_url: https://codepen.io/plotly/embed/YyGjda/?height=450&theme-id=15263&default-tab=result
 language: plotly_js
 suite: configuration
 order: 3
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html
@@ -1,6 +1,5 @@
 ---
 name: Customize Download Plot Options
-plot_url: https://codepen.io/plotly/embed/MZjYRB/?height=450&theme-id=15263&default-tab=result
 language: plotly_js
 suite: configuration
 order: 3.1
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html
@@ -1,6 +1,5 @@
 ---
 name: Display Edit in Chart Studio Button
-plot_url: https://codepen.io/plotly/embed/aPpzzw/?height=600&theme-id=15263&default-tab=result
 language: plotly_js
 suite: configuration
 order: 7.1
diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html
@@ -8,6 +8,7 @@
 thumbnail: thumbnail/modebar-icons.png
 display_as: reference
 ---
+<script src="https://cdn.plot.ly/plotly-locale-fr-latest.js"></script>
 
 The plotly.js <code>config</code> argument sets properties like the mode bar buttons and the interactivity in the chart.
 It's the last argument in <code>Plotly.newPlot</code> and <code>Plotly.newPlot</code> calls.
diff --git a/_posts/plotly_js/fundamentals/config-options/2017-03-01-edit_mode.html b/_posts/plotly_js/fundamentals/config-options/2017-03-01-edit_mode.html
@@ -1,11 +1,12 @@
 ---
-name: Edit Mode
-plot_url: https://codepen.io/plotly/embed/VpeMKo/?height=450&theme-id=15263&default-tab=result
+name: Editable Mode
 language: plotly_js
 suite: configuration
 order: 2
 sitemap: false
 arrangement: horizontal
+markdown_content: |
+  In editable mode, users can edit the chart title, axis labels and trace names in the legend.  
 ---
 var trace1 = {
   x: [0, 1, 2, 3, 4],
@@ -22,7 +23,6 @@
 };
 
 var data = [trace1, trace2];
-var layout = {
-    title: 'Click Here<br>to Edit Chart Title'};
+var layout = {title: 'Click Here<br>to Edit Chart Title'};
 
 Plotly.newPlot('myDiv', data, layout, {editable: true});
diff --git a/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html b/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html
diff --git a/_posts/plotly_js/fundamentals/config-options/2018-09-12-config-opt-responsive.html b/_posts/plotly_js/fundamentals/config-options/2018-09-12-config-opt-responsive.html
@@ -1,6 +1,5 @@
 ---
 name: Making a Responsive Chart
-plot_url: https://codepen.io/plotly/embed/BOxMXz/?height=550&theme-id=15263&default-tab=result
 language: plotly_js
 suite: configuration
 order: 10
@@ -22,7 +21,7 @@
 var data = [ trace1 ];
 
 var layout = {
-  title: 'Responsive to window's size!',
+  title: 'Responsive to window size!',
   font: {size: 18}
 };
 
diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html
@@ -0,0 +1,45 @@
+---
+name: Add Buttons to ModeBar
+language: plotly_js
+suite: configuration
+order: 5.7
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+    The following example shows how to add a button to your modebar, either by using one of the [Plotly icons](https://github.com/plotly/plotly.js/blob/master/src/fonts/ploticon.js) or an [arbitrary icon](https://fontawesome.com/icons?d=gallery&m=free) with a custom behaviour.
+---
+var icon1 = {
+  'width': 500,
+  'height': 600,
+  'path': 'M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z'
+}
+
+var colors = ['green', 'red', 'blue']
+var data = [{
+  mode: 'lines',
+  y: [2, 1, 2],
+  line: {color: colors[0], width: 3, shape: 'spline'}
+}]
+
+var layout = {
+  title: 'add mode bar button with custom icon',
+  modebardisplay: false}
+
+var config = {
+  modeBarButtonsToAdd: [
+    {
+      name: 'color toggler',
+      icon: icon1,
+      click: function(gd) {
+        var newColor = colors[Math.floor(3 * Math.random())]
+        Plotly.restyle(gd, 'line.color', newColor)
+      }},
+    {
+      name: 'button1',
+      icon: Plotly.Icons.pencil,
+      direction: 'up',
+      click: function(gd) {alert('button1')
+    }}],
+  modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d','zoomOut2d']}
+
+Plotly.newPlot('myDiv', data, layout, config)
diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html
@@ -0,0 +1,23 @@
+---
+name: Force The Modebar to Always Be Visible
+language: plotly_js
+suite: configuration
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+    When users hover over a figure generated with `plotly.js`, a `modebar` appears in the top-right of the figure. This presents users with several options for interacting with the figure. 
+    
+    By default, the `modebar` is only visible while the user is hovering over the chart. If you would like the `modebar` to always be visible regardless of whether or not the user is currently hovering over the figure, set the `displayModeBar` attribute in the `config` of your figure to `true`. 
+---
+var data = [{
+    y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'], 
+      x: [90, 40, 60, 80, 75, 92, 87, 73],
+      type: 'bar',
+      orientation: 'h'}]
+
+var layout = {
+    title: 'Always Display the Modebar',
+    showlegend: false}
+
+Plotly.newPlot('myDiv', data, layout, {displayModeBar: true})
diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html
@@ -0,0 +1,27 @@
+---
+name: Remove ModeBar Buttons
+language: plotly_js
+suite: configuration
+order: 5.5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+    To delete buttons from the modebar, pass an array of strings containing the names of the buttons you want to remove to the `modeBarButtonsToRemove` attribute in the figure's configuration object. Note that different chart types have different default modebars. The following is a list of all the modebar buttons and the chart types they are associated with:
+     <ul>
+         <li> -'2D', `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d` </li>
+         <li> -'3D', `zoom3d`, `pan3d`, `orbitRotation`, `tableRotation`, `handleDrag3d`, `resetCameraDefault3d`, `resetCameraLastSave3d`, `hoverClosest3d` </li>
+         <li> -'Cartesian', `hoverClosestCartesian`, `hoverCompareCartesian` </li>
+         <li> -'Geo', `zoomInGeo`, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo` </li>
+         <li> -'Other', `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, `toImage`, `sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox` </li>
+     </ul>
+---
+var data = [{
+    x:['trees', 'flowers', 'hedges'], 
+    y: [90, 130, 40],
+    type: 'bar'}]
+
+var layout = {
+    title: 'Remove Modebar Buttons',
+    showlegend: false}
+
+Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']})
