DTPM Indicators Frontend

Logo de DTPM

Descripción General

DTPM Indicators es una aplicación web integral diseñada para el Directorio de Transporte Público Metropolitano (DTPM) de Chile. Esta aplicación frontend proporciona una interfaz intuitiva para monitorear, analizar y gestionar indicadores clave de rendimiento para operadores de transporte público.

El sistema permite a los administradores de transporte realizar seguimiento de varios índices de cumplimiento, gestionar períodos de pago y generar informes basados en datos operacionales.

Características Principales

  • Panel de Control: Visualización de métricas clave de rendimiento de un vistazo
  • Gestión de Indicadores: Monitoreo y configuración de múltiples indicadores de transporte:
  • ICF (Índice de Cumplimiento de Frecuencia)
  • ICRI (Índice de Cumplimiento de Regularidad e Intervalos)
  • ICRP (Índice de Cumplimiento de Regularidad Programada)
  • ICT (Índice de Cumplimiento de Tiempos)
  • Gestión de Períodos de Pago: Creación, configuración y monitoreo de períodos de pago mensuales
  • Gestión de Operadores: Seguimiento de métricas de rendimiento para diferentes operadores de transporte
  • Importación/Exportación de Datos: Carga de datos operacionales y descarga de informes consolidados
  • Gestión de Configuración: Personalización de parámetros del sistema y configuraciones operacionales

Stack Tecnológico

  • Framework Frontend: Vue.js 3 con TypeScript
  • Herramienta de Construcción: Vite
  • Componentes UI: Element Plus
  • Gestión de Estado: Pinia
  • Enrutamiento: Vue Router
  • Cliente HTTP: Axios
  • Internacionalización: Vue I18n
  • Gráficos: Vue ECharts
  • Pruebas: Cypress

Primeros Pasos

Requisitos Previos

  • Node.js (v14 o superior)
  • npm (v6 o superior)

Instalación

  1. Clonar el repositorio: bash git clone https://github.com/your-organization/dtpm-indicators-frontend.git cd dtpm-indicators-frontend

  2. Instalar dependencias: bash npm install

  3. Configurar variables de entorno:

  4. Copiar el archivo .env.example a .env: bash cp .env.example .env

  5. Editar el archivo .env para establecer las variables específicas de su entorno: ``` # Configuración de API VITE_BASE_URL=http://your-api-endpoint

    # Configuraciones adicionales VITE_APP_TITLE=DTPM Indicators VITE_API_TIMEOUT=30000

    # Entorno VITE_NODE_ENV=development ```

Desarrollo

Iniciar el servidor de desarrollo con recarga en caliente:

npm run dev

Compilación para Producción

Compilar la aplicación para producción:

npm run build

Vista previa de la compilación de producción:

npm run preview

Pruebas

Ejecutar pruebas end-to-end:

npm run test:e2e

Ejecutar pruebas de componentes:

npm run test:unit

Calidad del Código

Configuración de ESLint

Este proyecto utiliza ESLint para la calidad y el formato del código. Para habilitar el formateo automático en PyCharm:

  1. Abrir la configuración del proyecto
  2. Buscar run eslint --fix on save
  3. Marcar la casilla a la izquierda de este texto
  4. Ahora, ESLint formateará automáticamente su código al guardar archivos con extensiones .js, .ts, .jsx, .tsx, .html, o .vue

Estructura del Proyecto

dtpm-indicators-frontend/
├── public/                 # Activos estáticos
├── src/
│   ├── assets/             # Imágenes, fuentes, etc.
│   ├── components/         # Componentes Vue reutilizables
│   ├── router/             # Configuración de Vue Router
│   ├── stores/             # Almacenes Pinia
│   ├── views/              # Componentes de página
│   ├── App.vue             # Componente raíz
│   └── main.ts             # Punto de entrada de la aplicación
├── .env.example            # Variables de entorno de ejemplo
├── package.json            # Dependencias y scripts del proyecto
├── tsconfig.json           # Configuración de TypeScript
└── vite.config.ts          # Configuración de Vite

Integración de API

El frontend se comunica con una API backend para obtener y gestionar datos. La documentación de la API está disponible en el archivo api-documentation.md, que detalla todos los endpoints disponibles y las estructuras de datos.

Contribución

  1. Hacer un fork del repositorio
  2. Crear su rama de características (git checkout -b feature/caracteristica-increible)
  3. Confirmar sus cambios (git commit -m 'Añadir alguna característica increíble')
  4. Empujar a la rama (git push origin feature/caracteristica-increible)
  5. Abrir una Solicitud de Extracción

Licencia

Este proyecto es propietario y confidencial. La copia, distribución o uso no autorizado está estrictamente prohibido.

Contacto

Para preguntas o soporte, por favor contacte al departamento de TI de DTPM.