inlcude plotly

jaltekruse · Apr 4, 2023 · a95e754 · a95e754
1 parent bcebb93
commit a95e754
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
     "lorem-ipsum": "^2.0.4",
     "math-expressions": "^2.0.0-alpha59",
     "nanoid": "^3.1.31",
+    "plotly.js-dist-min": "^2.20.0",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-datetime": "^3.2.0",

diff --git a/src/Viewer/renderers/chart.jsx b/src/Viewer/renderers/chart.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef, createContext } from 'react';
 import { sizeToCSS } from './utils/css';
 import useDoenetRender from '../useDoenetRenderer';
-// import Plotly from 'plotly.js-dist-min';
+import Plotly from 'plotly.js-dist-min';
 import VisibilitySensor from 'react-visibility-sensor-v2';
 
 
@@ -28,50 +28,50 @@ export default React.memo(function Chart(props) {
   }, [])
 
   //Draw chart after mounting component
-  // useEffect(() => {
-
-  //   if (SVs.dataFrame !== null) {
-
-  //     let colInds;
-  //     if (SVs.colInd !== null) {
-  //       colInds = [SVs.colInd]
-  //     } else {
-  //       colInds = SVs.dataFrame.columnTypes
-  //         .map((v, i) => v === "number" ? i : null)
-  //         .filter(x => x !== null);
-  //     }
-
-
-  //     let data = [];
-
-  //     for (let colInd of colInds) {
-  //       if (SVs.type === "box") {
-  //         data.push({
-  //           y: extractColumn(SVs.dataFrame.data, colInd),
-  //           type: "box",
-  //           name: SVs.dataFrame.columnNames[colInd]
-  //         })
-  //       } else {
-  //         data.push({
-  //           x: extractColumn(SVs.dataFrame.data, colInd),
-  //           type: "histogram",
-  //           name: SVs.dataFrame.columnNames[colInd]
-  //         })
-  //       }
-  //     }
-
-  //     Plotly.newPlot(name, {
-  //       data
-  //     });
-  //   }
-
-  // }, []);
-
-
-  return <>
+  useEffect(() => {
+
+    if (SVs.dataFrame !== null) {
+
+      let colInds;
+      if (SVs.colInd !== null) {
+        colInds = [SVs.colInd]
+      } else {
+        colInds = SVs.dataFrame.columnTypes
+          .map((v, i) => v === "number" ? i : null)
+          .filter(x => x !== null);
+      }
+
+
+      let data = [];
+
+      for (let colInd of colInds) {
+        if (SVs.type === "box") {
+          data.push({
+            y: extractColumn(SVs.dataFrame.data, colInd),
+            type: "box",
+            name: SVs.dataFrame.columnNames[colInd]
+          })
+        } else {
+          data.push({
+            x: extractColumn(SVs.dataFrame.data, colInd),
+            type: "histogram",
+            name: SVs.dataFrame.columnNames[colInd]
+          })
+        }
+      }
+
+      Plotly.newPlot(name, {
+        data
+      });
+    }
+
+  }, []);
+
+
+  return (<>
     <a name={id} />
     <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}><div id={id} /></VisibilitySensor>
-  </>;
+  </>);
 
 })