JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>React Example without Babel </title>
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
.pie{
fill:red;
}
</style>
</head>
<body>
<div class="container">
<div id="app"></div>
<div class="col-lg-5" id="slider"></div>
<div class="col-lg-6" id="pie_chart"></div>
</div>
<script type="text/jsx">
class Header extends React.Component{
render(){
return (<div><h1 className='page-header'>{this.props.text}</h1></div>);
}
}
ReactDOM.render(<Header text='Dynamic Pie Chart'/>,document.getElementById('app'));
class Slider extends React.Component{
render(){
return (<div><input type='range' min='1' max='100' onChange = {this.props.sliderEvent} /></div>);
}
}
var PropTypes = React.PropTypes;
var PieChart = React.createClass({
displayName: 'PieChart',
propTypes: {
className: PropTypes.string,
size: PropTypes.number,
slices: PropTypes.arrayOf(PropTypes.shape({
color: PropTypes.string.isRequired, // hex color
value: PropTypes.number.isRequired })).isRequired },
getDefaultProps: function getDefaultProps() {
return {
size: 200 };
},
_renderPaths: function _renderPaths() {
var radCircumference = Math.PI * 2;
var center = this.props.size / 2;
var radius = center - 1; // padding to prevent clipping
var total = this.props.slices.reduce(function (totalValue, slice) {
return totalValue + slice.value;
},...