1. Après avoir ajouté la couche des tronçons hydrographique 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.
   
   
   

   
   
2. Vous donnerez tout d'abord un nom à votre expression, par exemple ici : "Comparaison du chiffre d'affaire 2022".
   
   
   
   
   
3. 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;'>-&#x3C3;</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 + "'>" + 
              "+&#x3C3;</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>&#10072;</b></td>" //&#8593;
   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
   }
   
   

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

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

   
   

1. Après avoir ajouté la couche des tronçons hydrographique 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.
   
   
   

   
   
2. Vous donnerez tout d'abord un nom à votre expression, par exemple ici : "Comparaison du chiffre d'affaire 2022".
   
   
   
   
   
3. Vous saisirez ensuite l'expression Arcade suivante :

   Expects($feature, "*")
   
   // Nom du champ à représenter
   var nom_champ = "CA2022"
   // Récupération de la valeur de l'entité courante
   var valeur = $feature[nom_champ]
   
   // Paramètre de représentation du tableau
   var titre = "Chiffre d'affaire 2022"
   var couleur_fond_titre = "#0B680C"
   var couleur_texte_titre = "#ffffff"
   var couleur_fond_valeur = "#9DC59D"
   var couleur_texte_valeur = "#000000"
   var unite = "€"
   var largeur_tableau=250
   
   // Récupération des statistiques sur l'ensemble de la couche
   var valeur_min = Min($layer,nom_champ)
   var valeur_max = Max($layer,nom_champ)
   var valeur_moy = Mean($layer,nom_champ)
   var valeur_count = Count($layer)
   var valeur_sum = Sum($layer,nom_champ)
   
   // Construction de la chaîne HTML
   var strHTML = ""
   strHTML += "<table style='width: "+Text(largeur_tableau) +
              "px;border-collapse: collapse;font-family: arial;font-size: 10pt;'>"
   strHTML += "<tr style='border: 1px solid #333;background-color: " +
              couleur_fond_titre+"'><td colspan='2' style='color: " +
              couleur_texte_titre+"'><b>"+titre+"</b></td></tr>"
   strHTML += "<tr style='border: 1px solid #333;background-color: " +
              couleur_fond_valeur+";color: " +
              couleur_texte_valeur+"'><td><b>Valeur : </b></td><td><b>" + 
              Text(valeur) + " " + unite + "</b></td></tr>"
   strHTML += "<tr style='border: 1px solid #333'><td>Minimum : </td><td>" + 
              Text(valeur_min) + " " + unite + "</td></tr>"
   strHTML += "<tr style='border: 1px solid #333'><td>Maximum : </td><td>" + 
              Text(valeur_max) + " " + unite + "</td></tr>"
   strHTML += "<tr style='border: 1px solid #333'><td>Nombre d'entités : </td><td>" + 
              Text(valeur_count) + "</td></tr>"
   strHTML += "<tr style='border: 1px solid #333'><td>Moyenne : </td><td>" + 
              Text(valeur_moy,"#.##") + " " + unite + "</td></tr>"
   strHTML += "<tr style='border: 1px solid #333'><td>Total : </td><td>" + 
              Text(valeur_sum) + " " + unite + "</td></tr>"
   strHTML += "<tr style='border: 1px solid #333'><td>Part du total : </td><td>" +
              Text(100*valeur/valeur_sum,"#.##") + "%</td></tr>"
   strHTML +="</table>"
   
   // On renvoie la chaîne HTML pour remplir la fenêtre contextuelle
   return { 
   	type : 'text', 
   	text : strHTML
   }
   
   

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

   
   
5. Vous pouvez maintenant modifier le nom du champ, le titre, les couleurs, ... et même le code HTML pour personnaliser l'aspect de ce tableau de statistiques. 
   

   
   

Expects($feature, "*")

// Nom du champ à représenter
var nom_champ = "Capacite_Chambres"
// Rayon de recherche en kilomètres
var rayon_recherche = 5
// Récupération de la valeur de l'entité courante
var valeur = $feature[nom_champ]

// Paramètre de représentation du tableau
var titre = "Capacité hotelière 2021"
var couleur_fond_titre = "#521d80"
var couleur_texte_titre = "#ffffff"
var couleur_fond_valeur = "#bf8deb"
var couleur_texte_valeur = "#000000"
var unite = "chambres"
var largeur_tableau=300

// Calcul de la géométrie de la zone tampon pour réaliser la recherche 
var zone_tampon = Buffer($feature, rayon_recherche, 'kilometer')

// Sélection des entités qui intersectent la zone tampon
var selection = Intersects($layer, zone_tampon)

// Récupération des statistiques sur la sélection
var valeur_min = Min(selection,nom_champ)
var valeur_max = Max(selection,nom_champ)
var valeur_moy = Mean(selection,nom_champ)
var valeur_count = Count(selection)
var valeur_sum = Sum(selection,nom_champ)

// Construction de la chaîne HTML
var strHTML = ""
strHTML += "<table style='width: "+Text(largeur_tableau) +
           "px;border-collapse: collapse;font-family: arial;font-size: 10pt;'>"
strHTML += "<tr style='border: 1px solid #333;background-color: " +
           couleur_fond_titre+"'><td colspan='2' style='color: " +
           couleur_texte_titre+"'><b>"+titre+"</b></td></tr>"
strHTML += "<tr style='border: 1px solid #333;background-color: " +
           couleur_fond_valeur+";color: " +
           couleur_texte_valeur+"'><td><b>Valeur : </b></td><td><b>" + 
           Text(valeur) + " " + unite + "</b></td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Minimum : </td><td>" + 
           Text(valeur_min) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Maximum : </td><td>" + 
           Text(valeur_max) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Nombre d'entités dans" +
           "<br/>un rayon de " +Text(rayon_recherche)+" km. : </td><td>" + 
           Text(valeur_count) + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Moyenne : </td><td>" + 
           Text(valeur_moy,"#.##") + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Total : </td><td>" + 
           Text(valeur_sum) + " " + unite + "</td></tr>"
strHTML += "<tr style='border: 1px solid #333'><td>Part du total : </td><td>" +
           Text(100*valeur/valeur_sum,"#.##") + "%</td></tr>"
strHTML +="</table>"

// On renvoie la chaîne HTML pour remplir la fenêtre contextuelle
return { 
	type : 'text', 
	text : strHTML
}

1. Après avoir ajouté la couche des tronçons hydrographique 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.
   
   
   

   
   
2. Vous donnerez tout d'abord un nom à votre expression, par exemple ici : "Qualité Ecologique".
   
   
   
   
   
