Conseils & Astuces ArcGIS Online - N°159

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