<h2>Bridge-LAN 即時流量</h2>
<div id="loading">資料載入中...</div>
<canvas id="trafficChart" width="600" height="300" style="display:none;"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  fetch('/get_traffic.php')  // <<✅ 注意這裡是絕對路徑，不要寫相對路徑
    .then(res => res.json())
    .then(data => {
      if (data.error) {
        document.getElementById('loading').innerText = data.error;
        return;
      }

      const rx = (data.rx / 1024).toFixed(2); // kbps
      const tx = (data.tx / 1024).toFixed(2);

      document.getElementById('loading').style.display = 'none';
      document.getElementById('trafficChart').style.display = 'block';

      new Chart(document.getElementById('trafficChart').getContext('2d'), {
        type: 'bar',
        data: {
          labels: ['下載 RX', '上傳 TX'],
          datasets: [{
            label: '目前速率 (kbps)',
            data: [rx, tx],
            backgroundColor: ['#4bc0c0', '#ff9f40']
          }]
        },
        options: {
          plugins: { legend: { display: false }},
          scales: {
            y: {
              beginAtZero: true,
              title: { display: true, text: 'kbps' }
            }
          }
        }
      });
    })
    .catch(err => {
      document.getElementById('loading').innerText = '資料取得失敗';
      console.error(err);
    });
</script>