Prev
20
Next

Day 20 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 20

Day 20

Progress Steps & Heatmap

Linear progress bar with steps and calendar heatmap visualization

Progress Stepped Bar

Linear progress bar showing completed, active, and future steps with smooth transitions.

Features

  • Completed, active, and pending states
  • Animated progress bar fill
  • Multiple variants (default, success, blue)
  • Custom icons per step
  • Labels and descriptions

Order Tracking

Order Placed

Dec 10, 2025

Processing

Dec 11, 2025

Shipped

Dec 12, 2025

Out for Delivery

Expected Dec 14

Delivered

Project Milestones

Planning

Design

Development

Testing

Deployment

Compact Size

Cart

Shipping

Payment

Done

Heatmap / Calendar View

Visualize chronological data as a color grid, similar to GitHub contribution graphs.

Features

  • 365-day contribution calendar
  • Multiple color variants
  • Tooltips with detailed info
  • Activity heatmap by hour
  • Responsive with scroll

Contribution Calendar (GitHub Style)

Mon Wed Fri
Less
More

Color Variants

Blue Variant

Mon Wed Fri
Less
More

Purple Variant

Mon Wed Fri
Less
More

Weekly Activity by Hour

00 03 06 09 12 15 18 21
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Less
More

Usage Examples

Progress Steps Usage

{{-- Basic Progress Steps --}}
<x-ui.progress-steps
    :steps="$steps"
    :current="$currentStep"
/>
 
{{-- Steps Array Structure --}}
@php
$steps = [
    ['label' => 'Step 1', 'description' => 'Details'],
    ['label' => 'Step 2', 'description' => 'More info'],
    ['label' => 'Step 3'],
];
@endphp
 
{{-- With Icons --}}
@php
$steps = [
    ['label' => 'Cart', 'icon' => 'shopping-cart'],
    ['label' => 'Shipping', 'icon' => 'truck'],
    ['label' => 'Payment', 'icon' => 'credit-card'],
    ['label' => 'Done', 'icon' => 'check-circle'],
];
@endphp
 
{{-- Variants --}}
<x-ui.progress-steps
    :steps="$steps"
    :current="2"
    variant="success"
/>
{{-- Available: default, success, blue --}}
 
{{-- Sizes --}}
<x-ui.progress-steps
    :steps="$steps"
    :current="2"
    size="sm"
/>
{{-- Available: sm, md, lg --}}
 
{{-- Without Descriptions --}}
<x-ui.progress-steps
    :steps="$steps"
    :current="2"
    :show-descriptions="false"
/>
 
{{-- Clickable Steps --}}
<x-ui.progress-steps
    :steps="$steps"
    :current="2"
    :clickable="true"
/>

Heatmap Usage

{{-- Contribution Calendar (GitHub-style) --}}
<x-ui.heatmap
    :data="$contributionData"
    variant="github"
/>
 
{{-- Data Structure --}}
@php
$data = [
    [
        'date' => '2025-01-01',
        'count' => 5,
        'dayOfWeek' => 3,
        'week' => 1,
        'month' => 'Jan',
        'monthNum' => 1,
    ],
    // ... 365 days
];
@endphp
 
{{-- Color Variants --}}
<x-ui.heatmap
    :data="$data"
    variant="blue"
/>
{{-- Available: github, blue, purple, orange --}}
 
{{-- Cell Sizes --}}
<x-ui.heatmap
    :data="$data"
    cell-size="md"
/>
{{-- Available: xs, sm, md --}}
 
{{-- Activity Heatmap (Hours x Days) --}}
<x-ui.activity-heatmap
    :data="$activityData"
    variant="blue"
/>
 
{{-- Activity Data Structure --}}
@php
$activityData = [
    'Mon' => [0, 1, 2, ...], // 24 values
    'Tue' => [0, 5, 3, ...],
    // ... 7 days
];
@endphp