Le blog francophone consacré
aux technologies Esri

Conseils & Astuces ArcGIS Online - N°150

N° 150 - Exploiter des éléments de contenu Arcade "Diagramme" dans vos fenêtres contextuelles


Dans ce précédent article, je vous ai présenté la notion d'éléments de contenu Arcade et en particulier ceux de type "texte enrichi". Approfondissons aujourd'hui la façon dont on peut utiliser Arcade dans les fenêtres contextuelles pour alimenter des diagrammes.


Les diagrammes constituent un excellent moyen de visualiser des séries de données, en particulier lorsque vous voulez montrer des tendances et des relations. L'utilisation d'Arcade pour définir un diagramme dans vos fenêtres contextuelles permet non seulement de générer des diagrammes à partir des attributs de l'entité sur laquelle vous avez cliqué, mais également à partir d'autres couches de votre carte. Nous allons voir les deux cas.


Diagramme basé directement sur les attributs de la couche d'entités

Dans le cas d'un diagramme directement basé sur les valeurs des attributs de votre couche, il n'y a pas besoin de recourir à une expression Arcade. En effet, vous pouvez simplement ajouter un élément de diagramme lors de la configuration de la fenêtre contextuelle de Map Viewer. 
 

 
Il vous suffira ensuite de définir les paramètres du diagramme via l'interface prévue à cet effet.



Diagramme basé indirectement sur les attributs de la couche d'entités

Dans certains cas, les valeurs à représenter dans le diagramme ne sont pas directement celles des attributs de la couche mais le résultat d'un calcul préalable. Par exemple, nous avons ici une couche contenant la production de biométhane mensuelle par région depuis 2018.

 
L'idée est de représenter ces informations par un diagramme pour comprendre l'évolution de cette production de biométhane. Le nombre de valeurs est important et, pour plus de lisibilité, je souhaite représenter cette information par trimestre. Il est alors intéressant d'utiliser un élément de contenu Arcade de type "Diagramme". 


Ci-dessous l'expression Arcade qui permettra de retourner la définition de ce diagramme. Comme évoqué dans mon "Conseil & Astuces ArcGIS Online" précédent, n'hésitez pas à démarrer en insérant le modèle adéquat pour disposer de la structure du code Arcade et le schéma de l'élément de contenu correspondant à ce que vous souhaitez ajouter dans votre fenêtre contextuelle.

Expects($feature, '*')
// On constitue le tableau des noms de mois pour récupérer les différents attributs correspondants
var txt_mois=["01","02","03","04","05","06","07","08","09","10","11","12"];
// On initialise le dictionnaire des clés/valeurs en sortie pour le diagramme
var dict_attributs = Dictionary();
// On initialise le tableau qui contiendra les attributs en sortie pour le diagramme
var array_attributs = [];

// On boucle sur les 5 années
for(var annee=2018; annee <= 2022; annee++) {
var index_mois=0;
// On boucle sur 4 trimestres
for(var t=0; t <= 3; t++) {
var production_trimestre=0;
// On boucle sur 3 mois
for(var m=0; m <= 2; m++) {
// On construit le nom de l'attribut correspondant au mois et année courants tel // que l'on peut le trouver la table. Par exemple: F2022_12 pour décembre 2022
var nom_attribut = "F" + Text(annee) + "_" + txt_mois[index_mois]
// On ajoute la valeur du mois courant à la somme totale du trimestre
production_trimestre = production_trimestre + $feature[nom_attribut]
index_mois++
}
var key = "T"+Text(t+1)+"_"+annee
// On ajoute au dictionnaire la clé (trimestre et année) et la
// valeur (production de biométhane de ce trimestre)
dict_attributs[key]=production_trimestre
// On ajoute le nom de l'attributs
Push(array_attributs,key)
}
}

return {
type: 'media',
title : 'Evolution trimestrielle de la production de biométhane (MWh)',
description : '',
attributes : dict_attributs, // Dictionnaire des clés/valeurs en sortie
mediaInfos: [{
type : 'linechart', // | barchart | piechart | columnchart
title : '',
caption : '',
altText : 'Evolution trimestrielle de la production de biométhane (MWh)', //altext est le texte qui sera lu par les lecteurs d'écran
value : {
fields: array_attributs, // Tableau des attributs en sortie à représenter dans le diagramme
//normalizeField : '', // Nom de l'attribut à utiliser pour normaliser les valeurs
}
}]
}


La carte web est accessible en live ici.

 
Diagramme basé sur les attributs d'une autre couche d'entités

Prenons maintenant l'exemple d'une couche contenant les données temps-réel des incidents signalés dans l'application Waze. 


Notre objectif est de pouvoir obtenir dynamiquement des informations sur leur répartition par département. Pour cela, nous souhaitons pouvoir cliquer sur un département et afficher un diagramme de répartition des différents types d'incident (attribut subtype de la couche). De nouveau, une expression Arcade est utilisée pour définir un élément de contenu de type "Diagramme":

Expects($feature, '*')

// Récupération des incidents qui intersectent le département courant
var Intersect_IncidentsWaze = Intersects (FeatureSetByName($map,"Couche Live des incidents Waze"),$feature)
// On compte le nombre d'incidents récupérés
var NbIncidents = Count(Intersect_IncidentsWaze)

// Récapitulation des incidents sur l'attribut 'subtype'
var Liste_Types_Incidents = groupBy(Intersect_IncidentsWaze,'subType',
{name:'count', expression:'subType',statistic:'COUNT'})

// On trie la table de récapitulation par effectifs décroissants
var TypesIncidents_CountDesc = OrderBy(Liste_Types_Incidents,'count DSC')
// On initialise un dictionnaire pour les clés/valeurs du diagramme
var chartValues={}
// On initialise un tableau pour la liste des champs à utiliser dans le diagramme
var chartNames=[]
// On remplit le dictionnaire et le tableau à partir des données de la table
for ( var f in TypesIncidents_CountDesc ) {
chartValues[f.subType]=f.count
Push(chartNames , f.subType )
}

return {
type: 'media',
title : 'Répartition des incidents Waze dans le département',
description : Text(NbIncidents)+ " incidents",
attributes : chartValues,
mediaInfos: [{
type : 'barchart', //linechart | barchart | piechart | columnchart
//title : '',
//caption : '',
altText : 'Répartition des incidents Waze dans le département',
value : {
fields: chartNames,
//normalizeField : '',
}
}]
}


Dans l'exemple ci-dessus, nous croisons la couche des incidents avec la couche des départements. On utilise ensuite la fonction groupBy() pour obtenir le nombre total d'incidents regroupés par sous-type.

Une fois que nous avons ces informations, nous pouvons les utiliser pour remplir le dictionnaire des attributs et les champs à utiliser dans l'objet de retour (le diagramme). On finalise ensuite le diagramme en ajoutant un titre, une description et un texte alternatif.

Voici à quoi ressemble la fenêtre contextuelle lorsque vous cliquez sur un département de la carte. Cet exemple aurait été très laborieux et peu efficace en utilisant uniquement des expressions d'attributs et difficile à maintenir pour tout nouveau type d'incident. Les éléments de contenu d'arcade vous offrent à la fois flexibilité et efficacité.


Dans le prochain "Conseils & Astuces ArcGIS Online", nous terminerons cette série d'articles en abordant les éléments de contenu de type "Liste de champs".

Bonne route sur ArcGIS Online !
   
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article: