sapenlinea-components 0.6.68 → 0.7.70

package/README.md

@@ -448,10 +448,36 @@ Componente de **tabla dinámica** con soporte de ordenamiento, acciones por fila
 - `statusToneMap: StatusToneMap` – Mapa de estado normalizado → tono visual (`success`, `error`, `warning`, `info`, `neutral`).
 - `statusEnumMap: Record<string, string>` – Traduce el valor crudo del estado (ej. `'ACTIVE'`) a la etiqueta que se muestra (ej. `'Activo'`). La resolución del tono usa la etiqueta traducida.
 
+**Tipos de columna (`type`):**
+
+| Tipo | Descripción |
+|---|---|
+| `text` | Texto plano (default) |
+| `number` | Número formateado |
+| `money` | Valor monetario con formato |
+| `date` | Fecha formateada |
+| `datetime` | Fecha y hora |
+| `percentage` | Porcentaje |
+| `status` | Chip de estado con color basado en `statusToneMap` |
+| `grade` | Chip de grado con color semáforo automático (verde ≤0.9, naranja ≤2.9, rojo ≤4, gris >4). Muestra el valor con sufijo `°` |
+| `icon-button` | Botón con ícono clicable |
+| `email` | Email en minúsculas |
+
 **Outputs:**
 
 - `optionSelected: EventEmitter<{ action: string; row: TableRow }>` – Emite la acción seleccionada y la fila.
 
+**Ejemplo con columna `grade`:**
+
+```ts
+columns: TableColumn[] = [
+  { key: 'numero', label: 'N° COMPARENDO', align: 'center' },
+  { key: 'fecha', label: 'FECHA', align: 'center', type: 'date' },
+  { key: 'grado', label: 'GRADO', align: 'center', type: 'grade' },
+  { key: 'medicion', label: 'MEDICIÓN', align: 'center' }
+];
+```
+
 **Uso con estados en inglés (enum):**
 
 ```ts
@@ -805,11 +831,16 @@ Encabezado de sección con título, botones de acción configurables y grupo de
 - `clickButtonLabel: string = 'Acción'` — texto del botón en modo `click`
 - `clickButtonIcon: string = ''` — clase CSS del ícono en modo `click`
 - `alwaysShowFilters: boolean = false` — muestra los filtros permanentemente sin necesidad de toggle
-- `showSecondaryButton: boolean = false` — muestra un botón secundario al final de la fila del título
-- `secondaryButtonLabel: string = 'Exportar'`
-- `secondaryButtonIcon: string = ''`
+- `showSecondaryButton: boolean = false` — muestra un botón secundario (ej. "Exportar PDF")
+- `secondaryButtonLabel: string = 'Exportar PDF'`
+- `secondaryButtonIcon: string = 'icon-download'`
+- `showButtonExport: boolean = false` — muestra un botón de exportación adicional (ej. "Exportar CSV")
+- `exportButtonLabel: string = 'Exportar CSV'`
+- `exportButtonIcon: string = 'icon-export'`
 - `showButtonBack: boolean = false`
 
+> Los botones secundario y de exportación se agrupan automáticamente al final de la fila del título.
+
 **Outputs:**
 
 - `filtersChange: Record<string, string | number | Date | null>`
@@ -817,6 +848,7 @@ Encabezado de sección con título, botones de acción configurables y grupo de
 - `clearFilters: void`
 - `filterButtonClicked: void` — emitido al hacer clic en el botón `click` o `action`
 - `secondaryButtonClicked: void`
+- `exportButtonClicked: void`
 - `clickButtonBack: void`
 
 **Íconos disponibles** (clase CSS, patrón `mask-image`):
@@ -827,21 +859,20 @@ Encabezado de sección con título, botones de acción configurables y grupo de
 | `icon-upload` | Cargar / subir |
 | `icon-export` | Exportar tabla |
 
-**Ejemplo — modo `click` con filtros permanentes y botón secundario:**
+**Ejemplo — con botón secundario y botón de exportar:**
 
 ```html
 <lib-title-filters
-  title="Órdenes"
-  buttonMode="click"
-  clickButtonLabel="Nueva Orden"
-  clickButtonIcon="icon-upload"
-  [alwaysShowFilters]="true"
-  [showSecondaryButton]="true"
-  secondaryButtonLabel="Exportar"
-  secondaryButtonIcon="icon-export"
+  title="Comparendos"
   [filtersConfig]="filtersConfig"
-  (filterButtonClicked)="onNuevaOrden()"
-  (secondaryButtonClicked)="onExportar()"
+  [showSecondaryButton]="true"
+  secondaryButtonLabel="Exportar PDF"
+  secondaryButtonIcon="icon-download"
+  (secondaryButtonClicked)="onExportPDF()"
+  [showButtonExport]="true"
+  exportButtonLabel="Exportar CSV"
+  exportButtonIcon="icon-export"
+  (exportButtonClicked)="onExportCSV()"
   (filtersChange)="onFiltersChange($event)"
   (applyFilters)="onApply()"
 />
@@ -1257,15 +1288,64 @@ Zona de arrastrar y soltar (Drag & Drop) para la **recepción de imágenes** de
 ### 36. Gráficas y Visualización: ECharts (Charts)
 
 **Qué hacen**  
-Subsistema de envolturas especializadas (wrappers) cimentado sobre `apache/echarts` para habilitar representaciones informativas sólidas a tamaño responsivo y dinámico, tolerando cambios visuales e interacciones al ocultarse o scroll.
+Subsistema de envolturas especializadas (wrappers) cimentado sobre `apache/echarts` para habilitar representaciones informativas sólidas a tamaño responsivo y dinámico. Incluye soporte para interactividad, visualizaciones jerárquicas, tablas expandibles y una paleta de 20 colores.
+
+**Componentes disponibles:**
+
+#### `lib-bar-chart`
+Gráfica de barras estandarizada con soporte para una o múltiples series.
+- **Inputs:**
+  - `data: ChartItem[]` – Datos para gráfica de barra simple.
+  - `multiSeries: BarSeries[]` – (Opcional) Permite mostrar grupos de barras por cada sección.
+- **Interfaces:**
+  ```ts
+  export interface BarSeries {
+    name: string;   // Nombre de la serie (aparece en la leyenda)
+    data: number[]; // Valores numéricos
+    color?: string; // Color personalizado opcional
+  }
+  ```
+
+#### `lib-donut-chart`
+Gráfica de anillo con capacidad de **Drill-down**, navegación interna y leyenda automática.
+- **Inputs:**
+  - `data: ChartItem[]` – Datos granulares (ej. códigos de infracción `D01`, `D02`, `C01`).
+  - `drillDown: boolean = false` – Activa el modo de exploración jerárquica.
+  - `groupByPrefix: number = 0` – Agrupa los datos por los primeros N caracteres de la etiqueta (ej. `1` para agrupar por letras iniciales).
+- **Comportamiento:**
+  - Al activar el drill-down, el componente muestra inicialmente los totales agrupados y permite al usuario pulsar una sección para "abrirla" y ver su desglose, con un botón de "Volver" integrado.
+  - Cuando hay **más de 10 ítems**, los labels de las porciones se ocultan automáticamente y se muestra una **leyenda horizontal scrollable** en la parte inferior.
+
+#### `lib-table-chart`
+Tabla expandible integrada en el dashboard de gráficas, con paginación y estado "sin datos".
+- **Inputs:**
+  - `title: string = 'Table Chart'` – Título del encabezado.
+  - `columns: TableColumn[]` – Definición de columnas (misma interfaz que `lib-table`).
+  - `data: TableRow[]` – Datos de la tabla.
+  - `totalItems: number = 0` – Total de registros (para la paginación).
+  - `itemsPerPage: number = 10` – Registros por página en modo expandido.
+- **Comportamiento:**
+  - **Colapsado**: Muestra los primeros **8 registros** sin paginación.
+  - **Expandido**: Ocupa pantalla completa (90vw × 90vh) con overlay, muestra **10 registros** por página con `lib-pagination`.
+  - Si `data` está vacío muestra `lib-not-found-section` centrado.
 
-**Componentes y Selectores disponibles:**
-- `lib-bar-chart` – Muestra gráficas de barras estandarizadas.
-- `lib-line-chart` – Muestra líneas analíticas en evolución.
-- `lib-donut-chart` – Gráfica de anillo jerarquizada.
+**Ejemplo:**
+
+```html
+<lib-table-chart
+  title="Tabla de Comparendos"
+  [columns]="columns"
+  [data]="comparendosData"
+  [totalItems]="comparendosData.length" />
+```
+
+#### Otros:
+- `lib-line-chart` – Líneas analíticas en evolución.
 - `lib-heatmap` – Mapa de concentración de calor basado en coordenadas / categorías.
-- `lib-map-geo` – Gráfico de puntos de calor sobre mapa geofísico interactivo con tooltips nativos.
+- `lib-map-geo` – Puntos de calor sobre mapa geofísico interactivo.
 
-**Inputs habituales:**
-Generalmente aceptan su interfaz representativa principal `[data]="..."` o su objeto de ajuste avanzado `[config]="..."`.
-
+**Paleta de colores (20 colores):**
+La paleta compartida por todas las gráficas incluye: olive green, lime soft, burgundy, deep teal, sage, chartreuse, sky blue, light steel blue, warm amber, terracotta, dusty purple, jade green, coral clay, charcoal slate, sand gold, mint sage, rose mauve, navy steel, peach y spring green.
+
+**Eventos Globales:**
+Todos los componentes de gráficas emiten el evento `chartClick`, permitiendo capturar clics en secciones específicas para lógicas personalizadas en el padre.