v5.13.4: 🛠️ 🎨 Py 3.10 + minor Vax UI change (#79)

* Update Flask-Sitemap requirements to work with Python 3.10 * Use vax charts id to inject spinner HTML before sending the ajax * Add highcharts accessibility module
fabriziomiano · Mar 20, 2023 · aad630e · aad630e
1 parent b8bf800
commit aad630e
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ A simple dashboard to display and monitor the official data of the COVID-19 outb
 
 
 ## For developers
-The WebApp requires Python 3.8+ and reads the data from a mongoDB. It employs a Flask server with `gunicorn` in front of it.
+The WebApp requires Python 3.10 and reads the data from a mongoDB. It employs a Flask server with `gunicorn` in front of it.
 Furthermore, it employs Flask-babel for the italian translation, as English is set as primary language. 
 The script `make_pot.sh` creates the files needed by Babel for the translations.
 A `Batch` version of the script for Windows users is provided. 

diff --git a/README_IT.md b/README_IT.md
@@ -17,7 +17,7 @@ Una semplice dashboard per la visualizzazione e il monitoraggio dei dati ufficia
 **Dati ufficiali sui vaccini: [repository ufficiale Developers Italia](https://github.com/italia/covid19-opendata-vaccini)**
 
 ## Per gli sviluppatori
-La WebApp gira su Python3.8+, legge i dati da mongoDB e usa un server 
+La WebApp gira su Python3.10, legge i dati da mongoDB e usa un server 
 Flask e `gunicorn` davanti.
 Viene usato Flask-babel per la traduzione italiana dell'app, poiché l'inglese è scelto come lingua di default. 
 Lo script `make_pot.sh` crea i file necessari a babel per le traduzioni.

diff --git a/app/static/js/vaccines-charts.js b/app/static/js/vaccines-charts.js
@@ -1,20 +1,20 @@
-let baseUrl = '/api/vax_charts/'
+let spinnerHTML = '<div class="spinner-grow text-primary" role="status"><span class="sr-only">Loading...</span></div>';
+let baseUrl = '/api/vax_charts/';
 if (!REGIONS.includes(area)) {
 
     // Administrations per region
     $.ajax(baseUrl + 'region', {
         dataType: 'json',
         cache: false,
         beforeSend: function () {
-            $('#vax-region-loading-spinner').show();
+            $('#chart-admins-per-region').html(spinnerHTML);
         },
         success: function (adminsPerRegion) {
             let firstAdminsPerRegionData = adminsPerRegion.first;
             let secondAdminsPerRegionData = adminsPerRegion.second;
             let boosterAdminsPerRegionData = adminsPerRegion.booster;
             let populationData = adminsPerRegion.population;
             let adminsPerRegionCategories = adminsPerRegion.categories;
-            $('#vax-region-loading-spinner').hide();
             $('#chart-admins-per-region').highcharts({
                 chart: {
                     type: 'bar',
@@ -83,10 +83,9 @@ if (!REGIONS.includes(area)) {
         dataType: 'json',
         cache: false,
         beforeSend: function () {
-            $('#vax-timeseries-loading-spinner').show();
+            $('#chart-admins-timeseries').html(spinnerHTML);
         },
         success: function (adminsTimeseriesData) {
-            $('#vax-timeseries-loading-spinner').hide();
             // Vax time series for a given area
             adminsTimeseriesData.data = adminsTimeseriesData.data.map(function (o, i) {
                 o.visible = i <= 2;
@@ -161,7 +160,7 @@ $.ajax(baseUrl + 'age', {
     dataType: 'json',
     cache: false,
     beforeSend: function () {
-        $('#vax-age-loading-spinner').show();
+        $('#chart-admins-per-age').html(spinnerHTML);
     },
     data: {
         area: area
@@ -173,7 +172,6 @@ $.ajax(baseUrl + 'age', {
         let populationData = adminsPerAge.population;
         let adminsPerAgeCategories = adminsPerAge.categories;
         let ageDict = adminsPerAge.age_dict;
-        $('#vax-age-loading-spinner').hide();
         $('#chart-admins-per-age').highcharts({
             chart: {
                 type: 'bar'
@@ -223,13 +221,12 @@ $.ajax(baseUrl + 'provider', {
     dataType: 'json',
     cache: false,
     beforeSend: function () {
-        $('#vax-provider-loading-spinner').show();
+        $('#chart-pie-providers').html(spinnerHTML);
     },
     data: {
         area: area
     },
     success: function (adminsPerProvider) {
-        $('#vax-provider-loading-spinner').hide();
         $('#chart-pie-providers').highcharts({
             chart: {
                 plotBackgroundColor: null,

diff --git a/app/templates/pandemic/layout.html b/app/templates/pandemic/layout.html
@@ -18,6 +18,7 @@
 <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <!-- Highcharts -->
 <script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
 <script src="https://code.highcharts.com/highcharts-more.js"></script>
 <script src="https://code.highcharts.com/themes/dark-unica.js"></script>
 <script src="https://code.highcharts.com/modules/exporting.js"></script>

diff --git a/app/templates/vaccines/charts.html b/app/templates/vaccines/charts.html
@@ -3,29 +3,16 @@
     <div class="row">
         <div class="col-12 col-md-12 col-lg-12 col-xl-6">
             <div class="card shadow" style="border: none">
-                <div class="row bg-dark h-100 justify-content-center align-items-center">
-                    <div id='vax-age-loading-spinner'
-                         class="spinner-grow text-primary" role="status">
-                        <span class="sr-only">Loading...</span>
-                    </div>
-                    <div id="chart-admins-per-age"
-                         style="border: none; width:100%; height: 450px; margin: 0 auto">
-                    </div>
+                <div class="row bg-dark h-100 justify-content-center align-items-center flex-fill">
+                    <div id="chart-admins-per-age" class="d-flex flex-fill justify-content-center align-items-center" style="border: none; width:100%; height: 450px; margin: 0 auto"></div>
                 </div>
             </div>
         </div>
 
         <div class="col-12 col-md-12 col-lg-12 col-xl-6">
             <div class="card shadow" style="border: none">
-                <div class="row bg-dark h-100 justify-content-center align-items-center">
-                    <div id='vax-provider-loading-spinner'
-                         class="spinner-grow text-primary" role="status">
-                        <span class="sr-only">Loading...</span>
-                    </div>
-
-                    <div id="chart-pie-providers"
-                         style="border: none; width:100%; height: 450px; margin: 0 auto">
-                    </div>
+                <div class="row bg-dark h-100 justify-content-center align-items-center flex-fill">
+                    <div id="chart-pie-providers" class="d-flex flex-fill justify-content-center align-items-center" style="border: none; width:100%; height: 450px; margin: 0 auto"></div>
                 </div>
 
             </div>
@@ -46,30 +33,16 @@
                         {% endfor %}
                     </select>
 
-                    <div class="row bg-dark h-100 justify-content-center align-items-center">
-                        <div id='vax-timeseries-loading-spinner'
-                             class="spinner-grow text-primary" role="status">
-                            <span class="sr-only">Loading...</span>
-                        </div>
-
-                        <div id="chart-admins-timeseries"
-                             style="border: none; width:100%; height: 450px; margin: 0 auto">
-                        </div>
+                    <div class="row bg-dark h-100 justify-content-center align-items-center flex-fill">
+                        <div id="chart-admins-timeseries" class="d-flex flex-fill justify-content-center align-items-center" style="border: none; width:100%; height: 450px; margin: 0 auto"></div>
                     </div>
                 </div>
             </div>
 
             <div class="col-12 col-md-12 col-lg-12 col-xl-6">
                 <div class="card shadow" style="border: none">
-                    <div class="row bg-dark h-100 justify-content-center align-items-center">
-                        <div id='vax-region-loading-spinner'
-                             class="spinner-grow text-primary" role="status">
-                            <span class="sr-only">Loading...</span>
-                        </div>
-
-                        <div id="chart-admins-per-region"
-                             style="border: none; width:100%; height: 450px; margin: 0 auto">
-                        </div>
+                    <div class="row bg-dark h-100 justify-content-center align-items-center flex-fill">
+                        <div id="chart-admins-per-region" class="d-flex flex-fill justify-content-center align-items-center" style="border: none; width:100%; height: 450px; margin: 0 auto"></div>
                     </div>
                 </div>
             </div>

diff --git a/app/templates/vaccines/layout.html b/app/templates/vaccines/layout.html
@@ -18,6 +18,7 @@
 <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <!-- Highcharts -->
 <script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/accessibility.js"></script>
 <script src="https://code.highcharts.com/modules/series-label.js"></script>
 <script src="https://code.highcharts.com/highcharts-more.js"></script>
 <script src="https://code.highcharts.com/themes/dark-unica.js"></script>

diff --git a/requirements.txt b/requirements.txt
@@ -7,7 +7,7 @@ Flask-Babel==2.0.0
 Flask-Compress==1.9.0
 Flask-Limiter==1.4
 Flask-PyMongo==2.3.0
-Flask-Sitemap==0.3.0
+Flask-Sitemap==0.4.0
 gunicorn==20.1.0
 matplotlib==3.4.2
 pandas==1.2.4