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

<bci-page-content>
  <h2 class="page-heading">Charts</h2>
  <p>Different chart components that can be used for visualizing data.</p>
  <hr />

  <h3>Gauge Chart</h3>
  <p>
    <span>Current Value:</span>
    <mat-slider [min]="minValue" [max]="maxValue" step="0.1"
      ><input [(ngModel)]="currentValue" matSliderThumb
    /></mat-slider>
    <input data-test="valueInput" [(ngModel)]="currentValue" type="number" />
  </p>

  <h4>Full Featured Gauge Chart</h4>
  <bci-circular-gauge
    data-test="full-featured-gauge"
    [currentValue]="currentValue"
    [unit]="unit"
    [minValue]="minValue"
    [maxValue]="maxValue"
    [errorThreshold]="lowThreshold"
    [warnThreshold]="highThreshold"
    [targetValue]="targetValue"
    valueName="Actual Value"
  >
  </bci-circular-gauge>
  <p>Error Threshold: <input data-test="errorThresholdInput" [(ngModel)]="lowThreshold" type="number" /></p>
  <p>Warn Threshold: <input data-test="warnThresholdInput" [(ngModel)]="highThreshold" type="number" /></p>
  <p>Target Value: <input data-test="targetValueInput" [(ngModel)]="targetValue" type="number" /></p>
  <h4>Inverted Thresholds</h4>
  <bci-circular-gauge
    data-test="full-featured-inverted-gauge"
    [currentValue]="currentValue"
    [unit]="unit"
    [minValue]="minValue"
    [maxValue]="maxValue"
    [errorThreshold]="highThreshold"
    [warnThreshold]="lowThreshold"
    [targetValue]="50"
    [invertThresholds]="true"
    valueName="Actual Value"
  >
  </bci-circular-gauge>
  <p>
    Error Threshold: {{ highThreshold }}, Warn Threshold: {{ lowThreshold }}, Target Value: {{ invertedTargetValue }}
  </p>

  <h4>Simple Gauge Chart</h4>
  <bci-circular-gauge
    data-test="simple-gauge"
    [currentValue]="currentValue"
    [minValue]="minValue"
    [maxValue]="maxValue"
    [digits]="0"
    [displayRange]="false"
  >
  </bci-circular-gauge>
</bci-page-content>
