JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="https://rawgit.com/j2css/j2c/master/dist/j2c.global.min.js"></script>

JavaScript

var PieChart = {
  sheet: j2c.sheet({
    '.chart': {
      display: 'inline-block',
      width: '1em',
      height: '1em',
    },

    '.svg': {
      border_radius: '50%',
      _webkit$_moz$_ms$_o$: {
        transform: 'rotate(-90deg)'
      }
    },

    '.pie': {
      fill: 'transparent',
      stroke: 'rgba(0, 0, 0, 0.15)',
    },

    '.slice': {
      fill: 'transparent',
      stroke: '#3cb37a',
    }
  }),

  view: function(ctrl, attrs) {
    var sheet = PieChart.sheet

    var percent = parseInt(attrs.percent || 0, 10)
    var diameter = 64
    var radius = diameter / 2
    var center = radius
    var gap = Math.PI * 2 * radius
    var length = percent * (gap / 100)
    switch (attrs.type) {
      case 'donut':
        var strokeWidth = radius * 0.3
        radius = radius - strokeWidth / 2
        break

      default:
        var strokeWidth = diameter
        break
    }

    var pieStyle = 'stroke-width: ' + strokeWidth + ';'
    var sliceStyle = pieStyle + ' stroke-dasharray: ' + length + ' ' + gap

    return m('div.' + sheet.chart, [
      m('style', sheet),
      m('svg.' + sheet.svg, {
        viewBox: '0 0 ' + diameter + ' ' + diameter
      }, [
        m('circle.' + sheet.pie, {
          r: radius,
          cx: center,
          cy: center,
          style: pieStyle
        }),
        m('circle.' + sheet.slice, {
          r: radius,
          cx: center,
          cy: center,
          style: sliceStyle
        })
      ])
    ])
  }
}

var app = {
	sheet: j2c.sheet({
  	'@global': {
    	' div': { padding: '15px' },
      '.big': { font_size: '80px' },
      '.little': { font_size: '16px' }
    }
  }),
  
  view: function() {
    return m('div.big', [
    	m('style', app.sheet),
      
      m.component(PieChart, {
        percent: 15
      }),
      m.component(PieChart, {
        percent: 15,
        type: 'donut'
      }),
      m.component(PieChart, {
        percent: 80,
        type: 'donut'
      })
    ])
 ...