Vue Graphique

La vue Graphique fonctionne comme les graphiques Notion : une vue de la table affiche ses fiches en barres verticales ou horizontales, en courbe, en aires, en barres et courbe, en anneau, en entonnoir ou en nombre unique au lieu des lignes. Les graphiques suivent la recherche et les filtres de la vue, sont enregistrés avec la vue et demandent les valeurs regroupées à votre serveur quand il sait les calculer. React et Vue se comportent de la même façon.

Le graphique est un élément de registre optionnel : la table n’a aucune dépendance de graphique tant que vous ne l’installez pas. React dessine avec les graphiques shadcn/ui (Recharts), Vue avec Unovis (@unovis/vue et @unovis/ts, le moteur des graphiques shadcn-vue).

Installer et activer

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table-chart.json

import { chartRenderer } from "@/components/ui/yayaw-table-chart/chart-renderer";

<DataTable
  displayModeRenderers={{ chart: chartRenderer }}
  // ...
/>;

npx shadcn-vue@latest add https://table.yayaw.app/r/yayaw-table-vue-chart.json

<script setup lang="ts">
import { chartRenderer } from "@/components/ui/yayaw-table-vue/chart/chart-renderer";
</script>

<template>
  <YayawDataTable :display-mode-renderers="{ chart: chartRenderer }" />
</template>

export const salesConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "chart"],
    chart: { xColumn: "category", metric: "sum", metricColumn: "price" },
  },
});

Sans renderer passé, "chart" n’est pas proposé même s’il est listé dans displayModes, et un lien qui le demande revient au mode par défaut. table.chart est facultatif : un objet de réglages par défaut (la forme ci-dessous) dont part chaque vue Graphique, ou false pour désactiver le mode.

La bibliothèque de graphiques est chargée à la demande : React avec lazy et Suspense, Vue avec defineAsyncComponent. Recharts ou Unovis n’est téléchargé qu’à l’affichage du premier graphique, pas avec la table, et les éléments principaux de la table ne gagnent que le modèle de graphique partagé.

Essayer les graphiques

Les deux aperçus passent chartRenderer dans displayModeRenderers. Leur hôte n’a pas d’action aggregate : la table regroupe donc dans le navigateur les enregistrements renvoyés par list ; voir le regroupement côté serveur pour les grandes tables. Sélectionnez une barre ou un point pour voir ses enregistrements, ou choisissez Afficher en tableau pour les valeurs. L’aperçu utilise les projets d’ouverture de magasins communs à tous les guides de vues ; voir les données des exemples pour project-config.ts et l’hôte en mémoire.

Budget par catégorie

Un graphique en barres du budget additionné par catégorie, empilé par statut.

import { defineTableConfig } from "@/components/ui/yayaw-table";
import { projectConfig } from "./project-config";

// Pass `displayModeRenderers={{ chart: chartRenderer }}` to the table.
export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["chart", "table"],
    defaultDisplayMode: "chart",
    chart: {
      type: "bar",
      xColumn: "category",
      metric: "sum",
      metricColumn: "budget",
      seriesColumn: "status",
      stacked: true,
      showDataLabels: false,
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue";
import { projectConfig } from "./project-config";

// Pass `:display-mode-renderers="{ chart: chartRenderer }"` to the table.
export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["chart", "table"],
    defaultDisplayMode: "chart",
    chart: {
      type: "bar",
      xColumn: "category",
      metric: "sum",
      metricColumn: "budget",
      seriesColumn: "status",
      stacked: true,
      showDataLabels: false,
    },
  },
});

Projets dans le temps

Une courbe des projets comptés par semaine de leur date de début, en cumul, avec les valeurs écrites sur les points.

import { defineTableConfig } from "@/components/ui/yayaw-table";
import { projectConfig } from "./project-config";

