Conseils & Astuces ArcGIS Online - N°187
N°187 - Afficher une barre graphique de statistiques de l'ensemble des entités de la couche dans des fenêtres contextuelles avec Arcade
Dans mon article précédent, je vous donnais un exemple d'expression Arcade pour afficher un tableau de statiques et permettre ainsi à l'utilisateur de comparer la valeur de l'entité courante à l'ensemble des valeurs des entités de la couche. La présentation en tableau est simple à comprendre pour un large public mais on peut envisager une représentation plus scientifique et plus graphique en intégrant notamment les informations liées à l'écart type de la série de valeurs de l'ensemble du jeu de données. Dans cet article, je vous propose une expression Arcade qui affiche une barre graphique reprenant la valeur de l'entité courante ainsi que les indicateurs statistiques : min, max, moyenne et écart-type, sur l'ensemble du jeu de données.
Reprenons l'exemple d'une couche d'enseignes de jardinage sur le département de la Manche qui contient des champs avec les chiffres d'affaire 2022 pour chaque magasin. Nous souhaitons pouvoir consulter le chiffre d'affaire de chaque magasin mais également pouvoir le comparer avec le chiffres d'affaire total de l'ensemble des magasins.
Voici comment vous pouvez utiliser Arcade pour afficher les statistiques souhaitées (min, max, moyenne, total, ...), dans la fenêtre contextuelle, en utilisant un tableau.
- Après avoir ajouté la couche des jardineries dans la carte, vous afficherez l'interface de définition des fenêtres contextuelles. Vous supprimerez la liste des champs proposée par défaut et vous ajouterez une expression Arcade.
- Vous donnerez tout d'abord un nom à votre expression, par exemple ici : "Comparaison du chiffre d'affaire 2022".
Vous saisirez ensuite l'expression Arcade suivante :Expects($feature, "*") // Nom du champ contenant les valeurs var nom_champ = "CA2022" // Récupération de la valeur de l'entités courante var valeur = $feature[nom_champ] // Largeur de la barre graphique var largeur_barre = 400 // Titre du graphique var titre = "Chiffre d'affaire 2022 :" // Unités des valeurs présentées var unite = "€" // Couleur principale de la barre graphique var couleur_barre ="#EBF5FB" // Couleur pour la zone de l'intervalle d'un ecart-type autour de la moyenne var couleur_zone_ecart_type ="#AED6F1" // Calcul des statistiques var valeur_min = Min($layer,nom_champ) var valeur_max = Max($layer,nom_champ) var valeur_moy = Mean($layer,nom_champ) var valeur_std = Stdev($layer,nom_champ) // Calcul des largeurs (en pixels) des différentes zones de la barre graphique var plage = valeur_max - valeur_min var plage_valeur1 = ((valeur-valeur_min)/plage) * largeur_barre var plage_valeur2 = ((valeur_max-valeur)/plage) * largeur_barre var plage_std1 = ((valeur_moy-valeur_std-valeur_min)/plage) * largeur_barre var plage_std2 = ((valeur_max-(valeur_moy+valeur_std))/plage) * largeur_barre var plage_std = largeur_barre-plage_std1-plage_std2 // Construction de la chaîne HTML qui présentera les informations var strHTML = "<span style='font-family: arial;font-size: 10pt;'>" strHTML += Titre strHTML += "</span><br/><br/>" // Premier tableau HTML contenant min, moyenne et max strHTML += "<table style='border-collapse: collapse;width:"+Text(largeur_barre)+"px'>" strHTML += "<tr style='height:10px'><td style='width:"+Text(plage_std1+40) + "px;text-align: left;font-family: arial;font-size: 8pt;'>Min:<br/>" + Text(valeur_min) + " " + Text(unite) + "</td>" strHTML += "<td colspan='2' style='width:"+Text((plage_std)-80) + "px;text-align: center;font-family: arial;font-size: 8pt;'>Moy:<br/>" + Text(valeur_moy,'#')+ " " + Text(unite) + "</td>" strHTML += "<td style='width:"+Text(plage_std2+40) + "px;text-align: right;font-family: arial;font-size: 8pt;'>Max:<br/>" + Text(valeur_max)+ " " + Text(unite) + "</td>" strHTML += "</tr>" strHTML +="</table>" // Second tableau HTML contenant la barre du graphique strHTML += "<table style='border-collapse: collapse;width:"+Text(largeur_barre)+"px'>" strHTML += "<tr style='height:20px'>" strHTML += "<td style='border-left: 1px solid #000;width:"+ Text(plage_std1)+"px;background-color: " + couleur_barre + "'/>" strHTML += "<td style='width:"+Text(plage_std/2) + "px;text-align: center;font-family: arial;font-size: 8pt;background-color: " + couleur_zone_ecart_type + ";" + "border-right: 1px solid #000;'>-σ</td>" strHTML += "<td style='width:"+Text(plage_std/2) + "px;text-align: center;font-family: arial;font-size: 8pt;background-color: " + couleur_zone_ecart_type + "'>" + "+σ</td>" strHTML += "<td style='border-right: 1px solid #000;width:"+Text(plage_std2)+"px;background-color: " + couleur_barre + "'/>" strHTML += "</tr>" strHTML +="</table>" // Troisième tableau HTML pour afficher le curseur de la valeur courante var alignement_fleche_valeur ="center" if(plage_valeur1==0){alignement_fleche_valeur ="left"} if(plage_valeur2==0){alignement_fleche_valeur ="right"} strHTML += "<table style='border-collapse: collapse;width:"+Text(largeur_barre)+"px'>" strHTML += "<tr style='height:10px'>" if(plage_valeur1>0){ strHTML += "<td style='width:"+Text(plage_valeur1-1)+"px'/>" } strHTML += "<td style='width:2px;text-align: " + alignement_fleche_valeur + ";font-family: arial;font-size: 12pt;'><b>❘</b></td>" //↑ if(plage_valeur2>0){ strHTML += "<td style='width:"+Text(plage_valeur2-1)+"px'/>" } strHTML += "</tr>" strHTML +="</table>" // Quatrième tableau pour afficher la valeur courante var alignement_texte_valeur ="center" if(plage_valeur1<50){alignement_texte_valeur ="left"} if(plage_valeur2<50){alignement_texte_valeur ="right"} strHTML += "<table style='border-collapse: collapse;width:"+Text(largeur_barre)+"px'>" strHTML += "<tr style='height:10px'>" if(plage_valeur1>50){ strHTML += "<td style='width:"+Text(plage_valeur1-50)+"px'/>" } strHTML += "<td style='width:100px;text-align: " + alignement_texte_valeur + ";font-family: arial;font-size: 8pt;'><b>" + Text(valeur,'#.##')+ " " + Text(unite) + "</b></td>" if(plage_valeur2>50){ strHTML += "<td style='width:"+Text(plage_valeur2-50)+"px'/>" } strHTML += "</tr>" strHTML +="</table>" // On renvoie la chaîne HTML pour remplir la fenêtre contextuelle return { type : 'text', text : strHTML }- Votre carte affiche désormais un tableau avec l'information sur la valeur du chiffre d'affaire du magasin mais également le chiffre d'affaire minimum, maximum, moyen et total de l'ensemble du jeu de données. Le tableau intègre aussi le nombre total d'entités et la part du chiffre d'affaire par rapport au total. On notera que si la couche possède un ensemble de définition, les statistiques ne seront calculées que sur les entités filtrées.
- Vous pouvez maintenant modifier le nom du champ, le titre, les couleurs, ... et même le code HTML pour personnaliser l'aspect de cette barre graphique de statistiques.
Représenter plusieurs attributs:
Si vous souhaitez afficher cette barre de statistiques pour plusieurs champs de votre couche, plutôt que de rédiger une expression Arcade unique, je vous recommande d'insérer plusieurs blocs Arcade en dupliquant celui que vous venez de réaliser.
Après avoir modifié le nom du champ, le titre et les couleurs, vous pourrez obtenir ce type de rendu pour votre fenêtre contextuelle :
Bonne route sur ArcGIS Online !
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien.
0 comments :
Enregistrer un commentaire