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
13305x
 
 
48x
13305x
96x
 
 
 
 
 
48x
 
48x
 
48x
48x
 
 
48x
 
48x
26610x
1x
 
2x
 
1x
1x
 
1x
 
48x
49x
 
49x
 
49x
49x
 
49x
 
48x
 
48x
26610x
49x
 
49x
 
49x
49x
 
49x
 
48x
1x
 
2x
 
1x
1x
 
1x
 
 
48x
 
26610x
 
 
24258x
42x
 
24258x
42x
 
24258x
42x
 
24258x
42x
 
24258x
 
42x
 
48x
 
26658x
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>