Layout with cards

Dashboards/assets/styles.css

@@ -1,25 +1,10 @@
-/* Set default text styling */
-body {
-  color: #495057;
-  /* color: #c35a25; */
-  font-family: "Source Sans Pro", sans-serif;
-  text-align: left;
-  letter-spacing: normal;
-}
-
 .graph-title {
   text-align: left;
   margin: 0;
+  padding: 5px;
 }
 
 .info-icon {
   font-size: 15px;
   margin-left: 5px;
 }
-
-
-/* Text color of the selected value in the dropdown */
-.Select-value-label {
-  color: #495057!important;
-  /* color: #c35a25!important; */
-}

Dashboards/charts.py

@@ -1,6 +1,35 @@
 import plotly.express as px
 import plotly.graph_objects as go
-from constants import BASE_COLOR_PALETTE, PASTEL_COLOR_PALETTE, PLOTLY_LAYOUT
+from Dashboards.constants import BASE_COLOR_PALETTE, PASTEL_COLOR_PALETTE, PLOTLY_LAYOUT, MAP_SETTINGS
+
+
+def create_map(filtered_df, selected_map_column, zoom, center):
+    fig_map = px.scatter_mapbox(
+        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",
+        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,
+        legend=dict(
+            x=0.02,  # Position the legend on the map
+            y=0.02,
+            bgcolor="rgba(255, 255, 255, 0.7)",  # Semi-transparent background
+            bordercolor="grey",
+            borderwidth=1.5,
+        ),
+    )
+
+    return fig_map
 
 def create_hist1_nb_species(observation_with_vdl_df, nb_species_clicked):
     hist1 = px.histogram(
@@ -17,6 +46,15 @@ def create_hist1_nb_species(observation_with_vdl_df, nb_species_clicked):
         bargap=0.1,
     )
 
+    # Update hover template
+    hist1.update_traces(
+        hovertemplate=(
+            "<b>Nombre d'espèces:</b> %{x}<br>"
+            "<b>Nombre de sites:</b> %{y}<br>"
+            "<extra></extra>"
+        )
+    )
+
     # Add vertical line for the clicked number of species
     if nb_species_clicked:
         hist1.add_shape(
@@ -47,6 +85,15 @@ def create_hist2_vdl(observation_with_vdl_df, vdl_clicked):
         bargap=0.1,
     )
 
+    # Update hover template
+    hist2.update_traces(
+        hovertemplate=(
+            "<b>VDL:</b> %{x}<br>"
+            "<b>Nombre de sites:</b> %{y}<br>"
+            "<extra></extra>"
+        )
+    )
+
     # Add vertical line for the clicked VDL value
     if vdl_clicked:
         hist2.add_shape(
@@ -97,7 +144,6 @@ def create_hist3(lichen_frequency_df):
 
 ## Gauge charts
 
-
 def create_gauge_chart(value, title=None):
     fig = go.Figure(
         go.Indicator(
@@ -125,7 +171,43 @@ def create_gauge_chart(value, title=None):
     )
 
     fig.update_layout(
-        margin={'l': 30, 'r': 30, 'b': 0, 't': 0}
+        PLOTLY_LAYOUT,
+        margin=dict(l=0, r=0, t=20, b=10),
+    )
+
+    return fig
+
+
+def find_interval(intervals, value):
+    for i in range(len(intervals) - 1):
+        if intervals[i] <= value < intervals[i + 1]:
+            return i
+    if value >= intervals[-1]:
+        return len(intervals) - 1
+    return None
+
+def create_kpi(value, title=None, intervals=None, color_scale=None):
+
+    if intervals is None:
+        intervals = [0, 25, 50, 75, 100.5]
+    if color_scale is None:
+        color_scale = ['green', 'yellow', 'orange', 'red']
+
+    color_idx = find_interval(intervals, value)
+    color = color_scale[color_idx]
+
+    indicator = go.Indicator(
+        value=value,
+        number={"suffix": "%", "font": {"color": color, "size": 50}},
+        mode="number",
+        title={"text": title},
+    )
+
+    fig = go.Figure(indicator)
+
+    fig.update_layout(
+        PLOTLY_LAYOUT,
+        margin=dict(l=0, r=0, t=0, b=0),
     )
 
     return fig

Dashboards/constants.py

@@ -1,22 +1,53 @@
-from utils.css_reader import get_css_properties
+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"
+# ]
+
+
+# Generated with https://omatsuri.app/color-shades-generator
+
 BASE_COLOR_PALETTE = [
+    # "#333D43",
+    # "#37444C",
+    # "#3A4C58",
+    # "#3C5665",
+    # "#3D6176",
+    # "#3C6D8C",
     "#387CA6",
-    "#1C6C8C",
-    "#3887A6",
-    "#ADCCD9",
-    "#F2F2F2"
+    "#4A86AB",
+    "#608FAD",
+    "#799AAF",
+    "#90A7B5",
+    "#A6B6BF",
+    "#BDC6CC",
 ]
 
 PASTEL_COLOR_PALETTE = [
-    '#c3d7e4',
-    '#bad2dc',
-    '#c3dbe4',
-    '#e6eff3',
-    '#fbfbfb'
+    # "#c1c4c6",
+    # "#c3c6c9",
+    # "#c3c9cc",
+    # "#c4ccd0",
+    # "#c4cfd5",
+    # "#c4d3dc",
+    "#c3d7e4",
+    "#c8dae5",
+    "#cfdde6",
+    "#d6e0e7",
+    "#dde4e8",
+    "#e4e9eb",
+    "#ebedef",
 ]
 
+
+SQUARE_COLUMNS = [f'sq{i}' for i in range(1, 6)]
+
 ORIENTATIONS_MAPPING = {
     "N": "Nord",
     "E": "Est",
@@ -26,11 +57,16 @@
 
 ORIENTATIONS = list(ORIENTATIONS_MAPPING.keys())
 
-SQUARE_COLUMNS = ['sq1', 'sq2', 'sq3', 'sq4', 'sq5']
-
-BODY_STYLE = get_css_properties("body")
-BODY_FONT_FAMILY = BODY_STYLE.get("font-family", "Arial")
-BODY_FONT_COLOR = BODY_STYLE.get("color", "grey")
+MAP_SETTINGS = {
+    "nb_species_cat": {
+        "title": "Nombre d'espèces",
+        "color_map": {'<7': 'red', '7-10': 'orange', '11-14': 'yellow', '>14': 'green'}
+    },
+    "VDL_cat": {
+        "title": "VDL",
+        "color_map": {'<5': 'red', '5-10': 'orange', '10-15': 'yellow', '>15': 'green'}
+    }
+}
 
 # Define the plotly style for hover labels
 PLOTLY_HOVER_STYLE = {
@@ -41,12 +77,11 @@
 
 # Define the plotly layout for all plots
 PLOTLY_LAYOUT = {
-    "font": dict(
-        family=BODY_FONT_FAMILY,
-        color=BODY_FONT_COLOR
-    ),
+    "font": dict(family=BODY_FONT_FAMILY, color=PLOTLY_FONT_COLOR),
     "template": "plotly_white",
-    "margin": dict(l=10, r=10, t=10, b=10),
-    "barcornerradius":"30%",
-    "hoverlabel": PLOTLY_HOVER_STYLE
+    "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
 }