Belchertown Skin - Indice de calidad de aire Europeo EAQI

[dtalens]

Pedí ayuda para añadir colores o marcar de alguna manera los niveles del Índice Europeo de calidad del Aire (EAQI) y el resultado lo podéis consultar aquí:
https://github.com/poblabs/weewx-belchertown/issues/682

Se requiere editar el archivo "belchertown.js.tmpl"

1. Modificar la línia 2356 (puede que sea otra cercana, en mi caso la 2381) con:

Código: [Seleccionar]

belchertown_debug(options.chart.renderTo + ": " + s.obsType + " is on yAxis " + this_yAxis);
2. Añadir debajo lo siguiente ("pm2_5" se debe modificar para indicar el nombre de la variable para mostrar, en mi caso "pm2_5"):

Código: [Seleccionar]

                // yAxis AQI PlotLines
                if (s.obsType == "pm2_5") {
                    belchertown_debug('yAxis plotLines true');

                    var yAxis_plotlines = [];

                    // PM25 EAQI (European Air Quality Index) levels, labels and belchertown's colors
                    // https://airindex.eea.europa.eu/Map/AQI/Viewer/
                    const eaqi = [{
                        color: "#71bc3c",
                        label: "Buena",
                        level: 10
                    }, {
                        color: "rgba(255,174,0,0.9)",
                        label: "Razonablemente buena",
                        level: 20
                    }, {
                        color: "rgba(255,127,0,1)",
                        label: "Regular",
                        level: 25
                    }, {
                        color: "rgba(255,69,69,1)",
                        label: "Desfavorable",
                        level: 50
                    }, {
                        color: "#b16286",
                        label: "Muy desfavorable",
                        level: 75
                    }];

                    for (i = 0; i < eaqi.length; i++) {
                        yAxis_plotlines.push({
                            color: eaqi[i].color,
                            value: eaqi[i].level,
                            label: {
                                text: eaqi[i].label,
                                x: 0,
                                y: 15,
                                style: {
                                    color: eaqi[i].color,
                                    fontWeight: 'bold'
                                }
                            },
                            width: 3,
                            dashStyle: 'longdashdot',
                            zIndex : 3
                        });
                    }

                    // Add plotlines to yAxis options
                    options.yAxis[this_yAxis].plotLines = yAxis_plotlines;
                    belchertown_debug(yAxis_plotlines);
                }


Aquí el resultado:


Referencias:
EAQI: https://airindex.eea.europa.eu/Map/AQI/Viewer/
Índice Nacional de Calidad del Aire: http://www.ica.miteco.es/

[B.Santiago]

Muy bien. Aunque en el ejemplo que citas (The Idea) tal vez haya más "morado" de lo necesario.

Aparentemente son los mismos que se especifican aquí:

https://www.miteco.gob.es/es/calidad-y-evaluacion-ambiental/temas/atmosfera-y-calidad-del-aire/calidad-del-aire/ICA.aspx

 cuyos códigos normalizados RGB son los que también aparecen en el enlace citado y añado en el adjunto.

[B.Santiago]

--Si se me permite una observación personal, al margen de organismos oficiales y de Meteoclimatic, yo cambiaría la denominación de las categorías:

Excelente.
Buena.
Mediocre.
Mala.
Muy mala.
Pésima.

Creo que de este modo se facilitaría al público en general la comprensión de lo que expresa la escala cromática del índice, la calidad del aire.

Pero las autoridades sabrán. O no.

[dtalens]

Muy bien. Aunque en el ejemplo que citas (The Idea) tal vez haya más "morado" de lo necesario.

Aparentemente son los mismos que se especifican aquí:

https://www.miteco.gob.es/es/calidad-y-evaluacion-ambiental/temas/atmosfera-y-calidad-del-aire/calidad-del-aire/ICA.aspx

 cuyos códigos normalizados RGB son los que también aparecen en el enlace citado y añado en el adjunto.

Al final voy a eliminar las referencias a los niveles EAQI de la gráfica de valores instantáneos de PM2,5 ya que en realidad el EAQI para partículas se estima en base a valores medios diarios. Lo dejaré en los gráficos semanales y mensuales en las cuales si tengo medias diarias.


Los códigos de colores HTML se pueden obtener de la página https://airindex.eea.europa.eu/Map/AQI/Viewer/.

Código: [Seleccionar]

Turquesa: #50f0e6
Verde: #50ccaa
Amarillo: #f0e641
Rojo: #ff5050
Rojo oscuro: #960032
Morado: #7D2181
Gris (sin datos): #6f6f6fAunque los colores utilizados para las lineas son los predeterminados del skin por el tema de no romper el esquema de colores de la página. 


Las denominaciones de las categorías oficiales no me acaban de gustar, me parecen una traducción del inglés demasiado literal. La opción que propone me parece más que aceptable.

Saludos,