mailinapp
Documentation menu

Bloc Treemap

Des tuiles proportionnelles dimensionnées par valeur, empaquetées dans un rectangle plutôt que découpées en parts — la même forme de saisie une-valeur-par-catégorie que le graphique en camembert, simplement disposée par surface (« squarifiée ») plutôt que par angle. C'est une réponse visuelle différente à la même question de « part d'un tout » à laquelle répond un camembert ou un anneau.

Comment ça fonctionne

Chaque ligne saisie est une tuile ; la surface d'une tuile est proportionnelle à sa valeur par rapport au total de chaque tuile conservée. Une tuile de treemap est identique en modèle de données à une part de camembert : une valeur par catégorie, part du total, juste une géométrie différente. Pour cette raison, le bloc réutilise carrément les colonnes de saisie, la logique d'attribution des couleurs, et le comportement de repliement du graphique en camembert, plutôt que de dupliquer cette logique pour un second type de graphique.

Cette filiation partagée signifie que la règle de repliement est exactement celle du camembert : au-delà de 8 catégories, les plus petites tuiles par valeur se replient en une seule tuile synthétique « Autre », plutôt que la mise en page ne devienne illisiblement fragmentée. Les tuiles qui survivent au repliement conservent leur ordre relatif de saisie d'origine, non retriées par valeur. Cela garde leur attribution de couleur stable et prévisible ; « Autre », lorsqu'elle est présente, se trie toujours en dernier. Les lignes avec un libellé vide ou une valeur non positive sont ignorées d'emblée, puisqu'une tuile de treemap ne peut pas représenter une part nulle ou négative d'un tout.

Le tableau de données toujours visible sous l'image est celui du camembert : colonnes Catégorie, Valeur, et Pourcentage, une ligne par tuile, y compris la ligne « Autre » repliée quand elle existe. Il porte les pourcentages exacts que représentent les surfaces des tuiles, en texte sélectionnable. La légende au-dessus du tableau liste chaque tuile avec le même chiffre de pourcentage, toujours rendue et jamais conditionnée par un nombre de séries. Le propre titre d'un treemap ne peut pas nommer une tuile individuelle comme le titre du bloc peut être emprunté par une série unique de barres/courbes.

Champs configurables :

  • Titre du graphique — texte d'en-tête facultatif au-dessus du graphique.
  • Données — la liste de lignes : un libellé de Catégorie, une Valeur numérique, et une Couleur de remplacement facultative par tuile.
  • Couleur de fond, remplissage, bordure et rayon de bordure sur la carte.
  • Couleur/taille du titre et couleur/taille de la légende — style de texte pour l'en-tête et le texte de légende/tableau sous l'image.

Si aucune ligne n'est encore saisie — ou que chaque ligne a un libellé vide ou une valeur non positive — le bloc saute l'image. Il rend seulement son titre et le cadre de la carte, avec un simple avis « Ajoutez au moins une ligne de données pour afficher ce graphique » à la place.

Exemples

La part de trafic par canal — organique, payant, référencement, direct, social — comme tuiles dans un récapitulatif marketing mensuel rend la taille relative de chaque source immédiatement lisible sans avoir à lire une colonne de pourcentage. Un email d'allocation budgétaire peut représenter en tuiles les dépenses par département ou projet pour montrer où l'argent est réellement allé ce trimestre. Une équipe de support peut représenter en tuiles le volume de tickets par catégorie (facturation, bugs, intégration, demandes de fonctionnalité) pour donner aux parties prenantes une lecture rapide de là où se concentre la charge de support.

À quoi ressemble l'alternative statique

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Traffic share by channel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Treemap: Organic 40 (40%), Paid 25 (25%), Referral 15 (15%), Direct 12 (12%), Social 8 (8%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Percent</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Organic</td>
      <td style="padding:4px 8px">40</td>
      <td style="padding:4px 8px">40%</td>
    </tr>
  </table>
</div>

Le texte alternatif détaille la valeur et la part du total de chaque tuile ; le tableau en dessous répète les mêmes chiffres en HTML sélectionnable, y compris toute tuile « Autre » repliée.

Voir aussi