@if (isInfoGauge) {
  <div class="label-value-unit-gauge new-radial">
    @if (activeDatapointLabels?.length && isInfoGauge) {
      <div class="gauge-legend">
        @for (dp of activeDatapointLabels; track dp) {
          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {
            <label
              class="text-truncate"
              title="{{ dp.label }}"
            >
              {{ dp.label }}
            </label>
            @if (!measurement.notFound) {
              <h3
                class="text-truncate"
                title="{{ measurement.value | number: fractionSize }} {{
                  dp.unit || measurement.unit
                }}"
              >
                {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}
              </h3>
            } @else {
              <h3>--</h3>
            }
            <p class="text-muted m-b-8">
              <small>
                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>
                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>
              </small>
            </p>
          }
        }
      </div>
    }
    @if (activeDatapointGauge && isInfoGauge) {
      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {
        <div class="gauge-svg">
          <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>
                @if (!measurement.notFound) {
                  <p
                    class="center-value text-truncate"
                    title="{{ measurement.value | number: fractionSize }}"
                  >
                    {{ measurement.value | number: fractionSize }}
                  </p>
                } @else {
                  <p class="center-value">--</p>
                }
                <p class="center-unit strong">
                  {{ activeDatapointGauge.unit || measurement.unit }}
                </p>
                <div class="center-date-time">{{ measurement.date | c8yDate: 'mediumDate' }}</div>
                <div class="center-date-time">{{ measurement.date | c8yDate: 'mediumTime' }}</div>
              </div>
            </foreignObject>
          </svg>
        </div>
      }
    }
    <div class="clearfix"></div>
  </div>
}
@if (!isInfoGauge) {
  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {
    <c8y-radial-gauge
      [activeDatapointGauge]="activeDatapointGauge"
      [measurement]="measurement"
      [fractionSize]="config.fractionSize"
      [gaugeOptions]="config.gaugeOptions"
      [selectedPresetId]="config.selectedPresetId"
    ></c8y-radial-gauge>
  }
}