JSFiddle - React, Tailwind, and code Playground

by Mohamed Mulla

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

'use strict';

var PropTypes = React.PropTypes;

/**
 * Generates an SVG pie chart.
 * @see {http://wiki.scribus.net/canvas/Making_a_Pie_Chart}
 */
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 },

  /**
   * @return {Object}
   */
  getDefaultProps: function getDefaultProps() {
    return {
      size: 200 };
  },

  /**
   * @param {Number} degrees
   * @return {Number} radians
   */
  _degreesToRadians: function _degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
  },

  /**
   * @return {Object[]}
   */
  _renderPaths: function _renderPaths() {
    var _this = this;

    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;
    }, 0);

    var segment = 0;
    var lastX = radius;
    var lastY = 0;

    return this.props.slices.map(function (slice, index) {
      var color = slice.color;
      var value = slice.value;

      // Should we just draw a circle?
      if (value === total) {
        return React.createElement('circle', {
          r: radius,
          cx: radius,
          cy: radius,
          fill: color,
          key: index
        });
      }

      if (value === 0) {
        return;
      }

      var valuePercentage = value / total;

      // Should the arc go the long way round?
      var longArc = valuePercentage <= 0.5 ? 0 : 1;

      segment += valuePercentage * 360;

      // We need to convert to radians for cosine and sine functions.
      var radSegment = _this._degreesToRadians(segment);
      var nextX = Math.round(Math.cos(radSegment) * radius);
      var nextY = Math.round(Math.sin(radSegment) * radius);

      // d is...