Untitled

<div class="flex flex-col p-6">
  <div *ngIf="overviewData.monthlyStats.length !== 0" class="flex flex-row items-center justify-between px-6 py-3 bg-grey-600">
    <div class="font-robold font-bold text-[20px] capitalize">
      {{'OVERVIEW_CHART_TITLE' | translate}}
    </div>
    <nz-select
      class="w-[8%] min-w-fit"
      nzSize="default"
      [ngModel]="selectedYear"
      (ngModelChange)="handleYearChange($event)"
    >
      <nz-option
        *ngFor="let year of listOfOption"
        [nzValue]="year.value"
        [nzLabel]="year.label"
      ></nz-option>
    </nz-select>
  </div>
  <div [hidden]="overviewData.monthlyStats.length === 0" id="overviewChart" class="px-6 py-4 bg-white"></div>
</div>

<!-- No answer -->
<div *ngIf="overviewData.monthlyStats.length === 0" class="flex flex-col p-6">
  <div class="flex flex-row items-center justify-between px-6 py-3 bg-grey-600">
    <div class="font-robold font-bold text-[20px] capitalize">
      {{'OVERVIEW_CHART_TITLE' | translate}}
    </div>
  </div>
  <no-answer-component class="h-[332px]"></no-answer-component>
</div>