<div class="container">
    <div>
        <h1 class="title">{{ greeting }}</h1>
        <h3 class="description">View your historical data with customizable time ranges</h3>
    </div>
    <div>
        <button (click)="updateInterval('HOURLY')" [class.active-button]="selectedButton === 'hourly'">Hourly</button>
        <button (click)="updateInterval('DAILY')" [class.active-button]="selectedButton === 'daily'">Daily</button>        
    </div>

    <div class="graph">
        <app-graph [interval]="selectedInterval"></app-graph>
    </div>
</div>
