feat: Add data source organism on species page (PnX-SI#538)

Un graphique de provenance des données a été rajouté afin de visualiser la participation de chaques organismes a l'observation d'un Taxon.
makinacorpus · Dec 3, 2024 · cfb5e01 · cfb5e01
1 parent 83ba84f
commit cfb5e01
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 3 deletions.
diff --git a/atlas/atlasRoutes.py b/atlas/atlasRoutes.py
@@ -31,6 +31,7 @@
     vmMedias,
     vmCorTaxonAttribut,
     vmTaxonsMostView,
+    vmCorTaxonOrganism
 )
 
 
@@ -232,6 +233,7 @@ def ficheEspece(cd_nom):
     taxon = vmTaxrefRepository.searchEspece(connection, cd_ref)
     altitudes = vmAltitudesRepository.getAltitudesChilds(connection, cd_ref)
     months = vmMoisRepository.getMonthlyObservationsChilds(connection, cd_ref)
+    data_source_values = vmCorTaxonOrganism.getTaxonOrganism(connection, cd_ref)
     synonyme = vmTaxrefRepository.getSynonymy(connection, cd_ref)
     communes = vmCommunesRepository.getCommunesObservationsChilds(connection, cd_ref)
     taxonomyHierarchy = vmTaxrefRepository.getAllTaxonomy(db_session, cd_ref)
@@ -274,6 +276,7 @@ def ficheEspece(cd_nom):
         cd_ref=cd_ref,
         altitudes=altitudes,
         months=months,
+        data_source_values=data_source_values,
         synonyme=synonyme,
         communes=communes,
         taxonomyHierarchy=taxonomyHierarchy,

diff --git a/atlas/configuration/config_schema.py b/atlas/configuration/config_schema.py
@@ -139,6 +139,7 @@ class Meta:
     AFFICHAGE_RECHERCHE_AVANCEE = fields.Boolean(load_default=False)
     AFFICHAGE_GRAPH_ALTITUDES = fields.Boolean(load_default=True)
     AFFICHAGE_GRAPH_PHENOLOGIE = fields.Boolean(load_default=True)
+    AFFICHAGE_GRAPH_PROVENANCE_DONNEE = fields.Boolean(load_default=True)
 
     RANG_STAT = fields.List(
         fields.Dict,

diff --git a/atlas/modeles/repositories/vmCorTaxonOrganism.py b/atlas/modeles/repositories/vmCorTaxonOrganism.py
@@ -0,0 +1,20 @@
+# -*- coding:utf-8 -*-
+
+from sqlalchemy.sql import text
+
+
+def getTaxonOrganism(connection, cd_ref):
+    sql = """
+        select nom_organism, nb_observations
+        from atlas.vm_cor_taxon_organism 
+        where cd_ref = :cdref
+    """
+    result = connection.execute(
+        text(sql),
+        cdref=cd_ref
+    )
+
+    taxon_orga = {}
+    for elem in result:
+        taxon_orga.update({elem[0]: elem[1]})
+    return taxon_orga
diff --git a/atlas/static/chart.js b/atlas/static/chart.js
@@ -1,6 +1,7 @@
 // ChartJS Graphs
 const chartMainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
-const chartHoverMainColor = getComputedStyle(document.documentElement).getPropertyValue('--second-color');
+const chartSecondColor = getComputedStyle(document.documentElement).getPropertyValue('--second-color');
+const chartThirdColor = getComputedStyle(document.documentElement).getPropertyValue('--third-color');
 
 const getChartDatas = function (data, key) {
     let values = [];
@@ -20,7 +21,7 @@ genericChart = function (element, labels, values) {
                 label: 'observations',
                 data: values,
                 backgroundColor: chartMainColor,
-                hoverBackgroundColor: chartHoverMainColor,
+                hoverBackgroundColor: chartSecondColor,
                 borderWidth: 0
             }]
         },
@@ -48,8 +49,86 @@ genericChart = function (element, labels, values) {
     });
 };
 
