import React, { Component, PropTypes } from 'react';

class DataTable extends Component {
  render() {
    const {numDistricts, precinctStates} = this.props;
    const districtSize = precinctStates.length / numDistricts;

    const districtSizes = Array(numDistricts+1).fill(0);
    precinctStates.forEach(p => {districtSizes[p] += 1;});

    return <div className="data-container">
      {Object.entries(districtSizes).map(
        ([d, size]) => <span key={d} className="data-line">
          {d === "0" ?
            `Unassigned: ${size}` :
            `District ${d}: ${size}/${districtSize}`}
        </span>)}
    </div>;
  }
}

DataTable.propTypes = {
  numDistricts: PropTypes.number.isRequired,
  precinctStates: PropTypes.arrayOf(PropTypes.number).isRequired
}

export default DataTable;

@@ -120,16 +120,27 @@
 stricts,
+ precincts,
  precinc
@@ -168,32 +168,29 @@
 ;%0A    const 
-district
+ideal
 Size = preci
@@ -245,102 +245,361 @@
 rict
-Sizes = Array(numDistricts+1).fill(0);%0A    precinctStates.forEach(p =%3E %7BdistrictSizes%5Bp%5D += 1;
+Info = %7B%7D;%0A    precincts.forEach((p, i) =%3E %7B%0A        const district = precinctStates%5Bi%5D;%0A        districtInfo%5Bdistrict%5D = districtInfo%5Bdistrict%5D %7C%7C %7B%0A            size: 0,%0A            parties: %7BR: 0, D: 0%7D%0A        %7D;%0A        districtInfo%5Bdistrict%5D.size += 1;%0A        if (p.party) %7B%0A            districtInfo%5Bdistrict%5D.parties%5Bp.party%5D += 1;%0A        %7D%0A    
 %7D);%0A
@@ -677,13 +677,12 @@
 rict
-Sizes
+Info
 ).ma
@@ -697,20 +697,20 @@
    (%5Bd, 
-size
+info
 %5D) =%3E %3Cs
@@ -790,24 +790,29 @@
 assigned: $%7B
+info.
 size%7D%60 :%0A   
@@ -842,16 +842,21 @@
 : $%7B
+info.
 size%7D/$%7B
 dist
@@ -855,22 +855,168 @@
 %7D/$%7B
-districtSize%7D%60
+idealSize%7D%60%7D%0A          %7Bd !== %220%22 && (info.parties.R %7C%7C info.parties.D) ? /* TODO: colors */%0A            %60; $%7Binfo.parties.R%7D red/$%7Binfo.parties.D%7D blue%60 : null
 %7D%0A  

Add party totals