> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-fbfa8bee.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tableaux de bord

> La fonctionnalité de tableaux de bord de SQL Console vous permet de regrouper et de partager des visualisations à partir de requêtes enregistrées.

export const Image = ({img, alt, size}) => {
  return <Frame>
      <img src={img} alt={alt} />
    </Frame>;
};

export const galaxyOnClick = eventName => () => {
  try {
    if (typeof window !== "undefined" && window.galaxy && eventName) {
      window.galaxy.track(eventName, {
        interaction: "click"
      });
    }
  } catch (e) {}
};

export const BetaBadge = ({link, galaxyTrack, galaxyEvent}) => {
  if (link) {
    return <a href={link} target="_blank" rel="noopener noreferrer" className="betaBadge" onClick={galaxyTrack && galaxyEvent ? galaxyOnClick(galaxyEvent) : undefined}>
                <Icon />
                <span>Beta</span>
            </a>;
  }
  return <div className="betaBadge">
            <Icon />
            <span>
                Fonctionnalité en bêta. 
                <u>
                    <a href="/docs/beta-and-experimental-features#beta-features">
                        En savoir plus.
                    </a>
                </u>
            </span>
        </div>;
};

La fonctionnalité de tableaux de bord de la SQL Console vous permet de rassembler et de partager des visualisations issues de requêtes enregistrées. Pour commencer, enregistrez et visualisez des requêtes, ajoutez des visualisations de requêtes à un tableau de bord, puis rendez le tableau de bord interactif à l’aide de paramètres de requête.

<div id="core-concepts">
  ## Concepts fondamentaux
</div>

<div id="query-sharing">
  ### Partage de requêtes
</div>

Pour partager votre tableau de bord avec vos collègues, veillez également à partager la requête enregistrée d’origine. Pour afficher une visualisation, vous devez disposer au minimum d’un accès en lecture seule à la requête enregistrée d’origine.

<div id="interactivity">
  ### Interactivité
</div>

