React Slider and Pie (study)

スライダーと進捗を表す目的用のパイチャート

by Masaki Moriwaki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Pie = React.createClass({
  render: function () {
    var fill = this.props.fill || '#999';
    var angle = this.props.progress * 360 / 100;

    var r_angle = angle > 180 ? 180 : angle;
    var r_x = 12 + 12 * Math.sin(Math.PI * r_angle / 180);
    var r_y = 12 - 12 * Math.cos(Math.PI * r_angle / 180);
    var r_arc = "A12,12 0 0 1 " + r_x + "," + r_y;
    
    var l_angle = angle > 180 ? angle - 180 : 0;
    var l_x = 12 - 12 * Math.sin(Math.PI * l_angle / 180);
    var l_y = 12 + 12 * Math.cos(Math.PI * l_angle / 180);
    var l_arc = angle > 180 ? "A12,12 0 0 1 " + l_x + "," + l_y : "";
    var d = "M12,12 L12,0 " + r_arc + l_arc + " Z";
    return (
      <svg style={{width: '24px', height: '24px'}} viewBox="0 0 24 24">
        <path fill={fill} d={d} />
      </svg>
    );
  }
});

var SliderAndPie = React.createClass({
  getInitialState: function () {
    return {
      progress: 0
    };
  },
  handleChange: function (event) {
    this.setState({
      progress: event.target.value
    });
  },
  render: function () {
    return (
      <div>
        <div>
          <Pie progress={this.state.progress} />
        </div>
        <input type="range" step="1" value={this.state.progress} onChange={this.handleChange} onMouseUp={this.handleChange} />
      </div>
    );
  }
});
 
ReactDOM.render(
	<SliderAndPie />,
  document.getElementById('container')
);