| /** |
| * 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> |