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
12087x
 
 
 
 
24174x
 
42x
24174x
10510x
 
24174x
 
 
2176x
 
 
 
 
1070x
 
 
36x
36x
 
72x
2140x
1106x
 
 
 
36x
 
36x
 
42x
24174x
 
68x
22034x
11051x
 
 
 
34x
34x
 
24174x
12071x
 
24174x
16x
 
 
84x
24174x
12129x
 
 
 
 
42x
42x
24174x
 
68x
22034x
11051x
 
 
34x
34x
 
42x
24174x
84x
 
 
42x
12087x
12129x
124x
6x
12087x
 
42x
24174x
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="replayWindowLength" />
            <label for="replayWindowLength">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="liveWindowLength" />
            <label for="liveWindowLength">Window length</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>
}