Personnaliser les graphiques dans Snowflake Intelligence¶

Vue d’ensemble¶

La personnalisation fonctionne à deux niveaux :

• Niveau Agent : S’applique à tous les graphiques de chaque vue sémantique associée à l’agent. Utilisez cette option pour les valeurs par défaut globales telles que les couleurs et les polices de marque.

• Niveau de vue sémantique : S’applique uniquement aux graphiques générés à partir de cette vue sémantique spécifique. Utilisez cette option pour les règles spécifiques aux colonnes et les préférences de type de graphique spécifiques au domaine.

À chaque niveau, deux mécanismes sont disponibles :

• vega_template : Une spécification `Vega-Lite <https://vega.github.io/vega-lite/>`_JSON partielle qui est fusionné de manière déterministe dans chaque graphique généré. Utilisez ceci pour tout ce qui doit toujours s’appliquer.

• Instructions en texte libre : Conseils en langage naturel injectés dans l’invite de génération du graphique. Le LLM fait de son mieux pour les respecter, mais ils ne sont pas garantis.

Personnalisation au niveau de l’agent¶

Ajoutez un bloc <chart_customization> à l’intérieur de instructions.orchestration dans la configuration de votre agent. Vous pouvez combiner un thème de polices et une palette par défaut globale :

<chart_customization>
Prefer horizontal bar charts for ranked data.
vega_template:
{
  "background": "antiquewhite",
  "config": {
    "title":  { "font": "monospace", "fontStyle": "italic", "fontSize": 20, "fontWeight": "lighter" },
    "axis":   { "labelFont": "monospace", "titleFont": "monospace", "titleFontSize": 15, "labelFontSize": 10 },
    "header": { "labelFont": "monospace", "titleFont": "monospace", "labelFontSize": 10 },
    "legend": { "labelFont": "monospace", "titleFont": "monospace", "titleFontSize": 18, "labelFontSize": 15 },
    "mark":   { "font": "monospace" }
  }
}
</chart_customization>

Utilisez le niveau d’agent pour :

• La palette de couleurs de la marque

• Le thème visuel par défaut (polices, arrière-plan)

• Les préférences de style inter-domaines

• Les paramètres par défaut pour le formatage des nombres ou des devises

Évitez les mappages de couleurs spécifiques aux colonnes au niveau de l’agent. Les noms des colonnes diffèrent selon les vues sémantiques et sont ignorés silencieusement lorsqu’ils ne sont pas trouvés.

Personnalisation au niveau de la vue sémantique¶

Ajoutez un bloc <chart_customization> à l’intérieur du champ module_custom_instructions.sql_generation de votre YAML de vue sémantique. Ce champ a priorité sur l’ancien champ custom_instructions lorsque les deux sont définis.

CREATE OR REPLACE SEMANTIC VIEW my_db.my_schema.my_view
  FROM @my_stage/semantic_view.yaml;

# semantic_view.yaml
name: my_view
module_custom_instructions:
  sql_generation: |
    <chart_customization>
    Always use a line chart for time series data.
    vega_template:
    {
      "transform": [
        {
          "calculate": "datum.CATEGORY === 'Furniture' ? '#4e79a7' : datum.CATEGORY === 'Technology' ? '#f28e2b' : datum.CATEGORY === 'Office Supplies' ? '#e15759' : ''",
          "as": "_color"
        }
      ],
      "encoding": {
        "color": { "field": "CATEGORY", "type": "nominal", "scale": { "range": { "field": "_color" } } }
      }
    }
    </chart_customization>
tables:
  ...

Utilisez le niveau de la vue sémantique pour :

• Mappages de couleur par colonne

• Règles de type de graphique spécifiques au domaine

• Formatage spécifique à la métrique

• Remplacement des valeurs par défaut au niveau de l’agent

À utiliser avec précaution : les modèles affectent chaque graphique¶

vega_template est fusionné dans chaque graphique généré à ce niveau. Il n’y a pas de filtrage par question ou par graphique. Si vous ajoutez un remplacement encoding.y au niveau de l’agent, il s’applique aux graphiques à barres, aux graphiques linéaires, aux diagrammes de répartition et aux graphiques en secteurs.

Avant d’ajouter un modèle, consultez les points suivants :

• Portée : Les modèles de niveau agent affectent tous les graphiques de toutes les vues sémantiques. Préférez le niveau de vue sémantique lorsqu’une règle est spécifique à un domaine ou à un ensemble de données.

• Encodages génériques : Un encodage de modèle qui omet field (par exemple,`` »y »: {« axis »: {« format »: « … »}}``) s’applique à chaque axe y de graphique, quelle que soit la colonne tracée. Utilisez field pour l’épingler à une colonne spécifique lorsque la vue sémantique est connue.

• Remplacements de marque : Définir "mark": "line" au niveau de l’agent force chaque graphique à être défini sur une ligne, y compris ceux où le LLM choisirait correctement une barre ou un diagramme. Remplacez uniquement mark au niveau de la vue sémantique lorsque vous avez des connaissances approfondies des données.

• Tableaux de transformation : Une transformation calculate dans le modèle (par exemple,``_color``) est injectée dans le tableau transform de chaque graphique. Si les données ne contiennent pas la colonne référencée, Vega-Lite produit les valeurs null silencieusement pour le champ calculé.

