All files / src/app/components/signals-graphs signals-graphs.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
11703x
 
 
 
 
23406x
 
41x
23406x
10590x
 
23406x
 
 
1579x
 
 
 
 
772x
 
 
35x
35x
 
70x
1544x
807x
 
 
 
35x
 
35x
 
41x
23406x
 
66x
21862x
10964x
 
 
 
33x
33x
 
23406x
11691x
 
23406x
12x
 
 
82x
23406x
11744x
 
 
 
 
41x
41x
23406x
 
66x
21862x
10964x
 
 
33x
33x
 
41x
23406x
82x
 
 
41x
11703x
11744x
124x
6x
11703x
 
41x
23406x
26x
 
41x
 
 
@if (isLoading) {
  <app-loader></app-loader>
}
 
 
@if (!isLoading) {
  <div>
    <div class="toolbar">
      @if (showSignals) {
        <app-multi-select-signals (selectionChanged)="applyInputs()" [graphId]="graphId" [isLive]="isLive" [selectionLimit]="signalsSelectionLimit"></app-multi-select-signals>
      }
      @if (!isLive) {
        <div class="toolbar-element">
          <p-floatLabel >
            <p-datepicker [(ngModel)]="replayWindowMiddle" inputId="zoomTime"
              [minDate]="dataDateMin"
              [maxDate]="dataDateMax"
              [showButtonBar]="true"
              [showTime]="true"
              [showSeconds]="true"
              todayButtonStyleClass="today-button"
              />
            <label for="zoomTime">Window middle</label>
          </p-floatLabel>
          <p-floatLabel>
            <p-select
              [options]="replayWindowLengths"
              [(ngModel)]="replayWindowLength"
              placeholder="Window length"
              optionLabel="label"
              inputId="refreshTime" />
            <label for="refreshTime">Window length</label>
          </p-floatLabel>
        </div>
      }
      <div class="toolbar-element">
        @if (isLive) {
          <p-floatLabel>
            <p-select
              [options]="windowLengths"
              [(ngModel)]="windowLength"
              placeholder="Window Time length"
              optionLabel="label"
              inputId="windowTime" />
            <label for="windowTime">windowTime</label>
          </p-floatLabel>
        }
        @if (!isDownloading) {
          <p-splitbutton icon="pi pi-download" [model]="exports" severity="secondary" />
        }
        @if (isDownloading) {
          <p-splitbutton icon="pi pi-spinner pi-spin" [model]="exports" severity="secondary" />
        }
        <p-floatLabel>
          <p-select
            [options]="displayModes"
            [(ngModel)]="isLive"
            optionValue="isLive"
            placeholder="Refresh time"
            optionLabel="label"
            inputId="displayMode" />
          <label for="displayMode">Display mode</label>
        </p-floatLabel>
        @if (isLive) {
          <p-floatLabel>
            <p-select
              [options]="refreshModes"
              [(ngModel)]="refreshMode"
              placeholder="Refresh mode"
              inputId="refreshMode" />
            <label for="refreshMode">Refresh mode</label>
          </p-floatLabel>
        }
        <app-refresh-rate-selector
          [isResponseSlowerThanRefresh]="isResponseSlowerThanRefresh"
          (selectionChanged)="handleRefreshRateChange($event)">
        </app-refresh-rate-selector>
      </div>
    </div>
    <app-signals-graph [signalIdsToPlot]="inputSignalIdsToPlot" [isLive]="isLive" [refreshTime]="refreshTime.duration" [showLegend]="showLegend" [liveWindow]="windowLength.duration"
      [(replayWindowMiddle)]="replayWindowMiddle" [replayWindowLength]="replayWindowLength" (replayWindowLengthChange)="onReplayWindowLengthUpdate($event)"
      (dataDateMin)="handleDataDateMin($event)" (dataDateMax)="handleDataDateMax($event)"
      (isResponseSlowerThanRefresh)="handleResponseSlowerThanRefresh($event)"
      [refreshMode]="refreshMode" (hasFinishedDonwloading)="handleFinishedDownloading($event)"
      >
    </app-signals-graph>
    @if (displayCommandCenter) {
      <app-command-center></app-command-center>
    }
  </div>
}