Test Results Chart

<div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
  <div class="font-inter">
    <div class="mb-6">
      <h3 class="text-lg font-semibold text-gray-900">Coverage Trend</h3>
      <p class="text-sm text-gray-600">This year</p>
    </div>
    <div class="relative h-64 bg-gray-50 rounded-lg p-4 mb-4">
      <canvas id="coverageChart" class="w-full h-full"></canvas>
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="text-center">
          <div class="text-3xl font-bold text-blue-600 mb-2">96%</div>
          <div class="text-sm text-gray-600">Monthly test coverage</div>
          <div class="mt-4 flex space-x-4 text-xs">
            <div class="flex items-center">
              <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
              <span>Coverage</span>
            </div>
            <div class="flex items-center">
              <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
              <span>Target</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center text-xs text-gray-500">Monthly test coverage</div>
  </div>
  <script>if (typeof Chart !== 'undefined') { const ctx = document.getElementById('coverageChart'); if (ctx) { new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'Coverage %', data: [92, 94, 89, 96, 95, 96], borderColor: '#3B82F6', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false, min: 80 } } } }); } }</script>
</div>