Memorial KPI Redesign - KPI Selector - Slide out

by mcannon

HTML

<link rel="stylesheet" href="http://codeorigin.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default ops">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="fa fa-cogs">
                            </span>Operations</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table id="ops_menu" class="table">
                                
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default fin">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="fa fa-dollar">
                            </span>Finance</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div...

CSS

body{
  background-color: #e9e9e9!important;
  font-family: "BentonSans",Arial;
  font-size: 100%;
  color: #333;
}
body{margin-top:50px;}
.fa { margin-right:10px; }
.panel-body { padding:0px; }
.panel-body table tr td { padding-left: 15px }
.panel-body .table {margin-bottom: 0px; }

.sub{
    font-size: 1.5em;
    padding: 10px;
}

.ops{
    border-color: #EBAA2A !important;
}
.ops .panel-heading{
    background-color: #EBAA2A !important;
}

.saf{
    border-color: #D26223 !important;
}
.saf .panel-heading{
    background-color: #D26223 !important;
}

.fin{
    border-color: #278286 !important;
}
.fin .panel-heading{
    background-color: #278286 !important;
}

.wrk {
    border-color: #6E4552 !important;
}
.wrk .panel-heading{
    background-color: #6E4552 !important;
}

h4.panel-title, .top-nav > li > a, .help{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #fff !important;
    cursor: pointer;
    display: -webkit-box;
    font-size: 2em;
    font-weight: 400;
    line-height: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0px 1px 1px rgba(0,0,0,.4);
    white-space: nowrap;
}

JavaScript

$(function() {
    
var wrkJSON = '[{"type":"wrk","order":13,"id":13,"title":"FTE / Adj Occu Bed","description":"Description for ","attributes":[{"attributeCode":"Jan-15","attributeValue":"5.11"},{"attributeCode":"FY TD Avg","attributeValue":"5.20"},{"attributeCode":"Mth Budget","attributeValue":"5.32"}]},{"type":"wrk","order":14,"id":14,"title":"Labor Expense / CMI","description":"Description for ","attributes":[{"attributeCode":"Jan-15","attributeValue":"3,346"},{"attributeCode":"FY TD Avg","attributeValue":"3,324"},{"attributeCode":"Mth Budget","attributeValue":"3,324"}]},{"type":"wrk","order":15,"id":15,"title":"Vacancy Rate","description":"Description for ","attributes":[{"attributeCode":"Jan-15","attributeValue":"6.4%"},{"attributeCode":"FY TD Avg","attributeValue":"6.7%"},{"attributeCode":"Benchmark","attributeValue":"3.8%"}]},{"type":"wrk","order":16,"id":16,"title":"Turnover","description":"Description for ","attributes":[{"attributeCode":"Jan-15","attributeValue":"16.57%"},{"attributeCode":"FY TD Avg","attributeValue":"16.29%"},{"attributeCode":"Benchmark","attributeValue":"15.3%"}]}]';
   
var wrkArr = JSON && JSON.parse(wrkJSON);
    
var opsJSON = '[{"type":"ops","order":2,"id":2,"title":"ED ALOS","description":"Description for ","attributes":[{"attributeCode":"Jan-15","attributeValue":"254"},{"attributeCode":"FY TD Avg","attributeValue":"239"},{"attributeCode":"Pr FY Avg","attributeValue":"222"}]},{"type":"ops","order":3,"id":3,"title":"ED Admit Pat ALOS","description":"Description for ","attributes":[{"attributeCode":"Jan-15","attributeValue":"242"},{"attributeCode":"FY TD Avg","attributeValue":"207"}]},{"type":"ops","order":4,"id":4,"title":"ED Dschg Pat ALOS","description":"Description for ","attributes":[{"attributeCode":"Jan-15","attributeValue":"251"},{"attributeCode":"FY TD Avg","attributeValue":"245"}]},{"type":"ops","order":5,"id":5,"title":"ED Total Hold Hrs","description":"Description for...