Gabarit · Analytics / BI

Grille analytique

Disponible

Page d'analytique : chrome + grille de tuiles (KPI, graphiques, tableaux) sur 12 colonnes avec placement x/y/w/h par tuile via DashboardGrid (option editable pour déplacer/redimensionner). Pour un layout statique, Grid suffit. Convient aux tableaux de bord BI et aux pages de monitoring.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular.

Grille analytique (données mock)

Analytics

Revenu1,2 M$+8,7 %

Commandes3 412+211

Conversion6,8 %-0,3 %

Satisfaction4,6 / 5+0,1

Revenu mensuel — tendance 6 mois

Jan: 88000
Fév: 94000
Mar: 101000
Avr: 107000
Mai: 115000
Juin: 124800

Répartition acquisition

Organique: 48 (48%)
Publicité: 27 (27%)
Direct: 25 (25%)

Voir le code (Svelte)

<div class="ag-shell">
  <Header title="Analytics" />
  <main class="ag-main">
    <div class="ag-toolbar">
      <h2 class="ag-page-title">Indicateurs clés</h2>
      <Badge tone="neutral">Juin 2026</Badge>
    </div>
    <div class="ag-kpi-row" aria-label="KPI">
      <div class="ag-kpi-tile">
        <span class="ag-kpi-label">Revenu</span>
        <span class="ag-kpi-value">1,2 M$</span>
        <span class="ag-kpi-trend ag-kpi-trend--up">+8,7 %</span>
      </div>
      <div class="ag-kpi-tile">
        <span class="ag-kpi-label">Commandes</span>
        <span class="ag-kpi-value">3 412</span>
        <span class="ag-kpi-trend ag-kpi-trend--up">+211</span>
      </div>
      <div class="ag-kpi-tile">
        <span class="ag-kpi-label">Conversion</span>
        <span class="ag-kpi-value">6,8 %</span>
        <span class="ag-kpi-trend ag-kpi-trend--down">-0,3 %</span>
      </div>
      <div class="ag-kpi-tile">
        <span class="ag-kpi-label">Satisfaction</span>
        <span class="ag-kpi-value">4,6 / 5</span>
        <span class="ag-kpi-trend ag-kpi-trend--up">+0,1</span>
      </div>
    </div>
    <div class="ag-charts-row">
      <div class="ag-chart-tile ag-chart-tile--wide">
        <p class="ag-chart-label">Revenu mensuel — tendance 6 mois</p>
        <LineChart
          label="Revenu mensuel"
          data={[{"x":"Jan","y":88000},{"x":"Fév","y":94000},{"x":"Mar","y":101000},{"x":"Avr","y":107000},{"x":"Mai","y":115000},{"x":"Juin","y":124800}]}
          tone="category1"
          height={160}
        />
      </div>
      <div class="ag-chart-tile">
        <p class="ag-chart-label">Répartition acquisition</p>
        <DonutChart
          label="Sources"
          data={[{"label":"Organique","value":48,"tone":"category1"},{"label":"Publicité","value":27,"tone":"category2"},{"label":"Direct","value":25,"tone":"category3"}]}
          height={160}
        />
      </div>
    </div>
  </main>
</div>

Composants DS utilisés

Quand l'utiliser

Tableaux de bord exécutifs (KPI + graphiques + tableaux)
Pages de monitoring ops ou SRE
Rapports BI paramétrables (DashboardGrid editable)