Merge pull request #184 from Speedrunyourknowledge/develop

add derivative graphs

Author: Speedrunyourknowledge

calc-frontend/public/cosineDeriv.json

@@ -1,30 +1,47 @@
-import { useLayoutEffect, useRef } from "react";
-import CosineDerivGraph from "./CosineDerivGraph"
+import { useLayoutEffect, useState, useRef } from "react";
+import Plot from "react-plotly.js";
 
 function CosineDeriv() {
 
+  const [figData, setFigData] = useState<any | null>(null);
   const container = useRef(null);
 
   useLayoutEffect(() =>{
     //@ts-ignore
     let MQ = MathQuill.getInterface(2);
     MQ.StaticMath(container.current, { })
 
-  }, []);
+    fetch("/cosineDeriv.json")
+    .then((res) => res.json())
+    .then((json) => setFigData(json));
 
+  }, []);
   return (
-  <div>
-      <div className="flex">
+ 
+ <div>
+     <div className="flex">
       <div ref={container} className="center-header">
       \frac&#123;d&#125;&#123;dx&#125;(\cos(x))
       </div>
       </div>
 
-      <div className="graph-outer-box" >
-        <CosineDerivGraph />
-      </div>
+  <div className="flex justify-center">
+    <div className="plotly-graph-div graph-frame">
+      {figData && (
+        <Plot
+          data={figData.data}
+          layout={{
+          ...figData.layout,
+          margin: { l: 40, r: 40, t: 40, b: 40 },
+          }}
+          frames={figData.frames}
+          config={figData.config}
+          style={{ width: "100%", height: "100%" }}
+        />
+      )}
+    </div>
+    </div>
     </div>
-
   )
 }