Morris.js testing w/knockout

Just small tests with Morris.js & knockout

by jwstott

HTML

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.1.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div class="donut" data-bind="morrisDonut: {data: [
        {
            label: 'L1',
            value: signedOnCount()
        },
            {
            label: 'L2',
            value: totalCount() || 30
        }
        
    ], select: 0}"></div>

CSS

#donut-example {
    height: 125px;
}
.donut {
    height: 125px;
}

JavaScript

// select object to highlight isn't working - 
// even with protection from double 0 values - single 0 value doesn't draw any radius
// abandon for now - maybe come back later
/** ko bindinghander for morris.js-donut - binds data to observableArray **/
(function(factory) {
  // CommonJS
  if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
    factory(require('knockout'), require('Morris'));
    // AMD
  } else if (typeof define === 'function' && define.amd) {
    define(['knockout', 'Morris'], factory);
    // Normal script tag
  } else {
    factory(window.ko, window.Morris);
  }
}(function (ko, Morris, undefined) {
  var elemKey = 'morris-donut';
  ko.bindingHandlers.morrisDonut = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
      var donut, value = ko.utils.unwrapObservable(valueAccessor()),
          uniqueArray = eliminateDoubleZero(value.data);

      donut = Morris.Donut({
        element: element,
        data: uniqueArray
      });
        if (value.select !== undefined){
            donut.select(value.select);
        }
      ko.utils.domData.set(element, elemKey, donut);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
      var value = ko.unwrap(valueAccessor()),
          donut = ko.utils.domData.get(element, elemKey),
          uniqueArray = eliminateDoubleZero(value.data);
     // donut.data = uniqueArray;
      donut.redraw();
    }
  };
  // handle 'bug' in morris-donut where two data items with value == 0 throws error
  function eliminateDoubleZero(arr) {
    var initialZero = false;
    var filtered = arr.filter(function (val, index) {
      if (val.value === 0 ) {
        if (initialZero) {
          return false;
        } else {
          initialZero = true;
        }
      }
      return true;
    });
    return filtered;
  }
})
);
var Student = function (val) {
    this.signedOn = ko.observable(val || false);
    this.id...