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 10, 2024 · 6fabcc7 · 6fabcc7
1 parent 6634c3b
commit 6fabcc7
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 64 deletions.
diff --git a/atlas/configuration/config.py.example b/atlas/configuration/config.py.example
@@ -78,6 +78,32 @@ LANGUAGES = {
         }
 }
 
+Couleur s'affichant dans les graphiques de type 'pie' (circulaire)
+COLOR_PIE_CHARTS = [
+    '#E1CE7A',
+    '#FBFFB9',
+    '#FDD692',
+    '#EC7357',
+    '#754F44',
+    '#FB6376',
+    '#B7ADCF',
+    '#DEE7E7',
+    '#F4FAFF',
+    '#383D3B',
+    '#7C7C7C',
+    '#B5F44A',
+    '#D6FF79',
+    '#507255',
+    '#381D2A',
+    '#BA5624',
+    '#FFA552',
+    '#F7FFE0',
+    '#49C6E5',
+    '#54DEFD',
+    '#0B5563',
+    '#54DEFD'
+]
+
 #####################
 #####################
 ### Configuration ###
@@ -193,6 +219,9 @@ AFFICHAGE_GRAPH_ALTITUDES = True
 # Afficher le graphique de la phénologie. Affichage True/False
 AFFICHAGE_GRAPH_PHENOLOGIE = True
 
+# Afficher le graphique de provenance des données. Affichage True/False
+AFFICHAGE_GRAPH_PROVENANCE_DONNEE = False
+
 # Rang taxonomique qui fixe jusqu'à quel taxon remonte la filiation taxonomique (hierarchie dans la fiche d'identite : Famille, Ordre etc... )
 LIMIT_RANG_TAXONOMIQUE_HIERARCHIE = 13
 

diff --git a/atlas/configuration/config_schema.py b/atlas/configuration/config_schema.py
@@ -140,6 +140,33 @@ class Meta:
     AFFICHAGE_GRAPH_ALTITUDES = fields.Boolean(load_default=True)
     AFFICHAGE_GRAPH_PHENOLOGIE = fields.Boolean(load_default=False)
     AFFICHAGE_GRAPH_PROVENANCE_DONNEE = fields.Boolean(load_default=False)
+    COLOR_PIE_CHARTS = fields.List(
+        fields.String(),
+        load_default=[
+            "#E1CE7A",
+            "#FBFFB9",
+            "#FDD692",
+            "#EC7357",
+            "#754F44",
+            "#FB6376",
+            "#B7ADCF",
+            "#DEE7E7",
+            "#F4FAFF",
+            "#383D3B",
+            "#7C7C7C",
+            "#B5F44A",
+            "#D6FF79",
+            "#507255",
+            "#381D2A",
+            "#BA5624",
+            "#FFA552",
+            "#F7FFE0",
+            "#49C6E5",
+            "#54DEFD",
+            "#0B5563",
+            "#54DEFD",
+        ],
+    )
 
     RANG_STAT = fields.List(
         fields.Dict,

diff --git a/atlas/static/chart.js b/atlas/static/chart.js
@@ -1,7 +1,6 @@
 // ChartJS Graphs
 const chartMainColor = getComputedStyle(document.documentElement).getPropertyValue('--main-color');
 const chartSecondColor = getComputedStyle(document.documentElement).getPropertyValue('--second-color');
-const chartThirdColor = getComputedStyle(document.documentElement).getPropertyValue('--third-color');
 
 const getChartDatas = function (data, key) {
     let values = [];
@@ -51,7 +50,7 @@ genericChart = function (element, labels, values) {
 
 pieChartConfig = function (element, data) {
     return new Chart(element, {
-        type: 'doughnut',
+        type: 'pie',
         data: data,
         options: {
             responsive: true,
@@ -70,20 +69,6 @@ pieChartConfig = function (element, data) {
     })
 }
 
-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 = []
@@ -92,31 +77,13 @@ function formatPieData(data) {
         data_count.push(data[key])
     })
 
-    const element = document.getElementById("organismChart");
-    const context2d = element.getContext("2d");
-
     return {
         labels: labels,
         datasets: [
             {
                 label: 'Dataset 1',
                 data: data_count,
-                backgroundColor: context => {
-                    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
-                    }
-                },
+                backgroundColor: configuration.COLOR_PIE_CHARTS,
                 hoverOffset: 25
             }
         ]

diff --git a/atlas/static/chart_organism.js b/atlas/static/chart_organism.js
@@ -11,15 +11,15 @@ const getChartDatas = function (data, key) {
 };
 
 //Circle graph for parts graph
-circleChart = function (element, labels, values, colors) {
+circleChart = function (element, labels, values) {
     return new Chart(element, {
         type: 'pie',
         data: {
             labels: labels,
             datasets: [{
                     label: 'observations',
                     data: values,
-                    backgroundColor: colors
+                    backgroundColor: configuration.COLOR_PIE_CHARTS
                 }]
         },
         options: {
@@ -33,30 +33,5 @@ circleChart = function (element, labels, values, colors) {
     })
 };
 
-var color_tab = [
-    '#E1CE7A',
-    '#FBFFB9',
-    '#FDD692',
-    '#EC7357',
-    '#754F44',
-    '#FB6376',
-    '#B7ADCF',
-    '#DEE7E7',
-    '#F4FAFF',
-    '#383D3B',
-    '#7C7C7C',
-    '#B5F44A',
-    '#D6FF79',
-    '#507255',
-    '#381D2A',
-    '#BA5624',
-    '#FFA552',
-    '#F7FFE0',
-    '#49C6E5',
-    '#54DEFD',
-    '#0B5563',
-    '#54DEFD'
-  ];
-
 var groupChartElement = document.getElementById('groupChart');
-const groupChart = circleChart(groupChartElement, getChartDatas(dataset, 'group2_inpn'), getChartDatas(dataset, 'nb_obs_group'), color_tab);
+const groupChart = circleChart(groupChartElement, getChartDatas(dataset, 'group2_inpn'), getChartDatas(dataset, 'nb_obs_group'));
diff --git a/atlas/static/css/atlas.css b/atlas/static/css/atlas.css
@@ -1,7 +1,6 @@
 :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;