feat: add ECharts and related components for data visualization

- Added `echarts` and `echarts-for-react` dependencies to the project. - Created new pages for visualizations: `VisualizacionesRandom` and `Camara_noir`. - Implemented `CanvasDisplay`, `ControlPanel`, `CaptureGrid`, `GridConfigPanel`, and `FrameCard` components for camera functionality. - Integrated WebSocket for real-time image capture in `useCamaraNoir` hook. - Developed FastAPI backend with endpoints for various chart data (bar, line, pie, scatter). - Updated routing to include new analytics paths for visualizations. - Modified submenu links to reflect new analytics options.
2025-05-22 01:45:57 +02:00
parent 6b491a9a41
commit a62778a030
15 changed files with 784 additions and 4 deletions
@@ -0,0 +1,57 @@
+import { AppShellWithMenu } from '../components/Appshell/Appshell';
+import { Stack, Box } from '@mantine/core';
+
+import {
+  CanvasDisplay,
+  ControlPanel,
+  CaptureGrid,
+  GridConfigPanel,
+  useCamaraNoir
+} from '../components/Camara_noir';
+
+export function Camara_noir() {
+  const camara = useCamaraNoir();
+  const totalSlots = camara.numFilas * camara.numColumnas;
+
+  return (
+    <AppShellWithMenu>
+      <Stack p="md" gap="md">
+
+        {/* Contenedor para botones encima del video */}
+        <Box style={{ position: 'relative', width: '100%' }}>
+          <ControlPanel
+            grabando={camara.grabando}
+            onAlternar={camara.alternarGrabacion}
+            onLimpiar={camara.limpiarCapturas}
+            onDesfijar={camara.desfijarTodos}
+          />
+          <Box style={{ marginTop: 8 }}>
+            <CanvasDisplay canvasRef={camara.canvasRef} />
+          </Box>
+        </Box>
+
+        {/* Grilla de capturas + configurador lateral */}
+        <Box style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+          <CaptureGrid
+            totalSlots={totalSlots}
+            capturas={camara.capturas}
+            frameIndices={camara.frameIndices}
+            fijados={camara.fijados}
+            frameTemporal={camara.frameTemporal}
+            onScroll={camara.manejarScrollEnSlider}
+            onSliderChange={camara.setFrameTemporal}
+            onSliderEnd={camara.moverFrameYFijar}
+            numColumnas={camara.numColumnas}
+          />
+
+          <GridConfigPanel
+            numFilas={camara.numFilas}
+            setNumFilas={camara.setNumFilas}
+            numColumnas={camara.numColumnas}
+            setNumColumnas={camara.setNumColumnas}
+          />
+        </Box>
+      </Stack>
+    </AppShellWithMenu>
+  );
+}