adding single pie chart

3 files changed, 106 insertions, 9 deletions

diff --git a/client/chart/index.js b/client/chart/index.js
index 27650020..690b4975 100644
--- a/client/chart/index.js
+++ b/client/chart/index.js
@@ -1,7 +1,9 @@
 import CountriesByYear from './countriesByYear.chart'
 import PieCharts from './pie.charts'
+import SinglePieChart from './singlePie.chart'
 
 export {
   CountriesByYear,
   PieCharts,
+  SinglePieChart,
 }
diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js
index 939e9262..a73c953e 100644
--- a/client/chart/pie.charts.js
+++ b/client/chart/pie.charts.js
@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { toArray, toTuples } from '../util'
 import C3Chart from 'react-c3js'
+import { toTuples } from '../util'
 import 'c3/c3.css'
 import './chart.css'
 
@@ -38,7 +36,7 @@ class PieCharts extends Component {
             institutionTypes[address.type] += 1
             break
           case 'mil':
-            institutionTypes['gov'] += 1
+            institutionTypes.gov += 1
             break
           default:
             console.log('weird institution type', address)
@@ -47,10 +45,10 @@ class PieCharts extends Component {
       })
     })
 
-    const countryTuples = toTuples(countries).sort((a,b) => b[1] - a[1])
+    const countryTuples = toTuples(countries).sort((a, b) => b[1] - a[1])
     let countryRows = countryTuples.slice(0, 10)
 
-    const otherCountryCount = countryTuples.slice(10).reduce((a,b) => (a + b[1]), 0)
+    const otherCountryCount = countryTuples.slice(10).reduce((a, b) => (a + b[1]), 0)
     if (otherCountryCount > 0) {
       countryRows.push([
         otherCountriesLabel,
@@ -61,12 +59,10 @@ class PieCharts extends Component {
 
     const institutionRows = toTuples(institutionTypes)
       .map(a => [institutionOrder[a[0]], a])
-      .sort((a,b) => a[0] - b[0])
+      .sort((a, b) => a[0] - b[0])
       .map(a => a[1])
       .map(a => [institutionLabels[a[0]], a[1]])
 
-    const colorPattern = rainbow
-
     return (
       <div className='chart'>
         <div>
diff --git a/client/chart/singlePie.chart.js b/client/chart/singlePie.chart.js
new file mode 100644
index 00000000..fcff3214
--- /dev/null
+++ b/client/chart/singlePie.chart.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import csv from 'parse-csv'
+import C3Chart from 'react-c3js'
+
+import { toTuples } from '../util'
+
+import 'c3/c3.css'
+import './chart.css'
+
+import {
+  rainbow, otherCountriesLabel,
+  institutionOrder, institutionLabels,
+  initialInstitutionLookup,
+} from './constants'
+
+class SinglePieChart extends Component {
+  state = {
+    keys: [],
+    data: [],
+    fields: {},
+  }
+
+  componentDidMount() {
+    const { payload } = this.props
+    console.log(payload)
+    console.log(payload.fields)
+    const fields = {}
+    payload.fields.forEach(field => {
+      const [k, v] = field.split(': ')
+      fields[k] = v
+    })
+
+    fetch(payload.url, { mode: 'cors' })
+      .then(r => r.text())
+      .then(text => {
+        try {
+          const keys = text.split('\n')[0].split(',').map(s => s.trim().replace(/"/, ''))
+          const data = csv.toJSON(text, { headers: { included: true } })
+          this.setState({ keys, data, fields })
+        } catch (e) {
+          console.error("error making json:", payload.url)
+          console.error(e)
+        }
+      })
+  }
+
+  render() {
+    const { payload } = this.props
+    const { keys, data, fields } = this.state
+    console.log(keys, data)
+    const [labelField, numberField] = keys
+    if (!data.length) return null
+
+    const rowsToDisplay = parseInt(fields.Top, 10)
+
+    const rows = data.map(row => {
+      const label = row[labelField]
+      const number = parseFloat(row[numberField])
+      return [label, number]
+    }).sort((a, b) => b[1] - a[1])
+
+    console.log(rows)
+
+    let chartRows = rows.slice(0, rowsToDisplay)
+    let otherCount = rows.slice(rowsToDisplay).reduce((a, b) => { return a + b[1] }, 0)
+    if (otherCount > 0) {
+      chartRows.push([fields.OtherLabel, otherCount])
+    }
+
+    console.log(rowsToDisplay, chartRows)
+
+    return (
+      <div className='chart'>
+        <div>
+          <C3Chart
+            data={{
+              columns: chartRows,
+              type: 'pie',
+            }}
+            color={{
+              pattern: rainbow,
+            }}
+            tooltip={{
+              format: {
+                value: value => value,
+              }
+            }}
+            size={{
+              height: chartRows.length < 4 ? 316 : 336,
+            }}
+          />
+          <span className='chartCaption'>{fields.Caption}</span>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default SinglePieChart