JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation.min.js"></script>
<script src="http://sindresorhus.com/screenfull.js/src/screenfull.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="http://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>
<ul class="small-block-grid-1" id='wrapper'>

</ul>

JavaScript

var data = [
    { y: '2006', a: 100, b: 90, z: "A" },
    { y: '2007', a: 75,  b: 65, z: "A" },
    { y: '2008', a: 50,  b: 40, z: "A"},
    { y: '2009', a: 75,  b: 65, z: "C" },
    { y: '2010', a: 50,  b: 40, z: "C" },
    { y: '2011', a: 75,  b: 65, z: "B" },
    { y: '2012', a: 100, b: 90, z: "B" }
]

function drawBar(el, data){
  var myBar = Morris.Bar({
    element: el,
    data: data,
    xkey: 'y',
    ykeys: ['a', 'b'],
    labels: ['a', 'b'],
    parseTime: false,
    resize: true,
    hoverHide: true
  });
}



function unique(data, field){
  var d = data.map(function(d){
     return d[field]
  })
  console.log(d)
  return d.filter(function(item, i, ar){ 
     return ar.indexOf(item) === i
  });
}

function drawFacet(el, data, field){
  unique(data, 'z').forEach(function(z){
     $("#wrapper")
       .append("<li><div id=" + z + "></div></li>")
        drawBar(z, data.filter(function(d){
          return d.z === z
        }))
   })
}

drawFacet('#wrapper', data, 'z')