Le blog francophone consacré
aux technologies Esri
Conseils & Astuces ArcGIS Online - N°161

Conseils & Astuces ArcGIS Online - N°161

N° 161- Utiliser Arcade et une API tiers pour afficher des barres en pourcentage dans vos fenêtres contextuelles

Lorsque vous affichez dans des fenêtres contextuelles des valeurs d'attributs qui correspondent à des pourcentages, il est peut s'avérer plus efficace de les représenter de manière graphique. Par exemple, en utilisant une barre de progression. Prenons le cas d'une couche présentant les résultats d'une élection, il peut être pertinent de représenter graphiquement le score de chaque candidat avec une barre de progression plutôt qu'un simple texte avec le pourcentage.


Etant donné que ce type de diagramme n'est pas encore disponible dans les diagrammes standards des fenêtres contextuelles ArcGIS, nous utiliserons donc une API tiers pour générer ce diagramme. Voici comment nous allons procéder :

  1. Connectez-vous tout d'abord sur votre portail puis ouvrez la carte web contenant la couche d'entités des circonscription électorales. Ici dans notre exemple, nous disposons pour chaque circonscription d'un attribut contenant le score (en %) de chaque candidat.


  2. Dans la zone de configuration des fenêtres contextuelles la couche de polygones vous pouvez supprimer l'élément "Liste des 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.


  3. Dans l'éditeur Arcade, vous effacerez les instructions déjà présentes, par l'expression Arcade ci-dessous :
    // On précise les attributs dont on va avoir besoin
Expects($feature, "*")

// On initialise un tableau avec les noms des champs contenant les scores (en %) des canadidats
var array_attributs = ["ARTHAUD_exp","DUPONT_AIGNAN_exp","HIDALGO_exp","JADOT_exp","LASSALLE_exp",
                      "LE_PEN_exp","MACRON_exp", "MÉLENCHON_exp","PÉCRESSE_exp","POUTOU_exp",
                      "ROUSSEL_exp","ZEMMOUR_exp"]

// On initialise un tableau avec les noms complets des candidats
var array_candidats = ["Nathalie Arthaud","Nicolas Dupont-Aignan","Anne Hidalgo","Yannick Jadot",
                      "Jean Lassalle","Marine Le Pen", "Emmanuel Macron", "Jean-Luc Mélenchon",
                      "Valérie Pécresse","Philippe Poutou","Fabien Roussel","Éric Zemmour"]

// On initialise le tableau de données contenant les scores des candidats
var array_data = []

// On initialise la chaîne HTML qui sera renvoyée dans la fenêtre
// contextuelle et on démarre une tableau HTML
var HTML = "<table>"

// On bouche sur chaque candidat
for (var i in array_candidats){

  // On récupère le nom du champ correspondant au score du candidats
  var field_name = array_attributs[i]

  // On construit les paramètres du diagramme généré par l'API QuickChart
  // à partir du modèle de barre progression https://shorturl.at/fpxB0
  var progressbar_params = {
    type: 'progressBar',
    data: {
      datasets: [{
        data: [Round($feature[field_name], 1)],
      }]
    },
    options: {
      plugins: {
        datalabels: {
          font: {
            size: 7,
          },
          color: '#4f77a7',
          anchor: 'end',
          align: 'right',
        },
      },
    },
  }
  // On construit l'URL complète permettant de générer l'image de la barre de progression
  var progressbar_url = "https://quickchart.io/chart?w=150&h=15&c=" + UrlEncode(Text(progressbar_params))

  // On ajoute la ligne dans le tableau HTML avec le nom du candidat et la barre de progression
  HTML += "<tr>"
  HTML += "<td style='width:35%; font-size: 13px;'>" + array_candidats[i] + "</td>"
  HTML += "<td>" + "<img src='" + progressbar_url + "' /></td>"
  HTML += "</tr>"
}

// On termine le tableau HTML
HTML += "</table>"

