{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "habit-streak-tracker", "title": "Habit Streak Tracker", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/habit-streak-tracker/habit-streak-tracker.component.ts", "content": "// GitHub style 52-week contribution habit heatmap, flame streak counter, consistency\n// metrics, and daily completion tracker with 7-day mini checkbox strip and progress bars.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n BookOpen,\n Calendar,\n Check,\n CheckCircle2,\n CodeXml,\n Droplets,\n Flame,\n Footprints,\n LucideAngularModule,\n Plus,\n Target,\n Terminal,\n TrendingUp,\n Trophy,\n X,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\n\nexport type HabitCategory = 'Engineering' | 'Health' | 'Learning' | 'Mindset' | string\n\nexport interface HabitItem {\n id: string\n title: string\n description: string\n category: HabitCategory\n icon: 'code' | 'terminal' | 'steps' | 'book' | 'water' | 'target' | string\n streakDays: number\n completionRate: number\n weekHistory: boolean[]\n}\n\nexport interface DayHeatmapCell {\n date: string\n formattedDate: string\n dayName: string\n dayIndex: number\n weekIndex: number\n count: number\n level: number\n month: string\n}\n\nexport interface MonthLabel {\n name: string\n weekIndex: number\n}\n\nconst defaultHabits: HabitItem[] = [\n {\n id: 'habit-1',\n title: 'Ship 1 Component to Registry',\n description: 'Author, test, and register a new UI block or primitive',\n category: 'Engineering',\n icon: 'code',\n streakDays: 24,\n completionRate: 96,\n weekHistory: [true, true, true, true, true, true, true],\n },\n {\n id: 'habit-2',\n title: '1 Hour Deep Work / Code Review',\n description: 'Uninterrupted architecture focus & PR review rounds',\n category: 'Engineering',\n icon: 'terminal',\n streakDays: 19,\n completionRate: 92,\n weekHistory: [true, true, true, true, true, false, true],\n },\n {\n id: 'habit-3',\n title: '10,000 Steps Walking',\n description: 'Daily outdoor walk & cardiovascular activity',\n category: 'Health',\n icon: 'steps',\n streakDays: 24,\n completionRate: 100,\n weekHistory: [true, true, true, true, true, true, true],\n },\n {\n id: 'habit-4',\n title: 'Read 20 Pages Tech Book',\n description: 'Systems design, TypeScript craft, or CS fundamentals',\n category: 'Learning',\n icon: 'book',\n streakDays: 12,\n completionRate: 85,\n weekHistory: [true, true, false, true, true, true, false],\n },\n {\n id: 'habit-5',\n title: 'Drink 2.5L Water',\n description: 'Optimal hydration tracking throughout the working day',\n category: 'Health',\n icon: 'water',\n streakDays: 30,\n completionRate: 98,\n weekHistory: [true, true, true, true, true, true, true],\n },\n]\n\nexport function generate52WeekHeatmap(baseStreakDays = 24): {\n weeks: DayHeatmapCell[][]\n monthLabels: MonthLabel[]\n totalCompletions: number\n} {\n const weeks: DayHeatmapCell[][] = []\n const monthLabels: MonthLabel[] = []\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n const endDate = new Date(2026, 7, 23)\n let lastMonth = ''\n let totalCompletions = 0\n let seed = 1337\n function pseudoRandom(): number {\n seed = (seed * 9301 + 49297) % 233280\n return seed / 233280\n }\n for (let w = 0; w < 52; w++) {\n const weekDays: DayHeatmapCell[] = []\n for (let d = 0; d < 7; d++) {\n const daysAgo = (51 - w) * 7 + (6 - d)\n const dateObj = new Date(endDate)\n dateObj.setDate(endDate.getDate() - daysAgo)\n const monthName = months[dateObj.getMonth()] ?? 'Jan'\n const formattedDate = `${monthName} ${dateObj.getDate()}, ${dateObj.getFullYear()}`\n const dateStr = dateObj.toISOString().split('T')[0] ?? `w${w}d${d}`\n let count = 0\n if (daysAgo <= baseStreakDays && daysAgo >= 0) {\n count = pseudoRandom() > 0.3 ? 5 : 4\n } else if (daysAgo >= 90 && daysAgo <= 138) {\n count = pseudoRandom() > 0.2 ? 5 : 4\n } else {\n const rand = pseudoRandom()\n if (rand > 0.82) count = 5\n else if (rand > 0.48) count = 4\n else if (rand > 0.22) count = 3\n else if (rand > 0.08) count = 2\n else if (rand > 0.03) count = 1\n else count = 0\n }\n totalCompletions += count\n let level = 0\n if (count >= 5) level = 4\n else if (count === 4) level = 3\n else if (count === 3) level = 2\n else if (count >= 1) level = 1\n else level = 0\n weekDays.push({\n date: dateStr,\n formattedDate,\n dayName: dayNames[d] ?? '',\n dayIndex: d,\n weekIndex: w,\n count,\n level,\n month: monthName,\n })\n if (d === 0 && monthName !== lastMonth) {\n monthLabels.push({ name: monthName, weekIndex: w })\n lastMonth = monthName\n }\n }\n weeks.push(weekDays)\n }\n return { weeks, monthLabels, totalCompletions }\n}\n\nconst weekDayColumns = [\n { short: 'Mon', num: '17' },\n { short: 'Tue', num: '18' },\n { short: 'Wed', num: '19' },\n { short: 'Thu', num: '20' },\n { short: 'Fri', num: '21' },\n { short: 'Sat', num: '22' },\n { short: 'Sun', num: '23' },\n]\n\nconst levelClassMap: Record = {\n 0: 'bg-muted/60 dark:bg-muted/30 border border-border/30 hover:ring-1 hover:ring-foreground/20',\n 1: 'bg-success/25 border border-success/20 hover:ring-1 hover:ring-success/50',\n 2: 'bg-success/50 border border-success/30 hover:ring-1 hover:ring-success/70',\n 3: 'bg-success/75 border border-success/40 hover:ring-1 hover:ring-success/90',\n 4: 'bg-success border border-success/60 hover:ring-1 hover:ring-success',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-habit-streak-tracker, [ui-habit-streak-tracker]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n ],\n template: `\n
\n \n \n
\n \n \n
\n
\n
\n

\n Daily Habits & Consistency Matrix\n

\n \n \n 馃敟 {{ initialStreak() }}-Day Streak 路 Personal Best!\n \n
\n

\n {{ monthTitle() }} 路 Real-time habit adherence, 52-week GitHub matrix, and routine tracker.\n

\n
\n
\n
\n \n \n {{ monthTitle() }}\n
\n \n \n New Habit\n \n
\n \n\n \n @if (showNewHabitModal()) {\n
\n
\n
\n

Create New Habit Routine

\n

Define a daily target to track against your annual matrix.

\n
\n \n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n
\n \n Cancel\n \n \n
\n
\n }\n\n \n
\n
\n
\n
\n Current Streak\n \n \n
\n
\n
\n
\n
\n {{ initialStreak() }} Days\n Active\n
\n

Active since Jul 29 路 On track today

\n
\n
\n
\n
\n
\n Longest Streak\n \n \n
\n
\n
\n
\n
\n {{\n longestStreak()\n }}\n Record\n
\n

48 continuous days set May 14, 2026

\n
\n \n
\n
\n
\n Overall Consistency\n \n \n
\n
\n
\n
\n
\n {{ consistencyRate() }}%\n +3.1% MoM\n
\n

\n {{ heatmapData().totalCompletions }} targets completed in 52 weeks\n

\n
\n \n
\n
\n
\n Total Habits Active\n \n \n
\n
\n
\n
\n
\n {{ totalHabitsCount() }} Daily Habits\n {{ todayCompletedCount() }}/{{ totalHabitsCount() }} Done\n
\n

{{ remainingLabel() }}

\n
\n \n \n\n \n
\n
\n
\n
\n

52-Week Habit Consistency Matrix

\n

\n Annual contribution heatmap across all daily registered routines.\n

\n
\n
\n @if (hoveredCell(); as hovered) {\n \n \n {{ hovered.formattedDate }} 路 \n {{ hovered.count }}/5 habits\n
\n } @else {\n
\n \n {{\n heatmapData().totalCompletions\n }}\n completions logged\n
\n }\n
\n
\n
\n
\n
\n
\n
\n @for (label of heatmapData().monthLabels; track label.name + '-' + label.weekIndex) {\n
{{ label.name }}
\n }\n
\n
\n \n MonTueWedThuFriSatSun\n
\n
\n @for (week of heatmapData().weeks; track $index) {\n
\n @for (cell of week; track cell.date) {\n \n }\n
\n }\n
\n
\n
\n
\n \n
\n 94.2%\n consistency baseline 路 52 continuous weeks tracked\n
\n
\n Less\n
\n \n \n \n \n \n
\n More\n
\n \n \n \n\n \n
\n
\n
\n
\n

Today's Habit Checklist

\n

\n Interactive 7-day strip. Mark today or previous days to maintain your active flame streaks.\n

\n
\n
\n @for (cat of categories(); track cat) {\n \n {{ cat }}\n \n }\n
\n
\n
\n
\n
\n @for (habit of filteredHabits(); track habit.id) {\n \n
\n \n \n
\n
\n
\n

{{ habit.title }}

\n {{\n habit.category\n }}\n
\n

{{ habit.description }}

\n
\n
\n
\n \n \n
\n
\n

\n {{ habit.streakDays }}d streak\n

\n

unbroken

\n
\n
\n
\n
\n @for (day of weekDays; track day.short; let dIdx = $index) {\n {{ day.short[0] }}\n }\n
\n
\n @for (day of weekDays; track day.short; let dIdx = $index) {\n \n @if (habit.weekHistory[dIdx]) {\n \n } @else {\n {{ day.num }}\n }\n \n }\n
\n
\n
\n
\n Rate\n {{ habit.completionRate }}%\n
\n \n
\n
\n @if (habit.weekHistory[6]) {\n \n \n Done Today\n \n } @else {\n \n \n Check Today\n \n }\n
\n
\n }\n \n \n \n \n `,\n})\nexport class UiHabitStreakTrackerComponent {\n protected readonly BookOpen = BookOpen\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Flame = Flame\n protected readonly Plus = Plus\n protected readonly Target = Target\n protected readonly TrendingUp = TrendingUp\n protected readonly Trophy = Trophy\n protected readonly X = X\n\n protected readonly weekDays = weekDayColumns\n\n @Input('initialStreak') set initialStreakInput(v: number) {\n if (v !== undefined && v !== null) this.initialStreak.set(v)\n }\n @Input('longestStreak') set longestStreakInput(v: string) {\n if (v !== undefined) this.longestStreak.set(v)\n }\n @Input('consistencyRate') set consistencyRateInput(v: number) {\n if (v !== undefined && v !== null) this.consistencyRate.set(v)\n }\n @Input('activeHabitsCount') set activeHabitsCountInput(v: number) {\n if (v !== undefined && v !== null) this.activeHabitsCount.set(v)\n }\n @Input('monthTitle') set monthTitleInput(v: string) {\n if (v !== undefined) this.monthTitle.set(v)\n }\n @Input() set habits(v: HabitItem[] | undefined) {\n if (v) this.habitsList.set(v.map((h) => ({ ...h, weekHistory: [...h.weekHistory] })))\n }\n @Input('class') className?: string\n\n readonly initialStreak = signal(24)\n readonly longestStreak = signal('48 Days in Q2')\n readonly consistencyRate = signal(94.2)\n readonly activeHabitsCount = signal(5)\n readonly monthTitle = signal('August 2026')\n readonly habitsList = signal(defaultHabits.map((h) => ({ ...h, weekHistory: [...h.weekHistory] })))\n\n readonly activeCategory = signal('All')\n readonly showNewHabitModal = signal(false)\n readonly hoveredCell = signal(null)\n readonly newHabitTitle = signal('')\n readonly newHabitDescription = signal('')\n readonly newHabitCategory = signal('Engineering')\n readonly newHabitIcon = signal('code')\n\n readonly heatmapData = computed(() => generate52WeekHeatmap(this.initialStreak()))\n readonly categories = computed(() => {\n const cats = ['All']\n for (const h of this.habitsList()) if (!cats.includes(h.category)) cats.push(h.category)\n return cats\n })\n readonly filteredHabits = computed(() => {\n if (this.activeCategory() === 'All') return this.habitsList()\n return this.habitsList().filter((h) => h.category === this.activeCategory())\n })\n readonly todayCompletedCount = computed(() => this.habitsList().filter((h) => h.weekHistory[6]).length)\n readonly totalHabitsCount = computed(() => this.habitsList().length)\n readonly remainingLabel = computed(() => {\n const done = this.todayCompletedCount()\n const total = this.totalHabitsCount()\n return done === total ? 'All daily targets logged!' : `${total - done} remaining for today`\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n habitIcon(icon: string): LucideIconData {\n switch (icon) {\n case 'code':\n return CodeXml\n case 'terminal':\n return Terminal\n case 'steps':\n return Footprints\n case 'book':\n return BookOpen\n case 'water':\n return Droplets\n default:\n return Target\n }\n }\n\n categoryBadgeClass(category: HabitCategory): string {\n switch (category) {\n case 'Engineering':\n return 'bg-info/10 text-info border-info/25'\n case 'Health':\n return 'bg-success/10 text-success border-success/25'\n case 'Learning':\n return 'bg-chart-1/10 text-chart-1 border-chart-1/25'\n case 'Mindset':\n return 'bg-warning/10 text-warning border-warning/25'\n default:\n return 'bg-muted text-muted-foreground border-border'\n }\n }\n\n heatmapCellClass(level: number): string {\n return cn(\n 'size-3 cursor-pointer rounded-[2px] transition-colors duration-150 sm:size-3.5',\n levelClassMap[level] ?? levelClassMap[0],\n )\n }\n\n dayLabelClass(dIdx: number): string {\n return cn('w-6 text-center', dIdx === 6 && 'text-foreground font-semibold')\n }\n\n dayCellClass(habit: HabitItem, dIdx: number): string {\n return cn(\n 'focus-visible:ring-ring flex size-6 cursor-pointer items-center justify-center rounded-md text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none',\n habit.weekHistory[dIdx]\n ? 'bg-success hover:bg-success text-white shadow-xs'\n : 'border-border/80 bg-muted/40 text-muted-foreground/30 hover:bg-muted/80 hover:text-muted-foreground border',\n dIdx === 6 && !habit.weekHistory[dIdx] && 'border-warning/50 bg-warning/5',\n )\n }\n\n toggleModal(): void {\n this.showNewHabitModal.set(!this.showNewHabitModal())\n }\n\n toggleDay(habitId: string, dayIndex: number): void {\n this.habitsList.update((prev) =>\n prev.map((habit) => {\n if (habit.id !== habitId) return habit\n const nextWeekHistory = [...habit.weekHistory]\n nextWeekHistory[dayIndex] = !nextWeekHistory[dayIndex]\n const completedInWeek = nextWeekHistory.filter(Boolean).length\n const completionRate = Math.min(100, Math.round((completedInWeek / 7) * 100))\n let streakDays = habit.streakDays\n if (dayIndex === 6) streakDays = nextWeekHistory[6] ? streakDays + 1 : Math.max(0, streakDays - 1)\n return { ...habit, weekHistory: nextWeekHistory, completionRate, streakDays }\n }),\n )\n }\n\n toggleToday(habitId: string): void {\n this.toggleDay(habitId, 6)\n }\n\n handleAddHabit(): void {\n if (!this.newHabitTitle().trim()) return\n const newHabit: HabitItem = {\n id: `habit-${Date.now()}`,\n title: this.newHabitTitle().trim(),\n description: this.newHabitDescription().trim() || 'Daily tracked routine',\n category: this.newHabitCategory(),\n icon: this.newHabitIcon(),\n streakDays: 1,\n completionRate: 100,\n weekHistory: [false, false, false, false, false, false, true],\n }\n this.habitsList.update((prev) => [...prev, newHabit])\n this.newHabitTitle.set('')\n this.newHabitDescription.set('')\n this.showNewHabitModal.set(false)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/habit-streak-tracker/habit-streak-tracker.component.ts" }, { "path": "packages/registry-angular/blocks/habit-streak-tracker/index.ts", "content": "export {\n UiHabitStreakTrackerComponent,\n generate52WeekHeatmap,\n type HabitItem,\n type HabitCategory,\n type DayHeatmapCell,\n type MonthLabel,\n} from './habit-streak-tracker.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/habit-streak-tracker/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json" ], "description": "GitHub style 52-week contribution habit heatmap, flame streak counter, consistency metrics, and daily completion tracker with 7-day mini checkbox strip and progress bars.", "categories": [ "productivity", "dashboard", "app" ] }