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
12082x
 
 
 
 
24164x
 
42x
24164x
10795x
 
24164x
 
 
1434x
 
 
 
 
699x
 
 
36x
36x
 
72x
1398x
735x
 
 
 
36x
 
36x
 
42x
24164x
 
68x
22766x
11417x
 
 
 
34x
34x
 
24164x
12068x
 
24164x
14x
 
 
84x
24164x
12124x
 
 
 
 
42x
42x
24164x
 
68x
22766x
11417x
 
 
34x
34x
 
42x
24164x
84x
 
 
42x
12082x
12124x
120x
6x
12082x
 
42x
24164x
27x
 
42x
 
 
@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>
}