sparklines on environment nodes (#799)

ui100/src/AccountNode.tsx

@@ -7,7 +7,7 @@ import {useEffect, useState} from "react";
 
 
 const AccountNode = ({ data }) => {
-    const environmentMetrics = useStore((state) => state.environments);
+    const environments = useStore((state) => state.environments);
     const [sparkData, setSparkData] = useState<number[]>(Array<number>(31).fill(0));
     const hiddenSparkline = <></>;
     const visibleSparkline = (
@@ -18,18 +18,20 @@ const AccountNode = ({ data }) => {
 
     useEffect(() => {
         let s = new Array<number>(31);
-        if(environmentMetrics) {
+        if(environments) {
-            environmentMetrics.forEach(env => {
+            environments.forEach(env => {
                 if(env.activity) {
                     env.activity.forEach((sample, i) => {
-                        s[i] = s[i] + sample.rx ? sample.rx : 0;
+                        let v = s[i] ? s[i] : 0;
-                        s[i] = s[i] + sample.tx ? sample.tx : 0;
+                        v += sample.rx! ? sample.rx! : 0;
+                        v += sample.tx! ? sample.tx! : 0;
+                        s[i] = v;
                     });
                 }
             });
         }
         setSparkData(s);
-    }, [environmentMetrics]);
+    }, [environments]);
 
     return (
         <>

ui100/src/EnvironmentNode.tsx

@@ -1,8 +1,38 @@
 import {Handle, Position} from "@xyflow/react";
 import {Grid2} from "@mui/material";
 import EnvironmentIcon from "@mui/icons-material/Computer";
+import useStore from "./model/store.ts";
+import {useEffect, useState} from "react";
+import {SparkLineChart} from "@mui/x-charts";
 
 const EnvironmentNode = ({ data }) => {
+    const environments = useStore((state) => state.environments);
+    const [sparkData, setSparkData] = useState<number[]>(Array<number>(31).fill(0));
+    const hiddenSparkline = <></>;
+    const visibleSparkline = (
+        <Grid2 container sx={{ flexGrow: 1, p: 0.5 }}>
+            <SparkLineChart data={sparkData} height={30} width={100} colors={['#04adef']}  />
+        </Grid2>
+    );
+
+    useEffect(() => {
+        let s = new Array<number>(31);
+        if(environments) {
+            let env = environments.find(env => data.envZId === env.zId);
+            if(env) {
+                env.activity?.forEach((sample, i) => {
+                    let v = s[i] ? s[i] : 0;
+                    v += sample.rx! ? sample.rx! : 0;
+                    v += sample.tx! ? sample.tx! : 0;
+                    s[i] = v;
+                });
+                setSparkData(s);
+            } else {
+                console.log("not found", data, environments);
+            }
+        }
+    }, [environments]);
+
     return (
         <>
             <Handle type="target" position={Position.Top} />
@@ -11,6 +41,7 @@ const EnvironmentNode = ({ data }) => {
                 <Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
                 <Grid2 display="flex">{data.label}</Grid2>
             </Grid2>
+            {sparkData.find(x => x > 0) ? visibleSparkline : hiddenSparkline}
         </>
     );
 }