Mithril with C3 and Selectize

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="//rawgit.com/ramnathv/0d99245ff5d6f7992e24/raw/21bedd68dba08663e39bb45c5acc1b042c52af96/new_donor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.1/mithril.min.js"></script>
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div id='root'>
			</div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px;}
#root{margin-top: 30px;}
body{font-family: Helvetica;}
.btn-group{margin-bottom: 10px;}

.c3-axis-x line, 
.c3-axis-x path{
  stroke: none;
}

.c3-axis-x text{
  font-size: 11px;
}
.c3-axis-y text{
  font-family: sans-serif;
  fill-opacity: 0.7;
}
button.active{
  font-weight: bolder;
}

CoffeeScript

# Selectize Widget for Mithril ---------------------
# Properties 
# config: configuration object for selectize
# value: m.prop getter-setter for value of selectize
# handleChange: function to handle event change
Selectize = 
  controller: (props) ->
    config: (el, isinitialized, context) ->
      if (!isinitialized)
        $select = $(el).selectize(props.config)
        context.selectize = $select[0].selectize
        context.selectize.setValue(props.value())
        context.selectize.on "change", (e) ->
          m.startComputation()
          props.handleChange this.getValue()
          m.endComputation()      
  view: (ctrl, props) ->
    m 'div', m 'select', {
        config: ctrl.config
        placeholder: "Select field..."
    }

Panel = 
  view: (ctrl, props) ->
    m '.chart-wrapper',  
      m '.chart-title', props.title
      m '.chart-stage', props.body


drawChart = (el, props) -> c3.generate
    bindto: el
    data: 
      json: props.data
      onmouseover: (d) -> console.log d
      colors: {"value": "#264661"}
      keys:
        x: "Field_Value"
        value: ["value"]
      type: "bar"
    tooltip:
      format: title: (x) -> ""
    grid:
      y: show: true
    axis: 
      x: 
        type: 'category'
      y: 
        tick: 
          outer: false
        label: 
          position: "outer-center"
          text: props.data[0].variable
      rotated: true
    legend: {show: false}
    
updateChart = (chart, props) ->
  chart.axis.labels
     y: props.data[0].variable
  chart.load
    json: props.data
    keys:
      x: "Field_Value"
      value: ["value"]

Chart = 
  controller: (props) ->
  view: (ctrl, props) ->
    draw = (el, isinitialized, context) ->
      if (!isinitialized)
        context.chart = drawChart(el, props)
      else
        updateChart(context.chart, props)
    m "div", {
      config: draw
      style: {height: '300px'}
    }
    
ButtonGroup = 
  view: (ctrl, props) ->
    m '.btn-group', {role: "group"},...