Tuiles personnalisées

Quand les types de tuiles intégrés ne collent pas au visuel que vous voulez, Saiku livre des rendus personnalisés qui vont plus loin tout en restant sûrs. Tous sont déclaratifs — vous décrivez le résultat avec des données, pas avec du code.

Chaque rendu apparaît comme sa propre entrée dans le menu + Ajouter une tuile (sous « Custom »). En choisir un dépose une tuile déjà liée à ce rendu ; vous la configurez ensuite dans l’éditeur ⚙ de la tuile exactement comme n’importe quelle autre — choisissez un cube, construisez une requête, et fournissez la configuration du rendu.

Note

Les rendus personnalisés s’activent par déploiement. Si le menu « + Ajouter une tuile » affiche « No custom renderers installed », votre Saiku ne les a pas enregistrés — demandez à votre administrateur.

Tuile liste classée

Le rendu Liste classée dessine la carte des « movers » que veulent la plupart des dashboards d’exploitation : une suite numérotée de lignes, chacune un libellé et une valeur, la valeur colorée selon qu’elle monte ou descend.

Liez-la à une requête renvoyant une colonne de libellé et une colonne de valeur, puis configurez :

Champ	Signification
Sous-titre	Une ligne atténuée sous le titre de la tuile (« Product department · MoM »)
Colonne de libellé	Vide = déduite (voir plus bas)
Colonne de valeur	Vide = déduite (voir plus bas)
Format de valeur	Motif d’affichage optionnel — $c1 → $27.4M. Vide garde le formatage du cube
Lignes	Combien en afficher (6 par défaut)
Ordre	Garder l’ordre de la requête, plus haut d’abord, ou plus bas d’abord
Couleur de valeur	Par signe (hausse vert / baisse rouge) ou neutre
Afficher les rangs	Le 1, 2, 3… en tête

Laissées vides, les colonnes sont déduites structurellement : la valeur est la première colonne de mesure du résultat et le libellé est ce qui reste. Cela tient même quand les captions d’une dimension ressemblent à des nombres — un décile de prescripteurs (10.0), une année, un numéro de magasin — et c’est précisément là que deviner d’après le texte se tromperait de sens.

Format de valeur prend le même vocabulaire de motifs que la tuile KPI et l’axe de valeurs ECharts : $cN monnaie compacte, $N monnaie simple, N% pourcentage, N décimales. Cela vaut le coup sur toute mesure monétaire — une carte top-N de lignes brutes $27,432,535.99 est pénible à parcourir.

Le tri se fait avant la limite de lignes, donc « plus haut d’abord, 3 lignes » est vraiment le top trois de tout le résultat, pas les trois premières réordonnées. Couleurs et typographie suivent le thème de l’App — pas de CSS nécessaire.

Astuce

On construisait cette carte autrefois en habillant une tuile Tableau avec du CSS personnalisé. Ne le faites pas — une tuile liste classée se rethème avec l’App, n’entre pas en collision avec les autres tableaux de la page, et reste modifiable par qui héritera de votre App.

Tuile option ECharts

Le rendu Option ECharts vous laisse composer un graphique en écrivant directement un objet option ECharts. C’est l’échappatoire pour les formes que la tuile Graphique intégrée n’expose pas — agencements d’axes sur mesure, variantes rose, visual maps inhabituelles, et ainsi de suite.

Attention

Regardez d’abord La tuile Graphique. Radar, nuage de points, treemap, sunburst, heatmap et cascade sont tous des types de graphiques intégrés, et les axes doubles, les séries combo, les lignes de tendance, le Top N, le formatage des nombres et les lignes de référence sont tous des options intégrées. Recourir à une option écrite à la main pour obtenir l’une d’elles vous coûte l’héritage du thème, le formatage conditionnel et — surtout — la capacité de qui héritera de votre App à la modifier sans éditer du JSON.

Parce que votre option est remise à une bibliothèque de graphiques vivante, elle est validée contre un sous-ensemble sûr avant même de s’afficher. Les règles, appliquées à toute profondeur de l’objet :

• Aucune valeur de fonction. ECharts appelle des choses comme formatter en tant que fonctions avec des données et un DOM vivants, donc toute fonction où que ce soit dans l’option est rejetée. (Du JSON pur ne peut pas exprimer une fonction ; le contrôle prémunit contre un objet vivant qui en glisserait une.)

• Aucune URL distante. http(s): hors origine, //host relatif au protocole, cibles url(...) pointant hors origine et URI data: non images sont tous rejetés — ce sont des vecteurs d’exfiltration / SSRF. Il reste les références de même origine et relatives, plus les images data: en PNG, JPEG, GIF ou WebP uniquement.

  Notez que SVG n’est pas sur cette liste, même en image data:. Un SVG peut porter du script, il est donc exclu volontairement — utilisez un export matriciel s’il vous faut une icône en ligne.

