Estadistica-app
Ejemplo 1. Cómo podrías implementar una clase en Angular v18 para realizar estas tareas estadísticas. La clase incluye métodos para calcular el factor de riesgo, generar gráficos estadísticos, y crear tablas de contingencia de 2x2 con sus frecuencias y porcentajes. También se incluyen gráficos de barra y pastel.
ARRAYS en TypeScript https://ia-pplication.com/blog/typescript-arrays
Explicación:
- Clase EstadisticaService: Contiene métodos para calcular el factor de riesgo, generar gráficos y crear tablas de contingencia.
- Método factorRiesgo: Calcula el riesgo relativo entre un factor de exposición y la aparición de una enfermedad.
- Método crearTablaContingencia: Crea tablas de contingencia de 2x2 con frecuencias.
- Método graficosEstadistico: Genera gráficos de barras y de pastel para visualizar la relación entre un factor de exposición y una enfermedad.
- Componente EstadisticaComponent: Usa el servicio para calcular el riesgo y generar los gráficos y tablas.
- Plantilla HTML: Muestra los gráficos y las tablas de contingencia.
Datos de Ejemplo:
- fumador: 1 (sí), 0 (no)
- edad: Edad en años
- sexo: 1 (hombre), 0 (mujer)
- IMC: Índice de Masa Corporal
- cancer_pulmon: 1 (sí), 0 (no)
Paso 1: Configuración del Proyecto
Primero, asegúrate de tener un proyecto Angular configurado. Si no lo tienes, puedes crear uno con el siguiente comando:
ng new estadistica-app
cd estadistica-app
......
Paso 2: Instalación de Dependencias
Necesitarás instalar algunas dependencias para manejar los datos y los gráficos:
// Intallar las dependencias
npm install @angular/material
ng add @angular/material
npm install chart.js
npm install ng2-charts
......
Paso 3: Creación de la Clase Estadistica
Crea un archivo estadistica.service.ts en la carpeta src/app y define la clase Estadistica:
C:\ANGULAR-v18\Cmder_Consola\estadistica-app (master)
// Abriendo el proyecto en editor texto Visual Studio Code
code .
// Creando los componentes del archivo: estadistica
ng g c estadistica
// se crearan los siguientes archivos
CREATE src/app/estadistica/estadistica.component.html
CREATE src/app/estadistica/estadistica.component.spec.ts
CREATE src/app/estadistica/estadistica.component.ts
CREATE src/app/estadistica/estadistica.component.css
// Creando los compoentes del archivo: servicio
ng g service estadistica/estadistica
// se crearan los siguientes archivos
CREATE src/app/estadistica/estadistica.service.spec.ts
CREATE src/app/estadistica/estadistica.service.ts
Archivo: app.component.ts
// app.component.ts
import { Component } from '@angular/core';
// Importando rutas
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [ RouterOutlet, RouterLink, RouterLinkActive],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'app.component';
}
Archivo: app.routes.ts
// app.routes.ts
import { Routes } from '@angular/router';
// Agregando rutas
import { EstadisticaComponent } from './estadistica/estadistica.component';
export const routes: Routes = [
// Definimos pagina de portada o inicio
{
path:'estadistica',
component: EstadisticaComponent
},
// Definimos la pagina de inicio por defecto
{
path:'',
redirectTo:'estadistica',
pathMatch: 'full',
},
// Definimos pagina no existente
{
path:'**',
// component:
}
];
Archivo: app.component.html
<!-- app.component.html -->
<nav>
<a [routerLink]="['estadistica']" routerLinkActive="boton-activo" class="boton">Inicio</a>
|
<a [routerLink]="['estadistica']" routerLinkActive="boton-activo" class="boton">Ejemplo</a>
|
<a [routerLink]="['#']" routerLinkActive="boton-activo" class="boton">pag no encontrada</a>
|
<nav>
<router-outlet />
import { Injectable } from '@angular/core';
import { Chart } from 'chart.js';
@Injectable({
providedIn: 'root'
})
export class EstadisticaService {
data: any;
constructor() {
this.data = {
fumador: [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
edad: [45, 34, 65, 23, 54, 33, 44, 22, 55, 31],
sexo: [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
IMC: [25, 22, 30, 21, 28, 23, 27, 20, 29, 24],
cancer_pulmon: [1, 0, 1, 0, 1, 0, 1, 0, 1, 0]
};
}
factorRiesgo(factorExposicion: string, enfermedad: string): number {
const tablaContingencia = this.crearTablaContingencia(factorExposicion, enfermedad);
const riesgoRelativo = (tablaContingencia[1][1] / (tablaContingencia[1][0] + tablaContingencia[1][1])) /
(tablaContingencia[0][1] / (tablaContingencia[0][0] + tablaContingencia[0][1]));
return riesgoRelativo;
}
crearTablaContingencia(factorExposicion: string, enfermedad: string): number[][] {
const tabla = [[0, 0], [0, 0]];
for (let i = 0; i < this.data[factorExposicion].length; i++) {
const exp = this.data[factorExposicion][i];
const enf = this.data[enfermedad][i];
tabla[exp][enf]++;
}
return tabla;
}
graficosEstadistico(factorExposicion: string, enfermedad: string): void {
const tablaContingencia = this.crearTablaContingencia(factorExposicion, enfermedad);
const labels = ['No Expuesto', 'Expuesto'];
const data = {
labels: labels,
datasets: [{
label: 'No Enfermo',
data: [tablaContingencia[0][0], tablaContingencia[1][0]],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
label: 'Enfermo',
data: [tablaContingencia[0][1], tablaContingencia[1][1]],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
};
const ctxBar = document.getElementById('barChart') as HTMLCanvasElement;
new Chart(ctxBar, {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
const ctxPie = document.getElementById('pieChart') as HTMLCanvasElement;
new Chart(ctxPie, {
type: 'pie',
data: {
labels: ['No Expuesto No Enfermo', 'No Expuesto Enfermo', 'Expuesto No Enfermo', 'Expuesto Enfermo'],
datasets: [{
data: [tablaContingencia[0][0], tablaContingencia[0][1], tablaContingencia[1][0], tablaContingencia[1][1]],
backgroundColor: [
'rgba(75, 192, 192, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(75, 192, 192, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
}
});
}
}
......
Paso 4: Uso del Servicio en un Componente
Crea un componente estadistica.component.ts y usa el servicio EstadisticaService:
import { Component, OnInit } from '@angular/core';
import { EstadisticaService } from './estadistica.service';
@Component({
selector: 'app-estadistica',
templateUrl: './estadistica.component.html',
styleUrls: ['./estadistica.component.css']
})
export class EstadisticaComponent implements OnInit {
constructor(private estadisticaService: EstadisticaService) { }
ngOnInit(): void {
const riesgo = this.estadisticaService.factorRiesgo('fumador', 'cancer_pulmon');
console.log(`Riesgo relativo: ${riesgo}`);
this.estadisticaService.graficosEstadistico('fumador', 'cancer_pulmon');
}
}
......
Paso 5: Plantilla HTML
Crea la plantilla HTML estadistica.component.html para mostrar los gráficos:
// estadistica.component.html
<div>
<h2>Gráficos Estadísticos</h2>
<canvas id="barChart"></canvas>
<canvas id="pieChart"></canvas>
</div>
<div>
<h2>Tablas de Contingencia</h2>
<table>
<thead>
<tr>
<th>Exposición</th>
<th>No Enfermo</th>
<th>Enfermo</th>
</tr>
</thead>
<tbody>
<tr>
<td>No Expuesto</td>
<td>{{ tablaContingencia[0][0] }}</td>
<td>{{ tablaContingencia[0][1] }}</td>
</tr>
<tr>
<td>Expuesto</td>
<td>{{ tablaContingencia[1][0] }}</td>
<td>{{ tablaContingencia[1][1] }}</td>
</tr>
</tbody>
</table>
</div>
......
Paso 6: Estilos CSS
Añade estilos en estadistica.component.css si es necesario:
canvas {
max-width: 600px;
margin: 20px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.....
Ejemplo 2. Este código crea una clase Estadistica con métodos para calcular varias funciones estadísticas comunes en la investigación científica. Luego, se utiliza esta clase en un componente de Angular para calcular y mostrar los resultados de estas funciones.
// src/app/estadistica.ts
export class Estadistica {
constructor(private datos: number[]) {}
// Método para calcular la media
calcularMedia(): number {
const suma = this.datos.reduce((a, b) => a + b, 0);
return suma / this.datos.length;
}
// Método para calcular la mediana
calcularMediana(): number {
const datosOrdenados = [...this.datos].sort((a, b) => a - b);
const mitad = Math.floor(datosOrdenados.length / 2);
if (datosOrdenados.length % 2 === 0) {
return (datosOrdenados[mitad - 1] + datosOrdenados[mitad]) / 2;
} else {
return datosOrdenados[mitad];
}
}
// Método para calcular la moda
calcularModa(): number[] {
const frecuencia: { [key: number]: number } = {};
this.datos.forEach(num => frecuencia[num] = (frecuencia[num] || 0) + 1);
const maxFrecuencia = Math.max(...Object.values(frecuencia));
return Object.keys(frecuencia).filter(key => frecuencia[+key] === maxFrecuencia).map(Number);
}
// Método para calcular el rango
calcularRango(): number {
return Math.max(...this.datos) - Math.min(...this.datos);
}
// Método para calcular la desviación estándar
calcularDesviacionEstandar(): number {
const media = this.calcularMedia();
const sumaCuadrados = this.datos.reduce((a, b) => a + Math.pow(b - media, 2), 0);
return Math.sqrt(sumaCuadrados / this.datos.length);
}
// Método para obtener el valor mínimo
obtenerMinimo(): number {
return Math.min(...this.datos);
}
// Método para obtener el valor máximo
obtenerMaximo(): number {
return Math.max(...this.datos);
}
// Método para calcular el Chi cuadrado (simplificado)
calcularChiCuadrado(observados: number[], esperados: number[]): number {
return observados.reduce((chi, obs, i) => chi + Math.pow(obs - esperados[i], 2) / esperados[i], 0);
}
// Método para calcular el riesgo relativo (simplificado)
calcularRiesgoRelativo(a: number, b: number, c: number, d: number): number {
return (a / (a + b)) / (c / (c + d));
}
// Método para calcular el Odd ratio (simplificado)
calcularOddRatio(a: number, b: number, c: number, d: number): number {
return (a * d) / (b * c);
}
// Método para calcular el intervalo de confianza (simplificado)
calcularIntervaloConfianza(media: number, desviacionEstandar: number, n: number, z: number): [number, number] {
const margenError = z * (desviacionEstandar / Math.sqrt(n));
return [media - margenError, media + margenError];
}
// Método para calcular el coeficiente phi (simplificado)
calcularCoeficientePhi(a: number, b: number, c: number, d: number): number {
return (a * d - b * c) / Math.sqrt((a + b) * (c + d) * (a + c) * (b + d));
}
}
// src/app/app.component.ts
import { Component } from '@angular/core';
// Agregando interface de...
import { Estadistica } from './estadistica';
// agregando modulos necesarios
import { CommonModule, CurrencyPipe } from '@angular/common';
@Component({
selector: 'app-face1',
standalone: true,
imports: [],
template: `
<!-- src/app/app.component.html -->
<div>
<h1>Estadísticas de los Datos</h1>
<p><b>Lista de Datos: {{datos}}</b> </p>
<p>Media: {{ media }}</p>
<p>Mediana: {{ mediana }}</p>
<p>Moda: {{ moda }}</p>
<p>Rango: {{ rango }}</p>
<p>Desviación Estándar: {{ desviacionEstandar }}</p>
<p>Mínimo: {{ minimo }}</p>
<p>Máximo: {{ maximo }}</p>
<p>Chi Cuadrado: {{ chiCuadrado }}</p>
<p>Riesgo Relativo: {{ riesgoRelativo }}</p>
<p>Odd Ratio: {{ oddRatio }}</p>
<p>Intervalo de Confianza: {{ intervaloConfianza[0] }} - {{ intervaloConfianza[1] }}</p>
<p>Coeficiente Phi: {{ coeficientePhi }}</p>
</div>
`,
styles: `[] `
})
export class Face1Component {
datos: number[] = [1, 2, 2, 3, 4, 5, 5, 5, 6, 7];
estadistica = new Estadistica(this.datos);
media = this.estadistica.calcularMedia();
mediana = this.estadistica.calcularMediana();
moda = this.estadistica.calcularModa();
rango = this.estadistica.calcularRango();
desviacionEstandar = this.estadistica.calcularDesviacionEstandar();
minimo = this.estadistica.obtenerMinimo();
maximo = this.estadistica.obtenerMaximo();
chiCuadrado = this.estadistica.calcularChiCuadrado([10, 20], [15, 15]);
riesgoRelativo = this.estadistica.calcularRiesgoRelativo(10, 20, 30, 40);
oddRatio = this.estadistica.calcularOddRatio(10, 20, 30, 40);
intervaloConfianza = this.estadistica.calcularIntervaloConfianza(this.media, this.desviacionEstandar, this.datos.length, 1.96);
coeficientePhi = this.estadistica.calcularCoeficientePhi(10, 20, 30, 40);
}
...