// Pass `displayModeRenderers={{ chart: chartRenderer }}` to the table.
export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["chart", "table"],
    defaultDisplayMode: "chart",
    chart: {
      type: "line",
      xColumn: "start",
      bucket: "week",
      metric: "count",
      cumulative: true,
      showDataLabels: true,
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue";
import { projectConfig } from "./project-config";

// Pass `:display-mode-renderers="{ chart: chartRenderer }"` to the table.
export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["chart", "table"],
    defaultDisplayMode: "chart",
    chart: {
      type: "line",
      xColumn: "start",
      bucket: "week",
      metric: "count",
      cumulative: true,
      showDataLabels: true,
    },
  },
});

Types de graphique

Réglages du graphique

Choisissez Graphique dans Paramètres de la vue › Mode d’affichage, puis ouvrez Réglages des cartes dans le même menu. Les réglages sont enregistrés avec la vue (config.chart) et dans la clé d’URL <tableId>-chart, par exemple ?projects-display=chart&projects-chart={"type":"line"}. Réinitialiser revient à table.chart, puis aux valeurs par défaut ci-dessous.

Le panneau n’affiche que ce qui s’applique : la période pour un axe X de dates, le début de semaine pour les semaines, la colonne de la mesure pour les mesures autres qu’un compte, et seulement le type et la mesure pour un nombre. Les valeurs sont formatées avec le numberFormat de la colonne de la mesure, et les graduations sont des nombres ronds (entiers pour les comptes).

Les périodes sont calculées dans le timeZone de la colonne de l’axe X, ou dans le fuseau du navigateur. Les dates sans heure comme 2026-09-24 restent des jours du calendrier : le changement d’heure ne les déplace jamais dans une autre période. Une valeur de sélection multiple compte dans chacun de ses groupes.

Conversion des mesures affichées

Définissez chart.valueFormat pour afficher un agrégat dans une autre unité. La seconde mesure d'un graphique combiné possède son propre chart.lineValueFormat : convertir les barres ne modifie pas l'unité de la ligne. React et Vue acceptent les mêmes réglages :

{
  "scale": 0.000001,
  "unit": "Mbit/s",
  "decimals": 2
}

La formule d'affichage est agrégat brut * scale + offset. Par exemple, 6 250 000 bit/s deviennent 6,25 Mbit/s. Un facteur 0.001 convertit les millisecondes en secondes ; 0.00000095367431640625 convertit les octets en Mio. Un facteur 1.8 et un décalage 32 convertissent les degrés Celsius en Fahrenheit.

• scale : nombre fini strictement positif, 1 par défaut. Utilisez l'inverse pour diviser.

• offset : nombre fini, 0 par défaut, ajouté une fois après agrégation et multiplication.

• unit : suffixe littéral facultatif, sans espaces aux extrémités, de 1 à 32 caractères, sans caractères de contrôle.

• decimals : nombre fixe de décimales facultatif, entier de 0 à 12.

Une unité explicite utilise un format décimal au lieu du format monétaire, pourcentage ou unité de la colonne source. Sans unité, le format numérique de la colonne est conservé ; decimals remplace sa précision. La langue du lecteur détermine les séparateurs par défaut. Sans réglage, les graphiques restent inchangés.

Ce format s'applique aux graduations numériques, info-bulles, étiquettes et au tableau de valeurs du graphique. Les enregistrements, requêtes, filtres, tris, géométrie, parts et pourcentages de comparaison restent en unités brutes. Les décalages ne sont pas des formules par enregistrement : ne les utilisez pas pour calculer une somme de valeurs converties ou modifier les dénominateurs des parts. Un format invalide est refusé en entier ; les expressions et clés inconnues ne sont pas acceptées. Un dépassement numérique affiche un tiret plutôt qu'une mesure infinie.

Les vues enregistrées et intégrées aux tableaux de bord conservent ces réglages. Les éditeurs les préservent lors d'autres modifications, sans encore proposer de contrôles de conversion. Les widgets Nombre utilisent le même contrat dans settings.valueFormat.