// On renvoie la chaîne HTML finalisée
return { 
  type : 'text', 
  text : `${HTML}`
}
    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 notera également l'usage du caractère backtick ( ` et non ') pour utiliser des littéraux et construire la chaîne HTML souhaitée. 
     
  4. Vous pouvez maintenant cliquer sur le bouton "Terminé" pour valider l'expression.

  5. La fenêtre contextuelle s'affiche désormais avec les résultats des votes par une barre de progression pour chaque candidat.


Remarque: L'API QuickChart permet d'aller plus loin en termes de personnalisation. On pourra, par exemple, supprimer les bordures des barres de progressions et représenter les candidats avec différentes couleurs.


Je vous mets l'expression Arcade correspondante ci-dessous :
// On précise les attributs dont on va avoir besoin
Expects($feature, "*")

// On initialise un tableau avec les noms des champs contenant les scores (en %) des canadidats
var array_attributs = ["ARTHAUD_exp","DUPONT_AIGNAN_exp","HIDALGO_exp","JADOT_exp","LASSALLE_exp",
                      "LE_PEN_exp","MACRON_exp", "MÉLENCHON_exp","PÉCRESSE_exp","POUTOU_exp",
                      "ROUSSEL_exp","ZEMMOUR_exp"]

// On initialise un tableau avec les noms complets des candidats
var array_candidats = ["Nathalie Arthaud","Nicolas Dupont-Aignan","Anne Hidalgo","Yannick Jadot",
                      "Jean Lassalle","Marine Le Pen", "Emmanuel Macron", "Jean-Luc Mélenchon",
                      "Valérie Pécresse","Philippe Poutou","Fabien Roussel","Éric Zemmour"]

// On initialise un tableau avec les couleurs représentant les candidats
var array_colors = ["#bb0000","#0082C4","#FF8080","#00c000",
                      "#26c4ec","#0D378A", "#a03bbd", "#cc2443",
                      "#0066CC","#bb0000","#dd0000","#404050"]

// On initialise le tableau de données contenant les scores des candidats
var array_data = []

// On initialise la chaîne HTML qui sera renvoyée dans la fenêtre
// contextuelle et on démarre une tableau HTML
var HTML = "<table>"

// On bouche sur chaque candidat
for (var i in array_candidats){
  // On récupère le nom du champ correspondant au score du candidats
  var field_name = array_attributs[i]
  // On construit les paramètres du diagramme généré par l'API QuickChart
  // à partir du modèle de barre progression https://shorturl.at/fpxB0
  var progressbar_params = {
    type: 'progressBar',
    data: {
      datasets: [{
        data: [Round($feature[field_name], 1)],
        backgroundColor: array_colors[i],
        borderColor: 'transparent'
      },
      {
        data: [100],
        backgroundColor: '#DDDDDD',
        borderColor: 'transparent'
      }]
    },
    options: {
      plugins: {
        datalabels: {
          font: {
            size: 7,
          },
          color: array_colors[i],
          anchor:'end',
          align: 'right',
        },
      },
    },
  }
  // On construit l'URL complète permettant de générer l'image de la barre de progression
  var progressbar_url = "https://quickchart.io/chart?w=150&h=15&c=" + UrlEncode(Text(progressbar_params))

  // On ajoute la ligne dans le tableau HTML avec le nom du candidat et la barre de progression
  HTML += "<tr>"
  HTML += "<td style='width:35%;font-size: 13px;color:"+array_colors[i]+"'>" + array_candidats[i] + "</td>"
  HTML += "<td>" + "<img src='" + progressbar_url + "' /></td>"
  HTML += "</tr>"
}
// On termine le tableau HTML
HTML += "</table>"

// On renvoie la chaîne HTML finalisée
return { 
  type : 'text', 
  text : `${HTML}`
}
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

1 commentaire
, ,

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article:

1 comments :

Hemanth kumar a dit…

Hi

Its a great content and very useful

Thanks

11:25

Enregistrer un commentaire

Inscription à : Publier les commentaires ( Atom )