MHS - Tabbed Chart Selector

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>
<script src="https://drive.google.com/file/d/0B6fYAf9QrDsCNXpwOGdJMGQxOFE/view?usp=sharing"></script>
<script src="https://drive.google.com/file/d/0B6fYAf9QrDsCdEJqUUhwWENxQ2c/view?usp=sharing"></script>
<script src="https://drive.google.com/file/d/0B6fYAf9QrDsCajUwbjRLV19uLU0/view?usp=sharing"></script>
<div id="contentWell">
	<div id="loading-pane">
		<div class="loading-shade"></div>
		<button id="report-loading" type="button" class="btn btn-default btn-lg loading">
		  <i class="fa fa-spinner fa-spin fa-2x"></i><strong> &nbsp;Loading</strong>
		</button>
	</div>
	<div id="menu-pane">
		<div class="loading-shade"></div>
	</div>
	<div class="controls">
		<span>
			<button id="kpiListBtn" type="button" class="btn btn-fin">
			  <i class="fa fa-bars"></i>
			</button>
		</span>
		<span class="input-group kpiDate" style="width: 200px">
			<input id="kpi-date" type="text" class="date-picker form-control" />
			<label for="kpi-date" class="input-group-addon btn btn-fin"><span class="glyphicon glyphicon-calendar"></span>
			</label>
		</span>
		<kpi-selector params="{ kpiConfigArray: $root.kpiConfigArray, activeKpiArray: $root.activeKpiArray }"></kpi-selector>
	</div>

	<div id="kpi-container" class="row">
    </div>
</div>

CSS

.ui-datepicker-calendar {
    display: none;
}

/***  dash.css ***/

body{
  background-color: #e9e9e9!important;
  font-family: "BentonSans",Arial;
  font-size: 100%;
  color: #333;
  cursor: auto;
}
 
.IBI_DesktopContainer{
  /*cursor: auto;*/
}
 
.options{
    position: absolute;
    top: 7px;
    right: 7px;
    background-color: transparent !important;
}
 
.options button,
.options button:hover,
.options button:focus{
    background-color: transparent !important;
    color: #FFF;
}
 
.options{
    background: transparent !important;
    /*background: rgba(255,255,255,.1) !important;*/
}
 
.options button,
.options button:hover,
.options button:focus{
    background-color: transparent !important;
    color: #FFF;
}
#kpiOrder{
    font-size: 2.0em;
    padding: 10px;
 
}
.highlight {
    opacity: 0.5;
}
 
.placeholder {
   margin: 7px;
   border: 1px dashed red;
}
 
#kpis, 
#kpis .panel{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
#kpis{
    padding: 0 7px;
}
 
#kpis li {
    float: left;
    padding: 7px !important;
}
#kpis .panel-body { height: 150px; padding: 10px;}
 
.panel-body table{ width: 100% }
.panel-body td{ padding: 2px 0 5px 5px; }
.panel-body tr {
    font-size: 1.3em;
}
.panel-body tr:first-child {
    font-size: 1.5em;
}
 
.pan-col1-hdr{
    font-size: 1.2em;
    text-align: center;
}
.pan_col1_val{
    text-align: center;
}
.panel-heading{
    padding: 1px 15px !important;
    background-color: red !important;
}
 
.handle { cursor:move !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;
}
 
.btn-fin {
  color: #FFF;
 ...

JavaScript

var viewModel;

var kpiConfig = function(data, type) {
	var self = this;
	//TODO: Use the mappng plugin?
	//ko.mapping.fromJS(data, {}, self);  
	self.id = data.id;
	self.name = data.name;
	self.title = data.title;
	self.description = data.description;
	self.healthIndicatorDirection = data.healthIndicatorDirection;
	self.numberPeriodsInTrend = data.numberPeriodsInTrend;
	self.slopeAcceptableRangeLow = data.slopeAcceptableRangeLow;
	self.slopeAcceptableRangeHigh = data.slopeAcceptableRangeHigh;
	self.defaultOrder = data.defaultOrder;
	self.type = type;
	self.visible = ko.observable(false);
	self.sparkVisible = ko.observable(false);
	self.toggleSpark = function () { self.sparkVisible(!self.sparkVisible()) };
};

	
	viewModel = {
		self : this,
		kpiData : ko.observableArray([]),
		kpiConfigArray : ko.observableArray([]),
		activeKpiArray : ko.observableArray([]),
		lastDateOfMonth : ko.observable()
	};
	
	viewModel.getConfigById = function (id) {
        return ko.computed({
            read: function () {
                return ko.utils.arrayFirst(this.kpiConfigArray(), function(item) {
					return(item.id === id);
				});
            },
            write: function () {}
        }, this);
    }.bind(viewModel);
	viewModel.getKpiDataById = function (id) {
        return ko.computed({
            read: function () {
                return ko.utils.arrayFirst(this.kpiData(), function(item) {
					return(item.id() === id);
				});
            },
            write: function () {}
        }, this);
    }.bind(viewModel);
	//get a list of configIds
	viewModel.justConfigIds = ko.computed(function() {
		return ko.utils.arrayMap(viewModel.kpiConfigArray(), function(item) {
			return item.id;
		});
	}, viewModel);
	
	$('.date-picker').datepicker({
		changeMonth: true,
		changeYear: true,
		showButtonPanel: true,
		dateFormat: 'MM yy',
		onClose: function() {
			var kpiDate = $(this).datepicker('getDate');
			var iMonth = $("#ui-datepicker-div .ui-datepicker-month...