Regroupement côté serveur

Un graphique demande ses groupes à actions.aggregate, avec la requête de la vue (recherche, filtres, filtres avancés et leur jonction) et quatre paramètres de plus. calculations est alors vide :

{
  search: "",
  filters: {},
  advancedFilters: [],
  advancedFilterJoin: "and",
  calculations: {},
  locale: "fr",
  groupBy: [{ columnId: "dueDate", bucket: "month" }, { columnId: "status" }],
  metrics: [{ columnId: "price", fn: "sum" }],
  timeZone: "Europe/Paris",
  weekStartsOn: 1,
}

• groupBy a au plus deux niveaux : l’axe X, puis la série. Les colonnes date portent un bucket. Il est vide pour un nombre, qui attend un seul groupe avec keys: [].

• metrics liste les valeurs à calculer par groupe : { fn } pour un compte, { columnId, fn } sinon. Un graphique barres et courbe demande deux mesures dans une seule requête, celle des barres puis celle de la courbe ; répondez les deux valeurs dans cet ordre. Un hôte qui répond moins de valeurs que de mesures reçoit le repli du navigateur décrit plus bas.

• timeZone est le timeZone de la colonne de l’axe X ; s’il est absent, utilisez le fuseau du navigateur si vous le connaissez, ou celui dans lequel vos données sont affichées.

• weekStartsOn est le premier jour des semaines, de 0 (dimanche) à 6 (samedi).

Répondez une entrée par groupe :

{
  groups: [
    { keys: ["2026-09", "Active"], values: [463] },
    { keys: ["2026-09", null], values: [120] },
  ],
  truncated: false,
}

keys suit groupBy et values suit metrics. Les valeurs vides sont null. Les clés des périodes sont :

Les autres clés sont les valeurs brutes : valeurs d’option, nombres, true ou false, texte. Une fiche dont la sélection multiple contient plusieurs valeurs compte dans chacun de leurs groupes. Répondez truncated: true quand les groupes ne portent que sur une partie des fiches ; le graphique affiche alors un avertissement.

Les hôtes existants continuent de fonctionner. Le type TypeScript de la réponse rend results facultatif et ajoute groups et truncated. Sans aggregate, quand il échoue, ou quand il répond sans groups (calculs de colonnes seulement), le graphique regroupe dans le navigateur les lignes renvoyées par list : il parcourt les pages des fiches de la vue jusqu’à 2 000 lignes, et affiche « Seule une partie des enregistrements est comptée » s’il y en a davantage. Sans action list, il regroupe les lignes locales de la table.

Exemple côté serveur

Un gestionnaire Postgres qui regroupe les commandes par mois et par statut, en calculant les périodes dans le fuseau demandé. Les identifiants de colonne correspondent à des expressions SQL connues : aucune valeur de la requête n’est jamais écrite dans le texte SQL.

import type { TableAggregateParams } from "@/components/ui/yayaw-table/providers/table-provider";
import { sql } from "@/server/db"; // votre client SQL, avec des paramètres $1

const COLUMNS: Record<string, { expr: string; date?: boolean }> = {
  createdAt: { expr: "created_at", date: true },
  status: { expr: "status" },
  price: { expr: "price" },
};

const BUCKET_FORMATS = {
  day: "YYYY-MM-DD",
  month: "YYYY-MM",
  quarter: 'YYYY-"Q"Q',
  year: "YYYY",
};

function groupExpression(
  group: { columnId: string; bucket?: string },
  zoneParam: string,
  weekStartParam: string
) {
  const column = COLUMNS[group.columnId];
  if (!column) {
    throw new Error(`Unknown column ${group.columnId}`);
  }
  if (!(column.date && group.bucket)) {
    return column.expr;
  }
  // Jour local dans le fuseau de la table (sans AT TIME ZONE pour une colonne date).
  const day = `(${column.expr} AT TIME ZONE ${zoneParam})::date`;
  if (group.bucket === "week") {
    // isodow % 7 : dimanche = 0 ... samedi = 6, comme weekStartsOn.
    const offset = `((extract(isodow from ${day})::int % 7 - ${weekStartParam} + 7) % 7)`;
    return `to_char(${day} - ${offset}, 'YYYY-MM-DD')`;
  }
  const format = BUCKET_FORMATS[group.bucket as keyof typeof BUCKET_FORMATS];
  return `to_char(${day}, '${format}')`;
}

