From 213c89c7ff478e3fba73b0efbfd88cc084ceb43c Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 27 Jun 2019 19:01:55 -0400
Subject: adding single pie chart

---
 client/chart/singlePie.chart.js | 99 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 client/chart/singlePie.chart.js

(limited to 'client/chart/singlePie.chart.js')

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
-- 
cgit v1.2.3-70-g09d2