working copy of screener

.gitignore

@@ -36,4 +36,6 @@ yarn-error.log*
 next-env.d.ts
 
 .env
-/rest/
+/rest/
+
+.vscode/

package.json

@@ -46,6 +46,7 @@
     "react-hook-form": "^7.51.2",
     "react-hook-form-mui": "^7.0.0-beta.4",
     "react-photo-view": "^1.2.6",
+    "react-resize-detector": "^12.0.2",
     "react-router-dom": "^6.22.3",
     "socket.io-client": "^4.7.5",
     "sort-by": "^1.2.0",

src/components/OptionSpreadPricingTimeSeriesChart.tsx

@@ -1,34 +1,38 @@
+import { Box, Skeleton } from '@mui/material';
 import { blue, brown, deepOrange, green } from '@mui/material/colors';
 import UplotReact from 'uplot-react';
 import 'uplot/dist/uPlot.min.css';
-
+import { useResizeDetector } from 'react-resize-detector';
 const strokes = [deepOrange[900], green[900], blue[900], brown[900]]
 
-export const OptionSpreadPricingTimeSeriesChart = (props: { strategies: string[], data: any }) => {
-    const { data, strategies } = props;
+const hasData = (data: any) => {
+    return (Array.isArray(data) && data.length > 0 && data[0].length > 0);
+}
+
+export const OptionSpreadPricingTimeSeriesChart = (props: { legends: string[], data: any, loading: boolean }) => {
+    const { data, legends: strategies, loading } = props;
+    const { width, height, ref } = useResizeDetector();
+    let series = [{}, ...strategies.map((j, ix) => ({ label: j, stroke: strokes[ix] }))]
 
-    let series = [{},
-    ...strategies.map((j, ix) => ({ label: j, stroke: strokes[ix] }))
-        // {
-        //     label: 'Option strategy pricing',
-        //     stroke: '#007bff'
-        // }
-    ]
-    return <UplotReact options={{
-        width: 1640,
-        height: 400,
-        cursor: {
-            sync: {
-                key: 'moo',
-            },
-        },
-        scales: {
-            x: {
-                distr: 2,
-                time: true,
-            },
-        },
-        series: series
-    }} data={data} />
+    if (loading || !hasData(data)) return <Skeleton variant="rectangular" width={width || 800} height={400} />
 
+    return <Box ref={ref}>
+        <UplotReact
+            options={{
+                width: width || 800,
+                height: 400,
+                cursor: {
+                    sync: {
+                        key: 'moo',
+                    },
+                },
+                scales: {
+                    x: {
+                        distr: 2,
+                        time: true,
+                    },
+                },
+                series: series
+            }} data={data} />
+    </Box>
 }