/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
<h1>Gauge @escape($name)</h1>

@if($message,inline:<div class="error">@escape($message)</div>)

<canvas id="gauge-chart" height="100"></canvas>

@include(chartsjs.html)
<script>
new Chart(document.getElementById('gauge-chart').getContext('2d'), {
  type: 'line',
  data: {
    labels: [ @each($points,inline:new Date($$value.timestamp).toLocaleString()@if($hasNext,inline:,)) ],
    datasets: [{
      label: '$name ($unit)',
      data: [ @each($points,inline:{t:$$value.timestamp,y:$$value.value}@if($hasNext,inline:,)) ],
      borderWidth: 1,
      options: {
        fill: false,
        responsive: true,
        maintainAspectRatio: true,
        scales: {
          xAxes: [{
            type: 'time',
            distribution : 'series',
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Date',
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: '$name',
            }
          }]
        }
      }
    }]
  }
});
</script>