<div class="d-grid grid__col--4-4-4 gap-4">
  <button
    class="c8y-radial-gauge__preset preset-{{ preset.id }}"
    [class.selected]="preset.id === selectedPresetId"
    [attr.aria-label]="preset.name | translate"
    type="button"
    *ngFor="let preset of ALL_GAUGE_PRESETS"
    (click)="emitPresetChange(preset.id)"
  >
    <c8y-radial-gauge
      class="c8y-radial-gauge--square"
      *ngIf="preset.id !== 'custom'"
      [activeDatapointGauge]="activeDatapointGauge"
      [measurement]="measurement"
      [fractionSize]="2"
      [selectedPresetId]="preset.id"
      [gaugeOptions]="preset"
    ></c8y-radial-gauge>
    <span>{{ preset.name | translate }}</span>
  </button>
</div>