@jtejidov/cronograma-timeline

v1.0.23

Published

9 months ago

Timeline Web Component for medical scheduling built with Angular Elements

0High
0Medium
0Low

jtejidov

angular web-components custom-elements reusable framework-agnostic

🏥 Cronograma Timeline Web Component

Un componente de timeline médico construido con Angular Elements que puede ser usado en cualquier framework web.

🚀 Características

✅ Framework Agnóstico: Funciona con React, Vue, Angular, o JavaScript vanilla
✅ Timeline Médico: Diseñado específicamente para cronogramas médicos
✅ Responsive: Se adapta a diferentes tamaños de pantalla
✅ Tooltips Personalizados: Información detallada al hacer hover
✅ Eventos Personalizados: Comunica con la aplicación padre
✅ Modales Integrados: Detalles completos de múltiples elementos

📦 Instalación

npm install @your-scope/cronograma-timeline

🔧 Uso

JavaScript Vanilla

<!DOCTYPE html>
<html>
<head>
    <script src="node_modules/@your-scope/cronograma-timeline/main.js"></script>
    <link rel="stylesheet" href="node_modules/@your-scope/cronograma-timeline/styles.css">
</head>
<body>
    <cronograma-timeline 
        id="timeline"
        visits-data='[]'
        examinations-data='[]'
        emergencies-data='[]'
        admissions-data='[]'
        dur-date="01/03/2025"
        today-week="10"
        total-weeks="54">
    </cronograma-timeline>

    <script>
        const timeline = document.getElementById('timeline');
        
        // Escuchar eventos de documento
        timeline.addEventListener('document-clicked', (event) => {
            console.log('Documento clickeado:', event.detail);
        });
        
        // Cargar datos
        const visitasData = [
            {
                examinationsId: null,
                date: "2025-03-15T00:00:00.000Z",
                description: "Consulta médica",
                document: "12345",
                scheduleId: "visit-1",
                diagnostic: "Control rutinario"
            }
        ];
        
        timeline.setAttribute('visits-data', JSON.stringify(visitasData));
    </script>
</body>
</html>

React

import { useEffect, useRef } from 'react';

// Declaración de tipos para TypeScript
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'cronograma-timeline': any;
    }
  }
}

function TimelineComponent() {
  const timelineRef = useRef<HTMLElement>(null);

  useEffect(() => {
    // Importar el Web Component
    import('@your-scope/cronograma-timeline');
    
    // Configurar event listeners
    const timeline = timelineRef.current;
    if (timeline) {
      const handleDocumentClick = (event: CustomEvent) => {
        console.log('Documento clickeado:', event.detail);
      };
      
      timeline.addEventListener('document-clicked', handleDocumentClick);
      return () => timeline.removeEventListener('document-clicked', handleDocumentClick);
    }
  }, []);

  const visitasData = [
    {
      examinationsId: null,
      date: "2025-03-15T00:00:00.000Z", 
      description: "Consulta médica",
      document: "12345",
      scheduleId: "visit-1"
    }
  ];

  return (
    <cronograma-timeline
      ref={timelineRef}
      visits-data={JSON.stringify(visitasData)}
      examinations-data={JSON.stringify([])}
      emergencies-data={JSON.stringify([])}
      admissions-data={JSON.stringify([])}
      dur-date="01/03/2025"
      today-week={10}
      total-weeks={54}
    />
  );
}

export default TimelineComponent;

Vue 3

<template>
  <cronograma-timeline
    ref="timelineRef"
    :visits-data="JSON.stringify(visitasData)"
    :examinations-data="JSON.stringify([])"
    :emergencies-data="JSON.stringify([])"
    :admissions-data="JSON.stringify([])"
    dur-date="01/03/2025"
    :today-week="10"
    :total-weeks="54"
    @document-clicked="handleDocumentClick"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const timelineRef = ref();

const visitasData = ref([
  {
    examinationsId: null,
    date: "2025-03-15T00:00:00.000Z",
    description: "Consulta médica", 
    document: "12345",
    scheduleId: "visit-1"
  }
]);

onMounted(async () => {
  await import('@your-scope/cronograma-timeline');
});

const handleDocumentClick = (event: CustomEvent) => {
  console.log('Documento clickeado:', event.detail);
};
</script>

Angular

// app.component.ts
import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <cronograma-timeline 
      [attr.visits-data]="visitasDataString"
      [attr.examinations-data]="'[]'"
      [attr.emergencies-data]="'[]'"
      [attr.admissions-data]="'[]'"
      [attr.dur-date]="'01/03/2025'"
      [attr.today-week]="10"
      [attr.total-weeks]="54"
      (document-clicked)="onDocumentClick($event)">
    </cronograma-timeline>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent implements OnInit {
  visitasDataString = '';

  ngOnInit() {
    // Importar el Web Component
    import('@your-scope/cronograma-timeline');
    
    const visitasData = [
      {
        examinationsId: null,
        date: "2025-03-15T00:00:00.000Z",
        description: "Consulta médica",
        document: "12345", 
        scheduleId: "visit-1"
      }
    ];
    
    this.visitasDataString = JSON.stringify(visitasData);
  }

  onDocumentClick(event: CustomEvent) {
    console.log('Documento clickeado:', event.detail);
  }
}

📝 API

Propiedades

| Propiedad | Tipo | Descripción | |-----------|------|-------------| | visits-data | string | JSON con datos de visitas médicas | | examinations-data | string | JSON con datos de exámenes | | emergencies-data | string | JSON con datos de urgencias | | admissions-data | string | JSON con datos de ingresos | | dur-date | string | Fecha de duración (formato: dd/MM/yyyy) | | today-week | number | Semana actual para destacar | | total-weeks | number | Total de semanas a mostrar (default: 54) | | mpi-id | string | ID del paciente | | is-expanded | boolean | Si el timeline está expandido |

Formato de Datos

interface TimelineItem {
  examinationsId?: string | null;
  date: string; // ISO string date
  description: string;
  document: string; // ID del documento
  scheduleId?: string | null;
  diagnostic?: string;
  visitId?: string | null;
  emergencyId?: string | null;
  admissionId?: string | null;
}

Eventos

| Evento | Descripción | Datos | |--------|-------------|-------| | document-clicked | Se dispara al hacer clic en un documento | { idDoc, containerLabel, containerIcon, timestamp } | | timeline-ready | Se dispara cuando el componente está listo | - |

🎨 Personalización

El componente incluye estilos CSS encapsulados. Para personalización adicional:

cronograma-timeline {
  display: block;
  width: 100%;
  height: auto;
}

/* Los estilos internos están encapsulados y no requieren personalización externa */

🔧 Desarrollo

Para desarrollar localmente:

git clone https://github.com/tu-usuario/cronograma-timeline.git
cd cronograma-timeline
npm install
npm start

📄 Licencia

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

Fork el proyecto
Crea una rama para tu feature
Commit tus cambios
Push a la rama
Abre un Pull Request

📞 Soporte

Si encuentras algún problema o tienes preguntas: