Merge pull request #8 from dataforgoodfr/global_dashboard

Improved species dashboard layout

Dashboards/assets/lichen_species_ecology.csv

@@ -1,39 +1,39 @@
-id;Taxon;pH;aridity;eutrophication;poleotolerance;thallus;picture
-7;Amandinea punctata/Lecidella elaeochroma;neutrophilous;xerophilous;mesotrophic;resistant;crustose;amandinea_punctata.jpg
-28;Anaptychia ciliaris;neutrophilous;mesophilous;mesotrophic;intermediate;fruticose;anaptychia_ciliaris.jpg
-30;Autre lichen crustacé;unknown;unknown;unknown;intermediate;crustose;lichen_crustace.jpg
-20;Autre lichen foliacé;unknown;unknown;unknown;intermediate;foliose;lichen_foliace.jpg
-36;Autre lichen fruticuleux;unknown;unknown;unknown;intermediate;fruticose;lichen_crustace.jpg
-2;Candelaria concolor;neutrophilous;xerophilous;eutrophic;resistant;foliose;candelaria_concolor.jpg
-21;Candelariella sp.;neutrophilous;mesophilous;eutrophic;resistant;crustose;candelariella.jpg
-35;Diploicia canescens;basophilous;mesophilous;mesotrophic;intermediate;crustose;diploicia_canescens.jpg
-8;Evernia prunastri;acidophilous;mesophilous;oligotrophic;intermediate;fruticose;evernia_prunastri.jpg
-3;Flavoparmelia caperata/soredians;neutrophilous;mesophilous;oligotrophic;intermediate;foliose;flavoparmelia_caperata.jpg
-24;Hyperphyscia adglutinata;basophilous;xerophilous;eutrophic;resistant;foliose;hyperphyscia_adglutinata.jpg
-22;Hypogymnia physodes/tubulosa;acidophilous;mesophilous;oligotrophic;intermediate;foliose;hypogymnia_physodes.jpg
-4;Hypotrachyna afrorevoluta/revoluta;acidophilous;mesophilous;oligotrophic;intermediate;foliose;hypotrachyna_afrevoluta.jpg
-9;Lecanora sp.;unknown;unknown;unknown;intermediate;crustose;lecanora.jpg
-5;Lichen crustacé à aspect poudreux;acidophilous;unknown;unknown;intermediate;crustose;crustaces_poudreux.jpg
-38;Lichen crustacé à lirelles;unknown;unknown;unknown;intermediate;crustose;crustaces_lirelles.jpg
-10;Melanelixia glabratula/Melanohalea exasperatula;neutrophilous;mesophilous;mesotrophic;resistant;foliose;melanelixia_glabratula.jpg
-25;Melanohalea exasperata;neutrophilous;xerophilous;mesotrophic;intermediate;foliose;melanohalea_exasperata.jpg
-33;Parmelia saxatilis;acidophilous;mesophilous;oligotrophic;intermediate;foliose;parmelia_saxatilis.jpg
-11;Parmelia sulcata;acidophilous;mesophilous;oligotrophic;resistant;foliose;parmelia_sulcata.jpg
-23;Parmelina tiliacea/pastillifera;neutrophilous;hygrophilous;mesotrophic;intermediate;foliose;parmelina_tiliacea.jpg
-31;Parmotrema perlatum/reticulatum;neutrophilous;mesophilous;oligotrophic;intermediate;foliose;parmotrema_perlatum.jpg
-29;Pertusaria pertusa;acidophilous;mesophilous;oligotrophic;intermediate;crustose;pertusaria_pertusa.jpg
-12;Phaeophyscia orbicularis;neutrophilous;xerophilous;eutrophic;resistant;foliose;phaeophyscia_orbicularis.jpg
-13;Physcia adscendens/tenella;basophilous;xerophilous;eutrophic;resistant;foliose;physcia_adscendens.jpg
-19;Physcia aipolia/stellaris;neutrophilous;mesophilous;eutrophic;resistant;foliose;physcia_aipolia.jpg
-16;Physcia leptalea;neutrophilous;xerophilous;mesotrophic;intermediate;foliose;physcia_leptalea.jpg
-18;Physconia distorta;neutrophilous;xerophilous;eutrophic;resistant;foliose;physconia_distorta.jpg
-14;Physconia grisea;neutrophilous;mesophilous;eutrophic;resistant;foliose;physconia_grisea.jpg
-15;Pleurosticta acetabulum;neutrophilous;xerophilous;mesotrophic;intermediate;foliose;pleurosticta_acetabulum.jpg
-37;Polycauliona polycarpa;neutrophilous;xerophilous;mesotrophic;intermediate;foliose;polycauliona_polycarpa.jpg
-27;Pseudevernia furfuracea;acidophilous;xerophilous;oligotrophic;intermediate;fruticose;pseudevernia_furfuracea.jpg
-17;Punctelia sp.;neutrophilous;mesophilous;oligotrophic;resistant;foliose;punctelia_sp_.jpg
-6;Ramalina farinacea;neutrophilous;hygrophilous;oligotrophic;intermediate;fruticose;ramalina_farinacea.jpg
-32;Ramalina fastigiata;neutrophilous;mesophilous;oligotrophic;intermediate;fruticose;ramalina_fastigiata.jpg
-26;Ramalina fraxinea;neutrophilous;mesophilous;mesotrophic;sensitive;fruticose;ramalina_fraxinea.jpg
-34;Usnea sp.;acidophilous;hygrophilous;oligotrophic;sensitive;fruticose;usnea.jpg
-1;Xanthoria parietina;neutrophilous;xerophilous;eutrophic;resistant;foliose;xanthoria_parietina.jpg
+id;Taxon;pH;aridity;eutrophication;poleotolerance;thallus;rarity;picture
+8;Evernia prunastri;acidophilous;mesophilous;oligotrophic;intermediate;fruticuleux;commun;evernia_prunastri.jpg
+3;Flavoparmelia caperata/soredians;neutrophilous;mesophilous;oligotrophic;intermediate;foliacé;commun;flavoparmelia_caperata.jpg
+9;Lecanora sp.;unknown;unknown;unknown;intermediate;crustacé;commun;lecanora.jpg
+5;Lichen crustacé à aspect poudreux;acidophilous;unknown;unknown;intermediate;crustacé;commun;crustaces_poudreux.jpg
+10;Melanelixia glabratula/Melanohalea exasperatula;neutrophilous;mesophilous;mesotrophic;resistant;foliacé;commun;melanelixia_glabratula.jpg
+11;Parmelia sulcata;acidophilous;mesophilous;oligotrophic;resistant;foliacé;commun;parmelia_sulcata.jpg
+14;Physconia grisea;neutrophilous;mesophilous;eutrophic;resistant;foliacé;commun;physconia_grisea.jpg
+17;Punctelia sp.;neutrophilous;mesophilous;oligotrophic;resistant;foliacé;commun;punctelia_sp_.jpg
+35;Diploicia canescens;basophilous;mesophilous;mesotrophic;intermediate;crustacé;commun près des côtes;diploicia_canescens.jpg
+30;Autre lichen crustacé;unknown;unknown;unknown;intermediate;crustacé;indéterminé;lichen_crustace.jpg
+20;Autre lichen foliacé;unknown;unknown;unknown;intermediate;foliacé;indéterminé;lichen_foliace.jpg
+36;Autre lichen fruticuleux;unknown;unknown;unknown;intermediate;fruticuleux;indéterminé;lichen_crustace.jpg
+22;Hypogymnia physodes/tubulosa;acidophilous;mesophilous;oligotrophic;intermediate;foliacé;peu commun;hypogymnia_physodes.jpg
+4;Hypotrachyna afrorevoluta/revoluta;acidophilous;mesophilous;oligotrophic;intermediate;foliacé;peu commun;hypotrachyna_afrevoluta.jpg
+38;Lichen crustacé à lirelles;unknown;unknown;unknown;intermediate;crustacé;peu commun;crustaces_lirelles.jpg
+33;Parmelia saxatilis;acidophilous;mesophilous;oligotrophic;intermediate;foliacé;peu commun;parmelia_saxatilis.jpg
+23;Parmelina tiliacea/pastillifera;neutrophilous;hygrophilous;mesotrophic;intermediate;foliacé;peu commun;parmelina_tiliacea.jpg
+31;Parmotrema perlatum/reticulatum;neutrophilous;mesophilous;oligotrophic;intermediate;foliacé;peu commun;parmotrema_perlatum.jpg
+19;Physcia aipolia/stellaris;neutrophilous;mesophilous;eutrophic;resistant;foliacé;peu commun;physcia_aipolia.jpg
+18;Physconia distorta;neutrophilous;xerophilous;eutrophic;resistant;foliacé;peu commun;physconia_distorta.jpg
+15;Pleurosticta acetabulum;neutrophilous;xerophilous;mesotrophic;intermediate;foliacé;peu commun;pleurosticta_acetabulum.jpg
+37;Polycauliona polycarpa;neutrophilous;xerophilous;mesotrophic;intermediate;foliacé;peu commun;polycauliona_polycarpa.jpg
+6;Ramalina farinacea;neutrophilous;hygrophilous;oligotrophic;intermediate;fruticuleux;peu commun;ramalina_farinacea.jpg
+32;Ramalina fastigiata;neutrophilous;mesophilous;oligotrophic;intermediate;fruticuleux;peu commun;ramalina_fastigiata.jpg
+16;Physcia leptalea;neutrophilous;xerophilous;mesotrophic;intermediate;foliacé;rare;physcia_leptalea.jpg
+28;Anaptychia ciliaris;neutrophilous;mesophilous;mesotrophic;intermediate;fruticuleux;rare;anaptychia_ciliaris.jpg
+25;Melanohalea exasperata;neutrophilous;xerophilous;mesotrophic;intermediate;foliacé;rare;melanohalea_exasperata.jpg
+29;Pertusaria pertusa;acidophilous;mesophilous;oligotrophic;intermediate;crustacé;rare;pertusaria_pertusa.jpg
+27;Pseudevernia furfuracea;acidophilous;xerophilous;oligotrophic;intermediate;fruticuleux;rare;pseudevernia_furfuracea.jpg
+26;Ramalina fraxinea;neutrophilous;mesophilous;mesotrophic;sensitive;fruticuleux;rare;ramalina_fraxinea.jpg
+34;Usnea sp.;acidophilous;hygrophilous;oligotrophic;sensitive;fruticuleux;rare;usnea.jpg
+7;Amandinea punctata/Lecidella elaeochroma;neutrophilous;xerophilous;mesotrophic;resistant;crustacé;très commun;amandinea_punctata.jpg
+2;Candelaria concolor;neutrophilous;xerophilous;eutrophic;resistant;foliacé;très commun;candelaria_concolor.jpg
+21;Candelariella sp.;neutrophilous;mesophilous;eutrophic;resistant;crustacé;très commun;candelariella.jpg
+24;Hyperphyscia adglutinata;basophilous;xerophilous;eutrophic;resistant;foliacé;très commun;hyperphyscia_adglutinata.jpg
+12;Phaeophyscia orbicularis;neutrophilous;xerophilous;eutrophic;resistant;foliacé;très commun;phaeophyscia_orbicularis.jpg
+13;Physcia adscendens/tenella;basophilous;xerophilous;eutrophic;resistant;foliacé;très commun;physcia_adscendens.jpg
+1;Xanthoria parietina;neutrophilous;xerophilous;eutrophic;resistant;foliacé;très commun;xanthoria_parietina.jpg

