<mat-card class="server-chart">
  <mat-card-title class="server-chart__header">
    <p class="server-chart__header-title">Server Overview</p>

    <app-settings-menu></app-settings-menu>
  </mat-card-title>

  <mat-card-content class="server-chart__content">
    @for (chart of charts; track chart; let i = $index) {
      <div class="server-chart__content-item">
        <div class="server-chart__content-item-text-wrapper">
          <p class="server-chart__content-item-text">{{serverDataTitles[i]}}</p>
        </div>
        <div
          echarts
          class="server-chart__content-item-chart"
          [options]="chart"
          [style.height]="'52px'"
          [style.width]="'100%'"
        ></div>
      </div>
    }
  </mat-card-content>
</mat-card>
