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

100% Statements 67/67
100% Branches 10/10
100% Functions 4/4
100% Lines 50/50

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 83 84 85 86 87 88 89 90 9133x               38x 98x   33x 33x 38x 98x 113x 98x   33x 33x 38x 6x   33x 33x 38x 33x 33x 38x 44x 37x 43x     43x 37x         33x 38x 1x       1x 1x   33x         38x   38x 38x 1x   33x     38x 32x   37x 36x       42x 42x 36x     36x   42x 36x 42x 42x 1x   36x     32x      
<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>
  @if (marker; as marker) {
    <g
      class="marker"
      [attr.transform]="`translate(${marker.position.x} ${marker.position.y}) rotate(${marker.angle})`"
    >
      <rect x="-1" y="-3" width="1" height="6" rx="0.25" />
    </g>
  }
  <text
    class="text-primary 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>
}