Dashboard Metrics Card with Embedded Mini Line Chart

<article
  class="overflow-hidden border-white/10 border rounded-[28px] relative shadow-[0_0_0_1px_rgba(255,255,255,0.02)_inset,0_10px_30px_-10px_rgba(0,0,0,0.6)] mx-auto max-w-xl m-12">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

  <div
    class="absolute inset-0 opacity-[0.22] [mask-image:radial-gradient(120%_80%_at_50%_0%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:40px_40px] pointer-events-none">
  </div>

  <!-- Visual -->
  <div class="md:h-72 h-64 pt-6 pr-6 pb-6 pl-6 relative">
    <div class="opacity-60 absolute top-0 right-0 bottom-0 left-0 blur-3xl translate-y-2"></div>
    <div class="relative h-full w-full flex items-center justify-center">
      <div
        class="rounded-2xl border border-white/10 bg-gradient-to-b from-white/[0.06] to-white/[0.02] backdrop-blur p-4 w-[88%] max-w-sm shadow-[0_10px_30px_-10px_rgba(0,0,0,0.7)]">
        <div class="flex items-center justify-between mb-2">
          <div class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 rounded-full bg-sky-400/90"></span>
            <span class="text-[11px] text-white/70">Requests</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 rounded-full bg-amber-300/90"></span>
            <span class="text-[11px] text-white/70">Latency</span>
          </div>
        </div>
        <!-- Wrap canvas in a div to avoid layout bug -->
        <div class="relative h-32">
          <canvas id="miniChart" class="absolute inset-0" width="519" height="256"
            style="display: block; box-sizing: border-box; height: 128px; width: 259px;"></canvas>
        </div>
      </div>
      <!-- Tooltip mock -->
      <div class="absolute right-10 top-10">
        <div class="rounded-lg border border-white/10 bg-white/[0.06] px-2.5 py-1.5 backdrop-blur">
          <span class="text-[11px] text-white/85">2.4M req/s</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Copy -->
  <div class="relative p-6 pt-2">
    <h3 class="text-lg font-semibold tracking-tight text-white/95">Monitor everything</h3>
    <p class="mt-2 text-sm text-white/70">
      Real‑time insights into performance metrics, errors, and user behavior across regions.
    </p>
  </div>

  <!-- Card-scoped chart init -->
  <script>
    (function () {
              var root = document.currentScript && document.currentScript.closest('article');
              if (!root || !window.Chart) return;
              var canvas = root.querySelector('canvas');
              if (!canvas) return;

              var ctx = canvas.getContext('2d');
              var gradientBlue = ctx.createLinearGradient(0, 0, 0, 140);
              gradientBlue.addColorStop(0, 'rgba(56, 189, 248, 0.35)');
              gradientBlue.addColorStop(1, 'rgba(56, 189, 248, 0.00)');

              var gradientAmber = ctx.createLinearGradient(0, 0, 0, 140);
              gradientAmber.addColorStop(0, 'rgba(251, 191, 36, 0.35)');
              gradientAmber.addColorStop(1, 'rgba(251, 191, 36, 0.00)');

              new Chart(canvas, {
                type: 'line',
                data: {
                  labels: ['JAN','FEB','MAR','APR','MAY','JUN'],
                  datasets: [
                    {
                      label: 'Requests',
                      data: [18, 32, 48, 65, 42, 28],
                      borderColor: 'rgb(56, 189, 248)',
                      backgroundColor: gradientBlue,
                      pointRadius: 0,
                      borderWidth: 2,
                      tension: 0.42,
                      fill: true,
                    },
                    {
                      label: 'Latency',
                      data: [8, 22, 54, 46, 34, 16],
                      borderColor: 'rgb(251, 191, 36)',
                      backgroundColor: gradientAmber,
                      pointRadius: 0,
                      borderWidth: 2,
                      tension: 0.42,
                      fill: true,
                    }
                  ]
                },
                options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                    legend: { display: false },
                    tooltip: { enabled: false }
                  },
                  scales: {
                    x: {
                      grid: { color: 'rgba(255,255,255,0.06)', drawTicks: false },
                      ticks: { color: 'rgba(255,255,255,0.55)', font: { size: 10 } }
                    },
                    y: {
                      grid: { color: 'rgba(255,255,255,0.06)', drawTicks: false },
                      ticks: { display: false },
                      min: 0,
                      max: 70
                    }
                  }
                }
              });
            })();
  </script>
</article>