Alternate Bar Charts

by ramnathv

HTML

<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.2-rc.1/mithril.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div class="container-fluid main-container">
  <div class="row">
    <div class="col-sm-2" id='app'>
    </div>
  </div>
</div>

CSS

.main-container{margin-top: 20px;}
.progress-flat{          
  height: 10px;
  border-radius: 0;
  margin-top: 15px;
  margin-bottom: 5px;
 }
 .list-group-item-flat{
   border-radius: 0
 }

CoffeeScript

App = view: (ctrl, props) -> [
  m 'ul.list-group', ctrl.items().map (item, i) ->
    m 'li.list-group-item.list-group-item-flat', {key: i},
      m 'span.list-group-item-name', item.name
      m 'span.list-group-item-value.pull-right', {
        style: {color: 'gray'}
      }, "#{item.value}%"
      m '.progress.progress-flat', m '.progress-bar', 
        config: (el, isInit, ctx) ->
          Velocity(el, {width: "#{item.value}%"})
        style: background: "#00a99d"   
  m 'button.btn.btn-sm', {
    style:
      background: "#1691c6"
      color: "white"
      borderRadius: 0
    onclick: (e) -> ctrl.items(make_data(3))
  }, 'Update'
]
      
App.controller = (props) ->
  items: m.prop(props.items)
    
make_data = (N) -> [1..N].map (i) -> 
  name: "Name #{i}", value: Math.round(Math.random()*100)
  
m.mount(
  document.getElementById("app"),
  m App, {items: make_data(3)}
)