Chart.js: cómo cambiar el idioma (locale) dinámicamente

Escenario

Por un lado una aplicación que permite al usuario personalizar el idioma del sitio. Por otro, una gráfica de tipo línea temporal generada con la biblioteca Chart.js, integrada en un módulo de React con react-chartjs-2.

Problema

Según un comentario de un usuario de Stackoverflow, basta con un require('moment/min/moment-with-locales'); y establecer el valor de la locale con moment.locale('es'). Es necesario que la definamos antes de que se pinte la gráfica. De ahí que la incluyera en el primer método del ciclo de vida de React: Pero la figura no se entera del cambio de idioma, y sigue mostrando las fechas en el formato por defecto. Sin embargo si, por ejemplo, incluyo el js con las traducciones de las fechas, si que lo tiene en cuenta, import 'moment/locale/es'. Se me ocurre entonces que podría construir dinámicamente la inclusión del fichero con require: Ahora me topo con browserify, el bundler de javascript, que escupe el error siguiente: Uncaught Error: Cannot find module 'moment/locale/es' El problema es debido a que browserify no permite requires dinámicos (issue en GitHub). Una manera de solventarlo es incluyendo los requires en un bloque switch: E invocar setLocale en el constructor. Aunque funcionaba, la solución me parecía fea. Leyendo la documentación de chart.js la opción parser permite pasarle una función que devuelve un objeto de moment. Para que funcione hay que incluir el javascript con todas las traducciones require("moment/min/locales.min");, que pesa más de 300 KiB. Una vez importadas todas las locales, me digo que lo más sencillo es un moment.locale(this.props.userLocale); en el constructor. La aplicación en cuestión solo la usamos dos usuarios, pero aun así 300KiB son muchos kilobytes. Al final he optado por incluir solo los ficheros de los dos idiomas que usa la web, por un total de 10KiB sin minificar.

Publicaciones Similares

  • Hibernate no puede resolver la propiedad…

    Escenario En una aplicación Spring Boot v2.3.4 hay dos entidades Balance y Shop. Una tienda (shop) puede tener varios saldos y un saldo (Balance) ha de estar relacionado con una tienda. Además existen panaderías (Bakery) y sastrerías (TailorShop) que extienden la clase Shop:

    Y necesito saber cuál es la fecha del…

  • Can’t connect to local MySQL server through socket

    Escenario No conseguimos conectarnos al servidor de mysql desde la propia máquina, pero sí remotamente. Cuando el cliente de MySQL se conecta a localhost, lo intenta usando un fichero socket en vez de el protocolo TCP/IP. Una manera pues de solucionar el problema es especificando la IP del host: mysql -uroot -p -h 127.0.0.1 Para solucionarlo de manera permanente,…

  • OsTicket y nginx

    Escenario Después de 5 años campando en un Ubuntu 16.04 ha llegado la hora de migrar la aplicación osTicket a un nuevo servidor. Para quien no la conozca osTicket es un sistema de incidencias que podemos desplegar en un servidor propio. La aplicación web cuenta con una herramienta que automáticamente detecta una diferencia de versiones…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *