{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "uptime-tracker-chart",
  "title": "Uptime Tracker Chart",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/charts/uptime-tracker-chart/uptime-tracker-chart.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\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\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\n/**\n * Angular port of the UIPKGE UptimeTrackerChart — dependency-free status bars\n * (React/Vue parity): one flex bar per day colored by status, plus a legend row\n * with the computed uptime % (days fully `up` over total days).\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-uptime-tracker-chart, [ui-uptime-tracker-chart]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"uptime-tracker-chart\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.role]': '\"img\"',\n    '[attr.aria-label]': 'resolvedAriaLabel',\n    '[attr.tabindex]': '0',\n    '[class]': 'hostClass',\n  },\n  template: `\n    <div class=\"flex min-h-6 w-full items-stretch\" [style.height]=\"heightStyle\" [style.gap]=\"gap + 'px'\">\n      @for (d of days; track d.date + '-' + $index) {\n        <div\n          class=\"min-w-0 flex-1\"\n          [style.background]=\"barColor(d.status)\"\n          [style.border-radius]=\"rounded + 'px'\"\n          [title]=\"barTitle(d)\"\n        ></div>\n      }\n    </div>\n    @if (showLegend) {\n      <div 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]=\"legendColor('up')\"></span>Up\n          </span>\n          <span class=\"flex items-center gap-1\">\n            <span class=\"size-2 rounded-[2px]\" [style.background]=\"legendColor('degraded')\"></span>Degraded\n          </span>\n          <span class=\"flex items-center gap-1\">\n            <span class=\"size-2 rounded-[2px]\" [style.background]=\"legendColor('down')\"></span>Down\n          </span>\n        </span>\n      </div>\n    }\n  `,\n})\nexport class UiUptimeTrackerChartComponent {\n  @Input() days: StatusDay[] = []\n  @Input() height: number | string = 48\n  /** Gap between bars in px. Default 2. */\n  @Input() gap = 2\n  /** Bar corner radius in px. Default 2. */\n  @Input() rounded = 2\n  /** Show the legend row with the computed uptime %. Default true. */\n  @Input() showLegend = true\n  /** Accessible name announced for the chart image. Defaults to \"Uptime tracker: <summary>\". */\n  @Input() ariaLabel?: string\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('focus-visible:ring-ring block w-full focus-visible:ring-2 focus-visible:outline-none', this.className)\n  }\n\n  get heightStyle(): string {\n    return /^\\d+$/.test(String(this.height)) ? `${this.height}px` : String(this.height)\n  }\n\n  /** Percent of days fully `up` (React/Vue formula), or '—' with no data. */\n  get uptime(): string {\n    if (!this.days.length) return '—'\n    const up = this.days.filter((d) => d.status === 'up').length\n    return `${((up / this.days.length) * 100).toFixed(1)}%`\n  }\n\n  get summary(): string {\n    const counts = (s: DayStatus) => this.days.filter((d) => d.status === s).length\n    return `${counts('up')} up, ${counts('degraded')} degraded, ${counts('down')} down days`\n  }\n\n  get resolvedAriaLabel(): string {\n    return this.ariaLabel || `Uptime tracker: ${this.summary}`\n  }\n\n  barColor(status: DayStatus): string {\n    return COLORS[status]\n  }\n\n  legendColor(status: DayStatus): string {\n    return COLORS[status]\n  }\n\n  barTitle(d: StatusDay): string {\n    return `${d.date} — ${d.status}`\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/charts/uptime-tracker-chart/uptime-tracker-chart.component.ts"
    },
    {
      "path": "packages/registry-angular/components/charts/uptime-tracker-chart/index.ts",
      "content": "export { UiUptimeTrackerChartComponent } from './uptime-tracker-chart.component'\n",
      "type": "registry:ui",
      "target": "~/src/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"
  ]
}