All files / common si-chart-base.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
72x
 
 
 
 
 
 
 
 
45x
 
 
72x
 
 
72x
72x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45x
 
 
72x
 
 
 
45x
 
45x
 
 
72x
 
 
 
 
 
 
 
 
72x
 
 
 
 
 
 
 
 
 
 
72x
 
 
 
 
 
@if (showCustomLegend() && (title() || subTitle())) {
  <div class="si-h5 chart-title chart-title-width" [style.background-color]="backgroundColor()">
    <div class="chart-title-text" [style.color]="titleColor()">{{ title() }}</div>
    @if (subTitle()) {
      <div class="si-body" [style.color]="subTitleColor()">{{ subTitle() }}</div>
    }
  </div>
}
 
<div
  #chartContainerWrapper
  class="chart-container-wrapper"
  [class.chart-scroll]="containerHeight()"
  [attr.tabindex]="containerHeight() ? '0' : null"
>
  <div class="chart-container" [style.height.px]="containerHeight()">
    @if (showCustomLegend()) {
      @for (cl of customLegend; track $index) {
        <si-custom-legend
          #siCustomLegend
          class="custom-legend"
          [style.top.px]="cl.top"
          [title]="title()"
          [subTitle]="subTitle()"
          [customLegend]="cl"
          [style.background-color]="backgroundColor()"
          [titleColor]="titleColor()"
          [subTitleColor]="subTitleColor()"
          [textColor]="textColor()"
          (legendIconClickEvent)="handleLegendClick($event)"
          (legendClickEvent)="handleLegendClick($event)"
          (legendHoverStartEvent)="handleLegendHover($event, true)"
          (legendHoverEndEvent)="handleLegendHover($event, false)"
        />
      }
    }
    <div
      #chart
      class="echart-container"
      [style.height.px]="containerHeight()"
      [attr.tabindex]="showCustomLegend() ? 0 : null"
      [attr.role]="showCustomLegend() ? 'application' : null"
      [attr.aria-label]="showCustomLegend() ? ariaLabel() || 'Chart' : null"
      (focus)="onChartFocus()"
      (blur)="onChartBlur()"
    ></div>
  </div>
</div>
@if (externalZoomSlider()) {
  <div
    #externalZoomSlider
    class="external-zoom-container"
    [class.has-time-range-bar]="showTimeRangeBar()"
    [style.--time-bar-height.px]="timeBarHeight()"
  ></div>
}
 
@if (showTimeRangeBar() && zoomSlider()) {
  <div
    class="time-range-bar"
    [style.bottom.px]="timeBarBottom()"
    [style.padding-left.px]="timeBarLeft()"
    [style.padding-right.px]="timeBarRight()"
  >
    <ng-content select="[slot=timeRangeBar]" />
  </div>
}
 
@if (inProgress()) {
  <div class="progress-container">
    <si-chart-loading-spinner />
  </div>
}