const METRICS = {
  count: () => "count(*)",
  sum: (expr: string) => `coalesce(sum(${expr}), 0)`,
  avg: (expr: string) => `avg(${expr})`,
  min: (expr: string) => `min(${expr})`,
  max: (expr: string) => `max(${expr})`,
  countDistinct: (expr: string) => `count(distinct ${expr})`,
};

export async function aggregateOrders(params: TableAggregateParams) {
  if (!params.groupBy) {
    return { results: await columnCalculations(params) }; // totaux du pied de table
  }
  const values: unknown[] = [params.timeZone ?? "UTC", params.weekStartsOn ?? 1];
  const keys = params.groupBy.map(
    (group, index) => `${groupExpression(group, "$1", "$2")} as k${index}`
  );
  const metrics = (params.metrics ?? []).map((metric) => {
    const column = metric.columnId ? COLUMNS[metric.columnId] : undefined;
    if (metric.columnId && !column) {
      throw new Error(`Unknown column ${metric.columnId}`);
    }
    const aggregateOf = METRICS[metric.fn];
    return aggregateOf(column?.expr ?? "");
  });
  const selected = [...keys, ...metrics.map((expr, index) => `${expr} as v${index}`)];
  const where = buildWhere(params, values); // les mêmes filtres que votre action list
  const rows = await sql(
    `select ${selected.join(", ")}
       from orders
      where ${where}
      ${keys.length ? `group by ${keys.map((_, index) => index + 1).join(", ")}` : ""}`,
    values
  );
  return {
    groups: rows.map((row) => ({
      keys: keys.map((_, index) => row[`k${index}`] ?? null),
      values: metrics.map((_, index) => Number(row[`v${index}`] ?? 0)),
    })),
  };
}

buildWhere et columnCalculations sont votre propre filtrage de liste et vos totaux de pied de table. Regrouper une sélection multiple stockée en tableau demande unnest, pour que chaque valeur ait son groupe. Le modèle partagé exporte aussi aggregateChartRows(rows, request), le repli du navigateur lui-même, utilisable comme implémentation en mémoire pour de petits jeux de données ou des tests.

Cliquer pour voir les fiches

Cliquez sur une barre, une part ou un point pour voir ses fiches : les règles du groupe sont ajoutées aux filtres avancés de la vue, jointes par and, et la table s’ouvre (sinon la liste, sinon un autre mode proposé). Le filtre reste visible et modifiable dans les menus de filtre. Les règles sont celles qu’écrivent les menus de filtre pour la colonne : les groupes de sélection deviennent isAnyOf, de sélection multiple contains, les périodes between leur premier et leur dernier jour, les groupes oui/non des règles isAnyOf sur true ou false, les groupes vides isEmpty et les autres valeurs equals. Dans les graphiques en aires et barres et courbe, un clic n’importe où dans la bande d’une catégorie la sélectionne. Une étape d’entonnoir est un bouton qui affiche ses fiches.

Les groupes « Autres » ne sont pas cliquables. Quand les filtres de la vue correspondent à l’une des règles (or avec deux règles ou plus), un groupe ne peut pas y être ajouté et le graphique l’indique sous le graphique.

Afficher en tableau

Afficher en tableau remplace le graphique par un tableau de ses valeurs ; Afficher en graphique revient au graphique. Chaque nom de groupe de ce tableau est un bouton (« Afficher les enregistrements de … »), le chemin au clavier vers le même filtrage qu’un clic. Les nombres n’ont pas de tableau. En React, Recharts ajoute sa propre navigation au clavier (les flèches déplacent l’infobulle) ; en Vue, les marques Unovis sont masquées aux technologies d’assistance et s’appuient sur le tableau.

