Cómo

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

PorMarcos agosto 28, 2021agosto 28, 2021

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:

    constructor(props) {
        super(props);
        moment.locale(this.props.userLocale)              
    }

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:

    constructor(props) {
        super(props);
      require('moment/locale/' + this.props.userLocale)
    }

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:

    setLocale() {
        switch (this.props.userLocale) {
            case 'es':
                require('moment/locale/es');
                break;
                
            default:
                require('moment/locale/en-ca');
                break;
        }
    }

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.

parser: (date) => { moment.locale(this.props.userLocale); return moment(date)}

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.

Sin sentido

horario de verano y javascript

PorMarcos marzo 3, 2021marzo 3, 2021

Escenario Con el fin de dibujar una gráfica cronológica, necesito generar en javascript una matriz de fechas a partir de una de inicio y otra de fin. En stackoverflow doy con una solución que considero sencilla e inteligible:

const getDaysArray = function (start, end) {
    let days = []
    let day;
    for (days, day = new Date(start); day <= end; day.setDate(day.getDate() + 1)) {
        days.push(day.toISOString().split('T')[0]);
    }
    return days;
};

const getDaysArray = function (start, end) {

let days = []

let day;

for (days, day = new Date(start); day <= end; day.setDate(day.getDate() + 1)) {

days.push(day.toISOString().split('T')[0]);

}

return days;

};

Tras modificarla lo justo y probarla compruebo que devuelve una matriz de fechas de tipo '2019-02-01','2019-02-02','2019-02-03','2019-02-04'……

Sin sentido

Me obligaron a hacerlo
PorMarcos septiembre 28, 2012marzo 29, 2016

Si eres programador y trabajas por cuenta ajena, probablemente alguna vez te haya tocado implantar una solución o funcionalidad en contra de lo que consideras básicos principios del sentido común. Después de todo, el cliente paga para que se haga lo que dice, independientemente de estándares, usabilidad o costes inútiles.

Leer más Me obligaron a hacerlo
Cómo

Panasonic RR-US361
PorMarcos enero 22, 2023

Escenario Panasonic RR-US361 es una grabadora portátil de audio que, por la información que he podido recopilar, debe datar de principios de siglo. La utilizo de vez en cuando para grabar mis sueños. Me resulta más cómodo que el móvil por dos razones. Evito la luz de la pantalla, y no corro el riesgo de…

Leer más Panasonic RR-US361
Cómo

Cómo NO hacer iteraciones anidadas en thymeleaf 3
PorMarcos junio 27, 2021junio 27, 2021

Escenario Me han pedido que integre en una nueva aplicación una funcionalidad de otra ya existente. No es la primera vez que me ha tocado hacerlo. Suele ser un trabajo tedioso basado en continuos copia y pega y frecuentes refactorizaciones. Una de la vistas que debo importar en la nueva aplicación muestra una tabla con…

Leer más Cómo NO hacer iteraciones anidadas en thymeleaf 3
Cómo | Tutorial

Traducción de variables en javascript
PorMarcos marzo 22, 2019marzo 22, 2019

Escenario Estoy trabajando en una aplicación multi-lenguaje desarrollada con la plataforma spring boot. Para quien no conozca esta plataforma de desarrollo, spring boot te permite gestionar varios lenguajes gracias a un sistema que utiliza ficheros de tipo propiedades para almacenar las traducciones. Los nombres de estos ficheros han de respetar la siguiente convención, messages_{código ISO…

Leer más Traducción de variables en javascript
Cómo

Tablas con nombre reservado en entidades en Spring Boot
PorMarcos febrero 28, 2020septiembre 13, 2020

Escenario Tenemos una aplicación corriendo sobre Spring Boot que usa Hibernate como ORM. Una de las tablas se llama Group, se utiliza para almacenar los distintos grupos a los que puede pertenecer un usuario. Problema La entidad de java que representa la tabla de grupos tiene esta pinta:

Java

@Entity public class Group { private String name; private String description;; // Setters y Getters omitidos. }

1
2
3
4
5
6
7
8
9
10

@Entity
public class Group
{
    private String name;

    private String description;;

// Setters y Getters omitidos.

}

Sabía que group es una palabra…

Leer más Tablas con nombre reservado en entidades en Spring Boot

Escenario

Problema

Publicaciones Similares

Deja una respuesta Cancelar la respuesta