3. Vous saisirez ensuite l'expression Arcade suivante :

   // Tableau contenant les différentes valeurs possibles (ordonnées)
   var valeurs_possibles=['Très faible','Faible','Moyen','Bon','Très bon']
   // Tableau contenant les couleurs correspondantes en hexadecimal
   var couleurs=['CC3717','F38C62','E6AC54','B5E654','70B23D']
   // Attribut contenant les valeurs
   var valeur = $feature.indice_qualite_ecologique
   // 'Vertical' ou 'Horizontal'
   var affichage = 'Horizontal' 
   // Largeur/Hauteur en pixels
   var taille = 600 
   // couleur du texte en hexadecimal
   var couleur_texte = "000000" 
   // Titre de l'indicateur à afficher
   var strHTML = 'Qualité écologique :'
   
   // Fonction permettant la conversion de couleurs Hexadecimal (avec opacité) 
   // en chaîne HTML rgba()
   function HexaToRGBA(hexa,opacity){
     var r = '0x' + Mid(hexa,0,2);
     var g = '0x' + Mid(hexa,2,2);
     var b = '0x' + Mid(hexa,4,2);
     return "rgba(" + Text(Number(r)) + "," + 
     Text(Number(g)) + "," + 
     Text(Number(b)) + "," + 
     Text(opacity) + ")"
     }
   
   // On commence à générer l'expression HTML
   strHTML += '<br/><br/>'
   strHTML += "<table style='border-collapse: collapse;'>"
   
   // Cas d'une barre de valeurs colorisée horizontale
   if (affichage=='Horizontal'){
     strHTML += '<tr>'
     for (var index in valeurs_possibles){
       // Si la cellule du tableau est celle de la valeur courante alors l'opacité est 
       // de 100% sinon elle est de 20%
       var opacite = IIF(Lower(valeurs_possibles[index])==Lower(valeur), 1, 0.2);
       // Affichage de la cellule du tableau avec la valeur correspondante
       strHTML += "<td  width='" + Text(taille/Count(valeurs_possibles)) + 
                   "px' style='background-color: " + HexaToRGBA(couleurs[index],opacite)+
                   ";font-family: arial;font-size: 9pt; font-weight: " + 
                   Text(opacite*700) + "; color: "+ HexaToRGBA(couleur_texte,opacite) + 
                   "; text-align: center; border: 1px solid #DDDDDD;padding: 3px 3px;'>"
       strHTML += valeurs_possibles[index]
       strHTML += '</td>'
     }
     strHTML += '</tr>'
   }
   // Cas d'une barre de valeurs colorisée verticale
   else {
     for (var index in valeurs_possibles){
       strHTML += '<tr>'
       // Si la cellule du tableau est celle de la valeur courante alors l'opacité est 
       // de 100% sinon elle est de 20%
       var opacite = IIF(Lower(valeurs_possibles[index])==Lower(valeur), 1, 0.2);
       // Affichage de la cellule du tableau avec la valeur correspondante
       strHTML += "<td  height='" + Text(taille/Count(valeurs_possibles)) + 
                   "px' style='background-color: " + HexaToRGBA(couleurs[index],opacite)+
                   ";font-family: arial;font-size: 9pt; font-weight: " + 
                   Text(opacite*700) + "; color: "+ HexaToRGBA(couleur_texte,opacite) + 
                   "; text-align: center; border: 1px solid #DDDDDD;padding: 3px 3px;'>"
       strHTML += valeurs_possibles[index]
       strHTML += '</td>'
       strHTML += '</tr>'
     }
   }
   
   strHTML += '</table>'
   
   // On revoit l'expression HTML pour remplir la fenêtre contextuelle
   return { 
   	type : 'text', 
   	text : strHTML 
   }
   
   

4. Votre carte affiche désormais les déchèteries avec des fenêtres contextuelles présentant le tableau des horaires d'ouverture pour le matin et l'après-midi. 
   
   
   

   
   
5. Vous pouvez maintenant modifier la taille l'orientation de la barre d'échelle à votre convenance. Par exemple, vous pourrez afficher la barre de valeurs de manière verticale en modifiant l'expression avec les valeurs suivantes :
   
   

   

   
   Vous aurez alors un résultat de ce type :
   
   

   
   
   
6. Si vous disposez de plusieurs champs contenant des valeurs ordinales, il sera intéressant de dupliquer l'expression Arcade et de l'adapter à ces différents champs.
   
   
   
   
7. Il ne vous reste plus qu'à adapter cette expression au nombre de valeurs distincts que vous avez dans votre champ et aux couleurs que souhaitez leur associer.

• Plateau est doté d'une barre d'outils et d'un contrôleur de widgets en haut de la page.
• Préface présente des couleurs d'arrière-plan distinctes et affiche les informations sous forme de blocs compacts. Elle convient aux introductions.
• Enquêteur est doté d'un menu de navigation sur la gauche. Les flèches permettent de passer d'un élément de contenu à l'autre, et il est possible de cliquer sur chaque élément pour en afficher les détails dans un panneau.
• Tableau de bord présente la carte dans le coin supérieur droit, entourée de cinq espaces réservés personnalisables.