Utilisez des [paramètres de requête](/fr/reference/syntax#defining-and-using-query-parameters) pour rendre votre tableau de bord interactif. Par exemple, vous pouvez ajouter un paramètre de requête à une clause `WHERE` pour qu’il serve de filtre.

Vous pouvez afficher ou masquer le champ de saisie du paramètre de requête depuis le volet latéral des filtres **Global** en sélectionnant le type « filter » dans les paramètres de visualisation. Vous pouvez également afficher ou masquer le champ de saisie du paramètre de requête en le liant à un autre objet (comme une table) du tableau de bord. Veuillez consulter la section « [configurer un filtre](/fr/products/cloud/features/sql-console-features/dashboards#configure-a-filter) » du guide de démarrage rapide ci-dessous.

<div id="quick-start">
  ## Prise en main rapide
</div>

Créons un tableau de bord pour surveiller notre service ClickHouse à l’aide de la table système [query\_log](/fr/reference/system-tables/query_log).

<div id="quick-start">
  ## Prise en main rapide
</div>

<div id="create-a-saved-query">
  ### Créer une requête enregistrée
</div>

Si vous avez déjà des requêtes enregistrées que vous souhaitez visualiser, vous pouvez ignorer cette étape.

Ouvrez un nouvel onglet de requête. Rédigeons une requête pour compter le volume de requêtes par jour pour un service à l’aide des tables système de ClickHouse :

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/2_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=1ed124ab11446e593c7c28df6158b664" size="md" alt="Créer une requête enregistrée" border width="1600" height="1372" data-path="images/cloud/dashboards/2_dashboards.png" />

Nous pouvons afficher les résultats de la requête sous forme de tableau ou commencer à créer des visualisations depuis la vue graphique. Pour l’étape suivante, enregistrons la requête sous le nom `queries over time` :

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/3_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=739e1ec46a83f51cc3cc862f5bcc14af" size="md" alt="Enregistrer la requête" border width="1274" height="484" data-path="images/cloud/dashboards/3_dashboards.png" />

Vous trouverez plus d’informations sur les requêtes enregistrées dans la [section Saving a Query](/fr/products/cloud/features/sql-console-features/sql-console#saving-a-query).

Nous pouvons créer et enregistrer une autre requête, `query count by query kind`, pour compter le nombre de requêtes selon leur type. Voici une visualisation en graphique à barres des données dans le SQL Console.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/4_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=52f8ee8c6223173edfc05bf6be9538d3" size="md" alt="Visualisation en graphique à barres des résultats d'une requête" border width="1438" height="1600" data-path="images/cloud/dashboards/4_dashboards.png" />

Maintenant que nous avons deux requêtes, créons un tableau de bord pour les visualiser et les regrouper.

<div id="create-a-dashboard">
  ### Créer un tableau de bord
</div>

Accédez au panneau Dashboards, puis cliquez sur « New Dashboard ». Une fois que vous lui avez attribué un nom, votre premier tableau de bord est créé !

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/5_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=46d0acc1dbc3a642b49198584ed4541d" size="md" alt="Créer un nouveau tableau de bord" border width="1466" height="778" data-path="images/cloud/dashboards/5_dashboards.png" />

<div id="add-a-visualization">
  ### Ajouter une visualisation
</div>

Deux requêtes enregistrées sont disponibles, `queries over time` et `query count by query kind`. Visualisons la première sous forme de graphique en courbes. Donnez un titre et un sous-titre à votre visualisation, puis sélectionnez la requête à afficher. Ensuite, sélectionnez le type de graphique « Line » et définissez les axes x et y.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/6_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=9698ff5b7a09bc94b20b3bf789fdcb5d" size="md" alt="Ajouter une visualisation" border width="1600" height="1097" data-path="images/cloud/dashboards/6_dashboards.png" />

Ici, vous pouvez également ajuster le style, par exemple le formatage des nombres, la disposition de la légende et les libellés des axes.

Ensuite, visualisons la deuxième requête sous forme de tableau et plaçons-la sous le graphique en courbes.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/7_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=b8cb1a0ff7189f92fad2a2beab6d824a" size="md" alt="Visualiser les résultats de la requête sous forme de tableau" border width="1600" height="1048" data-path="images/cloud/dashboards/7_dashboards.png" />

Vous avez créé votre premier tableau de bord en visualisant deux requêtes enregistrées !

<div id="configure-a-filter">
  ### Configurer un filtre
</div>

Rendons ce tableau de bord interactif en ajoutant un filtre sur le type de requête, afin de n’afficher que les tendances liées aux requêtes Insert. Pour cela, nous utiliserons les [paramètres de requête](/fr/reference/syntax#defining-and-using-query-parameters).

Cliquez sur les trois points à côté du graphique en courbes, puis sur l’icône en forme de crayon à côté de la requête pour ouvrir l’éditeur de requête intégré. Vous pouvez alors modifier directement depuis le tableau de bord la requête enregistrée d’origine.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/8_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=c706d168ea4c9b11c8f70f79fc9f2297" size="md" alt="Modifier la requête d’origine" border width="1115" height="1600" data-path="images/cloud/dashboards/8_dashboards.png" />

Une fois que vous aurez cliqué sur le bouton jaune d’exécution de la requête, vous verrez la même requête que précédemment, filtrée uniquement sur les requêtes insert. Cliquez sur le bouton d’enregistrement pour mettre à jour la requête. Lorsque vous reviendrez aux paramètres du graphique, vous pourrez filtrer le graphique en courbes.

À présent, à l’aide des filtres globaux dans la barre supérieure, vous pouvez activer ou désactiver le filtre en modifiant la valeur d’entrée.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/9_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=e3c8c3ab0b1e589d5a12fde9c2ac20cc" size="md" alt="Ajuster les filtres globaux" border width="1600" height="1045" data-path="images/cloud/dashboards/9_dashboards.png" />

Supposons que vous souhaitiez lier le filtre du graphique en courbes au tableau. Pour cela, revenez aux paramètres de visualisation, remplacez par un tableau la source de valeur du paramètre de requête query\_kind, puis sélectionnez la colonne query\_kind comme champ à lier.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/10_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=57ebf2709a661b3b28b8e7a01b9762c8" size="md" alt="Modifier le paramètre de requête" border width="1600" height="1045" data-path="images/cloud/dashboards/10_dashboards.png" />

Vous pouvez maintenant contrôler le filtre du graphique en courbes directement depuis le tableau des requêtes par type, afin de rendre votre tableau de bord interactif.

<Image img="https://mintcdn.com/private-7c7dfe99-mintlify-fbfa8bee/TCLsdkFwl4CgDiNY/images/cloud/dashboards/11_dashboards.png?fit=max&auto=format&n=TCLsdkFwl4CgDiNY&q=85&s=7986e765eb79e3f0dfcceb82bad71710" size="md" alt="Contrôler le filtre du graphique en courbes" border width="1600" height="1012" data-path="images/cloud/dashboards/11_dashboards.png" />
