add production chain simulation and extraction amounts

src/app/components/PlanetaryInteraction/ExtractionSimulationDisplay.tsx

@@ -0,0 +1,215 @@
+import React from 'react';
+import { Box, Paper, Typography, Stack } from '@mui/material';
+import { Line } from 'react-chartjs-2';
+import { useTheme } from '@mui/material';
+import { getProgramOutputPrediction, ProductionNode } from './ExtractionSimulation';
+import { PI_TYPES_MAP } from '@/const';
+import { ProductionChainVisualization } from './ProductionChainVisualization';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+interface ExtractorConfig {
+  typeId: number;
+  baseValue: number;
+  cycleTime: number;
+  installTime: string;
+  expiryTime: string;
+}
+
+interface ExtractionSimulationDisplayProps {
+  extractors: ExtractorConfig[];
+  productionNodes: ProductionNode[];
+}
+
+export const ExtractionSimulationDisplay: React.FC<ExtractionSimulationDisplayProps> = ({
+  extractors,
+  productionNodes
+}) => {
+  const CYCLE_TIME = 30 * 60; // 30 minutes in seconds
+
+  // Calculate program duration and cycles for each extractor
+  const extractorPrograms = extractors.map(extractor => {
+    const installDate = new Date(extractor.installTime);
+    const expiryDate = new Date(extractor.expiryTime);
+    const programDuration = (expiryDate.getTime() - installDate.getTime()) / 1000; // Convert to seconds
+    return {
+      ...extractor,
+      programDuration,
+      cycles: Math.floor(programDuration / CYCLE_TIME)
+    };
+  });
+
+  const maxCycles = Math.max(...extractorPrograms.map(e => e.cycles));
+
+  // Get output predictions for each extractor
+  const extractorOutputs = extractorPrograms.map(extractor => ({
+    typeId: extractor.typeId,
+    cycleTime: CYCLE_TIME,
+    cycles: extractor.cycles,
+    prediction: getProgramOutputPrediction(
+      extractor.baseValue,
+      CYCLE_TIME,
+      extractor.cycles
+    )
+  }));
+
+  // Calculate total output per program for each extractor
+  const programTotals = extractorPrograms.map(extractor => {
+    const prediction = getProgramOutputPrediction(
+      extractor.baseValue,
+      CYCLE_TIME,
+      extractor.cycles
+    );
+    const totalOutput = prediction.reduce((sum, val) => sum + val, 0);
+    return {
+      typeId: extractor.typeId,
+      cycleTime: CYCLE_TIME,
+      cycles: extractor.cycles,
+      total: totalOutput,
+      installTime: extractor.installTime,
+      expiryTime: extractor.expiryTime
+    };
+  });
+
+  // Create datasets for the chart
+  const datasets = extractorOutputs.map((output, index) => {
+    const hue = (360 / extractors.length) * index;
+    return {
+      label: `${PI_TYPES_MAP[output.typeId]?.name ?? `Resource ${output.typeId}`}`,
+      data: output.prediction,
+      borderColor: `hsl(${hue}, 70%, 50%)`,
+      backgroundColor: `hsl(${hue}, 70%, 80%)`,
+      tension: 0.4
+    };
+  });
+
+  const chartData = {
+    labels: Array.from({ length: maxCycles }, (_, i) => {
+      // Show every 4th cycle number to avoid overcrowding
+      return (i % 4 === 0) ? `Cycle ${i + 1}` : '';
+    }),
+    datasets
+  };
+
+  const chartOptions = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top' as const,
+      },
+      title: {
+        display: true,
+        text: 'Extraction Output Prediction (30 Minute Program)'
+      },
+      tooltip: {
+        callbacks: {
+          title: (context: any) => `Cycle ${context[0].dataIndex + 1}`,
+          label: (context: any) => `Output: ${context.raw.toFixed(1)} units`
+        }
+      }
+    },
+    scales: {
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: 'Units per Cycle'
+        }
+      },
+      x: {
+        ticks: {
+          autoSkip: true,
+          maxTicksLimit: 24
+        }
+      }
+    }
+  };
+
+  // Prepare data for ProductionChainVisualization
+  const extractorTotals = new Map<number, number>();
+  programTotals.forEach(({ typeId, total }) => {
+    extractorTotals.set(typeId, total);
+  });
+
+  // Get unique extracted type IDs
+  const extractedTypeIds = Array.from(new Set(extractors.map(e => e.typeId)));
+
+  // Get installed schematic IDs from production nodes
+  const installedSchematicIds = Array.from(new Set(productionNodes.map(node => node.schematicId)));
+
+  // Create factories array with correct counts
+  const factories = installedSchematicIds.map(schematicId => ({
+    schematic_id: schematicId,
+    count: productionNodes.filter(node => node.schematicId === schematicId).length
+  }));
+
+  return (
+    <Box>
+      <Paper sx={{ p: 2 }}>
+        <Typography variant="h6" gutterBottom>
+          Extraction Simulation
+        </Typography>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 2 }}>
+          {programTotals.map(({ typeId, total, cycleTime, cycles, installTime, expiryTime }) => (
+            <Stack key={typeId} spacing={1}>
+              <Typography variant="subtitle2">
+                {PI_TYPES_MAP[typeId]?.name}:
+              </Typography>
+              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
+                • Total Output: {total.toFixed(1)} units per program
+              </Typography>
+              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
+                • Cycle Time: {(cycleTime / 60).toFixed(1)} minutes
+              </Typography>
+              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
+                • Program Cycles: {cycles}
+              </Typography>
+              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
+                • Average per Cycle: {(total / cycles).toFixed(1)} units
+              </Typography>
+              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
+                • Install Time: {new Date(installTime).toLocaleString()}
+              </Typography>
+              <Typography variant="body2" component="div" sx={{ pl: 2 }}>
+                • Expiry Time: {new Date(expiryTime).toLocaleString()}
+              </Typography>
+            </Stack>
+          ))}
+        </Box>
+        <div style={{ height: '300px' }}>
+          <Line data={chartData} options={chartOptions} />
+        </div>
+      </Paper>
+
+      <ProductionChainVisualization
+        extractedTypeIds={extractedTypeIds}
+        extractors={extractors.map(e => ({
+          typeId: e.typeId,
+          baseValue: e.baseValue,
+          cycleTime: CYCLE_TIME
+        }))}
+        factories={factories}
+        extractorTotals={extractorTotals}
+        productionNodes={productionNodes}
+      />
+    </Box>
+  );
+};