g2 incompleto

gti-sos · Apr 18, 2024 · 74c7cb2 · 74c7cb2
1 parent 0755113
commit 74c7cb2
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 8 deletions.
diff --git a/front/src/routes/ufc-events-data/+page.svelte b/front/src/routes/ufc-events-data/+page.svelte
@@ -313,6 +313,7 @@
   <Row class="justify-content-center">
     <Col xs="auto">Eliminar todos los eventos -> <Button outline size="sm" color="danger" on:click={deleteAllEvents}>Borrar Todo</Button></Col>
     <Col xs="auto">Crear un nuevo evento -> <Button href="/ufc-events-data/postEvent" outline size="sm" color="success">Crear Evento</Button></Col>
+    <Col xs="auto">Visualizar datos -> <Button href="/ufc-events-data/graph" outline size="sm" color="warning">Visualizar</Button></Col>
   </Row>
   <Row>
     {#if listaPeleas.length != 0}

diff --git a/front/src/routes/ufc-events-data/graph/+page.svelte b/front/src/routes/ufc-events-data/graph/+page.svelte
@@ -1,8 +1,12 @@
 <svelte:head>
     <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/stock/highstock.js"></script>
 </svelte:head>
 <script>
 	import { onMount } from "svelte";
+    import { Container, Button, Row, Col } from '@sveltestrap/sveltestrap';
+    // import Highcharts from 'highcharts/highstock';
+
 
     let DATAAPI = "http://localhost:10002/data";
 
@@ -13,6 +17,17 @@
             const dataJSON = await res.json();
             console.log(`fetched data: ${dataJSON}`)
             fillChart(dataJSON);
+            
+        } catch (error) {
+            console.log(error)
+        }
+    }
+    async function getDataPie(){
+        try {
+            const res = await fetch(DATAAPI);
+            const dataJSON = await res.json();
+            console.log(`fetched data: ${dataJSON}`)
+            fillPieChart(dataJSON);
         } catch (error) {
             console.log(error)
         }
@@ -23,8 +38,8 @@
         const weights = [...new Set(dt.map(item => item.weight_class))];
         const methods =[...new Set(dt.map(item => item.method))];
 
-        console.log(`weights -> ${weights}`)
-        console.log(`methods -> ${methods}`)
+        // console.log(`weights -> ${weights}`)
+        // console.log(`methods -> ${methods}`)
         // Matriz de datos
         
 
@@ -35,7 +50,7 @@
                 return victories;
             })
         }));
-        console.log(`series -> ${seriesData}`)
+        // console.log(`series -> ${seriesData}`)
 
         const chart = Highcharts.chart('container', {
             chart: {
@@ -86,12 +101,90 @@
             },
             series: seriesData
         });
+        console.log('Fin fill charts')
     }
-    onMount(() => {
+
+    async function fillPieChart(dt) {
+        console.log('Entro en pie charts');
+        const durationMap = new Map();
+        dt.forEach(item => {
+            // parseo duracion
+            const min = item.time.split(':')[0];
+            let interval;
+            if (min < 1) {
+                interval = '-1 min';
+            } else if (min >= 1 && min < 2) {
+                interval = '1-2 min';
+            } else if (min >= 2 && min < 3) {
+                interval = '2-3 min';
+            } else if (min >= 3 && min < 4) {
+                interval = '3-4 min';
+            } else {
+                interval = '+4 min';
+            }
+            durationMap.set(interval, (durationMap.get(interval) || 0) + 1);
+        });
+        console.log('durationMap:');
+        for (let [key, value] of durationMap) {
+            console.log(`${key}: ${value}`);
+        }
+
+        const durationDistributionData = Array.from(durationMap).map(([interval, fights]) => ({
+        interval,
+        fights
+        }));
         
+        console.log('durationDistributionData:');
+        console.log(durationDistributionData);
+
+        const charts = Highcharts.chart('pie-container', {
+            chart: {
+                type: 'pie', 
+                backgroundColor: '#D3D3D3',
+                borderColor: '66CDAA',
+                borderWidth: 2
+
+            },
+            title: {
+                text: 'Distribución de Peleas x Duración',
+                style: {
+                        fontFamily: 'Monserrat, sans-serif',
+                        color: '#36454F',
+                        fontWeight: 'bold'
+                    }
+            },
+            tooltip: {
+                pointFormat: '<b>{point.name}:</b> {point.y}'
+            },
+            plotOptions: {
+                pie: {
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    dataLabels: {
+                        enabled: true,
+                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
+                    }
+                }
+            },
+            series: [{
+                name:'Peleas',
+                colorByPoint: true,
+                data: durationDistributionData
+            }]
+        });
+    }
+
+    onMount(() => {
+
         getData();
+        getDataPie();
+
     })
 </script>
 
-<div id="container" style="width:100%; height:400px;"></div>
+<Row class="justify-content-center">
+    <div id="container" style="width:100%; height:400px;"></div>
+    <div id="pie-container" style="width:100%; height:400px;"></div>
+    <Col xs="auto">Volver -> <Button href="/ufc-events-data" outline size="sm" color="danger">Volver</Button></Col>
+</Row>
 
diff --git a/front/vite.config.js b/front/vite.config.js
@@ -3,4 +3,4 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
 	plugins: [sveltekit()]
-});
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,13 +18,14 @@
     "cool-ascii-faces": "^1.3.4",
     "cors": "^2.8.5",
     "express": "^4.18.3",
+    "highcharts": "^11.4.1",
+    "highcharts-stock": "^0.1.7",
     "nedb": "^1.8.0",
     "svelte": "^4.2.12"
   },
   "type": "module",
   "devDependencies": {
     "@playwright/test": "^1.42.1",
     "@types/node": "^20.12.5"
-
   }
 }