arcOrama: Le blog consacré à ArcGIS et aux technologies Esri

N° 159 - Utiliser Arcade et une API tiers pour ajouter un diagramme semi-circulaire dans vos fenêtres contextuelles

Dans mon précédent article de Conseils & Astuces ArcGIS Online, nous avons vu comment utiliser des relations spatiales (intersection, inclusion, proximité, ...) avec Arcade pour réaliser des calculs statistiques sur des entités appartenant à d'autres couches et les afficher dans une fenêtre contextuelle. Je vous propose de repartir de cet exemple des départements et des festivals culturels pour aller un peu plus loin dans la présentation du comptage réalisé.

Une option intéressante consiste à proposer une visualisation du nombre de festivals par discipline dans un diagramme semi-circulaire. 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 donc comment nous allons procéder :

Connectez-vous tout d'abord sur votre portail puis ouvrez la carte web contenant vos 2 couche d'entités. Ici dans notre exemple, nous disposons donc d'une couche des départements français et d'une seconde couche décrivant les festivals pour l'année 2021. Ces derniers sont représentés en fonction de la discipline prédominante de chaque festival.
Dans la zone de configuration des fenêtres contextuelles la couche de polygones 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 précise les attributs dont on va avoir besoin dans l'expression Arcade
Expects($feature,"*")

// On récupère la couche des festivals depuis la carte
var festivals = FeatureSetByName($map, "Festivals 2022 en France")

// On récupère la géométrie du département
var geometrie_dept = Geometry($feature) 

// On récupère les entités "festivals" qui intersectent la géométrie du département
var festivals_dans_dept = Intersects(festivals, geometrie_dept)

// On génère une table regroupant les festivals par discipline et on compte le nombre de
// festivals dans chaque discipline
var stats = GroupBy(festivals_dans_dept, "discipline_dominante", [
    {name: "Effectif", expression: "discipline_dominante", statistic: "COUNT"}
    ])

// On prépare un dictionnaire permettant d'associant la bonne couleur à chaque discipline
var dict_colors = {
        "Arts visuels, arts numériques": "#fedd42",
        "Cinéma, audiovisuel": "#9a5c9d",
        "Livre, littérature": "#a9c63e",
        "Musique": "#61aaee",
        "Pluridisciplinaire": "#f79030",
        "Spectacle vivant": "#c44732"
      }

// Initilisation de 2 tableaux pour collecter les effectifs (array_data) et les couleurs
// (array_colors) des disciplines de festival présentes dans ce département
var array_data = []
var array_colors =[]

// On construit la chaîne HTML qui servira de légende 
// et on profite de la boucle pour alimenter les 2 tableaux
// array_data et array_colors avec les valeurs correspondantes
var HTML = "<div>"
for (var f in OrderBy(stats, 'discipline_dominante ASC')){
  Push(array_data,f.Effectif)
  Push(array_colors,dict_colors[f.discipline_dominante])
  HTML += "<span style='font-weight: bold; color: "+ dict_colors[f.discipline_dominante]+"'>" 
       + f.discipline_dominante + " </span>"
}
HTML += "</div>"

// On prépare les paramètres de l'URL du diagramme semi-circulaire qui sera généré à l'aide 
// de l'API QuickChart (voir les détails du modèle suivant : https://bit.ly/3JjxgzJ )
var params_chart = {
  "type": "doughnut",
  "data": {
    "datasets": [{
      "label": "Comptage des effectis par discipline",
      "data": array_data, // On utilise ici notre tableau des effectifs
      "backgroundColor": array_colors, // On utilise ici notre tableau des couleurs des disciplines
      "textcolor":["#000"],
      "borderWidth": 0,
    }] 
  },
  "options": {
    "rotation": 3.14159265359,
    "circumference": 3.14159265359,
    "cutoutPercentage": 70,
    "plugins": {
      "datalabels": { "display": true , "color": "#000", "font": {"size": "20"}},
      "doughnutlabel": {
        "labels": [
          {
            "text": " ",
            "color": "#000",
            "font": {
              "size": "85"
            },
          },
          {
            "text": "Festivals",
            "color": "#000",
            "font": {
              "size": "32"
            },
          },
          {
            "text": "par discipline dominante",
            "font": {
              "size": "20"
            },
          },
        ]
      }
    }   
  }
}

// On encode ces paramètres avec des caractères d'URL valides
var params_url = UrlEncode(Text(params_chart))
// On construit l'URL complète permettant de générer le diagramme
var url = "https://quickchart.io/chart?c=" + params_url

// On revoit la chaîne HTML complète (diagramme + légende) comme contenu de la fenêtre contextuelle
return { 
  type : 'text', 
  text : `<img src='${url}' />${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.

Vous pouvez maintenant cliquer sur le bouton "Terminé" pour valider l'expression.
La fenêtre contextuelle s'affiche désormais avec les informations de chiffre d'affaires attendues.

On peut vérifier que lorsque certaines disciplines de festival n'existent pas dans un département, elles ne sont pas reprisent dans notre légende.