@if (vm$ | async; as vm) {
  <div class="grid grid-cols-1 md:grid-cols-4">
    @switch (selectedMetric) {
      @case (DiagrammType.TimePerTour) {
        <dks-time-per-tour-metric
          class="col-span-3"
          [labelFormat]="labelFormat"
          [metrics]="vm.metrics"
          [metricTimeScale]="metricTimeScale"
          [showCategories]="showCategories"
        ></dks-time-per-tour-metric>
        <div class="flex flex-col justify-center items-center">
          <mat-slide-toggle (toggleChange)="showCategories = !showCategories"
            >Zeige Kategorien</mat-slide-toggle
            >
            <dks-time-per-tour-summary
              class="m-auto"
              [metrics]="vm.metrics"
            ></dks-time-per-tour-summary>
          </div>
        }
        @case (DiagrammType.Revenue) {
          <dks-breakeven-metric
            class="col-span-3"
            [labelFormat]="getLabelFormatForMetricTimeScale(metricTimeScale)"
            [metrics]="vm.metrics"
            [metricTimeScale]="metricTimeScale"
          ></dks-breakeven-metric>
          <dks-breakeven-summary [metrics]="vm.metrics"></dks-breakeven-summary>
        }
        @case (DiagrammType.AverageRevenue) {
          <dks-average-revenue-metric
            class="col-span-3"
            [labelFormat]="getLabelFormatForMetricTimeScale(metricTimeScale)"
            [metrics]="vm.metrics"
          ></dks-average-revenue-metric>
          <dks-average-revenue-summary
            [metrics]="vm.metrics"
          ></dks-average-revenue-summary>
        }
      }
    </div>
  }