feat: Implement ElementContent for rendering diverse simulation dashboard elements and AnalyzerManager for processing and updating analysis data.

app/src/components/SimulationDashboard/AnalyzerManager.tsx

@@ -91,6 +91,8 @@ const AnalyzerManager: React.FC = () => {
 
     // 2. Handle Graph (Store Update)
     // This effect MUST NOT depend on 'blocks' to avoid infinite loop (updateGraphData modifies blocks)
+    const lineChartHistory = useRef<Map<string, any[]>>(new Map());
+
     useEffect(() => {
         if (!analysis) return;
 
@@ -107,7 +109,32 @@ const AnalyzerManager: React.FC = () => {
 
                         const assetAnalysis = getAssetAnalysis(assetId);
                         if (assetAnalysis) {
-                            const newGraphData = dataKeys.map((key) => {
+                            let newGraphData: any[] = [];
+
+                            if (element.graphType === "line") {
+                                const history = lineChartHistory.current.get(element.elementUuid) || [];
+                                const now = new Date();
+                                const timeStr = now.toLocaleTimeString([], { hour12: false });
+
+                                const dataPoint: any = { name: timeStr };
+                                dataKeys.forEach((key) => {
+                                    const val = resolvePath(assetAnalysis, key);
+                                    dataPoint[key] = typeof val === "number" ? val : 0;
+                                });
+
+                                // Add slight variations if values are static to make it "live" as requested (optional, but requested "up and down")
+                                // If the user feels the values are strictly from store, I should stick to store.
+                                // "makeing the lines go up dna down as times goes on"
+                                // If I just use store values, they might be flat.
+                                // I will stick to store values. The user's system likely updates `analysis`.
+
+                                history.push(dataPoint);
+                                if (history.length > 20) history.shift();
+
+                                newGraphData = [...history];
+                                lineChartHistory.current.set(element.elementUuid, history);
+                            } else {
+                                newGraphData = dataKeys.map((key) => {
                                     const val = resolvePath(assetAnalysis, key);
                                     return {
                                         // Make the key readable or just use it as name
@@ -115,6 +142,7 @@ const AnalyzerManager: React.FC = () => {
                                         value: typeof val === "number" ? val : 0,
                                     };
                                 });
+                            }
 
                             // Deep check to avoid unnecessary updates
                             if (JSON.stringify(newGraphData) !== JSON.stringify(element.graphData)) {

app/src/components/SimulationDashboard/components/element/ElementContent.tsx

@@ -126,6 +126,11 @@ const ElementContent: React.FC<ElementContentProps> = ({ element, resolvedData }
                                     <XAxis dataKey="name" stroke="rgba(255,255,255,0.6)" fontSize={12} />
                                     <YAxis stroke="rgba(255,255,255,0.6)" fontSize={12} />
                                     <Tooltip {...tooltipStyle} />
+                                    {element.dataBinding?.dataType === "single-machine" && element.dataBinding.dataValue ? (
+                                        (Array.isArray(element.dataBinding.dataValue) ? element.dataBinding.dataValue : [element.dataBinding.dataValue as string]).map((key, index) => (
+                                            <Line key={key} type="monotone" dataKey={key} stroke={COLORS[index % COLORS.length]} strokeWidth={2} dot={false} isAnimationActive={false} />
+                                        ))
+                                    ) : (
                                         <Line
                                             type="monotone"
                                             dataKey="value"
@@ -137,6 +142,7 @@ const ElementContent: React.FC<ElementContentProps> = ({ element, resolvedData }
                                             }}
                                             isAnimationActive={false}
                                         />
+                                    )}
                                 </LineChart>
                             )}
                         </ResponsiveContainer>