From 1a1e404ef1beb92f2dae4ceaa323e0aac4d1c64e Mon Sep 17 00:00:00 2001
From: Rising Odegua <risingodegua@gmail.com>
Date: Thu, 29 Apr 2021 13:24:09 +0100
Subject: [PATCH] [Component][m]: Add Plotly chart component

---
 packages/portal/src/components/views/Chart.js | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/portal/src/components/views/Chart.js b/packages/portal/src/components/views/Chart.js
index 8c9e83de..188b8e70 100644
--- a/packages/portal/src/components/views/Chart.js
+++ b/packages/portal/src/components/views/Chart.js
@@ -1,21 +1,30 @@
-import React from 'react';
-import Plotly from 'plotly.js-basic-dist';
+import React, { useState, useEffect } from 'react';
 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) {
-  const Plot = createPlotlyComponent(Plotly);
+  useEffect(() => {
+    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 (!props.spec.config || !props.spec.config.displaylogo) {
-    props.spec.config = Object.assign(props.spec.config || {}, {displaylogo: false});
+  if (!plotCreated) {
+    return (<div>Loading...</div>)
   }
 
   return (
-    <Plot {...props.spec}
-      layout = { {autosize: true} }
-      style = { {width: "100%", height: "100%"} }
-      useResizeHandler = "true"
-    />
+    <div data-testid="plotlyChart">
+      <Plot {...props.spec}
+        layout={{ autosize: true }}
+        style={{ width: "100%", height: "100%" }}
+        useResizeHandler={true}
+      />
+    </div>
   )
 }
+
+export { PlotlyChart }
\ No newline at end of file