N° 168 - Utiliser Arcade et une API tiers pour synthétiser vos données dans des
diagrammes radar dans vos fenêtres contextuelles
Dans
mon précédent article, je vous montrais comment synthétiser, par quartier, les signalements
réalisés par des citoyens avec l'application "Dans Ma Rue". Dans mon
exemple, j'avais choisi de les représenter par type et par mois à l'aide
d'un diagramme à barres empilées. Aujourd'hui, je propose de modifier la
représentation en utilisant un diagramme de type "radar" qui convient bien à
l'affichage d'effectif par mois, et ceci pour plusieurs catégories.
Etant donné que les diagrammes polaires ne sont pas des éléments
disponibles en standard dans les fenêtres contextuelles ArcGIS, nous
utiliserons donc une API tiers pour les générer. Voici donc comment nous
allons procéder :
-
Connectez-vous tout d'abord sur votre portail ArcGIS puis ouvrez la
carte web contenant la couche d'entités. Par défaut, la fenêtre
contextuelle présente la liste des différents attributs.
-
Dans la zone de configuration des fenêtres contextuelles la couche,
vous pouvez supprimer l'élément "Liste de champs" proposé par
défaut puis ajouter un élément de contenu Arcade. Ce dernier nous
permettra de réaliser les calculs statistiques nécessaires et
configurer un rendu personnalisé (en HTML) de nos informations.
-
Dans l'éditeur Arcade, vous effacerez les instructions déjà présentes
par l'expression Arcade ci-dessous :
On notera l'usage de l'API QuickChart qui permet de générer différents types de diagrammes à partir d'une url et une série de paramètres. Celle-ci est basée sur des librairies Open Source que vous pouvez installer sur votre propre serveur ou utiliser en ligne de manière gratuite (avec une limite sur le nombre de requêtes). Une version payante permet un accès illimité.// On définit les attributs du quartier que l'on souhaite récupérer Expects($feature, "*") // On récupère la couche des signalements depuis la carte var signalements = FeatureSetByName($map, "Signalements Dans Ma Rue 2021") // On sélectionne les signalements qui intersectent le quartier var Intersect_Signalements = Intersects (signalements,$feature) // On définit un tableau pour les couleurs des différents types de signalement var array_colors=['rgb(255, 224, 64)','rgb(182, 129, 75)','rgb(156, 79, 156)','rgb(107, 101, 213)','rgb(32, 158, 205)', 'rgb(244, 130, 216)','rgb(234, 73, 82)','rgb(168, 201, 54)','rgb(250, 145, 33)','rgb(67, 177, 153)'] // On définit un tableau pour les libellés des différents mois var array_labels = ['Janvier','Fevrier','Mars','Avril','Mai','Juin', 'Juillet','Aout','Septembre','Octobre','Novembre','Décembre'] // Récapitulation des signalements par type et par mois var comptage_par_type_et_mois = GroupBy(Intersect_Signalements, [ 'TYPE_DECLARATION', 'MOIS_DECLARATION'], {name:'count', expression: '1',statistic:'COUNT'}) // On crée un FeatureSet avec les différents types de signalement var types_Signalements=Distinct(comptage_par_type_et_mois, 'TYPE_DECLARATION') // On trie le FeatureSet par ordre alphabétique pour une bonne correspondance avec les couleurs types_Signalements = OrderBy(types_Signalements, 'TYPE_DECLARATION ASC') // Initialisation d'un tableau pour stocker les datasets à représenter dans le diagramme var dataset_chart = [] var i = 0 // On boucle sur les différents types de signalement for (var f in types_Signalements){ var type = f.TYPE_DECLARATION var comptage_par_mois = Filter(comptage_par_type_et_mois,'TYPE_DECLARATION = @type') comptage_par_mois = OrderBy(comptage_par_mois, 'MOIS_DECLARATION ASC') // On initialise un tableau pour stocker les comptages par mois var array_data=[] // On boucle sur chaque mois for (var f in comptage_par_mois){ Push(array_data, f.COUNT) } // On construit un dictionnaire qui décrit chaque dataset pour le diagramme var dict = { // La couleur de remplissage des barres est celle des contours des barres // mais avec une opacité de 80% backgroundColor: Replace(Replace(array_colors[i],"rgb","rgba"),")",",0.45)"), borderColor: array_colors[i], data: array_data, label: type, borderWidth: 1.5, } Push(dataset_chart,dict) i++ } // On construit les paramètres permettant de générer le diagramme avec l'API QuickChart // Pour cela on se base sur le modèle de diagramme radar : https://tinyurl.com/mr4c24m2 var params_chart = { type: 'radar', data: { labels: array_labels, datasets: dataset_chart, }, options: { legend: { display: true, position: 'bottom', align: 'start', fontsize: '7', }, spanGaps: false, elements: { line: { tension: 0.000001, }, }, }, } // On applique un encodage d'url correct pour les paramètres du diagramme var param_url = URLEncode(Text(params_chart)) // On construit l'url complète permettant de générer l'image du diagramme var chart_url="https://quickchart.io/chart?width=600&height=600&c=" + param_url // On construit la chaîne HTML à renvoyer var HTML = `<div>${Count(Intersect_Signalements)} signalements effectués dans ce quartier pour 2021. Voici leur répartition saisonnalisée :<br/><br/><img src='${chart_url}' /></div>` // On renvoie la chaine HTML du contenu de la fenêtre contextuelle return { type : 'text', text : HTML }
On notera également l'usage du caractère backtick ( ` et non ') pour utiliser des littéraux et construire la chaîne HTML souhaitée.
-
Vous pouvez maintenant cliquer sur le bouton "Terminé" pour
valider l'expression.
-
La fenêtre contextuelle s'affiche désormais avec les informations sur
les signalements par type et par mois pour le quartier cliqué, le tout
sous la forme d'un diagramme à barres empilées avec la légende
associée.
J'espère que cet exemple vous inspirera et que vous pourrez l'adapter
à vos cas d'usage.
Bonne route sur ArcGIS Online !
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS
Online, cliquez sur ce lien
Modifier
0 comments :
Enregistrer un commentaire