{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "uptime-tracker-chart",
  "title": "Uptime Tracker Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/charts/uptime-tracker-chart/UptimeTrackerChart.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nexport type DayStatus = 'up' | 'degraded' | 'down' | 'unknown'\n\nexport interface StatusDay {\n  date: string\n  status: DayStatus\n}\n\ninterface Props {\n  days: StatusDay[]\n  height?: number | string\n  /** Gap between bars in px. Default 2. */\n  gap?: number\n  /** Bar corner radius in px. Default 2. */\n  rounded?: number\n  /** Show the legend row with the computed uptime %. Default true. */\n  showLegend?: boolean\n  class?: HTMLAttributes['class']\n  /** Accessible name announced for the chart image. Defaults to \"Chart\". */\n  ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  height: 48,\n  gap: 2,\n  rounded: 2,\n  showLegend: true,\n})\n\nconst heightStyle = computed(() => (/^\\d+$/.test(String(props.height)) ? `${props.height}px` : String(props.height)))\n\nconst COLORS: Record<DayStatus, string> = {\n  up: 'var(--chart-2)',\n  degraded: 'var(--chart-4)',\n  down: 'var(--destructive)',\n  unknown: 'var(--border)',\n}\n\nconst uptime = computed(() => {\n  if (!props.days.length) return '—'\n  const up = props.days.filter((d) => d.status === 'up').length\n  return `${((up / props.days.length) * 100).toFixed(1)}%`\n})\n\nconst summary = computed(() => {\n  const counts = (s: DayStatus) => props.days.filter((d) => d.status === s).length\n  return `${counts('up')} up, ${counts('degraded')} degraded, ${counts('down')} down days`\n})\n</script>\n\n<template>\n  <div\n    data-slot=\"uptime-tracker-chart\"\n    role=\"img\"\n    tabindex=\"0\"\n    :aria-label=\"ariaLabel || `Uptime tracker: ${summary}`\"\n    :class=\"cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)\"\n  >\n    <div class=\"flex min-h-6 items-stretch\" :style=\"{ height: heightStyle, gap: `${gap}px` }\">\n      <div\n        v-for=\"(d, i) in days\"\n        :key=\"`${d.date}-${i}`\"\n        class=\"min-w-0 flex-1\"\n        :style=\"{ background: COLORS[d.status], borderRadius: `${rounded}px` }\"\n        :title=\"`${d.date} — ${d.status}`\"\n      />\n    </div>\n    <div v-if=\"showLegend\" class=\"mt-2 flex items-center gap-3 text-xs\">\n      <span class=\"text-foreground font-semibold tabular-nums\">{{ uptime }} uptime</span>\n      <span class=\"text-muted-foreground\">{{ days.length }} days</span>\n      <span class=\"ml-auto flex items-center gap-2\">\n        <span class=\"flex items-center gap-1\"\n          ><span class=\"size-2 rounded-[2px]\" :style=\"{ background: COLORS.up }\" />Up</span\n        >\n        <span class=\"flex items-center gap-1\"\n          ><span class=\"size-2 rounded-[2px]\" :style=\"{ background: COLORS.degraded }\" />Degraded</span\n        >\n        <span class=\"flex items-center gap-1\"\n          ><span class=\"size-2 rounded-[2px]\" :style=\"{ background: COLORS.down }\" />Down</span\n        >\n      </span>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/charts/uptime-tracker-chart/UptimeTrackerChart.vue"
    },
    {
      "path": "packages/registry-vue/components/charts/uptime-tracker-chart/index.ts",
      "content": "export { default as UptimeTrackerChart } from './UptimeTrackerChart.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/charts/uptime-tracker-chart/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Uptime tracker as dependency-free SVG-friendly markup. 90-day style status bars with an auto-computed uptime % legend. Picks up chart tokens via CSS variables.",
  "categories": [
    "chart"
  ]
}