Saltar al contenido
Marcos Peña
Menú
  • Acerca de…
Menú

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

Publicada el agosto 28, 2021agosto 28, 2021 por Marcos

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:
JavaScript
1
2
3
4
    constructor(props) {
        super(props);
        moment.locale(this.props.userLocale)              
    }
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:
JavaScript
1
2
3
4
    constructor(props) {
        super(props);
      require('moment/locale/' + this.props.userLocale)
    }
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:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
    setLocale() {
        switch (this.props.userLocale) {
            case 'es':
                require('moment/locale/es');
                break;
                
            default:
                require('moment/locale/en-ca');
                break;
        }
    }
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.
JavaScript
1
parser: (date) => { moment.locale(this.props.userLocale); return moment(date)}
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.

Deja una respuesta Cancelar la respuesta

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

Artículos

  • abril 2022
  • marzo 2022
  • febrero 2022
  • enero 2022
  • diciembre 2021
  • noviembre 2021
  • octubre 2021
  • septiembre 2021
  • agosto 2021
  • julio 2021
  • junio 2021
  • mayo 2021
  • abril 2021
  • marzo 2021
  • febrero 2021
  • enero 2021
  • diciembre 2020
  • noviembre 2020
  • octubre 2020
  • septiembre 2020
  • agosto 2020
  • julio 2020
  • junio 2020
  • mayo 2020
  • abril 2020
  • marzo 2020
  • febrero 2020
  • enero 2020
  • diciembre 2019
  • noviembre 2019
  • octubre 2019
  • septiembre 2019
  • agosto 2019
  • julio 2019
  • junio 2019
  • mayo 2019
  • abril 2019
  • marzo 2019
  • febrero 2019
  • enero 2019
  • noviembre 2018
  • octubre 2018
  • julio 2016
  • mayo 2016
  • abril 2016
  • agosto 2015
  • febrero 2014
  • junio 2013
  • febrero 2013
  • noviembre 2012
  • octubre 2012
  • septiembre 2012
  • abril 2012
  • enero 2012

Categorías

  • Cómo
  • Consejos
  • Hacks
  • Sin sentido
  • Tutorial

Etiquetas

apache API aws cache Centos Codeigniter EAC firefox flash freebsd freenas gmail Google guacamole java Javascript jQuery kubuntu Linux mysql nas4free nginx php plesk postfix python react rtorrent Seguridad sftp sonata-admin spring spring-boot sql ssh ssl symfony symfony2 symfony4 thymeleaf ubuntu vnc wget windows wine

Entradas recientes

  • Confirmación antes de apagar
  • cURL error 60: SSL certificate problem: unable to get local issuer certificate
  • Oracle JDK 7 is NOT installed.
  • ssh: connect to host: Connection refused
  • Restringir acceso a un bucket de AWS s3 por IP

Comentarios recientes

  • Marcos en Deobbing flash
  • Irosales en Deobbing flash
  • Instalación certificado SSL de un vendedor – Marcos Peña en Instala un certificado SSL en tres pasos
  • gerMdz en Cómo instalar un certificado letsencrypt para un sitio gestionado por Cloudflare
  • Jose Olalla en Cómo ampliar el espacio en disco en 1and1

Archivos

  • abril 2022
  • marzo 2022
  • febrero 2022
  • enero 2022
  • diciembre 2021
  • noviembre 2021
  • octubre 2021
  • septiembre 2021
  • agosto 2021
  • julio 2021
  • junio 2021
  • mayo 2021
  • abril 2021
  • marzo 2021
  • febrero 2021
  • enero 2021
  • diciembre 2020
  • noviembre 2020
  • octubre 2020
  • septiembre 2020
  • agosto 2020
  • julio 2020
  • junio 2020
  • mayo 2020
  • abril 2020
  • marzo 2020
  • febrero 2020
  • enero 2020
  • diciembre 2019
  • noviembre 2019
  • octubre 2019
  • septiembre 2019
  • agosto 2019
  • julio 2019
  • junio 2019
  • mayo 2019
  • abril 2019
  • marzo 2019
  • febrero 2019
  • enero 2019
  • noviembre 2018
  • octubre 2018
  • julio 2016
  • mayo 2016
  • abril 2016
  • agosto 2015
  • febrero 2014
  • junio 2013
  • febrero 2013
  • noviembre 2012
  • octubre 2012
  • septiembre 2012
  • abril 2012
  • enero 2012

Categorías

  • Cómo
  • Consejos
  • Hacks
  • Sin sentido
  • Tutorial

Meta

  • Acceder
  • Feed de entradas
  • Feed de comentarios
  • WordPress.org
© 2022 Marcos Peña | Funciona con Minimalist Blog Tema para WordPress