Data Suggestions Library

Librería Angular para generar y mostrar sugerencias de visualización a partir de:

• un conjunto de datos (dataset)
• un objetivo de comunicación (goal)

La librería incluye ficheros JSON de recomendaciones y los carga desde la aplicación consumidora mediante /assets/....

Requisitos

• Angular (standalone o con módulos)
• Node.js y npm

Estructura de assets

Los ficheros de recomendaciones se encuentran en la librería en la siguiente ruta:

projects/data-suggestions/src/assets/recomendaciones/*.json

Ejemplo:

projects/data-suggestions/src/assets/recomendaciones/destacar-valores-mas-altos.json

Build de la librería (incluyendo assets)

1) Configurar ng-packagr para empaquetar assets

Asegúrate de tener este archivo en la librería:

projects/data-suggestions/ng-package.json

con el siguiente contenido:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/data-suggestions",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": ["src/assets"]
}

2) Compilar la librería

Desde la raíz del workspace:

ng build data-suggestions

Verifica que los assets se han copiado correctamente:

ls dist/data-suggestions/assets/recomendaciones | head

Versionado de la librería

La versión del paquete se define en el package.json fuente de la librería:

projects/data-suggestions/package.json

Ejemplo:

{
  "name": "data-suggestions",
  "version": "0.0.2"
}

Después de cambiar la versión, vuelve a compilar:

ng build data-suggestions

Empaquetar la librería (npm pack)

En la carpeta de salida del build:

cd dist/data-suggestions
npm pack

Esto generará un archivo similar a:

data-suggestions-0.0.2.tgz

Instalar la librería en una aplicación Angular

En la aplicación Angular que vaya a consumir la librería:

npm install /ruta/al/workspace/dist/data-suggestions/data-suggestions-0.0.2.tgz

Comprueba que la instalación se ha realizado correctamente:

npm ls data-suggestions

Configuración de assets en la aplicación consumidora (OBLIGATORIO)

Para que la aplicación pueda acceder a los JSON de recomendaciones, es necesario configurar la copia de assets desde la librería.

Edita el archivo angular.json de la aplicación consumidora y añade la siguiente entrada en:

projects -> <NOMBRE_APP> -> architect -> build -> options -> assets

Ejemplo completo:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/data-suggestions/assets",
    "output": "assets"
  }
]

Después de modificar angular.json, reinicia el servidor de desarrollo:

CTRL+C
ng serve

Comprobación de assets

Abre en el navegador (ajusta el nombre del fichero si es necesario):

http://localhost:4200/assets/recomendaciones/destacar-valores-mas-altos.json

Si el fichero se muestra correctamente, la configuración es correcta.

Uso de la librería (Angular standalone)

import { Component } from '@angular/core';
import { DataSuggestionsTableComponent } from 'data-suggestions';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DataSuggestionsTableComponent],
  template: `
    <chart-gen [dataset]="dataset" [goal]="goal"> </chart-gen>
  `,
})
export class AppComponent {
  dataset = [
    { key: 'A', value: 10 },
    { key: 'B', value: 30 },
    { key: 'C', value: 20 },
  ];

  goal = 'destacar-valores-mas-altos';
}

HttpClient en aplicaciones standalone

Si la librería utiliza HttpClient, la aplicación consumidora debe proveerlo explícitamente.

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()],
};

Problemas comunes

Error 404 al cargar los JSON

• Verifica la configuración de assets en angular.json.
• Reinicia ng serve tras cualquier cambio.

Cambios en la librería no se reflejan

• Incrementa la versión.
• Rebuild + npm pack.
• Reinstala el .tgz.

API del componente

<chart-gen [dataset]="dataset" [goal]="goal"> </chart-gen>

Inputs:

• dataset: { key: string; value: number }[]
• goal: string