add plots

src/components/CurveFit.js

@@ -8,11 +8,12 @@ import ImageDownloader from './ImageDownloader';
 function CurveFit({ show }) {
     const [showCardInfo, setShowCardInfo] = useState(false);
     const [svgData, setSvgData] = useState(null);
+    const [loading, setLoading] = useState(true);
 
     const fetchSvg = () => {
         axios({
             method: 'get',
-            url: "https://asia-south1-hpos-qa.cloudfunctions.net/curvefit",
+            url: "https://asia-south1-hpos-af3cc.cloudfunctions.net/crdboxplot",
             data: {
                 "_id": "id",
                 "underMedication": false,
@@ -28,29 +29,37 @@ function CurveFit({ show }) {
         })
             .then(response => response.data)
             .then((data) => {
-                // setMessage(`${id} is being created`);
-                // setSvgData(data?.plot?.replace('\"', '').replace('\n', '').replace('"', "'"));
+                setSvgData(data?.plot?.replace('\"', '').replace('\n', '').replace('"', "'"));
+                setLoading(false); // Set loading to false once data is fetched
             })
             .catch((err) => {
                 console.log(err);
-                // setMessage(`error: ${err?.message}`);
+                setLoading(false); // Set loading to false in case of an error
             });
     }
 
     useEffect(() => {
         if (!svgData) {
-            // fetchSvg();
+            fetchSvg();
         }
     }, []);
 
     return (
         <div>
-            <h1>Curve Fit</h1>
-            {/* <img alt='' src={ svgData }/>; */}
-            <img src="https://asia-south1-hpos-qa.cloudfunctions.net/curvefit" width="450" height="340" />
-
+            <h1>Plots</h1>
+            
+            {loading ? (
+                <div className="spinner-container">
+                    {/* Add your spinner component here or use a simple text */}
+                    <p>Loading...</p>
+                </div>
+            ) : (
+                <img src={`https://asia-south1-${process.env.REACT_APP_FIREBASE_PROJECT_ID}.cloudfunctions.net/crdboxplot`} width="450" height="340" />
+            )}
+            
             {/* <ImageDownloader /> */}
         </div>
     );
 }
-export default CurveFit;
+
+export default CurveFit;

src/routes/appRoutes.js

@@ -114,15 +114,15 @@ const appRoutes = [
             icon: <FaChartLine />
         }
     },
-    // {
-    //     path: "/curvefit",
-    //     element: <CurveFit />,
-    //     state: "curvefit",
-    //     sidebarProps: {
-    //         displayText: "Linear Fit",
-    //         icon: <FaBezierCurve />
-    //     }
-    // },
+    {
+        path: "/plots",
+        element: <CurveFit />,
+        state: "plots",
+        sidebarProps: {
+            displayText: "Plots",
+            icon: <FaBezierCurve />
+        }
+    },
     {
         path: "/chat",
         element: <Gemini />,