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
11631x
 
 
 
 
23262x
 
41x
23262x
10568x
 
23262x
 
 
1587x
 
 
 
 
776x
 
 
35x
35x
 
70x
1552x
811x
 
 
 
35x
 
35x
 
41x
23262x
 
66x
21710x
10888x
 
 
 
33x
33x
 
23262x
11617x
 
23262x
14x
 
 
82x
23262x
11672x
 
 
 
 
41x
41x
23262x
 
66x
21710x
10888x
 
 
33x
33x
 
41x
23262x
82x
 
 
41x
11631x
11672x
124x
6x
11631x
 
41x
23262x
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>
}