(core) Upgrade to latest plotly, and set automargin on Y-Axis

Test Plan: Only tested manually

Reviewers: alexmojaki

Reviewed By: alexmojaki

Subscribers: alexmojaki

Differential Revision: https://phab.getgrist.com/D3543

app/client/components/ChartView.ts

@@ -35,7 +35,8 @@ import defaultsDeep = require('lodash/defaultsDeep');
 import isNumber = require('lodash/isNumber');
 import sum = require('lodash/sum');
 import union = require('lodash/union');
-import {Annotations, Config, Data, Datum, ErrorBar, Layout, LayoutAxis, Margin} from 'plotly.js';
+import type {Annotations, Config, Datum, ErrorBar, Layout, LayoutAxis, Margin,
+    PlotData as PlotlyPlotData} from 'plotly.js';
 
 
 let Plotly: PlotlyType;
@@ -118,6 +119,7 @@ function getSeriesName(series: Series, haveMultiple: boolean) {
   }
 }
 
+type Data = Partial<PlotlyPlotData>;
 
 // The output of a ChartFunc. Normally it just returns one or more Data[] series, but sometimes it
 // includes layout information: e.g. a "Scatter Plot" returns a Layout with axis labels.
@@ -421,7 +423,8 @@ Object.assign(ChartView.prototype, BackboneEvents);
 function getPlotlyLayout(options: ChartOptions): Partial<Layout> {
   // Note that each call to getPlotlyLayout() creates a new layout object. We are intentionally
   // avoiding reuse because Plotly caches too many layout calculations when the object is reused.
-  const yaxis: Partial<LayoutAxis> = {};
+  const yaxis: Partial<LayoutAxis> = {automargin: true, title: {standoff: 0}};
+  const xaxis: Partial<LayoutAxis> = {automargin: true, title: {standoff: 0}};
   if (options.logYAxis) { yaxis.type = 'log'; }
   if (options.invertYAxis) { yaxis.autorange = 'reversed'; }
   return {
@@ -438,6 +441,7 @@ function getPlotlyLayout(options: ChartOptions): Partial<Layout> {
       bgcolor: "#FFFFFF80",
     },
     yaxis,
+    xaxis,
     ...(options.stacked ? {barmode: 'relative'} : {}),
   };
 }
@@ -1067,12 +1071,12 @@ function basicPlot(series: Series[], options: ChartOptions, dataOptions: Data):
   return {
     data: dataSeries,
     layout: {
-      [`${axis1}axis`]: series.length > 0 ? {title: series[0].label} : {},
+      [`${axis1}axis`]: {title: series.length > 0 ? {text: series[0].label}: {}},
       // Include yaxis title for a single y-value series only (2 series total);
       // If there are fewer than 2 total series, there is no y-series to display.
       // If there are multiple y-series, a legend will be included instead, and the yaxis title
       // is less meaningful, so omit it.
-      [`${axis2}axis`]: series.length === 2 ? {title: series[1].label} : {},
+      [`${axis2}axis`]: {title: series.length === 2 ? {text: series[1].label} : {}},
     },
   };
 }

package.json

@@ -51,7 +51,7 @@
     "@types/node": "^14",
     "@types/node-fetch": "2.1.2",
     "@types/pidusage": "2.0.1",
-    "@types/plotly.js": "1.44.15",
+    "@types/plotly.js": "2.12.1",
     "@types/qrcode": "1.4.2",
     "@types/redlock": "3.0.2",
     "@types/saml2-js": "2.0.1",
@@ -134,7 +134,7 @@
     "multiparty": "4.2.2",
     "node-fetch": "2.2.0",
     "pg": "8.6.0",
-    "plotly.js-basic-dist": "1.51.1",
+    "plotly.js-basic-dist": "2.13.2",
     "popper-max-size-modifier": "0.2.0",
     "popweasel": "0.1.18",
     "qrcode": "1.5.0",

yarn.lock

@@ -467,10 +467,10 @@
   resolved "https://registry.yarnpkg.com/@types/pidusage/-/pidusage-2.0.1.tgz#45eb309be947dcfa177957ef662ce2a0a2311d48"
   integrity sha512-tYYcz/+5v/EGYT83C0pIXrJGOiVBLksQvxgJboG4nGqx/gZTvq0Ro4SkAjECqMk7L4Ww58VWB4j48qeYh4/YJg==
 
-"@types/plotly.js@1.44.15":
+"@types/plotly.js@2.12.1":
-  version "1.44.15"
+  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/@types/plotly.js/-/plotly.js-1.44.15.tgz#14d5f72fa1f08c57b1c84666ff5732cbf9b1b534"
+  resolved "https://registry.yarnpkg.com/@types/plotly.js/-/plotly.js-2.12.1.tgz#112a0b322e19de3d61c4fe0213bccc57e6292022"
-  integrity sha512-hsoML6JX6WnArYbol2xfqRxMPf7x9h7ZhgQ4Ni/jQqDXh+r3XhS0jjnWTsrU+DS2AK872xJ8YjU42KaLhYrmRg==
+  integrity sha512-Nn8tr4TDYYNaTzX+fA8b2V+OHk1cGPoMpiVFRQmlH3ICcwZOlQCCVogHkfRdYaG5/Rqg8B1Wnr+r6GyaSKlC+Q==
   dependencies:
     "@types/d3" "^3"
 
@@ -5173,10 +5173,10 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-plotly.js-basic-dist@1.51.1:
+plotly.js-basic-dist@2.13.2:
-  version "1.51.1"
+  version "2.13.2"
-  resolved "https://registry.yarnpkg.com/plotly.js-basic-dist/-/plotly.js-basic-dist-1.51.1.tgz#a81f9514ed50ff4660fa5f30caa333318650814f"
+  resolved "https://registry.yarnpkg.com/plotly.js-basic-dist/-/plotly.js-basic-dist-2.13.2.tgz#7ee2386ed7f255afac54305458cda2dc274da08b"
-  integrity sha512-QnbSF6hzYYXjjfoImSaNDJM05mfCwrgaYc+k5oT4rSmwIeqhRiQE57YMd1BuTEKDpZOwE5OtzMxhfmxx0CbCMQ==
+  integrity sha512-6sXQv3agrwHPot3gtX+UH5VyuTPsMfddigamBAEhHoJXsnAEo5DYiWS6WDnpsD7FZDsDtd7YkBZiymt4eMD7cQ==
 
 pngjs@^5.0.0:
   version "5.0.0"