enumeration graph

software/tracksight/frontend/src/app/testing/page.tsx

@@ -1,22 +1,57 @@
-'use client'
+"use client";
 
-import LiveFault from './components/LiveFault'
-import Timer from './components/Timer'
-import Live from './components/Live'
-
-// import MouseTest from './components/MouseTest'
+import React, { useState, useEffect } from "react";
+import LiveFault from "./components/LiveFault";
+import Timer from "./components/Timer";
+import Live from "./components/Live";
+import EnumerationGraph from "./components/Enumeration";
 
 const TestingPage = () => {
-	return (
-		<div>
-			<Live />
-			{/* <MouseTest /> */}
-			<Timer />
-			<LiveFault />
-		</div>
-	)
-}
-
-export default TestingPage
+  const [currentTime, setCurrentTime] = useState(Math.floor(Date.now() / 1000));
+  const [currentState, setCurrentState] = useState("VC_INIT_STATE");
+
+  const enumStates = [
+    "VC_INIT_STATE",
+    "VC_PCM_STATE",
+    "VC_HV_STATE",
+    "VC_DRIVE_STATE",
+    "VC_VD_STATE",
+  ];
+
+  useEffect(() => {
+    const timeInterval = setInterval(() => {
+      setCurrentTime(Math.floor(Date.now() / 1000));
+    }, 1000);
+
+    const stateInterval = setInterval(() => {
+      setCurrentState((prevState) => {
+        const nextIndex = Math.floor(Math.random() * enumStates.length);
+        return enumStates[nextIndex];
+      });
+    }, 10000);
+
+    return () => {
+      clearInterval(timeInterval);
+      clearInterval(stateInterval);
+    };
+  }, []);
+
+  return (
+    <div>
+      <Live />
+      {/* <MouseTest /> */}
+      <Timer />
+      <LiveFault />
+      <EnumerationGraph
+        signalName="VC_STATE"
+        currentState={currentState}
+        currentTime={currentTime}
+        enumStates={enumStates}
+      />
+    </div>
+  );
+};
+
+export default TestingPage;
 
 // TODO: Consider using ScrollArea https://ui.shadcn.com/docs/components/scroll-area

software/tracksight/frontend/src/app/visualize/livecomponents/enumeration.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Card } from "~/packages/ui";
+
+export default function Enumeration(props: {
+  signalName: string;
+  states: string[];
+}) {
+  return (
+    <Card className="w-full h-32 bg-slate-600 py-4">
+      <div className="flex gap-10 mb-4">
+        <p className="bg-blue-500 ml-5">{props.signalName}</p>
+        <div className="flex gap-5">
+          {props.states.map((state, index) => (
+            <p key={index}>{state}</p>
+          ))}
+        </div>
+      </div>
+      <div className="w-full h-10 bg-red-400">Enumeration</div>
+    </Card>
+  );
+}

software/tracksight/frontend/src/packages/ui/Card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "~/packages/lib";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};