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
11823x
 
 
 
 
23646x
 
41x
23646x
10666x
 
23646x
 
 
1607x
 
 
 
 
786x
 
 
35x
35x
 
70x
1572x
821x
 
 
 
35x
 
35x
 
41x
23646x
 
66x
22074x
11070x
 
 
 
33x
33x
 
23646x
11805x
 
23646x
18x
 
 
82x
23646x
11864x
 
 
 
 
41x
41x
23646x
 
66x
22074x
11070x
 
 
33x
33x
 
41x
23646x
82x
 
 
41x
11823x
11864x
120x
6x
11823x
 
41x
23646x
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>
}