vs-echarts Library

Biblioteca de componentes de visualización de datos basada en Apache ECharts para la suite Visionaris.

🚀 Características

• Arquitectura de Builders: Separación total entre la configuración de ECharts y los componentes de Angular.
• Especialistas: Componentes dedicados para tipos específicos de gráficos (Ring, Line).
• Responsive: Gestión automática del redimensionamiento.
• Interactividad: Soporte nativo para Cross-filtering de Visionaris.

📦 Instalación y Configuración

1. Instalar la librería en tu proyecto Angular usando npm:

npm install @visionaris-bruno/vs-echarts

2. Registrar el proveedor global de ECharts en la raíz de tu aplicación (main.ts / app.config.ts para aplicaciones standalone o app.module.ts para aplicaciones basadas en módulos):

Standalone (app.config.ts):

import { provideVSEcharts } from '@visionaris-bruno/vs-echarts';

export const appConfig: ApplicationConfig = {
  providers: [
    // otros proveedores...
    provideVSEcharts()
  ]
};

Módulos (app.module.ts):

import { provideVSEcharts } from '@visionaris-bruno/vs-echarts';

@NgModule({
  // ...
  providers: [
    // otros proveedores...
    provideVSEcharts()
  ]
})
export class AppModule { }

🛠️ Uso Básico

import { EchartsRingComponent } from '@visionaris-bruno/vs-echarts';

// En tu componente wrapper
@Component({
  standalone: true,
  imports: [EchartsRingComponent],
  template: `
    <vs-echarts-ring 
      [data]="miData" 
      [palette]="miPaleta"
      (chartClick)="manejarClick($event)">
    </vs-echarts-ring>
  `
})

🌍 Configuración de Idiomas (Locales)

La librería tiene registrados por defecto varios locales para ECharts (ES, DE, FR, IT, PT-br, PT). El consumidor puede configurar el locale/idioma de dos formas:

1. Configuración Estática (Inicialización)

Se puede definir el valor inicial del renderer y del locale sobreescribiendo el token VS_ECHARTS_CONFIG en la lista de proveedores de la aplicación (app.config.ts o app.module.ts):

import { VS_ECHARTS_CONFIG } from '@visionaris-bruno/vs-echarts';

// En app.config.ts o app.module.ts
providers: [
  provideVSEcharts(),
  {
    provide: VS_ECHARTS_CONFIG,
    useValue: {
      renderer: 'svg', // 'svg' o 'canvas'
      locale: 'ES'     // 'ES', 'DE', 'FR', 'IT', 'PT-br', etc.
    }
  }
]

2. Configuración Dinámica (En tiempo de ejecución)

Si la aplicación permite cambiar de idioma dinámicamente, se puede inyectar el servicio VSEchartsConfigService y llamar a su método setLocale(language) pasándole el código de idioma del usuario (como 'es', 'en', 'pt', etc.). El servicio se encargará de mapear y aplicar la configuración adecuada de ECharts:

import { VSEchartsConfigService } from '@visionaris-bruno/vs-echarts';

@Component({ ... })
export class AppComponent {
  constructor(private vsEchartsConfigService: VSEchartsConfigService) {}

  onLanguageChange(lang: string) {
    // lang puede ser: 'es', 'en', 'us', 'de', 'fr', 'it', 'pt', 'br'
    this.vsEchartsConfigService.setLocale(lang);
  }
}

🔤 Traducciones (ngx-translate)

La librería utiliza @ngx-translate/core para traducir las etiquetas internas del lado del cliente en los gráficos (por ejemplo, el tooltip estadístico de los diagramas de caja/boxplot).

Todos los textos que se pueden internacionalizar se encuentran bajo el espacio de nombres (scope) "VS_ECHARTS".

Para ver el listado de claves de traducción disponibles y cómo estructurar los archivos JSON en el proyecto consumidor, consulta la guía de Traducciones de vs-echarts.

📖 Documentación Detallada

• Arquitectura y Patrón Builder
• Traducciones y Claves i18n

💻 Desarrollo Local

Para desarrollo local y vinculación de código fuente (hot-reload), consulta la Guía de Desarrollo Local.