Data Display graphstatdata

Metric with Sparkline

Data card showing target metric and a miniature trend graph.

Sessions

2,415

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { MetricwithSparkline } from 'astro-component-kit';
---

<SparklineStatCard>Content</SparklineStatCard>
--- import { MetricwithSparkline } from 'astro-component-kit'; --- <SparklineStatCard>Content</SparklineStatCard>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/MetricwithSparkline.astro and paste the following code:

astro 
---
---
<div class="spark-card">
  <div class="top"><span>Sessions</span><h3>2,415</h3></div>
  <div class="graph">
    <svg viewBox="0 0 100 30">
      <path d="M0 25 L10 20 L20 22 L30 15 L40 18 L50 25 L60 10 L70 12 L80 5 L90 8 L100 2" fill="none" stroke="#6366f1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</div>
<style>
  .spark-card { padding: 1.5rem; background: #111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; min-width: 160px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
  h3 { margin: 4px 0; color: #fff; font-size: 1.5rem; font-weight: 800; }
  span { font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
  .graph { margin-top: 15px; height: 30px; opacity: 0.8; }
</style>
--- --- <div class="spark-card"> <div class="top"><span>Sessions</span><h3>2,415</h3></div> <div class="graph"> <svg viewBox="0 0 100 30"> <path d="M0 25 L10 20 L20 22 L30 15 L40 18 L50 25 L60 10 L70 12 L80 5 L90 8 L100 2" fill="none" stroke="#6366f1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <style> .spark-card { padding: 1.5rem; background: #111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; min-width: 160px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } h3 { margin: 4px 0; color: #fff; font-size: 1.5rem; font-weight: 800; } span { font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .graph { margin-top: 15px; height: 30px; opacity: 0.8; } </style>

Quick Info

Category
Data Display
Filename
MetricwithSparkline.astro
Dependencies
None — pure Astro + CSS
Tags
graphstatdata