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

  • |

    Como (no) cambiar la batería de un Sennheiser mm100

    Aviso a navegantes: es la primera vez que manipulo un componente electrónico tan pequeño y delicado. Si comparto mi experiencia es por dejar documentado mi apaño, seguro que alguien más experimentado en estos menesteres lo haría de otra manera, o sea, bien. A mi favor tengo que decir que me ha valido y, bueno, me…

  • |

    ssh: connect to host: Connection refused

    Escenario Esta mañana ha ocurrido algo inexplicable, por lo menos, como suele pasar en este dominio, hasta que hemos dado con la solución; luego parecía obvio. Nos avisan que una de las máquinas de nuestra red negaba el acceso por SSH provocando el siguiente error:

    Lo primero que pensamos es podía estar relacionado con…

  • 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,…

  • |

    Cómo ampliar el espacio en disco en 1and1

    Escenario Hemos contratado un servidor dedicado en 1and1 (ubuntu 14.04) y al acceder por ssh constatamos que no disponemos de todo el espacio en disco disponible: $ df -hFilesystem Size Used Avail Use% Mounted onudev 3.9G 4.0K 3.9G 1% /devtmpfs 798M 592K 797M 1% /run/dev/md1 4.0G 990M 3.0G 25% /none 4.0K 0 4.0K 0% /sys/fs/cgroupnone 5.0M 0 5.0M 0% /run/locknone 3.9G 0 3.9G 0% /run/shmnone 100M 0 100M 0% /run/user/dev/mapper/vg00-usr 4.8G 1.3G 3.3G 28% /usr/dev/mapper/vg00-var 4.8G 812M 3.8G 18% /var/dev/mapper/vg00-home 4.8G 10M 4.6G 1% /home Objetivo Aumentar el espacio disponible para dar cabida a nuestros recursos. Solución Nota: sólo aplicable a sistemas linux Primer paso Comprobamos el espacio en disco real: ~$ sudo fdisk -lDisk /dev/sda: 240.1 GB, 240057409536 bytes255 heads, 63 sectors/track, 29185 cylinders, total 468862128 sectorsUnits = sectors of 1 * 512 = 512 bytesSector size (logical/physical): 512 bytes / 4096 bytesI/O size (minimum/optimal): 4096 bytes / 4096 bytesDisk identifier: 0x24e3fc12   Device Boot      Start         End      Blocks   Id  System/dev/sda1            2048     8390655     4194304   fd  Linux raid autodetect/dev/sda2         8390656    12584959     2097152   82  Linux swap / Solaris/dev/sda3        12584960   468862127   228138584   fd  Linux raid autodetect Segundo…

Deja una respuesta

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