| <!-- |
| 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. |
| --> |
| <!DOCTYPE html> |
| <html lang="en" class="no-js"> |
| <head> |
| <title>$chart.getTitle()</title> |
| <link href="/hicc/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" /> |
| <link href="/hicc/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> |
| <script src="/hicc/js/jquery.js" type="text/javascript"></script> |
| <script src="/hicc/js/bootstrap.min.js" type="text/javascript"></script> |
| <style> |
| html, body,.container { |
| height: 100%; |
| } |
| .tile { |
| color: #ffffff; |
| background-color: #5bc0de; |
| } |
| .container { |
| width: 100%; |
| height: 100%; |
| display:table; |
| padding: 0 0 0 0; /*set left/right padding according to needs*/ |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| } |
| .row { |
| display: -webkit-box; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: table-row; |
| height: 100%; |
| } |
| |
| .col-md-5 { |
| display: table-cell; |
| float: none; |
| font-size: 20px; |
| } |
| |
| .col-xs-5 { |
| display: table-cell; |
| float: none; |
| font-size: 9px; |
| } |
| |
| .col-md-7 { |
| display: table-cell; |
| float: none; |
| font-size: 20px; |
| } |
| |
| .col-xs-7 { |
| display: table-cell; |
| float: none; |
| font-size: 9px; |
| } |
| |
| </style> |
| </head> |
| <body onResize="resize()"> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-5 col-xs-5 text-center tile no-float"> |
| <h2><span class="glyphicon $chart.getIcon()" aria-hidden="true"></span></h2> |
| $chart.getBannerText() |
| </div> |
| <div class="col-md-7 col-xs-7 text-center no-float"> |
| <p><h1 id="value"></h1> $chart.getSuffixText()</p> |
| </div> |
| </div> |
| </div> |
| |
| <script src="/hicc/js/jquery.js"></script> |
| <script> |
| var tracker; |
| |
| function resize() { |
| clearTimeout(tracker); |
| tracker = setTimeout(render, 50); |
| } |
| |
| function render() { |
| var _series=$seriesMetaData; |
| var buffer=JSON.stringify(_series); |
| $.ajax({ |
| type: "PUT", |
| url: "/hicc/v1/tile/preview/series", |
| dataType: "json", |
| data: buffer, |
| success: function(data) { |
| $("#value").html(data.join("/")); |
| } |
| }); |
| tracker = setTimeout(render, 3000); |
| } |
| |
| $( document ).ready(function() { |
| render(); |
| }); |
| </script> |
| </body> |
| </html> |
