<div class="label-value-unit-gauge">
  <div
    class="gauge-legend"
    *ngIf="activeDatapointLabels?.length"
  >
    <ng-container *ngFor="let dp of activeDatapointLabels">
      <ng-container *ngIf="dp | infoGaugeCurrentMeasurement | async as measurement">
        <label
          class="text-truncate"
          title="{{ dp.label }}"
        >
          {{ dp.label }}
        </label>
        <h3
          class="text-truncate"
          title="{{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}"
          *ngIf="!measurement.notFound; else notFound"
        >
          {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}
        </h3>
        <ng-template #notFound>
          <h3>--</h3>
        </ng-template>
        <p class="text-muted m-b-8">
          <small>
            <em>{{ measurement.date | c8yDate: 'short' }}</em>
          </small>
        </p>
      </ng-container>
    </ng-container>
  </div>

  <ng-container *ngIf="activeDatapointGauge">
    <div
      class="gauge-svg"
      *ngIf="activeDatapointGauge | infoGaugeCurrentMeasurement: true | async as measurement"
    >
      <svg
        height="214px"
        width="214px"
        viewBox="0 0 214 214"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <desc>radial gauge</desc>
        <g
          id="scale"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
          stroke-dasharray="1,5"
        >
          <circle
            id="Oval"
            stroke="#CACECE"
            stroke-width="7"
            cx="107"
            cy="107"
            r="103"
          ></circle>
          <rect
            id="mask"
            height="214"
            stroke="none"
            fill-rule="evenodd"
            x="0"
            y="0"
            width="214"
            transform="rotate(-45 290 182)"
          ></rect>
        </g>
        <path
          class="track"
          d="M 107 27 a 80 80 0 1 0.1 0 Z"
          transform="rotate(-135 107 107)"
        ></path>
        <path
          class="track-value"
          [ngStyle]="{
            stroke: measurement.color,
            'stroke-dashoffset': -measurement.strokeDashOffset
          }"
          d="M 107 27 a 80 80 0 1 0.1 0 Z"
          transform="rotate(-135 107 107)"
        ></path>
        <foreignObject
          class="d-flex a-i-center j-c-center"
          height="100%"
          width="100%"
          requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
        >
          <div
            class="d-flex d-col fit-h a-i-center j-c-center"
            style="padding: 3rem"
            xmlns="http://www.w3.org/1999/xhtml"
          >
            <p
              class="text-truncate text-center"
              title="{{ activeDatapointGauge.label }}"
            >
              {{ activeDatapointGauge.label }}
            </p>
            <p
              class="center-value text-truncate"
              title="{{ measurement.value | number: fractionSize }}"
              *ngIf="!measurement.notFound; else notFoundSVG"
            >
              {{ measurement.value | number: fractionSize }}
            </p>
            <ng-template #notFoundSVG>
              <p class="center-value">--</p>
            </ng-template>
            <p class="center-unit strong">{{ activeDatapointGauge.unit || measurement.unit }}</p>
            <p class="center-date-time">{{ measurement.date | c8yDate: 'short' }}</p>
          </div>
        </foreignObject>
      </svg>
    </div>
  </ng-container>
  <div class="clearfix"></div>
</div>