From ff8201c73718a45d09578adf5b65de2f7ddfebad 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/configuration/config.py.example | 29 +++++++++++++++++++++ atlas/configuration/config_schema.py | 6 +++++ atlas/static/chart.js | 37 ++------------------------- atlas/static/chart_organism.js | 31 +++------------------- atlas/static/css/atlas.css | 1 - 5 files changed, 40 insertions(+), 64 deletions(-) diff --git a/atlas/configuration/config.py.example b/atlas/configuration/config.py.example index bd7da925e..515da425f 100644 --- 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 index fe52bad08..90a6bf703 100644 --- a/atlas/configuration/config_schema.py +++ b/atlas/configuration/config_schema.py @@ -140,6 +140,12 @@ 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 index 435d5d4a7..22842d0e1 100644 --- 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 index 35ae01e12..94ee69753 100644 --- a/atlas/static/chart_organism.js +++ b/atlas/static/chart_organism.js @@ -11,7 +11,7 @@ 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: { @@ -19,7 +19,7 @@ circleChart = function (element, labels, values, colors) { 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 index 515d12f89..0513c98d0 100644 --- 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;