🧩 AlpuraChartComponent

Componente Angular que renderiza gráficos interactivos.

---

📦 Selector

<alpura-chart
  [data]="chartData"
  height="400px"
  [showLegend]="true"
  title="Mi Gráfico"
  (chartEvent)="onChartClick($event)"
></alpura-chart>

---

🧾 Inputs

Nombre	Tipo	Por defecto	Descripción
data	IAlpuraChart	undefined	Objeto que contiene los datos, tipo de gráfico y configuración.
height	string	n/a	Define la altura del contenedor del gráfico (ej. '400px', '70vh').
title	string	undefined	Título que se mostrará encima del gráfico.
showLegend	boolean	true	Controla si se muestra la leyenda del gráfico.
showTooltips	boolean	true	Controla si se muestran los tooltips al pasar el mouse.
showDataLabels	boolean	false	Controla si se muestran las etiquetas de datos directamente sobre el gráfico.

---

📤 Outputs

Nombre	Tipo	Descripción
chartEvent	EventEmitter<IAlpuraChartEvent>	Evento emitido al hacer clic en un punto o sección del gráfico.

Ejemplo de payload emitido por chartEvent:

{
  label: string;      // Etiqueta del dataset (ej. 'Ventas')
  section: string;    // Etiqueta del eje (ej. 'Enero')
  indexValue: number; // Índice del dato (ej. 0)
  value: unknown;     // Valor del dato (ej. 65)
}

---

📊 Tipos soportados por IAlpuraChart

A continuación se muestran los tipos y variaciones de gráficos que puedes crear:

Gráfico	type principal	Descripción
Barra Vertical	bar	Gráfico de barras estándar para comparaciones.
Barra Horizontal	bar	Variante horizontal, se activa con options.orientation.
Barras Apiladas	bar	Apila datasets para mostrar partes de un total.
Líneas	line	Muestra tendencias a lo largo del tiempo.
Área	line	Gráfico de líneas con el área bajo la curva rellena (fill: true).
Mixto (Barras y Líneas)	bar	Combina datasets de tipo bar y line en un solo gráfico.
Circular (Pie)	pie	Muestra proporciones de un todo.
Dona (Doughnut)	doughnut	Similar al circular, pero con un centro hueco.
Área Polar	polarArea	Similar al circular, pero el valor se representa en el radio.
Radar	radar	Compara múltiples variables en un formato de telaraña.
Burbujas	bubble	Muestra datos de tres dimensiones (x, y, tamaño).
Dispersión	scatter	Muestra la relación entre dos variables numéricas.
Tacómetro (Gauge)	gauge	Variante de la dona para mostrar un valor en un rango.

Cada tipo tiene una estructura específica de datasets que incluye etiquetas, valores, y propiedades adicionales como fill, tension según corresponda.

---

✅ Buenas prácticas

• Utiliza el evento chartEvent para responder a interacciones del usuario con el gráfico.
• Siempre define etiquetas (labels) para mejorar la experiencia visual.
• Asegúrate de cargar correctamente Chart.js antes de que se use este componente.

---

📘 Dependencias

• Chart.js: Se espera que Chart esté disponible en window, por lo que debe cargarse globalmente.