Charts (Graphiques)

<div class="bj-chart">
  <div class="bj-chart__header">
    <div>
      <p class="bj-chart__title">Visiteurs mensuels</p>
      <p class="bj-chart__subtitle">Janvier – Mars 2026</p>
    </div>
    <button type="button" class="bj-btn bj-btn--tertiary bj-btn--sm">Exporter</button>
  </div>
  <div class="bj-chart__body">
    <!-- SVG ou contenu du graphique -->
  </div>
  <div class="bj-chart__legend">
    <span class="bj-chart__legend-item">
      <span class="bj-chart__legend-dot" style="background-color: #008751;"></span>
      Série A
    </span>
    <span class="bj-chart__legend-item">
      <span class="bj-chart__legend-dot" style="background-color: #FCD116;"></span>
      Série B
    </span>
  </div>
</div>

<div class="bj-chart-bar" role="img" style="height: 12rem;">
  <div class="bj-chart-bar__col">
    <span class="bj-chart-bar__value">120</span>
    <div class="bj-chart-bar__bar-area">
      <div class="bj-chart-bar__bar" style="height: 80%; background-color: #008751;"></div>
    </div>
    <span class="bj-chart-bar__label">Jan</span>
  </div>
  <div class="bj-chart-bar__col">
    <span class="bj-chart-bar__value">90</span>
    <div class="bj-chart-bar__bar-area">
      <div class="bj-chart-bar__bar" style="height: 60%; background-color: #FCD116;"></div>
    </div>
    <span class="bj-chart-bar__label">Fév</span>
  </div>
</div>

<div class="bj-chart-bar bj-chart-bar--horizontal" role="img" style="min-height: auto;">
  <div class="bj-chart-bar__row">
    <span class="bj-chart-bar__label" style="min-width: 5rem">Alpha</span>
    <div class="bj-chart-bar__track">
      <div class="bj-chart-bar__fill" style="width: 75%; background-color: #008751;"></div>
    </div>
    <span class="bj-chart-bar__value">75</span>
  </div>
  <div class="bj-chart-bar__row">
    <span class="bj-chart-bar__label" style="min-width: 5rem">Beta</span>
    <div class="bj-chart-bar__track">
      <div class="bj-chart-bar__fill" style="width: 40%; background-color: #E8112D;"></div>
    </div>
    <span class="bj-chart-bar__value">40</span>
  </div>
</div>

<!-- Sans valeurs : ne pas rendre .bj-chart-bar__value -->
<div class="bj-chart-bar__row">
  <span class="bj-chart-bar__label" style="min-width: 5rem">Gamma</span>
  <div class="bj-chart-bar__track">
    <div class="bj-chart-bar__fill" style="width: 55%; background-color: #FCD116;"></div>
  </div>
</div>

<div class="bj-chart-line">
  <svg viewBox="0 0 400 200" preserveAspectRatio="xMidYMid meet">
    <line class="bj-chart-line__grid" x1="40" y1="47.5" x2="390" y2="47.5" />
    <line class="bj-chart-line__grid" x1="40" y1="95" x2="390" y2="95" />
    <line class="bj-chart-line__grid" x1="40" y1="142.5" x2="390" y2="142.5" />
    <path class="bj-chart-line__area" style="fill: #008751"
      d="M40,170 L40,60 L220,100 L400,40 L400,170 Z" />
    <path class="bj-chart-line__path" style="stroke: #008751"
      d="M40,60 L220,100 L400,40" />
    <circle class="bj-chart-line__dot" cx="40" cy="60" style="stroke: #008751" />
    <circle class="bj-chart-line__dot" cx="220" cy="100" style="stroke: #008751" />
    <circle class="bj-chart-line__dot" cx="400" cy="40" style="stroke: #008751" />
    <text class="bj-chart-line__axis" x="40" y="192" text-anchor="middle">Lun</text>
    <text class="bj-chart-line__axis" x="220" y="192" text-anchor="middle">Mer</text>
    <text class="bj-chart-line__axis" x="390" y="192" text-anchor="middle">Ven</text>
  </svg>
</div>

<div class="bj-chart-pie">
  <svg viewBox="0 0 200 200">
    <path class="bj-chart-pie__slice" fill="#008751"
      d="M100,100 L100,4 A96,96 0 0,1 178.4,148 Z" />
    <path class="bj-chart-pie__slice" fill="#FCD116"
      d="M100,100 L178.4,148 A96,96 0 0,1 21.6,148 Z" />
    <path class="bj-chart-pie__slice" fill="#E8112D"
      d="M100,100 L21.6,148 A96,96 0 1,1 100,4 Z" />
  </svg>
</div>

<div class="bj-chart-pie bj-chart-pie--donut">
  <svg viewBox="0 0 200 200">
    <path class="bj-chart-pie__slice" fill="#008751" d="M100,100 L100,8 A92,92 0 0,1 184,100 L136,100 A44,44 0 0,0 100,56 Z" />
    <path class="bj-chart-pie__slice" fill="#FCD116" d="M100,100 L136,100 A44,44 0 0,0 136,144 L100,144 A44,44 0 0,1 100,100 Z" />
    <path class="bj-chart-pie__slice" fill="#E8112D" d="M100,100 L100,144 A44,44 0 0,0 64,100 L100,100 Z" />
    <text class="bj-chart-pie__center-text" x="100" y="100">72%</text>
  </svg>
</div>