+pieChartConfig = function (element, data) {
+    return new Chart(element, {
+        type: 'doughnut',
+        data: data,
+        options: {
+            responsive: true,
+            cutout: "30%",
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                title: {
+                    display: false,
+                    text: 'Graphique des provenances de données'
+                }
+            }
+        }
+    })
+}
+
+function getPieEndColor(index, isLastElem) {
+    // To change color if last element will have the same color to first element
+    if (isLastElem && index % 3 === 0) {
+        index++
+    }
+
+    if (index % 3 === 0) {
+        return chartMainColor
+    } else if (index % 3 === 1) {
+        return chartSecondColor
+    }
+    return chartThirdColor
+}
+
+function formatPieData(data) {
+    let labels = []
+    let data_count = []
+    Object.keys(data).forEach(key => {
+        labels.push(key)
+        data_count.push(data[key])
+    })
+
+    const element = document.getElementById("data-source");
+    const context2d = element.getContext("2d");
+
+    return {
+        labels: labels,
+        datasets: [
+            {
+                label: 'Dataset 1',
+                data: data_count,
+                backgroundColor: context => {
+                    console.log(context.index)
+                    if (context.element.x && context.element.y) {
+                        const grad = context2d.createRadialGradient(
+                            context.element.x,
+                            context.element.y,
+                            context.element.innerRadius,
+                            context.element.x,
+                            context.element.y,
+                            context.element.outerRadius);
+                        const isLastElem = context.index === data_count.length - 1
+
+                        grad.addColorStop(0, chartMainColor);
+                        grad.addColorStop(1, getPieEndColor(context.index, isLastElem));
+                        return grad
+                    }
+                },
+                hoverOffset: 25
+            }
+        ]
+    }
+}
+
 var monthChartElement = document.getElementById('monthChart');
 const monthChart = genericChart(monthChartElement, months_name, getChartDatas(months_value, 'value'));
 
 var altiChartElement = document.getElementById('altiChart');
 const altiChart = genericChart(altiChartElement, getChartDatas(dataset, 'altitude'), getChartDatas(dataset, 'value'));
+
+const dataSourceChartElement = document.getElementById('data-source');
+pieChartConfig(dataSourceChartElement, formatPieData(data_source_values));
diff --git a/atlas/static/css/atlas.css b/atlas/static/css/atlas.css
@@ -1,6 +1,7 @@
 :root {
   --main-color: #c3b528;
   --second-color: #5a7526;
+  --third-color: #2c410a;
   --map-maille-border-color: #ddd;
   --map-maille-lastobs-border-color: #c218d0;
   --map-territory-border-color: #333;

diff --git a/atlas/templates/speciesSheet/_main.html b/atlas/templates/speciesSheet/_main.html
@@ -41,7 +41,9 @@
     var months_name = {{ configuration.AVAILABLE_LANGUAGES[g.lang_code]['months'] | tojson }};
     {% else %}
     var months_name = {{ configuration.AVAILABLE_LANGUAGES[configuration.DEFAULT_LANGUAGE]['months'] | tojson }};
-
+    {% endif %}
+    {% if configuration.AFFICHAGE_GRAPH_PROVENANCE_DONNEE %}
+        var data_source_values = {{ data_source_values | tojson}};
     {% endif %}
     var observationsPoint = [];
     var observationsMaille = [];

diff --git a/atlas/templates/speciesSheet/charts.html b/atlas/templates/speciesSheet/charts.html
@@ -12,5 +12,11 @@ <h4 class="title-bar title-spaced center strong">{{ _('monthly.obs') }}</h4>
                 <canvas id="monthChart"></canvas>
             </div>
         {% endif %}
+        {% if configuration.AFFICHAGE_GRAPH_PROVENANCE_DONNEE %}
+            <h4 class="title-bar title-spaced center strong">{{ _('data.source') }}</h4>
+            <div class="chart-container" style="position: relative; height:400px; width:100%">
+                <canvas id="data-source" style="padding: 0.5rem;"></canvas>
+            </div>
+        {% endif %}
     </div>
 {% endblock %}
diff --git a/docs/changelog.rst b/docs/changelog.rst
@@ -9,6 +9,7 @@ CHANGELOG
 
 - Ajout du lien "Données personelles" dans le pied de page (#527 @juggler31)
 - Suppression du support des installations sans TaxHub
+- Ajout d'un graphique de provenance des données (#538)
 
 🐛 **Corrections**