Memorial KPI Redesign

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">
<script src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script>
<ul id="kpis" class="col-md-12">
</ul>
<div id="kpiOrder"></div>

CSS

body{
  background-color: #e9e9e9!important;
  font-family: "BentonSans",Arial;
  font-size: 100%;
  color: #333;
}

}
.highlight {
    opacity: 0.5;
}

.placeholder {
   margin: 7px;
   border: 1px dashed red;
}

#kpis, 
#kpis .panel{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#kpis{
    padding: 0 7px;
}

#kpis li {
    float: left;
    padding: 7px !important;
}
#kpis .panel-body { height: 180px; }

.panel-body table{ width: 100% }
.panel-body td{ padding: 2px 0 7px 5px; }
.panel-body tr {
    font-size: 1.5em;
}
.panel-body tr:first-child {
    font-size: 2.0em;
}

.panel-heading {
    padding: 2px 15px;
}

.pan-col1-hdr{
    font-size: 1.2em;
    text-align: center;
}
.pan_col1_val{
    text-align: center;
}
.panel-heading{
    background-color: red !important;
}

.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;
}

.navbar{
    background-color: #002663;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus
{
    background-color: #278286;
}

#kpis .panel-title, .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;
}

.tooltip{
   ...

JavaScript

$(function() {
    
    
    $("#kpis").sortable({
        placeholder: "placeholder",
        start: function (event, ui) {
            ui.item.toggleClass("highlight");
            ui.placeholder.height(ui.item.height()-20);
            ui.placeholder.width(ui.item.width()-20);
        },
        stop: function (event, ui) {
            ui.item.toggleClass("highlight");
            order = $.map($(this).find('li'), function(el) {
                    return $(el).attr('id');
                });
                console.log(order);
                document.getElementById("kpiOrder").innerHTML = 'KPI Order = ' + order;
            }
        
    });
    
    $("#kpis").disableSelection();
    

var kpiJSON = '[{"type":"saf","order":1,"id":1,"title":"SAFECON Days","description":"Description for ","attributes":[{"attributeCode":"Jan-15","attributeValue":"26.0"},{"attributeCode":"FY TD Sum","attributeValue":"75.0"},{"attributeCode":"FY TD Avg","attributeValue":"18.8"},{"attributeCode":"Pr FY Sum","attributeValue":"72.4"},{"attributeCode":"Pr FY Avg","attributeValue":"17.2"}]},{"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 ","attributes":[{"attributeCode":"Jan-15","attributeValue":"3"},{"attributeCode":"FY TD Avg","attributeValue":"239"},{"attributeCode":"Pr FY...