First version of the dashboard with most charts

.envrc

@@ -0,0 +1 @@
+dotenv

.gitignore

@@ -79,6 +79,9 @@ docs/_build/
 target/
 
 # Jupyter Notebook
+.pytest_cache
+__pycache__
+*checkpoint.ipynb
 .ipynb_checkpoints
 
 # IPython
@@ -160,4 +163,10 @@ dmypy.json
 cython_debug/
 
 # Precommit hooks: ruff cache
-.ruff_cache
+.ruff_cache
+
+# OS generated files #
+######################
+.DS_Store
+__MACOSX
+Zone.Identifier

.pre-commit-config.yaml

@@ -19,3 +19,4 @@ repos:
     rev: v1.3.1
     hooks:
       - id: python-safety-dependencies-check
+        args: [--ignore, "70612"]  # Ignoring Jinja2 Vulnerability ID: 70612

Dashboards/assets/styles.css

@@ -0,0 +1,25 @@
+/* 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;
+}
+
+.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

@@ -0,0 +1,175 @@
+import plotly.express as px
+import plotly.graph_objects as go
+from constants import BASE_COLOR_PALETTE, PASTEL_COLOR_PALETTE, PLOTLY_LAYOUT
+
+def create_hist1_nb_species(observation_with_vdl_df, nb_species_clicked):
+    hist1 = px.histogram(
+        observation_with_vdl_df,
+        x='nb_species',
+        color_discrete_sequence=BASE_COLOR_PALETTE
+        )
+
+    hist1.update_layout(
+        **PLOTLY_LAYOUT,
+        xaxis_title="Nombre d'espèces",
+        yaxis_title="Nombre de sites",
+        yaxis_showgrid=True,
+        bargap=0.1,
+    )
+
+    # Add vertical line for the clicked number of species
+    if nb_species_clicked:
+        hist1.add_shape(
+            go.layout.Shape(
+                type="line",
+                x0=nb_species_clicked, x1=nb_species_clicked,
+                y0=0, y1=1,
+                xref='x', yref='paper',
+                line=dict(color='red', width=2, dash="dot")
+            )
+        )
+
+    return hist1
+
+
+def create_hist2_vdl(observation_with_vdl_df, vdl_clicked):
+    hist2 = px.histogram(
+        observation_with_vdl_df,
+        x='VDL',
+        color_discrete_sequence=BASE_COLOR_PALETTE
+    )
+
+    hist2.update_layout(
+        **PLOTLY_LAYOUT,
+        xaxis_title="Valeur de Diversité Lichénique (VDL)",
+        yaxis_title="Nombre de sites",
+        yaxis_showgrid=True,
+        bargap=0.1,
+    )
+
+    # Add vertical line for the clicked VDL value
+    if vdl_clicked:
+        hist2.add_shape(
+            go.layout.Shape(
+                type="line",
+                x0=vdl_clicked, x1=vdl_clicked,
+                y0=0, y1=1,
+                xref='x', yref='paper',
+                line=dict(color='red', width=2, dash="dot")
+            )
+        )
+
+    return hist2
+
+
+def create_hist3(lichen_frequency_df):
+
+    hist3 = px.bar(
+        lichen_frequency_df,
+        x="nb_lichen",
+        y="unique_name",
+        orientation="h",
+        color_discrete_sequence=BASE_COLOR_PALETTE,
+    )
+
+    hist3.update_layout(
+        **PLOTLY_LAYOUT,
+        xaxis_title="Nombre",
+        yaxis_title="",
+        xaxis_showgrid=True,
+    )
+
+    # Update hover template
+    hist3.update_traces(
+        hovertemplate=(
+            "<b>%{y}</b><br><br>"
+            "<b>Nombre:</b> %{x}<br>"
+            "<b>Nord:</b> %{customdata[0]:<2}<br>"
+            "<b>Sud:</b> %{customdata[1]:<2}<br>"
+            "<b>Ouest:</b> %{customdata[2]:<2}<br>"
+            "<b>Est:</b> %{customdata[3]:<2}<br>"
+            "<extra></extra>"
+        ),
+        customdata=lichen_frequency_df[['nb_lichen_N', 'nb_lichen_S', 'nb_lichen_O', 'nb_lichen_E']].values
+    )
+
+    return hist3
+
+## Gauge charts
+
+
+def create_gauge_chart(value, title=None):
+    fig = go.Figure(
+        go.Indicator(
+            domain={"x": [0, 1], "y": [0, 1]},
+            value=value,
+            number={"suffix": "%", "font": {"size": 18}},
+            mode="gauge+number",
+            title={"text": title},
+            gauge={
+                "axis": {"range": [0, 100], "dtick": 25},
+                'bar': {'color': "rgba(0,0,0,1)", 'thickness': 0.3},
+                "steps": [
+                    {'range': [0, 25], 'color': "rgba(34, 139, 34, 0.7)"},
+                    {'range': [25, 50], 'color': "rgba(255, 215, 0, 0.7)"},
+                    {'range': [50, 75], 'color': "rgba(255, 140, 0, 0.7)"},
+                    {'range': [75, 100], 'color': "rgba(255, 69, 0, 0.7)"}
+                ],
+                "threshold": {
+                    "line": {"color": "rgba(0,0,0,1)", "width": 3},
+                    "thickness": 0.75,
+                    "value": value,
+                },
+            },
+        )
+    )
+
+    fig.update_layout(
+        margin={'l': 30, 'r': 30, 'b': 0, 't': 0}
+    )
+
+    return fig
+
+
+## Histograms for species
+
+def create_hist4(count_lichen_per_species_df, user_selection_species_id):
+    # Find the index of the selected species ID in the merged table
+    user_selection_idx = count_lichen_per_species_df[count_lichen_per_species_df["species_id"] == user_selection_species_id].index
+
+    # Adjust the color of the selected specie to be darker
+    pastel_color = PASTEL_COLOR_PALETTE[0]
+    selected_color = BASE_COLOR_PALETTE[0]
+    color_hist4 = [pastel_color] * len(count_lichen_per_species_df)
+    color_hist4[int(user_selection_idx[0])] = selected_color
+
+    # Bar plot
+    hist4 = px.bar(
+        count_lichen_per_species_df,
+        x="count",
+        y="name",
+        orientation="h",
+        color="name",
+        color_discrete_sequence=color_hist4,
+        )
+
+    # Update layout
+    hist4.update_layout(
+        **PLOTLY_LAYOUT,
+        showlegend=False,
+    )
+
+    # Update axes
+    hist4.update_xaxes(
+        title_text="Nombre",
+        showgrid=True,
+    )
+    hist4.update_yaxes(
+        title="",
+        # tickfont=dict(size=10)  # Adjust tick font size
+    )
+    hist4.update_traces(
+        hovertemplate="<b>%{y}</b><br><b>Nombre:</b> %{x}<extra></extra>"
+    )
+
+    return hist4

Dashboards/constants.py

@@ -0,0 +1,52 @@
+from utils.css_reader import get_css_properties
+
+# Constants for color palettes, font families, etc.
+BASE_COLOR_PALETTE = [
+    "#387CA6",
+    "#1C6C8C",
+    "#3887A6",
+    "#ADCCD9",
+    "#F2F2F2"
+]
+
+PASTEL_COLOR_PALETTE = [
+    '#c3d7e4',
+    '#bad2dc',
+    '#c3dbe4',
+    '#e6eff3',
+    '#fbfbfb'
+]
+
+ORIENTATIONS_MAPPING = {
+    "N": "Nord",
+    "E": "Est",
+    "S": "Sud",
+    "O": "Ouest"
+}
+
+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")
+
+# Define the plotly style for hover labels
+PLOTLY_HOVER_STYLE = {
+        "font": dict(
+            family=BODY_FONT_FAMILY,
+        )
+}
+
+# Define the plotly layout for all plots
+PLOTLY_LAYOUT = {
+    "font": dict(
+        family=BODY_FONT_FAMILY,
+        color=BODY_FONT_COLOR
+    ),
+    "template": "plotly_white",
+    "margin": dict(l=10, r=10, t=10, b=10),
+    "barcornerradius":"30%",
+    "hoverlabel": PLOTLY_HOVER_STYLE
+}