{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "stats-band-sparklines",
  "title": "Stats — Band with Sparklines",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/stats-band-sparklines/StatsBandSparklines.vue",
      "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/components/ui/badge'\nimport { Separator } from '@/components/ui/separator'\n\n// Inline SVG rather than a chart dependency: a sparkline is a polyline, and\n// pulling in a charting library for twelve points is not a trade worth making.\nconst metrics = [\n  {\n    value: '4.2',\n    unit: 'days',\n    label: 'Median time to close',\n    period: 'last 12 months',\n    series: [9.4, 9.1, 8.7, 8.2, 7.4, 6.8, 6.1, 5.6, 5.1, 4.8, 4.4, 4.2],\n  },\n  {\n    value: '61',\n    unit: '/mo',\n    label: 'Ad-hoc data requests',\n    period: 'last 12 months',\n    series: [212, 198, 184, 160, 141, 122, 108, 96, 84, 74, 66, 61],\n  },\n  {\n    value: '340',\n    unit: '',\n    label: 'Certified metrics live',\n    period: 'since launch',\n    series: [0, 12, 38, 74, 112, 148, 181, 214, 248, 281, 312, 340],\n  },\n  {\n    value: '99.98',\n    unit: '%',\n    label: 'Query availability',\n    period: 'rolling 90 days',\n    series: [99.9, 99.95, 99.92, 99.97, 99.99, 99.96, 99.98, 99.99, 99.97, 99.98, 99.99, 99.98],\n  },\n]\n\n// Normalise a series into a 100x28 viewBox so every sparkline shares a baseline.\nfunction points(series: number[]) {\n  const min = Math.min(...series)\n  const max = Math.max(...series)\n  const span = max - min || 1\n  return series\n    .map((value, index) => {\n      const x = (index / (series.length - 1)) * 100\n      const y = 26 - ((value - min) / span) * 24\n      return `${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(' ')\n}\n</script>\n\n<template>\n  <section data-slot=\"stats-band-sparklines\" class=\"border-border bg-card border-y\">\n    <div class=\"mx-auto max-w-6xl px-6 py-12\">\n      <Badge variant=\"secondary\">Measured</Badge>\n\n      <dl class=\"mt-6 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-0\">\n        <div v-for=\"(metric, index) in metrics\" :key=\"metric.label\" class=\"relative lg:px-6 lg:first:pl-0\">\n          <dd class=\"font-display text-3xl font-bold tracking-tight\">\n            {{ metric.value }}<span class=\"text-muted-foreground text-lg font-semibold\">{{ metric.unit }}</span>\n          </dd>\n          <dt class=\"mt-1 text-sm font-medium\">{{ metric.label }}</dt>\n\n          <svg\n            class=\"text-primary/70 mt-3 h-7 w-full\"\n            viewBox=\"0 0 100 28\"\n            preserveAspectRatio=\"none\"\n            aria-hidden=\"true\"\n          >\n            <polyline :points=\"points(metric.series)\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n          </svg>\n\n          <p class=\"text-muted-foreground mt-1 font-mono text-xs\">{{ metric.period }}</p>\n\n          <Separator\n            v-if=\"index < metrics.length - 1\"\n            orientation=\"vertical\"\n            class=\"absolute top-0 right-0 hidden h-full lg:block\"\n          />\n        </div>\n      </dl>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/StatsBandSparklines.vue"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Metric band pairing each headline figure with an inline sparkline and its period, so a number arrives with the shape of the trend behind it.",
  "categories": [
    "marketing"
  ]
}