Traductions

Le graphique a des libellés intégrés en anglais et en français ; le français est utilisé quand la locale commence par fr. Remplacez n’importe lequel avec des clés plates chart.<key> dans les traductions de la table, en React comme en Vue, par exemple "chart.showTable": "Vue tableau".

• Réglages : chartType, typeBar, typeHorizontalBar, typeLine, typeArea, typeCombo, typeDonut, typeFunnel, typeNumber, xColumn, bucket, day, week, month, quarter, year, metric, metricCount, metricSum, metricAvg, metricMin, metricMax, metricCountDistinct, metricColumn, seriesColumn, none, stacked, sort, sortAuto, sortKeyAsc, sortKeyDesc, sortValueAsc, sortValueDesc, sortManual, cumulative, hideEmpty, topN, topAll, top (avec {count}), showDataLabels, showLegend, colors, colorsOptions, colorsPalette, weekStartsOn, monday, sunday, saturday, on, off, reset, stacking, stackingStacked, stackingPercent, stackingNone, curve, curveSmooth, curveLinear, barMetric, barMetricColumn, lineMetric, lineMetricColumn, stageOrder, stageOrderHint, stageOrderReset, moveStageUp, moveStageDown (avec {stage}).

• Graphique : showTable, showChart, other, noValue, checked, unchecked, weekOf (avec {date}), quarterLabel (avec {quarter} et {year}), count, sumOf, avgOf, minOf, maxOf, countDistinctOf (avec {column}), total, group, chartOf (le titre, avec {metric} et {column}), showRecords (avec {group}), comboOf (avec {bars}, {line} et {column}), stage, shareOfFirst, conversion, ofFirst et fromPrevious (avec {percent}).

• Messages : noColumn, empty, loading, truncated, filterHint, filterUnavailable, funnelHint.

Le nom du mode dans le sélecteur de mode d’affichage est views.display.chart en React et display.chart en Vue.

Thème

Les graphiques utilisent les tokens de graphique shadcn --chart-1 à --chart-5, en mode clair et sombre. L’élément Vue les lit via --yayaw-chart-1 à --yayaw-chart-5, qui reviennent au thème neutre de shadcn quand votre application ne définit pas de tokens de graphique.

Différences entre moteurs

Les deux éditions partagent le modèle, le panneau de réglages, le balisage de la légende, le titre, l’indication, le tableau de repli, les graduations et les couleurs. Les moteurs de dessin imposent quelques différences :

• Les étiquettes de données utilisent LabelList de Recharts en React et XYLabels d’Unovis en Vue. Les barres groupées (non empilées) n’ont pas d’étiquette par barre en Vue ; le tableau liste les valeurs.

• Les valeurs des anneaux sont affichées dans la légende dans les deux éditions.

• Les infobulles suivent le positionnement propre à chaque moteur.

Notes de compatibilité

TableDisplayMode inclut désormais "chart". Si votre code garde une table exhaustive Record<TableDisplayMode, …>, comme des icônes ou des libellés par mode, ajoutez une entrée chart pour qu’il compile toujours :

const modeLabels: Record<TableDisplayMode, string> = {
  // ...
  chart: "Graphique",
};

Les contextes des renderers gagnent aggregate, advancedFilters et showRecords(rules), que les renderers de mode d’affichage personnalisés peuvent utiliser de la même façon.

La même version corrige deux problèmes en React :

• Une table dont les lignes finissent de charger juste après un changement rapide de filtre n’affiche plus indéfiniment des lignes squelettes.

• Les valeurs de date sans heure des filtres avancés lues dans l’URL sont des jours locaux et non minuit UTC : elles ne tombent plus un jour trop tôt à l’ouest de Greenwich.