Upgrade Plotly (#4752)

* Upgrade Plotly * Fixes to Plotly wrapper * Decrease plot margins * Adjust plot margins
getredash · Apr 6, 2020 · 51b5732 · 51b5732
1 parent 54b04ea
commit 51b5732
Show file tree

Hide file tree

Showing 13 changed files with 384 additions and 1,539 deletions.
diff --git a/client/app/visualizations/chart/plotly/applyLayoutFixes.js b/client/app/visualizations/chart/plotly/applyLayoutFixes.js
@@ -36,6 +36,7 @@ export default function applyLayoutFixes(plotlyElement, layout, updatePlot) {
     // half of plot container's height - legend will have max height equal to
     // plot height), re-render plot again and offset legend to the space under
     // the plot.
+    // Related issue: https://github.com/plotly/plotly.js/issues/1199
     layout.legend = {
       orientation: "h",
       // locate legend inside of plot area - otherwise plotly will preserve

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/box-single-axis.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/box-single-axis.json
@@ -15,10 +15,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": true,
       "boxmode": "group",
       "boxgroupgap": 0.50,

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/box-with-second-axis.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/box-with-second-axis.json
@@ -16,10 +16,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": true,
       "boxmode": "group",
       "boxgroupgap": 0.50,

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/default-single-axis.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/default-single-axis.json
@@ -15,10 +15,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": true,
       "xaxis": {
         "automargin": true,

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/default-with-second-axis.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/default-with-second-axis.json
@@ -16,10 +16,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": true,
       "xaxis": {
         "automargin": true,

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/default-with-stacking.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/default-with-stacking.json
@@ -16,10 +16,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": false,
       "barmode": "relative",
       "xaxis": {

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/default-without-legend.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/default-without-legend.json
@@ -16,10 +16,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": false,
       "xaxis": {
         "automargin": true,

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/pie-multiple-series.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/pie-multiple-series.json
@@ -12,10 +12,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": true,
       "annotations": [
         {

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/pie-without-annotations.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/pie-without-annotations.json
@@ -10,10 +10,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": true,
       "annotations": []
     }

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareLayout/pie.json b/client/app/visualizations/chart/plotly/fixtures/prepareLayout/pie.json
@@ -10,10 +10,10 @@
   },
   "output": {
     "layout": {
-      "margin": { "l": 10, "r": 10, "b": 10, "t": 25, "pad": 4 },
+      "margin": { "l": 10, "r": 10, "b": 5, "t": 20, "pad": 4 },
       "width": 400,
       "height": 300,
-      "autosize": true,
+      "autosize": false,
       "showlegend": true,
       "annotations": [
         {

diff --git a/client/app/visualizations/chart/plotly/prepareLayout.js b/client/app/visualizations/chart/plotly/prepareLayout.js
@@ -118,10 +118,10 @@ function prepareBoxLayout(layout, options, data) {
 
 export default function prepareLayout(element, options, data) {
   const layout = {
-    margin: { l: 10, r: 10, b: 10, t: 25, pad: 4 },
+    margin: { l: 10, r: 10, b: 5, t: 20, pad: 4 },
     width: Math.floor(element.offsetWidth),
     height: Math.floor(element.offsetHeight),
-    autosize: true,
+    autosize: false,
     showlegend: has(options, "legend") ? options.legend.enabled : true,
   };