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
12972x
 
 
47x
12972x
94x
 
 
 
 
 
47x
 
47x
 
47x
47x
 
 
47x
 
47x
25944x
1x
 
2x
 
1x
1x
 
1x
 
47x
48x
 
48x
 
48x
48x
 
48x
 
47x
 
47x
25944x
48x
 
48x
 
48x
48x
 
48x
 
47x
1x
 
2x
 
1x
1x
 
1x
 
 
47x
 
25944x
 
 
2400x
6x
 
2400x
6x
 
2400x
6x
 
2400x
6x
 
2400x
 
6x
 
47x
 
25991x
47x
47x
 
@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>