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.

Cómo

OsTicket y nginx
PorMarcos junio 16, 2022

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…

Leer más OsTicket y nginx

Cómo

Sonata Admin: el calendario no se cierra

PorMarcos diciembre 5, 2020diciembre 5, 2020

Escenario Incluir un filtro de rango de fechas en SonataAdmin que use un calendario para seleccionar la fecha es más o menos fácil. Primero añadimos el siguiente bloque en el admin de nuestra entidad:

<?php

// src/Admin/InvoiceAdmin.php

namespace Acme\Admin;

use Sonata\AdminBundle\Admin\AbstractAdmin;
use Sonata\DoctrineORMAdminBundle\Filter\DateRangeFilter;
use Sonata\Form\Type\DateTimeRangePickerType;

/**
 *
 * @author Marcos
 */
class InvoiceAdmin extends AbstractAdmin
{
    protected function configureDatagridFilters(DatagridMapper $datagridMapper)
    {
        $datagridMapper->add('createdAt', DateRangeFilter::class, array(
            'label' => 'created_at',
            'field_type' => DateTimeRangePickerType::class
        ));
    }
}
</php>

<?php

// src/Admin/InvoiceAdmin.php

namespace Acme\Admin;

use Sonata\AdminBundle\Admin\AbstractAdmin;

use Sonata\DoctrineORMAdminBundle\Filter\DateRangeFilter;

use Sonata\Form\Type\DateTimeRangePickerType;

/**

* @author Marcos

class InvoiceAdmin extends AbstractAdmin

{

protected function configureDatagridFilters(DatagridMapper $datagridMapper)

{

$datagridMapper->add('createdAt', DateRangeFilter::class, array(

'label' => 'created_at',

'field_type' => DateTimeRangePickerType::class

));

}

</php>

Y la siguiente clave bajo form_themesen el fichero config/packages/twig.yaml:

twig:
    default_path: '%kernel.project_dir%/templates'
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
    form_themes:
        - '@SonataForm/Form/datepicker.html.twig'

twig:

default_path: '%kernel.project_dir%/templates'

debug: '%kernel.debug%'

strict_variables: '%kernel.debug%'

form_themes:

- '@SonataForm/Form/datepicker.html.twig'

Problema El calendario no se cierra automáticamente cuando se selecciona…

Cómo

Cómo modificar las cabeceras de una petición con nginx
PorMarcos febrero 13, 2019febrero 13, 2019

Escenario Hay que migrar una servicio API a una nueva plataforma. Esto implica rehacer el código desde cero y al mismo tiempo respetar todos los endpoints y aceptar las peticiones de los clientes del API tal y como se estaban mandando hasta ahora. Problema Las peticiones del cliente vienen mal formadas: se estaban mandado usando…

Leer más Cómo modificar las cabeceras de una petición con nginx
Cómo

Compilador C para Centos
PorMarcos octubre 12, 2012octubre 12, 2012

¿Necesitas un compilador C para tu distribución Centos? Muy fácil: yum install gcc gcc-c++ autoconf automake

Leer más Compilador C para Centos
Cómo

Actualización de Mautic 4
PorMarcos mayo 24, 2024

Este artículo va dedicado a aquellos administradores web entre cuyas labores se encuentre el mantenimiento de una instalación Mautic. Por eso no voy a explicar qué es Mautic: si no lo conoces, este artículo carece de interés. Vamos a partir de la base que el usuario UNIX, propietario de la instalación, es mautic y que…

Leer más Actualización de Mautic 4

Cómo

Valor por defecto en un combo de una plantilla de Thymeleaf

PorMarcos noviembre 30, 2021

Escenario En Thymleaf podemos usar el atributo th:field para enlazar la vista con el modelo:

<select th:field="*{currency}">
    <option th:value="'EUR'" th:text="Euros"></option>
    <option th:value="'USD'" th:text="Dolares"></option>
    <option th:value="'YEN'" th:text="Yenes"></option>
</select>

</select>

En caso de que hubiéramos cargado estos datos del servidor, nuestro select tendría esta pinta:

<select th:field="*{currency}">
    <option th:each="currency : ${currencies}" th:value="${currency}" th:text="${currency}">
    </option>
</select>

</option>

</select>

Problema ¿Qué pasa si queremos seleccionar una divisa por defecto? En el caso de que fuera el euro tendríamos que hacer algo así,…

Escenario

Problema

Publicaciones Similares

Deja una respuesta Cancelar la respuesta