data-suggestions 1.0.0

package/README.md

@@ -0,0 +1,241 @@
+# 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:
+
+```json
+{
+  "$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:
+
+```bash
+ng build data-suggestions
+```
+
+Verifica que los assets se han copiado correctamente:
+
+```bash
+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:
+
+```json
+{
+  "name": "data-suggestions",
+  "version": "0.0.2"
+}
+```
+
+Después de cambiar la versión, vuelve a compilar:
+
+```bash
+ng build data-suggestions
+```
+
+---
+
+## Empaquetar la librería (npm pack)
+
+En la carpeta de salida del build:
+
+```bash
+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:
+
+```bash
+npm install /ruta/al/workspace/dist/data-suggestions/data-suggestions-0.0.2.tgz
+```
+
+Comprueba que la instalación se ha realizado correctamente:
+
+```bash
+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:
+
+```json
+"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:
+
+```bash
+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)
+
+```ts
+import { Component } from '@angular/core';
+import { DataSuggestionsTableComponent } from 'data-suggestions';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [DataSuggestionsTableComponent],
+  template: `
+    <data-suggestions-table [dataset]="dataset" [goal]="goal"> </data-suggestions-table>
+  `,
+})
+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.
+
+```ts
+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
+
+```html
+<data-suggestions-table [dataset]="dataset" [goal]="goal"> </data-suggestions-table>
+```
+
+Inputs:
+
+- `dataset`: `{ key: string; value: number }[]`
+- `goal`: `string`

package/assets/recomendaciones/count-times-a-certain-value-is-exceeded.json

@@ -0,0 +1,56 @@
+[
+  {
+    "visualVariable": "Hover behavior",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Horizontal orientation"
+  },
+  {
+    "visualVariable": "Spacing between bars",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Close bars"
+  },
+  {
+    "visualVariable": "Labels",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Do not label"
+  },
+  {
+    "visualVariable": "Color palette",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Random or ordered"
+  },
+  {
+    "visualVariable": "Axis maximum",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Maximum +20%"
+  },
+  {
+    "visualVariable": "Number of steps",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Medium number of steps"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Opaque"
+  },
+  {
+    "visualVariable": "Grid lines",
+    "sampleSize": "10–19",
+    "variability": "Moderate",
+    "recommendation": "Without grid lines"
+  }
+]

package/assets/recomendaciones/count-times-does-not-exceed-a-certain-value.json

@@ -0,0 +1,62 @@
+[
+  {
+    "visualVariable": "Hover behavior",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Spacing between bars",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Very close or very separated"
+  },
+  {
+    "visualVariable": "Labels",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Axis maximum",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Real maximum"
+  },
+  {
+    "visualVariable": "Number of steps",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Order",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Transparent"
+  },
+  {
+    "visualVariable": "Grid lines",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  }
+]

package/assets/recomendaciones/count-times-that-a-certain-value-is-repeated.json

@@ -0,0 +1,158 @@
+[
+  {
+    "visualVariable": "Border color",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Border color",
+    "sampleSize": "6–9",
+    "variability": "High",
+    "recommendation": "Light border"
+  },
+  {
+    "visualVariable": "Border color",
+    "sampleSize": "6–9",
+    "variability": "Moderate",
+    "recommendation": "Dark border"
+  },
+  {
+    "visualVariable": "Hover behavior",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Different color or highlighted tone"
+  },
+  {
+    "visualVariable": "Hover behavior",
+    "sampleSize": "6–9",
+    "variability": "Moderate",
+    "recommendation": "Highlight color"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Vertical"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Vertical"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Horizontal"
+  },
+  {
+    "visualVariable": "Spacing between bars",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Separated or widely spaced"
+  },
+  {
+    "visualVariable": "Spacing between bars",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Close or separated"
+  },
+  {
+    "visualVariable": "Spacing between bars",
+    "sampleSize": "6–9",
+    "variability": "Moderate",
+    "recommendation": "Separated or widely spaced"
+  },
+  {
+    "visualVariable": "Labels",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Color palette",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Color palette",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Ordered or fully distinct"
+  },
+  {
+    "visualVariable": "Axis maximum",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Real maximum"
+  },
+  {
+    "visualVariable": "Axis maximum",
+    "sampleSize": "11–20",
+    "variability": "High",
+    "recommendation": "30% of the maximum"
+  },
+  {
+    "visualVariable": "Number of steps",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Number of steps",
+    "sampleSize": "≤5",
+    "variability": "Moderate",
+    "recommendation": "Few steps"
+  },
+  {
+    "visualVariable": "Order",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Order",
+    "sampleSize": "11–20",
+    "variability": "High",
+    "recommendation": "Unordered"
+  },
+  {
+    "visualVariable": "Order",
+    "sampleSize": "5–10",
+    "variability": "High",
+    "recommendation": "Unordered"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": "11–20",
+    "variability": "High",
+    "recommendation": "Transparent"
+  },
+  {
+    "visualVariable": "Grid lines",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Grid lines",
+    "sampleSize": "11–20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Grid lines",
+    "sampleSize": "5–10",
+    "variability": "Moderate",
+    "recommendation": "With grid lines"
+  }
+]

package/assets/recomendaciones/highlight-a-value.json

@@ -0,0 +1,92 @@
+[
+  {
+    "visualVariable": "Border color",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Dark border or no border"
+  },
+  {
+    "visualVariable": "Hover behavior",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Highlight bar color"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Bar direction",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Spacing between bars",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "No spacing"
+  },
+  {
+    "visualVariable": "Labels",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Use labels"
+  },
+  {
+    "visualVariable": "Labels",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Number of steps",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Number of steps",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Medium steps"
+  },
+  {
+    "visualVariable": "Order",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Ordered"
+  },
+  {
+    "visualVariable": "Order",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Opacity",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  },
+  {
+    "visualVariable": "Grid lines",
+    "sampleSize": ">20",
+    "variability": "High",
+    "recommendation": "With grid lines"
+  },
+  {
+    "visualVariable": "Grid lines",
+    "sampleSize": "10–19",
+    "variability": "High",
+    "recommendation": "Indifferent"
+  }
+]