[Component][m]: Add Plotly chart component

packages/portal/src/components/views/Chart.js

@@ -1,21 +1,30 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import Plotly from 'plotly.js-basic-dist';
 import createPlotlyComponent from "react-plotly.js/factory";
+let Plot;
 
+const PlotlyChart = (props) => {
+  const [plotCreated, setPlotCreated] = useState(0) //0: false, 1: true
 
-export default function (props) {
+  useEffect(() => {
-  const Plot = createPlotlyComponent(Plotly);
+    import(`plotly.js-basic-dist`).then(Plotly => { //import Plotly dist when Page has been generated
+      Plot = createPlotlyComponent(Plotly);
+      setPlotCreated(1)
+    });
+  }, [])
 
-  // removes produced with plotly logo by default
+  if (!plotCreated) {
-  if (!props.spec.config || !props.spec.config.displaylogo) {
+    return (<div>Loading...</div>)
-    props.spec.config = Object.assign(props.spec.config || {}, {displaylogo: false});
   }
 
   return (
-    <Plot {...props.spec}
+    <div data-testid="plotlyChart">
-      layout = { {autosize: true} }
+      <Plot {...props.spec}
-      style = { {width: "100%", height: "100%"} }
+        layout={{ autosize: true }}
-      useResizeHandler = "true"
+        style={{ width: "100%", height: "100%" }}
-    />
+        useResizeHandler={true}
+      />
+    </div>
   )
 }
+
+export { PlotlyChart }