Import all Plotly visualizations (#6673)

- Accessible using the Custom chart type
- Disable 'fs' and 'path' modules which are available in node, but not
  on the frontend.

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Guido Petri <18634426+guidopetri@users.noreply.github.com>

package.json

@@ -178,6 +178,10 @@
       "viz-lib/**"
     ]
   },
+  "browser": {
+      "fs": false,
+      "path": false
+  },
   "//": "browserslist set to 'Async functions' compatibility",
   "browserslist": [
     "Edge >= 15",

viz-lib/package.json

@@ -111,5 +111,9 @@
       "^@/(.*)": "<rootDir>/$1",
       "\\.(css|less)$": "identity-obj-proxy"
     }
+  },
+  "browser": {
+      "fs": false,
+      "path": false
   }
 }

viz-lib/src/visualizations/chart/plotly/index.ts

@@ -1,14 +1,4 @@
-import Plotly from "plotly.js/lib/core";
-// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'plot... Remove this comment to see the full error message
-import bar from "plotly.js/lib/bar";
-// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'plot... Remove this comment to see the full error message
-import pie from "plotly.js/lib/pie";
-// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'plot... Remove this comment to see the full error message
-import histogram from "plotly.js/lib/histogram";
-// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'plot... Remove this comment to see the full error message
-import box from "plotly.js/lib/box";
-// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'plot... Remove this comment to see the full error message
-import heatmap from "plotly.js/lib/heatmap";
+import * as Plotly from "plotly.js";
 
 import prepareData from "./prepareData";
 import prepareLayout from "./prepareLayout";
@@ -17,8 +7,6 @@ import updateAxes from "./updateAxes";
 import updateChartSize from "./updateChartSize";
 import { prepareCustomChartData, createCustomChartRenderer } from "./customChartUtils";
 
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'register' does not exist on type 'typeof... Remove this comment to see the full error message
-Plotly.register([bar, pie, histogram, box, heatmap]);
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'setPlotConfig' does not exist on type 't... Remove this comment to see the full error message
 Plotly.setPlotConfig({
   modeBarButtonsToRemove: ["sendDataToCloud"],

viz-lib/webpack.config.js

@@ -15,6 +15,10 @@ module.exports = {
   resolve: {
     symlinks: false,
     extensions: [".js", ".jsx", ".ts", ".tsx"],
+    fallback: {
+      fs: false,
+      path: false
+    }
   },
   module: {
     rules: [

webpack.config.js

@@ -75,6 +75,10 @@ const config = {
     filename: isProduction ? "[name].[chunkhash].js" : "[name].js",
     publicPath: staticPath
   },
+  node: {
+    fs: "empty",
+    path: "empty"
+  },
   resolve: {
     symlinks: false,
     extensions: [".js", ".jsx", ".ts", ".tsx"],