@visionaris-bruno/vs-echarts 8.6.1 → 9.0.4

package/README.md

@@ -8,14 +8,42 @@ Biblioteca de componentes de visualización de datos basada en **Apache ECharts*
 - **Responsive**: Gestión automática del redimensionamiento.
 - **Interactividad**: Soporte nativo para Cross-filtering de Visionaris.
 
-## 📦 Instalación
+## 📦 Instalación y Configuración
 
-Para instalar la librería en tu proyecto Angular, utiliza npm:
+1. Instalar la librería en tu proyecto Angular usando npm:
 
 ```bash
 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`):**
+```typescript
+import { provideVSEcharts } from '@visionaris-bruno/vs-echarts';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // otros proveedores...
+    provideVSEcharts()
+  ]
+};
+```
+
+**Módulos (`app.module.ts`):**
+```typescript
+import { provideVSEcharts } from '@visionaris-bruno/vs-echarts';
+
+@NgModule({
+  // ...
+  providers: [
+    // otros proveedores...
+    provideVSEcharts()
+  ]
+})
+export class AppModule { }
+```
+
 ## 🛠️ Uso Básico
 
 ```typescript
@@ -35,9 +63,58 @@ import { EchartsRingComponent } from '@visionaris-bruno/vs-echarts';
 })
 ```
 
+## 🌍 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`):
+
+```typescript
+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:
+
+```typescript
+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](docs/translations.md).
+
 ## 📖 Documentación Detallada
 
 - [Arquitectura y Patrón Builder](docs/architecture.md)
+- [Traducciones y Claves i18n](docs/translations.md)
 
 ## 💻 Desarrollo Local