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
13245x
 
 
48x
13245x
96x
 
 
 
 
 
48x
 
48x
 
48x
48x
 
 
48x
 
48x
26490x
1x
 
2x
 
1x
1x
 
1x
 
48x
49x
 
49x
 
49x
49x
 
49x
 
48x
 
48x
26490x
49x
 
49x
 
49x
49x
 
49x
 
48x
1x
 
2x
 
1x
1x
 
1x
 
 
48x
 
26490x
 
 
24174x
42x
 
24174x
42x
 
24174x
42x
 
24174x
42x
 
24174x
 
42x
 
48x
 
26538x
48x
48x
 
@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>