All files / gauge si-nchart-gauge.component.html

100% Statements 63/63
100% Branches 8/8
100% Functions 4/4
100% Lines 46/46

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 8332x               36x 95x   32x 32x 36x 95x 107x 95x   32x 32x 36x 6x   32x 32x 36x 32x 32x 36x 40x 35x 39x     39x 35x         32x 32x         36x   36x 36x 1x   32x     36x 31x   35x 34x       38x 38x 34x     34x   38x 34x 38x 38x 1x   34x     31x      
<svg
  xmlns="http://www.w3.org/2000/svg"
  class="chart"
  [attr.viewBox]="'0 0 ' + dim.width + ' ' + dim.height"
  [attr.width]="dim.width"
  [attr.height]="dim.height"
>
  <g class="ticks">
    @for (tick of ticks; track $index) {
      <path [attr.d]="tick.path" />
    }
  </g>
  <g class="tick-labels text-secondary">
    @for (tick of ticks; track $index) {
      <text text-anchor="middle" [attr.x]="tick.textPos.x" [attr.y]="tick.textPos.y">
        {{ tick.label }}
      </text>
    }
  </g>
  <g class="segments">
    @for (seg of internalSegments; track $index) {
      <path [attr.d]="seg.path" [style.stroke]="seg.colorVar" />
    }
  </g>
  <g class="background">
    <path [attr.d]="backgroundPath" />
  </g>
  <g class="data">
    @for (series of internalSeries; track $index) {
      @if (series.path) {
        <path
          [class.highlight]="series.highlight"
          [attr.d]="series.path"
          [attr.data-id]="series.series.id"
          [style.stroke]="series.colorVar"
          (mouseenter)="series.highlight = true"
          (mouseleave)="series.highlight = false"
        />
      }
    }
  </g>
  <text
    class="text-body value"
    x="50"
    y="50"
    text-anchor="middle"
    [attr.dominant-baseline]="valignMiddle ? 'middle' : 'auto'"
  >
    {{ totalSumString }}
    @if (unit()) {
      <tspan class="unit">{{ unit() }}</tspan>
    }
  </text>
</svg>
 
@if (showLegend()) {
  <table class="legend-table flex-fill">
    <tbody>
      @for (series of internalSeries; track $index) {
        <tr [attr.data-id]="series.series.id">
          <td>
            <div
              class="color"
              [class.highlight]="series.highlight"
              [style.color]="series.colorVar"
              (mouseenter)="series.highlight = true"
              (mouseleave)="series.highlight = false"
            >
            </div>
          </td>
          <td class="value">{{ series.valueString }}</td>
          <td class="name">
            <div class="text-truncate">{{ series.series.name }}</div>
            @if (series.series.description) {
              <div class="descr text-truncate">{{ series.series.description }}</div>
            }
          </td>
        </tr>
      }
    </tbody>
  </table>
}