Chart Card (BcChartCard · BcPeriodSelector · BcPeriod) ​

Conteneur pour graphiques avec sélecteur de période. Slots disponibles : #period (header droit), slot par défaut (corps), #footer.

Bar Chart avec sélecteur de période ​

vue
<script setup>
import { ref } from 'vue'
const period = ref('6M')
const periodOptions = [
  { id: '6M', label: '6M' },
  { id: '12M', label: '12M' },
  { id: 'YTD', label: 'YTD' },
]
</script>

<BcChartCard title="Nouveaux partenaires onboardés">
  <template #period>
    <BcPeriodSelector v-model="period" :options="periodOptions" />
  </template>
  <!-- slot default : contenu du graphique -->
  <canvas ref="chartRef" height="200" />
</BcChartCard>

Intégration Chart.js (production) ​

vue
<script setup>
import { ref, onMounted } from 'vue'
import { Chart, BarController, BarElement, CategoryScale, LinearScale, Tooltip } from 'chart.js'

Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip)

const chartRef = ref(null)
const period = ref('6M')
const periodOptions = [
  { id: '6M', label: '6M' },
  { id: '12M', label: '12M' },
  { id: 'YTD', label: 'YTD' },
]

onMounted(() => {
  new Chart(chartRef.value, {
    type: 'bar',
    data: {
      labels: ['Oct', 'Nov', 'Déc', 'Jan', 'Fév', 'Mar'],
      datasets: [{
        label: 'Partenaires',
        data: [8, 13, 11, 16, 14, 18],
        backgroundColor: (ctx) => {
          const gradient = ctx.chart.ctx.createLinearGradient(0, 0, 0, 200)
          gradient.addColorStop(0, '#e8294c')
          gradient.addColorStop(1, '#f97316')
          return gradient
        },
        borderRadius: 4,
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true } }
    }
  })
})
</script>

<template>
  <BcChartCard title="Nouveaux partenaires onboardés">
    <template #period>
      <BcPeriodSelector v-model="period" :options="periodOptions" />
    </template>
    <canvas ref="chartRef" height="200" />
  </BcChartCard>
</template>

Donut Chart — Répartition des statuts ​

Props — BcChartCard ​

PropTypeDéfautDescription
titlestring— (requis)Titre de la carte
subtitlestring""Sous-titre affiché sous le titre
metastring""Texte court affiché à droite si #period est vide

Slots — BcChartCard ​

SlotDescription
defaultCorps de la carte — zone graphique
#periodZone droite du header (BcPeriodSelector, BcPeriod…)
#footerPied de carte optionnel

Props — BcPeriodSelector ​

PropTypeDéfautDescription
modelValuestring— (requis)ID de la période sélectionnée (v-model)
optionsPeriodOption[]— (requis)Liste des options { id, label, disabled? }
ariaLabelstring"Selecteur de periode"Label ARIA

Cas d'usage — Dashboard KPIs ​

vue
<div class="bc-chart-row">
  <BcChartCard title="Volumes transactions">
    <template #period>
      <BcPeriodSelector v-model="period" :options="periodOptions" />
    </template>
    <canvas ref="barRef" />
  </BcChartCard>

  <BcChartCard title="Répartition statuts KYB">
    <canvas ref="donutRef" />
  </BcChartCard>
</div>

BcPeriod ​

Groupe de boutons de sélection de période (pill-tabs). Version légère sans fieldset/legend — à utiliser dans les headers de cartes ou filtres de dashboard.

Différence avec BcPeriodSelector : rendu visuel plus compact, sans bordure externe. API identique.

Démo ​

vue
<script setup>
import { ref } from 'vue'
const period = ref('3m')
</script>

<BcPeriod
  v-model="period"
  :options="[
    { id: '7j', label: '7 jours' },
    { id: '1m', label: '1 mois' },
    { id: '3m', label: '3 mois' },
    { id: '12m', label: '12 mois' },
    { id: 'ytd', label: 'YTD' },
  ]"
/>

Type PeriodOption ​

ts
interface PeriodOption {
  id: string
  label: string
  disabled?: boolean
}

Props — BcPeriod ​

PropTypeDéfautDescription
modelValuestring— (requis)ID de la période sélectionnée (v-model)
optionsPeriodOption[]— (requis)Liste des options
ariaLabelstring"Period selector"Label ARIA du groupe

Events ​

EventPayloadDescription
update:modelValuestringChangement de période (v-model)