A quick and dirty implementation of an Übersicht cpu bar widget I made for a talk

cpu-bar-widget.coffee

command: "top -R -l2 | grep 'CPU usage' | tail -n1 | awk '{ print $3+$5 }'"

refreshFrequency: 1000

style: """
  top: 50%
  left: 80%
  width: 208px
  margin: 0 0 0 -104px
  text-align: left
  overflow: hidden

  .bar
    display: inline-block
    vertical-align: bottom
    width: 32px
    margin-left: 8px
    transition: all 300ms
    transform-origin: 0 100%
    background: #fff

  .bars
    height: 200px
    line-height: 200px
    border-bottom: 1px solid rgba(#fff, 0.5)
  p
    font-family: Helvetica Neue
    font-size: 15px
    margin: 6px 0 0 0
    color: #dcf0ff

  .pct
    font-weight: 200
    color: #fff
    font-size: 14px
"""

makeBar: (pct) ->
  pct = Math.round Number(pct)
  "<div class='bar' style='height: #{pct}%'></div>"

render: (output) ->
  "<div class='bars'></div>" +
  "<p>CPU <span class='pct'><span></p>"

update: (output, domEl) ->
  pct  = Math.round Number(output)
  bars = $(domEl).children('.bars')
  bar  = $(@makeBar(output))

  $(domEl).find('.pct').html(pct + '%')
  bar.css transform: "scale(1, 0)"
  bars.append(bar)

  if bars.children().length > 5
    toRemove = bars.children().eq(0)
    bars.on 'webkitTransitionEnd', ->
      bar.css transform: ''
      bars.css transition: '', transform: ''
      setTimeout toRemove.remove()

    webkitRequestAnimationFrame ->
      bars.css transition: 'all 300ms', transform: "translate(-40px, 0)"
  else
    webkitRequestAnimationFrame ->
      $(bar).css transform: ""