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,69 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+
+app = FastAPI()
+
+# Permitir acceso desde el frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # cámbialo por ["http://localhost:5173"] si es necesario
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+@app.get("/api/bar")
+def get_bar_chart():
+    return {
+        "xAxis": {"type": "category", "data": ["Ene", "Feb", "Mar", "Abr"]},
+        "yAxis": {"type": "value"},
+        "series": [{"data": [5, 20, 36, 10], "type": "bar"}]
+    }
+
+@app.get("/api/line")
+def get_line_chart():
+    return {
+        "xAxis": {"type": "category", "data": ["Semana 1", "Semana 2", "Semana 3", "Semana 4"]},
+        "yAxis": {"type": "value"},
+        "series": [{"data": [15, 25, 18, 30], "type": "line"}]
+    }
+
+@app.get("/api/pie")
+def get_pie_chart():
+    return {
+        "tooltip": {"trigger": "item"},
+        "legend": {"top": "5%", "left": "center"},
+        "series": [{
+            "name": "Accesos",
+            "type": "pie",
+            "radius": ["40%", "70%"],
+            "avoidLabelOverlap": False,
+            "itemStyle": {"borderRadius": 10, "borderColor": "#fff", "borderWidth": 2},
+            "label": {"show": False, "position": "center"},
+            "emphasis": {
+                "label": {"show": True, "fontSize": 16, "fontWeight": "bold"}
+            },
+            "labelLine": {"show": False},
+            "data": [
+                {"value": 1048, "name": "Search"},
+                {"value": 735, "name": "Direct"},
+                {"value": 580, "name": "Email"},
+                {"value": 484, "name": "Union Ads"},
+                {"value": 300, "name": "Video Ads"}
+            ]
+        }]
+    }
+
+@app.get("/api/scatter")
+def get_scatter_chart():
+    return {
+        "xAxis": {},
+        "yAxis": {},
+        "series": [{
+            "symbolSize": 20,
+            "data": [
+                [10, 8], [20, 20], [30, 10], [40, 30], [50, 15]
+            ],
+            "type": "scatter"
+        }]
+    }