KPI Trending

by Sascha

HTML

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="centered">

  <div>

    Trend from <input type="date" id="start-date" />
    until <input type="date" id="end-date" />
    based on
    <select>
      <option>Day</option>
      <option>Production</option>
    </select>
    reports
    |
    <label>
      <input type="checkbox" /> production times only
    </label>
  </div>
  <hr noshade>

  <div>
    OEE, Total Line Efficiency, Line Performance
    <button id="pick">Choose KPIs</button>
    <button style="float:right">
      Create trend >>
    </button>
  </div>


</div>


<div id="dialog" style="display:none;" title="KPI Selection">
<div id="accordion">
  <h3>Percentage based</h3>
  <div>
  <div>
    <label><input type="checkbox">OEE</label><br />
    <label><input type="checkbox">Availability</label><br />
    <label><input type="checkbox">Effectiveness</label><br />
    <label><input type="checkbox">Quality</label><br />
    <label><input type="checkbox">Scrap ratio</label><br />
  </div>
  </div>
  <h3>Numeric KPIs</h3>
  <div>
    <label><input type="checkbox">Produced packs</label><br />
    <label><input type="checkbox">Produced good packs</label><br />
    <label><input type="checkbox">Bad packs</label><br />
    <label><input type="checkbox">Tonnage</label><br />
    <label><input type="checkbox">Throughput rate</label><br />
  </div>
</div>

CSS

body {
  padding: 0;
  font-family: "Open Sans", sans-serif;
  background-color: white;
  color: black;
}
div {
  padding: 0px;
}

#centered {
  padding: 10px;
  margin: 30px;
  border: 2px solid #888;
}
button {
  padding: 5px;
}
.right {
  float: right;
}
input[type=checkbox] {
  margin-right: 5px;
}

JavaScript

$('#pick').on('click', function() {
  $('#dialog').dialog({
    modal: true,
    width: 400,
    buttons: {
      "Select": function() {
        $(this).dialog("close");
      }
    }
  });
  $('#accordion').accordion();
});