JSFiddle - React, Tailwind, and code Playground

by zhning

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="http://besideriver.com/RiverJS/1.0.8/river.min.js"></script>
<ul class="dash-board" scope>
    <li barchart></li>
    <li linechart></li>
</ul>

CSS

.dash-board li {
    float: left;
    list-style: none;
}

JavaScript

define('river.grammer.barchart', function (exports, require, module) {
    var data = require('rain').data,
        $compile = require('river.core.tools').compile;

    function chart(str, scope, element) {
        var canvas = $compile('<canvas id="canvas" height="200" width="300"></canvas>');
        element.appendChild(canvas)
        new Chart(canvas.getContext("2d"),{
        	data: data,
          type: 'bar'
        })
    }
    exports = module.exports = chart;
})

define('river.grammer.linechart', function (exports, require, module) {
    var data = require('rain').data,
        $compile = require('river.core.tools').compile;

    function chart(str, scope, element) {
        var canvas = $compile('<canvas id="canvas" height="200" width="300"></canvas>');
        element.appendChild(canvas)
        new Chart(canvas.getContext("2d"), {
        	type: 'line',
          data: data
        });
    }

    exports = module.exports = chart;
})

define('rain', function (exports, require, module) {

    exports.data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
         		label: "中国",
         		fill: false,
            backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
            borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
            borderWidth: 1,
            data: [65, 59, 90, 81, 56, 55, 40]
        }, {
            label: "美国",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }]
    }
})