BjChartPie

Camembert ou donut Vue : parts proportionnelles, centerText uniquement avec donut, taille SVG size. Chaque tranche exige color.

Utilisation

<script setup>
import { BjChart, BjChartPie } from '@flrxnt/dsbj/vue'

const data = [
  { label: 'Direct', value: 45, color: '#008751' },
  { label: 'Recherche', value: 30, color: '#FCD116' },
  { label: 'Réseaux', value: 25, color: '#E8112D' },
]
</script>

<template>
  <BjChart title="Sources de trafic">
    <BjChartPie :data="data" donut center-text="100%" />
  </BjChart>
</template>

Camembert plein

Sans donut, le graphique est un disque plein ; centerText n’est pas affiché.

<BjChartPie :data="data" />

Donut et texte central

Avec donut, le trou intérieur apparaît et center-text peut résumer un total ou un pourcentage.

<BjChartPie :data="data" donut center-text="72%" />

Tailles différentes

size règle le viewBox du SVG (défaut 200) ; le rendu reste responsive via CSS.

<BjChartPie :data="data" :size="280" />

Couleurs personnalisées

Les couleurs sont entièrement contrôlées par les données (palette métier ou design system).

Combinaison : donut + centerText + size

Exemple donut avec libellé central et size="160".

<BjChartPie
  :data="data"
  donut
  center-text="Total"
  :size="160"
/>

Props

Prop	Description
`data`	<code class="bj-code">{ label, value, color }[]</code> — <code class="bj-code">color</code> requis pour le rendu.
`donut`	Active <code class="bj-code">bj-chart-pie--donut</code>.
`centerText`	Texte au centre (uniquement si <code class="bj-code">donut</code> est vrai).
`size`	Côté du viewBox carré (défaut : 200).
`…`	Attributs sur le conteneur <code class="bj-code">.bj-chart-pie</code>.