petebrowne

// BEM mixins for laying out modules.
// Based on:
//
// https://medium.com/@marcmintel/pushing-bem-to-the-next-level-with-sass-3-4-5239d2371321

$element-separator: '__' !default;
$modifier-separator: '--' !default;

// Creates a "block" in a BEM module.
//

petebrowne

class Slice extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isHovered: false};
    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseOut = this.onMouseOut.bind(this);
  }

  onMouseOver() {
    this.setState({isHovered: true});

petebrowne

render() {
  let {value, label, fill, innerRadius = 0, outerRadius, cornerRadius, padAngle} = this.props;
  let arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .cornerRadius(cornerRadius)
    .padAngle(padAngle);
  return (/* */);
}

petebrowne

renderSlice(value, i) {
  let {innerRadius, outerRadius, cornerRadius, padAngle} = this.props;
  return (
    <Slice key={i}
           innerRadius={innerRadius}
           outerRadius={outerRadius}
           cornerRadius={cornerRadius}
           padAngle={padAngle}
           value={value}
           label={value.data}

petebrowne

<svg width="100%" height="100%">
  <Pie x={x}
       y={y}
       innerRadius={radius * .35}
       outerRadius={radius}
       cornerRadius={7}
       padAngle={.02}
       data={this.props.data} />
</svg>

petebrowne

class Slice extends React.Component {
  render() {
    let {value, label, fill, innerRadius = 0, outerRadius} = this.props;
    let arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);
    return (
      <g>
        <path d={arc(value)} fill={fill} />
        {/* https://github.com/d3/d3/wiki/SVG-Shapes#arc_centroid */}

petebrowne

renderSlice(value, i) {
  return (
    <Slice key={i}
           outerRadius={this.props.radius}
           value={value}
           label={value.data}
           fill={this.colorScale(i)} />
  );
}

petebrowne

class Slice extends React.Component {
  render() {
    let {value, fill, innerRadius = 0, outerRadius} = this.props;
    // https://github.com/d3/d3/wiki/SVG-Shapes#arc
    let arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);
    return (
      <path d={arc(value)} fill={fill} />
    );

petebrowne

class Pie extends React.Component {
  constructor(props) {
    super(props);
    // https://github.com/d3/d3/wiki/Ordinal-Scales#category10
    this.colorScale = d3.scale.category10();
    this.renderSlice = this.renderSlice.bind(this);
  }

  render() {
    let {x, y, data} = this.props;

petebrowne

class App extends React.Component {
  render() {
    // For a real world project, use something like
    // https://github.com/digidem/react-dimensions
    let width = window.innerWidth;
    let height = window.innerHeight;
    let minViewportSize = Math.min(width, height);
    // This sets the radius of the pie chart to fit within
    // the current window size, with some additional padding
    let radius = (minViewportSize * .9) / 2;