• Uniquement les clés de la liste blanche. Seules des clés de premier niveau curatées (title, grid, xAxis, yAxis, series, legend, tooltip, color, backgroundColor, visualMap, radar, polar, et une poignée d’autres) et un ensemble curaté de champs par series sont acceptés. Tout ce qui sort de la liste blanche est rejeté plutôt que silencieusement supprimé — le validateur échoue en fermeture.

Si votre option viole une règle, la tuile affiche une erreur de validation au lieu de s’afficher, pour que vous puissiez corriger. La requête que vous liez fournit les données (catégories + séries) que l’option dessine.

Le thème d’abord, l’option ensuite

Votre option est superposée par-dessus la ligne de base thématisée de l’App. Ce qu’elle énonce l’emporte ; ce qu’elle laisse tacite — couleur du titre, couleur des libellés d’axe, lignes de grille, palette de séries — est hérité du thème.

N’écrivez que les parties réellement sur mesure. Une option pleine de valeurs hexadécimales en dur paraît identique le premier jour et cesse d’accorder avec l’App dès que quelqu’un change de préréglage.

Note

Les composants sont décorés, jamais introduits. Dans ECharts, mentionner un composant l’active — la ligne de base n’habille donc une légende, une infobulle ou un axe que si votre option en déclare déjà un. Un camembert ne se voit pas pousser des axes parce que le thème a des avis dessus.

Formater l’axe de valeurs

Puisque les fonctions sont rejetées, vous ne pouvez pas formater un axe à la façon habituelle d’ECharts — axisLabel.formatter devrait être une fonction. À la place, l’éditeur a un champ Format de l’axe de valeurs qui prend le même motif que la tuile KPI :

Motif	Rend
$c0	$149K — monnaie compacte
$c1	$48.2K
$2	$99.50
1%	15.6%
0	1,234

Il s’applique à chaque axe type: "value" et est compilé au moment du rendu, donc vous ne fournissez jamais de code et la règle « pas de fonctions » reste absolue. Les axes de catégories sont laissés tranquilles — un gabarit de chaîne comme "W{value}" dans votre option y fonctionne toujours, puisque c’est déclaratif.

Tuile graphe

Le rendu Graphe transforme les enregistrements d’une requête en un graphe de nœuds et d’arêtes — un arbre de propriété, une carte de relations, un flux entre entités. Au lieu d’un objet option, vous lui donnez un mappage de colonnes : quelles colonnes de votre résultat sont les extrémités, ids, libellés et poids.

Champ	Requis	Signification
sourceCol	oui	Colonne portant l’extrémité source de chaque ligne
targetCol	oui	Colonne portant l’extrémité cible de chaque ligne
idCol	oui	Colonne portant l’id canonique d’un nœud (pour qu’un libellé s’attache au bon nœud). Pour une simple liste d’arêtes, mettez-la égale à sourceCol
labelCol	non	Colonne portant un nom d’affichage lisible pour le nœud idCol
valueCol	non	Colonne numérique reportée sur chaque arête et sommée dans le poids du nœud
layout	non	force (défaut) ou circular

Chaque ligne devient une arête dirigée source → cible ; les nœuds sont collectés depuis chaque extrémité et dédupliqués par id. Les lignes à qui il manque une extrémité sont ignorées. Quand vous définissez valueCol, sa valeur pondère à la fois l’arête et ses nœuds d’extrémité — la taille du nœud est mise à l’échelle relativement aux poids de ce graphe, si bien que le nœud le plus lourd atteint toujours le haut de la bande de tailles, quelles que soient les unités de la mesure. Un poids nul ou négatif est le nœud le plus léger, pas un nœud non pondéré.

Configurer une tuile personnalisée

Le déroulé est le même pour toutes :

1. + Ajouter une tuile → Ranked list (ou ECharts option, ou Graph).
2. Ouvrez l’éditeur ⚙ de la tuile.
3. Liez une requête — choisissez le cube et construisez la requête dont le résultat alimente la tuile.
4. Fournissez la configuration — les champs de la liste classée, l’objet option ECharts, ou le mappage de colonnes du graphe.
5. Enregistrez. Une configuration invalide remonte en erreur en ligne plutôt qu’en rendu cassé.

Liens connexes

• Construire pages et tuiles — les types de tuiles intégrés et le fonctionnement de la liaison.
• La tuile Graphique — à consulter avant d’écrire une option ECharts à la main.
• Plugins — la tuile avancée à JS en bac à sable, installée par l’administrateur, pour des widgets entièrement sur mesure.