<!--
  ~ Copyright (C) 2020 Robert Bosch GmbH Copyright (C) 2020 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<svg viewBox="0 0 400 260" x="0px">
  <defs>
    <linearGradient id="ok-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" [attr.stop-color]="boschColors.boschGreen50" />
      <stop offset="100%" [attr.stop-color]="boschColors.boschGreen25" />
    </linearGradient>
    <linearGradient id="warn-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" [attr.stop-color]="boschColors.boschSignalYellow" />
      <stop offset="100%" [attr.stop-color]="boschColors.boschSignalRed" />
    </linearGradient>
    <linearGradient id="error-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" [attr.stop-color]="boschColors.boschRed50" />
      <stop offset="100%" [attr.stop-color]="boschColors.boschPurple50" />
    </linearGradient>
    <linearGradient id="unknown-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" [attr.stop-color]="boschColors.boschBlue50" />
      <stop offset="100%" [attr.stop-color]="boschColors.boschBlue35" />
    </linearGradient>
  </defs>

  <path class="track" d="M 360 200 A 160 160 0 0 0 40 200" />
  <path
    data-test="gauge-arc"
    class="gauge"
    [attr.d]="gaugeArcPath"
    attr.stroke="url(#{{ gaugeState }}-gradient)"
    [attr.opacity]="currentValue < minValue + 0.1 ? 0 : 1"
  />
  <path
    data-test="warn-threshold-indicator"
    class="indicator warn-threshold-indicator"
    [class.inverted]="warnThresholdIndicatorInverted"
    [attr.d]="warnThresholdArcPath"
    [attr.opacity]="warnThreshold !== undefined ? 1 : 0"
  />
  <path
    data-test="warn-threshold-indicator"
    class="indicator error-threshold-indicator"
    [class.inverted]="errorThresholdIndicatorInverted"
    [attr.d]="errorThresholdArcPath"
    [attr.opacity]="errorThreshold !== undefined ? 1 : 0"
  />
  <path
    data-test="warn-threshold-indicator"
    class="indicator target-value-indicator"
    [attr.d]="targetValueArcPath"
    [attr.opacity]="targetValue !== undefined ? 1 : 0"
  />
  <text data-test="current-value" class="digit" x="200" y="200">
    <tspan data-test="current-value-digits" [class]="gaugeState">
      {{ currentValue ? currentValue.toFixed(digits) : '' }}
    </tspan>
    <tspan data-test="current-value-unit" font-size="36" *ngIf="currentValue !== undefined">{{ unit }}</tspan>
  </text>
  <text data-test="min-value-label" class="label min-value" x="40" y="234" *ngIf="displayRange">{{ minValue }}</text>
  <text data-test="max-value-label" class="label max-value" x="360" y="234" *ngIf="displayRange">{{ maxValue }}</text>
  <text data-test="value-name-label" class="label value-name" x="200" y="234">{{ valueName }}</text>
</svg>