En cas de doute, commencez par le niveau de la vue sémantique et passez au niveau de l’agent uniquement après avoir confirmé que la règle est sûre pour tous les graphiques.

Pour valider un modèle avant de le déployer, collez une spécification de graphique représentative (avec votre vega_template déjà fusionné) dans l’Éditeur Vega. L’éditeur affiche des avertissements et des erreurs en direct dans la console. Un modèle valide ne doit produire aucun avertissement. Objets communs à intercepter de cette façon : noms de propriété non valides, discordances de type, expressions calculate inatteignables et erreurs de configuration d’échelle.

Polices¶

Les paramètres de police sont contrôlés par le bloc config dans vega_template. Toutes les propriétés des polices sont appliquées globalement au graphique et affectent chaque graphique généré, quelles que soient les données.

{
  "config": {
    "title":  { "font": "serif", "fontSize": 20, "fontWeight": "bold", "fontStyle": "italic" },
    "axis":   { "labelFont": "monospace", "titleFont": "monospace", "labelFontSize": 11, "titleFontSize": 13 },
    "header": { "labelFont": "serif", "titleFont": "serif", "labelFontSize": 11 },
    "legend": { "labelFont": "serif", "titleFont": "serif", "labelFontSize": 12, "titleFontSize": 13 },
    "mark":   { "font": "serif" }
  }
}

Propriétés courantes de la police config :

Vous pouvez également définir une couleur background générale en plus des polices :

{
  "background": "#f9f9f9",
  "config": {
    "title":  { "font": "monospace", "fontStyle": "italic", "fontSize": 20, "fontWeight": "lighter" },
    "axis":   { "labelFont": "monospace", "titleFont": "monospace", "titleFontSize": 15, "labelFontSize": 10 },
    "header": { "labelFont": "monospace", "titleFont": "monospace", "labelFontSize": 10 },
    "legend": { "labelFont": "monospace", "titleFont": "monospace", "titleFontSize": 18, "labelFontSize": 15 },
    "mark":   { "font": "monospace" }
  }
}

Couleurs¶

<chart_customization>
Color Active status green, Inactive status red, and Pending status yellow.
</chart_customization>

{
  "transform": [
    {
      "calculate": "datum.STATUS === 'Active' ? '#22c55e' : datum.STATUS === 'Inactive' ? '#ef4444' : datum.STATUS === 'Pending' ? '#eab308' : ''",
      "as": "_color"
    }
  ],
  "encoding": {
    "color": {
      "field": "STATUS",
      "type": "nominal",
      "scale": { "range": { "field": "_color" } }
    }
  }
}

{
  "encoding": {
    "color": {
      "scale": {
        "domain": ["Furniture", "Technology", "Office Supplies"],
        "range":  ["#4e79a7", "#f28e2b", "#e15759"],
        "scheme": "tableau10"
      }
    }
  },
  "usermeta": { "merge": "extend" }
}

Désactivation de la mise en forme Snowsight¶

Par défaut, Snowflake Intelligence applique les ajustements de thème de l’UI Snowsight sur le graphique généré. Pour exclure et afficher le graphique exactement comme spécifié dans votre vega_template, définissez ui-merge sur "none" dans usermeta :

{
  "usermeta": { "ui-merge": "none" }
}

Ceci est utile lorsque vous souhaitez un contrôle total sur la sortie visuelle, par exemple lorsque vous appliquez un thème de marque personnalisé et que vous ne voulez pas que Snowsight remplace les couleurs, les polices ou les arrière-plans.

Formatage des nombres et des devises (expérimental)¶

Les libellés d’axe et de légende peuvent être formatés à l’aide de Chaînes au format D3 via vega_template. Ceci est utile pour appliquer des symboles de devises, des décimales ou des suffixes SI dans tous les graphiques.

Définissez axis.format pour les axes quantitatifs (x, y) et legend.format pour les légendes de couleur/taille :

{
  "encoding": {
    "y": { "axis": { "format": "$,.0f" } }
  }
}

{
  "encoding": {
    "y": { "type": "quantitative", "axis": { "format": "$,.0f" } }
  }
}

Chaînes de format D3 courantes :

Appliquez le formatage à tous les canaux quantitatifs au niveau de l’agent (sans connaître le nom spécifique de la colonne) :

{
  "encoding": {
    "y": { "axis": { "format": "$,.0f" } },
    "x": { "axis": { "format": "$,.0f" } },
    "color": { "legend": { "format": "$,.0f" } }
  },
  "usermeta": { "merge": "extend" }
}

Utilisez "merge": "extend" afin que le format soit ajouté uniquement aux canaux déjà remplis par le LLM, sans écraser leurs paramètres field ou type.

Modes de fusion¶

Contrôlez comment vega_template interagit avec le graphique LLM généré en définissant "usermeta": {"merge": "<mode>"} à l’intérieur du modèle.

Règles qui s’appliquent aux deux modes :

• Le bloc data n’est jamais écrasé.

• Les remplacements d’encodage ne s’appliquent que lorsque le champ field du modèle correspond au field du graphique, ou le modèle omet field.

• Après la fusion, les entrées de domaine non présentes dans les données réelles sont automatiquement supprimées.

Exemple : forcer un graphique linéaire

{
  "mark": "line",
  "usermeta": { "merge": "override" }
}