Ajouter une icône d’avertissement d’affichage à votre visuel

Dans un visuel Power BI, une icône d’avertissement d’affichage peut informer l’utilisateur d’un éventuel problème ou d’une erreur. Les icônes d’avertissement d’affichage peuvent être utiles dans de nombreux cas, tels que :

• Un visuel de carte peut afficher une icône d’avertissement lorsque les valeurs sortent de la plage valide de latitude ou de longitude.

• Un visuel de graphique en secteurs peut afficher une icône d’avertissement lorsqu’il affiche des valeurs négatives qui sont mélangées avec des valeurs positives.

• Un graphique cartésien peut afficher une icône d’avertissement lorsque des valeurs infinies sont calculées. Par exemple, si Y est égal à zéro, lors de la division de X par Y, le résultat correspond à l’infini.

Lorsque l’icône apparaît, l’utilisateur peut pointer dessus pour voir le titre du message d’avertissement.

Quand l’utilisateur sélectionne l’icône d’avertissement, un message décrivant le problème apparaît dans une fenêtre indépendante.

Créer une icône d’avertissement

Vous pouvez créer une icône d’avertissement avec un message personnalisé pour un visuel personnalisé. La décision de déclencher ou non l’icône d’avertissement dépend de vous. Ces exemples montrent que le visuel continue de fonctionner quand l’icône d’avertissement est affichée.

Ajouter un appel à la méthode de mise à jour

Pour ajouter une icône d’avertissement d’affichage à votre visuel, appelez la méthode displayWarningIcon. La méthode fait partie de IVisualHost et elle est exposée à l’aide de powerbi-visuals-api.

Ajoutez l’importation suivante à votre fichier :

import powerbiVisualsApi from "powerbi-visuals-api"; 

Après avoir ajouté l’importation, ajoutez une condition déterminant le moment où afficher l’icône d’avertissement. Utilisez les exemples de cet article pour afficher deux conditions facultatives.

Exemple 1 : Vérifier la compatibilité de la langue

La localisation est utilisée pour afficher des visuels dans la langue native du client, laquelle est déterminée par les paramètres du système d’exploitation.

Dans cet exemple, le visuel compare la langue du visuel, qui est définie sur l’anglais des États-Unis, à la langue du système d’exploitation. Si les langues ne correspondent pas, l’icône d’avertissement s’affiche.

if (this.locale != 'en-US') { 

            this.host.displayWarningIcon('Language inconsistency', 'This visual supports only US English. For the visual to work as expected, set your browser's language to US English.'); 
        }

Exemple 2 : Comparer les couleurs de colonnes adjacentes

Dans cet exemple, l’icône d’avertissement d’affichage s’affiche lorsque deux colonnes placées l’une à côté de l’autre ont la même couleur.

La méthode getColumnColorByIndex effectue une itération au sein de toutes les colonnes. Si deux colonnes adjacentes ont la même couleur, une icône d’avertissement s’affiche.

let category = options.dataViews[0].categorical.categories[0]; 

let dataValue = options.dataViews[0].categorical.values[0]; 

let colorPalette = this.host.colorPalette; 

for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len-1; i++) { 

    const color1: string = getColumnColorByIndex(category, i, colorPalette); 

    const color2: string = getColumnColorByIndex(category, i+1, colorPalette); 

    if (color1 == color2) { 

        this.host.displayWarningIcon('Adjacent columns have the same color.', 'Columns that are next to each other have the same color. To change a column's color, use the data colors option in the Format tab.'); 
    } 

} 

Considérations et limitations

• Certaines erreurs et certains avertissements ne sont pas causés par le visuel. Par exemple, l’erreur Trop de valeurs. Toutes les données ne sont pas affichées. est dérivée du service Power BI. Ces erreurs et avertissements sont propagés avant les appels de votre visuel. Ils sont prioritaires sur les erreurs qui proviennent du code de votre visuel. Si une erreur se produit lors du chargement des données, avant que le code du visuel soit exécuté et que la condition de l’icône d’avertissement d’affichage soit remplie, le visuel affiche cette erreur à la place de l’erreur d’icône d’avertissement d’affichage.

• L’avertissement d’affichage est effacé lors de chaque rendu du visuel, par exemple, lorsque de nouvelles données sont glissées dans le visuel. La méthode update() du visuel est appelée après le rendu du visuel. Si l’avertissement du visuel est déclenché en fonction d’une condition qui est vérifiée dans la méthode de mise à jour, chaque fois que le visuel est affiché, si la condition est remplie, le visuel affiche à nouveau l’avertissement.

• Le redimensionnement d’un visuel n’affecte pas l’icône d’avertissement.

Les limitations suivantes font référence au texte de l’icône d’affichage :

• La longueur maximale du titre est de 70 caractères

• La longueur maximale du texte est de 2 000 caractères

• Le texte s’affiche uniquement sous forme de texte brut

Contenu connexe

DataViewUtils