Sparkline: basic use

app.html

<template>
  <require from="./basic-use.css"></require>
  <div id="sparkline-basicuse">
    <div class="demo-section k-content">
         <div class="climate">
             <h4>
                 Climate control history
             </h4>
             <table class="history">
                 <tr>
                     <td class="spark">
                       <ak-sparkline k-series.bind="[{data: pressLogData}]"></ak-sparkline>
                     </td>
                     <td class="value">980<span>mb</span></td>
                 </tr>
                 <tr>
                     <td class="spark">
                       <ak-sparkline
                          k-series.bind="[{
                            data: tempLogData,
                            type: 'column',
                            tooltip: {format: '{0} &deg;C'}
                          }]">
                       </ak-sparkline>
                     </td>
                     <td class="value">21<span>&deg;C</span></td>
                 </tr>
                 <tr>
                     <td class="spark">
                       <ak-sparkline
                          k-series.bind="[{
                            data: humLogData,
                            type: 'area',
                            tooltip: {format: '{0} %'}
                          }]">
                       </ak-sparkline>
                     </td>
                     <td class="value">32<span>%</span></td>
                 </tr>
             </table>
         </div>
         <div class="temperature">
             <h4>
                 Temperature control
             </h4>
             <div class="stats">
               <ak-sparkline
                  k-series.bind="[{
                    data: [21,23],
                    type: 'bullet',
                    tooltip: {visible: true}
                  }]"
                  k-value-axis.bind="tempRangeValueAxis">
               </ak-sparkline>
             </div>
         </div>
         <div class="conditioner">
             <h4>
                 Conditioner working time
             </h4>
             <ul class="pie-list stats">
                 <li>MON <ak-sparkline k-series.bind="[{ type: 'pie', data: [14,10] }]"/></li>
                 <li>TUE <ak-sparkline k-series.bind="[{ type: 'pie', data: [8,16] }]"/></li>
                 <li>WED <ak-sparkline k-series.bind="[{ type: 'pie', data: [8,16] }]"/></li>
                 <li>THU <ak-sparkline k-series.bind="[{ type: 'pie', data: [12,12] }]"/></li>
                 <li>FRI <ak-sparkline k-series.bind="[{ type: 'pie', data: [6,18] }]"/></li>
                 <li>SAT <ak-sparkline k-series.bind="[{ type: 'pie', data: [1,23] }]"/></li>
                 <li>SUN <ak-sparkline k-series.bind="[{ type: 'pie', data: [5,19] }]"/></li>
             </ul>
         </div>
     </div>
   </div>
</template>

app.js

export class BasicUse {
  pressLogData = [
    936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
    1004, 988, 990, 988, 987, 995, 946, 954, 991, 984,
    974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
    952, 940, 937, 980, 966, 965, 928, 916, 910, 980
  ];

  tempLogData = [
    16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
    20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
    21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
    22, 21, 16, 15, 15, 16, 19, 20, 20, 21
  ];

  humLogData = [
    71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
    73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
    63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
    63, 64, 63, 67, 58, 56, 53, 59, 51, 54
  ];

  tempRangeValueAxis = {
    min: 0,
    max: 30,
    plotBands: [{
      from: 0, to: 15, color: '#787878', opacity: 0.15
    }, {
      from: 15, to: 22, color: '#787878', opacity: 0.3
    }, {
      from: 22, to: 30, color: '#787878', opacity: 0.15
    }]
  };
}

basic-use.css

.temperature, .conditioner {
    margin: 0;
    padding: 30px 0 0 0;
}

.history {
    border-collapse: collapse;
    width: 100%;
}
.history td {
    padding: 0;
    vertical-align: bottom;
}
.history td.spark {
    line-height: 30px;
}
.history td.value {
    font-size: 1.6em;
    font-weight: normal;
    line-height: 20px;
}
.history td.value span {
    font-size: .5em;
    vertical-align: top;
    line-height: 30px;
}
.stats {
    text-align: center;
}
.pie-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.pie-list li {
    display: inline-block;
    text-align: center;
    width: 34px;
    font-size: 10px;
}
#sparkline-basicuse .pie-list k-sparkline {
    display: block;
    width: 34px;
    line-height: 30px;
}
#temp-range {
    width: 100%;
    line-height: 30px;
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}