JSFiddle - React, Tailwind, and code Playground

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="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<div class="container-fluid" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-3">
      <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;}

CoffeeScript

## https://gist.github.com/impinball/5e4d6e64aba2ffb7cd23
## Patches Mithril to accept components as well as strings
@m = ((o) ->
  Object.assign (->
    (if typeof arguments[0] == 'string' then o else o.component).apply undefined, arguments
  ), o
)(m)

Selectize = 
  controller: (props) ->
    config: (el, isinitialized, context) ->
      if (!isinitialized)
        $select = $(el).selectize(props.config)
        context.selectize = $select[0].selectize
        context.selectize.setValue(0)
        context.selectize.on "change", (e) ->
          m.startComputation()
          props.handleChange this.getValue()
          m.endComputation()
        
  view: (ctrl, props) ->
    m 'div', 
      m 'select', {
        config: ctrl.config
        placeholder: "Transformation..."
      }

selectizeOptions = 
  #maxItems: null
  valueField: 'id'
  labelField: 'title'
  searchField: 'title'
  options: [
    {
      id: 0
      title: 'log'
      url: 'http://en.wikipedia.org/wiki/Spectrometers'
    }
    {
      id: 1
      title: 'sqrt'
      url: 'http://en.wikipedia.org/wiki/Star_chart'
    }
    {
      id: 2
      title: 'spline'
      url: 'http://en.wikipedia.org/wiki/Electrical_tape'
    }
  ]
  create: false
  
chartProps = 
  type: 'Bar'
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  xkey: 'year'
  ykeys: ['value']
  labels: ['Value']
  resize: true
  hideHover: true
  
chartOptions = 
  type: 'Bar'
  xkey: 'year'
  ykeys: ['value']
  labels: ['Value']
  resize: true
  hideHover: true
  
Panel = 
  view: (ctrl, props) ->
    m '.panel.panel-default',
      m '.panel-body', props.body


makeData = ->
  [0..2].map ->
    [2008..2012].map (d) -> {
      year: d, value: Math.round(Math.random()*50)
    }
    
myData = makeData()

Chart = 
  controller: (props) ->
  view: (ctrl, props) ->
    draw = (el, isinitialized, context) ->
    ...