From cfb5e015425bc3adf92007db83c3ece404651258 Mon Sep 17 00:00:00 2001 From: Joaquim Nallar Date: Tue, 3 Dec 2024 11:43:46 +0100 Subject: [PATCH] feat: Add data source organism on species page (#538) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Un graphique de provenance des données a été rajouté afin de visualiser la participation de chaques organismes a l'observation d'un Taxon. --- atlas/atlasRoutes.py | 3 + atlas/configuration/config_schema.py | 1 + .../repositories/vmCorTaxonOrganism.py | 20 +++++ atlas/static/chart.js | 83 ++++++++++++++++++- atlas/static/css/atlas.css | 1 + atlas/templates/speciesSheet/_main.html | 4 +- atlas/templates/speciesSheet/charts.html | 6 ++ docs/changelog.rst | 1 + 8 files changed, 116 insertions(+), 3 deletions(-) create mode 100644 atlas/modeles/repositories/vmCorTaxonOrganism.py diff --git a/atlas/atlasRoutes.py b/atlas/atlasRoutes.py index 21b95163d..fd3ca7bbd 100644 --- 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 index e1e292cd1..e6dc1f857 100644 --- 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 new file mode 100644 index 000000000..6c246d6a6 --- /dev/null +++ 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 index 57b546786..8ee296b16 100644 --- 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 index 0513c98d0..515d12f89 100644 --- 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 index 08715e684..eec6b8caa 100644 --- 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 index f12648a20..30d519439 100644 --- a/atlas/templates/speciesSheet/charts.html +++ b/atlas/templates/speciesSheet/charts.html @@ -12,5 +12,11 @@

{{ _('monthly.obs') }}

{% endif %} + {% if configuration.AFFICHAGE_GRAPH_PROVENANCE_DONNEE %} +

{{ _('data.source') }}

+
+ +
+ {% endif %} {% endblock %} diff --git a/docs/changelog.rst b/docs/changelog.rst index ac203698d..76f42eb1f 100644 --- 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**