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
12758x
 
 
47x
12758x
94x
 
 
 
 
 
47x
 
47x
 
47x
47x
 
 
47x
 
47x
25516x
1x
 
2x
 
1x
1x
 
1x
 
47x
48x
 
48x
 
48x
48x
 
48x
 
47x
 
47x
25516x
48x
 
48x
 
48x
48x
 
48x
 
47x
1x
 
2x
 
1x
1x
 
1x
 
 
47x
 
25516x
 
 
2360x
6x
 
2360x
6x
 
2360x
6x
 
2360x
6x
 
2360x
 
6x
 
47x
 
25563x
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>