CHART

El componente CHART renderiza gráficos interactivos usando ApexCharts completamente del lado del cliente. Soporta formato de datos WIDE (columnas múltiples) y LONG (series agrupadas por filas).

Propósito

CHART permite a los desarrolladores crear dashboards empresariales con gráficos declarativos desde YAML:

• Gráficos de líneas, áreas, barras, pie y donut
• Soporte para datos agrupados (stacked)
• Orientación horizontal y vertical
• Curvas suavizadas o rectas

Propiedades

Propiedad	Tipo	Obligatorio	Valor predeterminado	Descripción
type	string	Sí	—	Debe ser CHART
name	string	Sí	—	Identificador del componente
source	string	Sí	—	Nombre de la variable Resultset con los datos
chartType	string	No	BAR	Tipo de gráfico: LINE, AREA, BAR, PIE, DONUT
dataShape	string	No	WIDE	Formato de datos: WIDE o LONG
xField	string	Sí	—	Campo del resultset usado como eje X / categoría
seriesFields	string	Sí*	—	Nombres de campos separados por coma (solo WIDE)
seriesLabels	string	No	—	Labels separados por coma, alineados por índice con seriesFields. Si se omite, se usa el nombre del field
seriesField	string	Sí*	—	Campo del resultset que identifica la serie (solo LONG)
valueField	string	Sí*	—	Campo del resultset con el valor numérico (solo LONG)
title	string	No	—	Título del gráfico
subtitle	string	No	—	Subtítulo del gráfico
height	number	No	320	Alto del gráfico en píxeles
stacked	boolean	No	false	Apila las series (BAR, AREA)
horizontal	boolean	No	false	Invierte ejes (BAR)
legend	boolean	No	true	Muestra la leyenda
toolbar	boolean	No	false	Muestra la barra de herramientas
showDataLabels	boolean	No	false	Muestra etiquetas de datos
curve	string	No	smooth	Curva de línea: smooth, straight, stepline
emptyText	string	No	No hay datos	Texto cuando no hay datos
visible	boolean	No	true	Indica si el componente es visible

* Obligatorio según el valor de dataShape.

dataShape = WIDE

Usa un campo como eje X y una lista de campos como series. Los nombres de campo van en seriesFields separados por coma. Los labels visibles van en seriesLabels (opcional, alineados por índice).

- name: monthlyRevenue
  type: CHART
  title: Facturación mensual
  source: revenueData
  chartType: AREA
  dataShape: WIDE
  xField: month
  seriesFields: total,expenses
  seriesLabels: Facturación,Gastos
  height: 320
  curve: smooth
  legend: true

dataShape = LONG

Usa un campo como eje X, un campo como identificador de serie y un campo como valor numérico. El cliente agrupa automáticamente por seriesField y alinea por xField.

- name: monthlyMetrics
  type: CHART
  title: Métricas mensuales
  source: metricsData
  chartType: BAR
  dataShape: LONG
  xField: month
  seriesField: metric
  valueField: value
  stacked: true
  height: 320

Ejemplo SQL para formato LONG:

SELECT
  DATE_FORMAT(created_at, '%Y-%m') AS month,
  status AS metric,
  COUNT(*) AS value
FROM orders
GROUP BY month, status
ORDER BY month;

PIE y DONUT

Para gráficos de torta:

• WIDE: xField como label, primer field de seriesFields como valor
• LONG: xField como label, valueField como valor, seriesField se ignora

- name: categoryPie
  type: CHART
  chartType: PIE
  source: categoryData
  dataShape: WIDE
  xField: category
  seriesFields: count
  seriesLabels: Cantidad

Notas técnicas

• La renderización es 100% client-side usando vue3-apexcharts + apexcharts.
• Los datos se obtienen del resultset definido en source y se serializan como JSON al cliente.
• Si source no existe o no tiene filas, se muestra emptyText.
• Si faltan propiedades requeridas, se muestra un mensaje de error inline sin romper la app.