geovisualisierung/projects/project-3/frontend/src/app/dashboard/user-input/user-input.component.html

<mat-card style="height: 30rem">
  <mat-card-header>
    <mat-card-title class="d-flex align-items-center">
      <div class="header-image d-inline-flex" mat-card-avatar></div>
      {{bikePoint?.commonName}}
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="p-4 d-flex flex-column justify-content-center">
    <div>
      <p>Select a range to analyze data</p>
      <form [formGroup]="form" class="d-flex flex-row align-items-center justify-content-between">
        <mat-form-field appearance="fill">
          <mat-label>Enter a range</mat-label>
          <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
                                formGroupName="dateRange">
            <input formControlName="start" matStartDate placeholder="Start date">
            <input formControlName="end" matEndDate placeholder="End date">
          </mat-date-range-input>
          <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
          <mat-date-range-picker #picker></mat-date-range-picker>
        </mat-form-field>
        <button (click)="onSubmit()" class="mt-n3" color="primary" mat-raised-button>
          <mat-icon>dashboard</mat-icon>
          reload
        </button>
      </form>
    </div>
    <div class="ml-n4" id="chart">
      <apx-chart
        [chart]="chartOptions.chart"
        [colors]="chartOptions.colors"
        [dataLabels]="chartOptions.dataLabels"
        [fill]="chartOptions.fill"
        [legend]="chartOptions.legend"
        [plotOptions]="chartOptions.plotOptions"
        [series]="chartOptions.series"
        [stroke]="chartOptions.stroke"
        [subtitle]="chartOptions.subtitle"
        [title]="chartOptions.title"
        [tooltip]="chartOptions.tooltip"
        [xaxis]="chartOptions.xaxis"
        [yaxis]="chartOptions.yaxis"
      ></apx-chart>
    </div>
  </mat-card-content>
</mat-card>