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

Conseils & Astuces ArcGIS Online - N°168

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 :

  1. 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. 


  2. 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.


     
  3. Dans l'éditeur Arcade, vous effacerez les instructions déjà présentes par l'expression Arcade ci-dessous :

    // 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 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 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

Ajouter un commentaire
, , Edit

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article:
Inscription à : Publier les commentaires ( Atom )