{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "uptime-tracker-chart",
  "title": "Uptime Tracker Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/uptime-tracker-chart/UptimeTrackerChart.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export type DayStatus = 'up' | 'degraded' | 'down' | 'unknown'\n\n  export interface StatusDay {\n    date: string\n    status: DayStatus\n  }\n\n  export interface UptimeTrackerChartProps extends HTMLAttributes<HTMLDivElement> {\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    /** Accessible name announced for the chart image. Defaults to \"Chart\". */\n    ariaLabel?: string\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    days,\n    height = 48,\n    gap = 2,\n    rounded = 2,\n    showLegend = true,\n    class: className,\n    ariaLabel,\n    ref = $bindable(null),\n    ...restProps\n  }: UptimeTrackerChartProps = $props()\n\n  const heightStyle = $derived(/^\\d+$/.test(String(height)) ? `${height}px` : String(height))\n\n  const COLORS: Record<DayStatus, string> = {\n    up: 'var(--chart-2)',\n    degraded: 'var(--chart-4)',\n    down: 'var(--destructive)',\n    unknown: 'var(--border)',\n  }\n\n  const uptime = $derived.by(() => {\n    if (!days.length) return '—'\n    const up = days.filter((d) => d.status === 'up').length\n    return `${((up / days.length) * 100).toFixed(1)}%`\n  })\n\n  const summary = $derived.by(() => {\n    const counts = (s: DayStatus) => days.filter((d) => d.status === s).length\n    return `${counts('up')} up, ${counts('degraded')} degraded, ${counts('down')} down days`\n  })\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"uptime-tracker-chart\"\n  role=\"img\"\n  tabindex=\"0\"\n  aria-label={ariaLabel || `Uptime tracker: ${summary}`}\n  class={cn('w-full focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', className)}\n  {...restProps}\n>\n  <div class=\"flex min-h-6 items-stretch\" style=\"height: {heightStyle}; gap: {gap}px\">\n    {#each days as d, i (d.date + '-' + i)}\n      <div\n        class=\"min-w-0 flex-1\"\n        style=\"background: {COLORS[d.status]}; border-radius: {rounded}px\"\n        title=\"{d.date} — {d.status}\"\n      ></div>\n    {/each}\n  </div>\n  {#if showLegend}\n    <div class=\"mt-2 flex items-center gap-3 text-xs\">\n      <span class=\"font-semibold text-foreground 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}\"></span>Up</span\n        >\n        <span class=\"flex items-center gap-1\"\n          ><span class=\"size-2 rounded-[2px]\" style=\"background: {COLORS.degraded}\"></span>Degraded</span\n        >\n        <span class=\"flex items-center gap-1\"\n          ><span class=\"size-2 rounded-[2px]\" style=\"background: {COLORS.down}\"></span>Down</span\n        >\n      </span>\n    </div>\n  {/if}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/uptime-tracker-chart/UptimeTrackerChart.svelte"
    },
    {
      "path": "packages/registry-svelte/components/uptime-tracker-chart/index.ts",
      "content": "export {\n  default as UptimeTrackerChart,\n  type UptimeTrackerChartProps,\n  type DayStatus,\n  type StatusDay,\n} from './UptimeTrackerChart.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/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"
  ]
}