All files / src/app/components/signals-graph signals-graph.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
93
12790x
 
 
46x
12790x
92x
 
 
 
 
 
46x
 
46x
 
46x
46x
 
 
46x
 
46x
25580x
1x
 
2x
 
1x
1x
 
1x
 
46x
47x
 
47x
 
47x
47x
 
47x
 
46x
 
46x
25580x
47x
 
47x
 
47x
47x
 
47x
 
46x
1x
 
2x
 
1x
1x
 
1x
 
 
46x
 
25580x
 
 
23378x
40x
 
23378x
40x
 
23378x
40x
 
23378x
40x
 
23378x
 
40x
 
46x
 
25626x
46x
46x
 
@if (error) {
  <app-error [error]="error"></app-error>
}
@else {
  <div id="signalsGraph" echarts [options]="options"  [loading]="isLoading" [merge]="updateOptions"
  class="signal-chart" (chartInit)="onChartInit($event)"></div>
}
 
<div class="under-graph">
  <div class="graph-commands">
    <div class="theme-chooser">
      <button
        class="button button-theme"
        (click)="toggleThemeBuilder()"
        title="Choose custom theme">
        <span class="icon is-small">
          <i class="pi pi-palette"></i>
        </span>
      </button>
    </div>
 
    <div class="toggle-points">
      @if (displayPoints) {
        <button
          class="button button-toggle"
          (click)="togglePoints()"
          title="Hide points on line chart">
          <span class="icon is-small">
            <i class="pi pi-circle-on"></i>
          </span>
        </button>
      }
      @else {
        <button
          class="button button-toggle"
          (click)="togglePoints()"
          title="Display points on line chart">
          <span class="icon is-small">
            <i class="pi pi-circle-off"></i>
          </span>
        </button>
      }
    </div>
 
    <div class="toggle-scaling">
      @if (isYAxisScaling) {
        <button
          class="button button-toggle"
          (click)="toggleYAxisScaling()"
          title="Display zero on axis">
          <span class="icon is-small">
            <i class="pi pi-search-minus"></i>
          </span>
        </button>
      }
      @else {
        <button
          class="button button-toggle"
          (click)="toggleYAxisScaling()"
          title="Zoom on line">
          <span class="icon is-small">
            <i class="pi pi-search-plus"></i>
          </span>
        </button>
      }
    </div>
  </div>
 
  @if (!relativeMode) {
    <div class="toolbar">
      <div class="toolbar-element">
        <p>{{dataMinTs*1000 | date:"short"}}</p>
      </div>
      <div class="toolbar-element">
        <p>window start: {{windowMinTs*1000 | date:"short"}}</p>
      </div>
      <div class="toolbar-element">
        <p>{{windowMaxTs-windowMinTs | duration}}</p>
      </div>
      <div class="toolbar-element">
        <p>window end: {{windowMaxTs*1000 | date:"short"}}</p>
      </div>
      <div class="toolbar-element">
        <p>{{dataMaxTs*1000 | date:"short"}}</p>
      </div>
    </div>
  }
</div>
 
<p-drawer [(visible)]="displayThemeBuilder" position="right" styleClass="themes-drawer">
  <app-themes (themesChangedEvent)="updateGraphThemes()"></app-themes>
</p-drawer>