Release 3.0

- Adapted cookie system to save the last query made by the user.
- Sharing the URL has more preference than the cookie.
- Creating a global summary table (removing the regional summary table).
- Replacement of the regional graph by a box plot (data from the temporal and regional dataitems are mapped).
- Creation of a dynamic map by region/province/Spain, using the values of the analysis. Possibility of plotting data as average,max,min,median,q1,q3.
- Possibility to show/hide panels by the user.
- Dropdown to choose the sub-data of each INE dataitem and represent it on the map.
- Default representation: daily cases in Spain, showing each region on the map with the cases of each one. It is only applied when it has not been accessed from a shared URL and when there is no associated cookie.
- UI optimization.

Author: enriquetomasmb

COnVIDa-lib

@@ -36,13 +36,49 @@
     "EN": "Add Spain"
   },
   "regions_label": {
-    "ES": "Regiones",
-    "EN": "Regions"
+    "ES": "Comunidades Autónomas",
+    "EN": "Autonomous Communities"
   },
   "provinces_label": {
     "ES": "Provincias",
     "EN": "Provinces"
   },
+  "filter_label": {
+    "ES": "Mostrar por:",
+    "EN": "Show by:"
+  },
+  "measure_label": {
+    "ES": "Medida:",
+    "EN": "Measure:"
+  },
+  "mean_label": {
+    "ES": "media",
+    "EN": "mean"
+  },
+  "max_label": {
+    "ES": "límite superior",
+    "EN": "upper limit"
+  },
+  "min_label": {
+    "ES": "límite inferior",
+    "EN": "lower limit"
+  },
+  "q1_label": {
+    "ES": "percentil 25",
+    "EN": "percentile 25"
+  },
+  "median_label": {
+    "ES": "mediana",
+    "EN": "median"
+  },
+  "q3_label": {
+    "ES": "percentil 75",
+    "EN": "percentile 75"
+  },
+  "spain_label": {
+    "ES": "España",
+    "EN": "Spain"
+  },
   "covid19_data_label": {
     "ES": "Datos de COVID19",
     "EN": "COVID19 data"
@@ -123,6 +159,10 @@
     "ES": "Compartir",
     "EN": "Share"
   },
+  "eye": {
+    "ES": "Mostrar/Ocultar",
+    "EN": "Show/Hide"
+  },
   "temporal_visualization_label": {
     "ES": "Visualización temporal",
     "EN": "Temporal visualization"
@@ -191,6 +231,14 @@
     "ES": "Tabla resumen",
     "EN": "Summary table"
   },
+  "map_dataitems_label": {
+    "ES": "Datos seleccionados",
+    "EN": "Selected data"
+  },
+  "select_type_dataitem": {
+    "ES": "Selecciona el dataitem a mostrar",
+    "EN": "Select the dataitem to display"
+  },
   "legend": {
     "ES": "Leyenda",
     "EN": "Legend"
@@ -240,8 +288,12 @@
     "EN": "https://en.wikipedia.org/wiki/Median"
   },
   "footer_1": {
-    "ES": "Proyecto desarrollado por el CyberDataLab de la Universidad de Murcia",
-    "EN": "Project developed by the CyberDataLab at the University of Murcia (Spain)"
+    "ES": "Proyecto desarrollado por el ",
+    "EN": "Project developed by the "
+  },
+  "footer_1_1": {
+    "ES": " de la Universidad de Murcia",
+    "EN": " at the University of Murcia (Spain)"
   },
   "footer_2": {
     "ES": "Contacte con nosotros a través de ",

assets/convida_dict.json

@@ -58,7 +58,7 @@
 }
 
 /* For devices larger than 550px --- 780px */
-@media (min-width: 1000px) {
+@media (min-width: 1350px) {
   .container {
     width: 80%;
   }
@@ -107,10 +107,14 @@
   }
 
   .one-third.column {
-    width: 30.6666666667%;
+    width: 36.6666666667%;
     text-align: center;
     padding: 10px;
   }
+  #cyber-umu-logos{
+    width: 50%;
+  }
+
   .two-thirds.column {
     width: 65.3333333333%;
   }
@@ -550,7 +554,7 @@ there.
 }
 
 /* Larger than phablet (also point when grid becomes active), screen larger than 550px */
-@media (min-width: 1000px) {
+@media (min-width: 1350px) {
   /* 8% default */
   .one.column,
   .one.columns {
@@ -578,7 +582,7 @@ there.
 }
 
 /* Larger than tablet, for screens smaller than 768px */
-@media (max-width: 1000px) {
+@media (max-width: 1350px) {
   .flex-display {
     display: block !important;
   }
@@ -589,6 +593,12 @@ there.
     margin: 0 !important;
     margin-bottom: 25px !important;
   }
+  #cyberdatalab-a {
+    margin-right: 20px;
+  }
+  #umu-a {
+    margin-left: 20px;
+  }
   .container-display {
     display: flex;
   }
@@ -633,6 +643,22 @@ there.
     margin-bottom: 20px;
   }
 
+  #regional-wrap-container {
+    display: block !important;
+  }
+  .pretty_container.graph {
+    width: 100% !important;
+  }
+  .pretty_container.map {
+    width: 100% !important;
+  }
+  #graph-settings-container-regional-left {
+    display: none !important;
+  }
+  #graph-settings-container-regional-right {
+    width: 100% !important;
+  }
+
 }
 
 @media (max-width: 810px) {
@@ -643,7 +669,7 @@ there.
 }
 
 /* Larger than desktop */
-@media (min-width: 1000px) {
+@media (min-width: 1350px) {
 }
 
 /* Larger than Desktop HD */

assets/css/s1.css

@@ -18,15 +18,15 @@ body {
 #last_update {
     float:right;
     margin-right: 20px;
-    margin-top: 8px;
+    margin-top: 13px;
 }
 #last_update h6 {
     font-size: small;
     margin-bottom: 0;
 }
 .lang_button, .help_button {
     float: right;
-    height: 25px;
+    height: 30px;
     margin: 5px 10px 10px 0px;
     cursor: pointer;
 }
@@ -40,6 +40,21 @@ body {
     box-shadow: 2px 2px 2px lightgrey;
 }
 
+.pretty_container.graph {
+    width: 48%;
+}
+.pretty_container.map {
+    width: 48%;
+}
+
+.pretty_container_regional {
+    border-radius: 5px;
+    background-color: #f9f9f9;
+    margin: 3px 10px 10px 10px;
+    padding: 15px;
+    position: relative;
+}
+
 .bare_container {
     margin: 0 0 0 0;
     padding: 0 0 0 0;
@@ -57,10 +72,16 @@ body {
 
 .control_label {
     padding: 10px 10px 0px 10px;
-    width: calc(100% - 40px);
+    /*width: calc(100% - 40px);*/
     font-weight: bold;
 }
 
+.eye-icon {
+    height: 15px;
+    margin-left: 10px;
+    cursor: pointer;
+}
+
 .rc-slider {
     margin-left: 0px;
     padding-left: 0px;
@@ -257,6 +278,10 @@ body {
 .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
 }
 
+.dash-dropdown {
+    line-height: 1;
+}
+
 #button_show_more {
     float: right;
     text-transform: none;
@@ -283,4 +308,12 @@ body {
     /*text-align: left !important;*/
     border: 1px solid #e4e4e4;
     border-radius: 5px;
+}
+
+#map {
+    margin-left: 10px;
+}
+
+#regional_graph {
+    margin-right: 10px;
 }