<app-default-layout>
  <div class="container">
    <div class="progress-section">
      <div class="heading">
        <h3>Seus objetivos diários</h3>
      </div>
      <div class="cards">
        <p class="p3">Confira como está seu desenvolvimento diário</p>
        <div class="charts-section">
          <div class="chart" *ngFor="let chart of diaryCharts">
            <app-progress
              [fill]="chart.fill"
              [stroke]="chart.stroke"
              [subtitleColor]="chart.subtitleColor"
              [title]="chart.title"
              [subtitle]="chart.subtitle"
              [percent]="chart.percent"
            ></app-progress>
            <h4>{{ chart.category }} totais</h4>
          </div>
        </div>
      </div>
    </div>
    <div>
      <app-recommended-recipes></app-recommended-recipes>
    </div>
  </div>
</app-default-layout>