Dashboards/charts.py

@@ -20,22 +20,22 @@ def blank_figure():
     return fig
 
 def create_map(filtered_df, selected_map_column, zoom, center):
-    fig_map = px.scatter_mapbox(
+    fig_map = px.scatter_map(
         filtered_df,
         lat="localisation_lat",
         lon="localisation_long",
         color=selected_map_column,
         hover_name="date_obs",
         hover_data=["localisation_lat", "localisation_long"],
-        mapbox_style="open-street-map",
+        map_style="open-street-map",
         color_discrete_map=MAP_SETTINGS[selected_map_column]["color_map"],
     )
 
     fig_map.update_layout(
         PLOTLY_LAYOUT,
         margin=dict(l=0, r=0, t=0, b=0),
-        mapbox_zoom=zoom,
-        mapbox_center=center,
+        map_zoom=zoom,
+        map_center=center,
         legend=dict(
             x=0.02,  # Position the legend on the map
             y=0.02,

Dashboards/constants.py

@@ -1,25 +1,9 @@
 BODY_FONT_FAMILY = '"Source Sans Pro", sans-serif'
-PLOTLY_FONT_COLOR = "#495057" # Grey
-
-# Constants for color palettes, font families, etc.
-# BASE_COLOR_PALETTE = [
-#     "#387CA6",
-#     "#1C6C8C",
-#     "#3887A6",
-#     "#ADCCD9",
-#     "#F2F2F2"
-# ]
+PLOTLY_FONT_COLOR = "#868e96" # Grey
 
 
 # Generated with https://omatsuri.app/color-shades-generator
-
 BASE_COLOR_PALETTE = [
-    # "#333D43",
-    # "#37444C",
-    # "#3A4C58",
-    # "#3C5665",
-    # "#3D6176",
-    # "#3C6D8C",
     "#387CA6",
     "#4A86AB",
     "#608FAD",
@@ -30,12 +14,6 @@
 ]
 
 PASTEL_COLOR_PALETTE = [
-    # "#c1c4c6",
-    # "#c3c6c9",
-    # "#c3c9cc",
-    # "#c4ccd0",
-    # "#c4cfd5",
-    # "#c4d3dc",
     "#c3d7e4",
     "#c8dae5",
     "#cfdde6",
@@ -76,6 +54,19 @@
         "title": "VDL",
         "color_map": {'<25': 'red', '25-50': 'orange', '50-75': 'yellow', '>75': 'green'}
     },
+    "deg_pollution_acid_cat": {
+        "title": "Dégré pollution acide",
+        "color_map": {'0-25%': 'red', '25-50%': 'orange', '50-75%': 'yellow', '75-100%': 'green'}
+    },
+    "deg_pollution_azote_cat": {
+        "title": "Dégré pollution azote",
+        "color_map": {'0-25%': 'green', '25-50%': 'yellow', '50-75%': 'orange', '75-100%': 'red'}
+    },
+    "deg_artif_cat":
+    {
+        "title": "Dégré artificialisation",
+        "color_map": {'0-25%': 'green', '25-50%': 'yellow', '50-75%': 'orange', '75-100%': 'red'}
+    },
     "selected_species_present":
         {
             "title": "Espèce sélectionnée présente",
@@ -84,6 +75,22 @@
 }
 
 
+# Constants for common styles
+FLEX_COLUMNS_CONTAINER_STYLE = {"display": "flex", "gap": "16px"}
+GRID_STYLE = {"gutter": "md", "align": "stretch"}
+CARD_STYLE = {
+    "pt":"xs",
+    "pb": "cs",
+    "shadow": "sm",
+    "withBorder": True
+    }
+
+MAP_STYLE = {
+    "withBorder": True,
+    "p": 0,
+}
+
+
 # Define the plotly style for hover labels
 PLOTLY_HOVER_STYLE = {
         "font": dict(
@@ -93,11 +100,28 @@
 
 # Define the plotly layout for all plots
 PLOTLY_LAYOUT = {
-    "font": dict(family=BODY_FONT_FAMILY, color=PLOTLY_FONT_COLOR),
+    "font": dict(family=BODY_FONT_FAMILY,
+                 color="grey",
+                 #color=PLOTLY_FONT_COLOR
+                 ),
     "template": "plotly_white",
     "margin": dict(l=0, r=0, t=10, b=10),
     "barcornerradius": "30%",
     "hoverlabel": PLOTLY_HOVER_STYLE,
     "plot_bgcolor": "rgba(0, 0, 0, 0)",  # Transparent plot background
     "paper_bgcolor": "rgba(0, 0, 0, 0)",  # Transparent paper background
 }
+
+TRANSLATIONS_EN_FR = {
+    "unknown": "inconnu",
+    "acidophilous": "acidophile",
+    "neutrophilous": "neutrophile",
+    "basophilous": "basophile",
+    "oligotrophic": "oligotrophe",
+    "mesotrophic": "mésotrophe",
+    "eutrophic": "eutrophe",
+    "sensitive": "sensible",
+    "intermediate": "intermédiaire",
+    "tolerant": "tolérant",
+    "resistant": "résistant",
+}