Graficas

gti-sos · May 7, 2024 · 5c343f1 · 5c343f1
1 parent b793755
commit 5c343f1
Show file tree

Hide file tree

Showing 3 changed files with 1,375 additions and 53 deletions.
diff --git a/front/src/routes/ufc-events-data/graph/+page.svelte b/front/src/routes/ufc-events-data/graph/+page.svelte
@@ -1,11 +1,14 @@
 <svelte:head>
     <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://www.gstatic.com/charts/loader.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 { dev } from "$app/environment";
+	import { color } from "highcharts";
     // import Highcharts from 'highcharts/highstock';
 
 
@@ -21,28 +24,20 @@
             console.log(`fetched data: ${dataJSON}`)
             fillChart(dataJSON);
             fillPieChart(dataJSON);
+            fillGoogleChartBar(dataJSON);
+            fillGooglePieChart(dataJSON);
+
         } catch (error) {
             console.log(`error => ${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.error('Error al obtener datos para el gráfico de tarta:', error);
-    //     }
-    // }
+    
 
     async function fillChart(dt) {
         
         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}`)
         // Matriz de datos
         
 
@@ -182,17 +177,157 @@
         });
     }
 
+    async function fillGoogleChartBar(dt) {
+    
+        const weights = [...new Set(dt.map(item => item.weight_class))];
+        const methods =[...new Set(dt.map(item => item.method))];
+
+        // Matriz de datos
+
+        const seriesData = methods.map(method => ({
+            name: method,
+            data: weights.map(weight => {
+                const victories = dt.filter(item => item.method === method && item.weight_class === weight).length;
+                return victories;
+            })
+        }));
+
+        
+        const chartData = [['Peso', ...seriesData.map(series => series.name)], ...seriesData[0].data.map((_, i) => [weights[i], ...seriesData.map(series => series.data[i])])];
+
+        google.charts.load('current', {'packages':['corechart', 'bar']});
+        google.charts.setOnLoadCallback(() => {
+
+            const data = google.visualization.arrayToDataTable(chartData);
+
+            const options = {
+                title: 'Victorias de Método x Peso', 
+                backgroundColor : '#D3D3D3',
+            borderColor: '66CDAA',
+            borderWidth: 2,
+            isStacked: true,
+            hAxis: {
+                title: 'Pesos',
+                textStyle: { color: '#36454F', fontFamily: 'Monserrat, sans-serif' }
+            },
+            vAxis: {
+                title: 'Cantidad de Victorias',
+                textStyle: { color: '#36454F', fontFamily: 'Monserrat, sans-serif' }
+            }
+        };
+        const chart = new google.visualization.BarChart(document.getElementById('container-google-bar'));
+        chart.draw(data, options);
+        })
+    }
+
+    async function fillGooglePieChart(dt) {
+    console.log('Entro en pie charts');
+    
+    // Crear un objeto para almacenar la distribución de duraciones
+        const durationDistribution = {
+        '-1 min': 0,
+        '1-2 min': 0,
+        '2-3 min': 0,
+        '3-4 min': 0,
+        '+4 min': 0
+        };
+
+        dt.forEach(item => {
+        const min = parseInt(item.time.split(':')[0]); // Convertir a número entero
+        if (min < 1) {
+            durationDistribution['-1 min']++;
+        } else if (min >= 1 && min < 2) {
+            durationDistribution['1-2 min']++;
+        } else if (min >= 2 && min < 3) {
+            durationDistribution['2-3 min']++;
+        } else if (min >= 3 && min < 4) {
+            durationDistribution['3-4 min']++;
+        } else {
+            durationDistribution['+4 min']++;
+        }
+    });
+
+        const dataPie = Object.entries(durationDistribution).map(([interval, fights]) => [interval, fights]);
+
+        google.charts.load('current', {'packages':['corechart']});
+        google.charts.setOnLoadCallback(() => {
+
+        
+        const data = new google.visualization.DataTable();
+        data.addColumn('string', 'Intervalo');
+        data.addColumn('number', 'Peleas');
+        data.addRows(dataPie);
+
+        const options = {
+            title: 'Distribución de Peleas x Duración',
+            backgroundColor: '#D3D3D3',
+            titleTextStyle: {
+                color: '#36454F',
+                fontName: 'Monserrat',
+                bold: true
+            },
+            legend: {
+                textStyle: {
+                    color: '#36454F',
+                    fontName: 'Monserrat'
+                }
+            },
+            pieSliceTextStyle: {
+                color: '#36454F',
+                fontName: 'Monserrat'
+            },
+            slices: {
+                0: {offset: 0.1},
+                1: {offset: 0.1},
+                2: {offset: 0.1},
+                3: {offset: 0.1},
+                4: {offset: 0.1}
+            }
+        };
+
+            const chart = new google.visualization.PieChart(document.getElementById('container-google-pie'));
+            chart.draw(data, options);
+        })
+    }
+
+
+    
+
+
+    
+
     onMount(() => {
 
-        getData();
-        // getDataPie();
+        google.charts.load('current', { packages: ['corechart', 'bar'] });
+        google.charts.setOnLoadCallback(getData);
 
     })
 </script>
+
+<!-- <style>
+    #custom-row{
+        background-color: #f8f9fa;
+        border: 1px solid #ced4da;
+        border-radius: 10px;
+        box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.1);
+        padding: 20px;
+    }
+</style> -->
+
 <Container>
-<Row class="justify-content-center">
-    <div id="container" style="width:100%; height:400px;"></div>
-    <div id="pie-container" style="width:100%; height:400px;"></div>
+<Row id="custom-row" class="justify-content-center">
+    <Col md = "6">
+        <h2 style="text-align: center;">Highcharts</h2>
+        <div id="container" style="width:100%; height:400px;"></div>
+        <div id="pie-container" style="width:100%; height:400px;"></div>
+    </Col>
+    <Col md = "6">
+        <h2 style="text-align: center;">Google Charts</h2>
+        <div id="container-google-pie" style="width:100%; height:400px;"></div>
+        <div id="container-google-bar" style="width:100%; height:400px;"></div>
+
+    </Col>
+
     <Col xs="auto">Volver -> <Button href="/ufc-events-data" outline size="sm" color="danger">Volver</Button></Col>
 </Row>
 </Container>