more options... add download csv link and search

2 files changed, 42 insertions, 25 deletions

diff --git a/client/chart/constants.js b/client/chart/constants.js
index 6fe94433..0f23f06b 100644
--- a/client/chart/constants.js
+++ b/client/chart/constants.js
@@ -48,12 +48,35 @@ export const colorblindSafeRainbow = [
   // '#888888',
 ]
 
+export const categoryRainbow = [
+  '#5e4fa2',
+  '#66c2a5',
+  '#d53e4f',
+  '#f46d43',
+  '#9e0142',
+  '#3288bd',
+  '#fee08b',
+  '#abdda4',
+  '#e6f598',
+  '#fdae61',
+  '#ffffbf',
+  // '#888888',
+]
+
 export const institutionColors = [
   '#f2f293', // edu (yellow)
   '#3264f6', // company (blue)
   '#f30000', // gov/mil (red)
 ]
 
+export const colorTable = {
+  rainbow,
+  bigRainbow,
+  colorblindSafeRainbow,
+  institutionColors,
+  categoryRainbow,
+}
+
 /* stuff for a 'countries' legend */
 
 export const topCountryCount = 10
@@ -63,20 +86,20 @@ export const otherCountriesLabel = 'Other Countries'
 /* institution tuples, labels and templates */
 
 export const initialInstitutionLookup = {
-  'edu': 0,
-  'company': 0,
-  'gov': 0,
+  edu: 0,
+  company: 0,
+  gov: 0,
 }
 
 export const institutionOrder = {
-  'edu': 0,
-  'company': 1,
-  'gov': 2,
+  edu: 0,
+  company: 1,
+  gov: 2,
 }
 
 export const institutionLabels = {
-  'edu': 'Academic',
-  'company': 'Commercial',
-  'gov': 'Military / Government',
-  'mil': 'Military / Government',
-}
\ No newline at end of file
+  edu: 'Academic',
+  company: 'Commercial',
+  gov: 'Military / Government',
+  mil: 'Military / Government',
+}
diff --git a/client/chart/singlePie.chart.js b/client/chart/singlePie.chart.js
index ed2da582..2e770bd7 100644
--- a/client/chart/singlePie.chart.js
+++ b/client/chart/singlePie.chart.js
@@ -6,33 +6,24 @@ import 'c3/c3.css'
 import './chart.css'
 
 import {
-  rainbow, bigRainbow
+  rainbow, bigRainbow, colorTable
 } 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 })
+          this.setState({ keys, data })
         } catch (e) {
           console.error("error making json:", payload.url)
           console.error(e)
@@ -41,8 +32,9 @@ class SinglePieChart extends Component {
   }
 
   render() {
-    const { keys, data, fields } = this.state
-    console.log(keys, data)
+    const { fields } = this.props.payload
+    const { keys, data } = this.state
+    // console.log(keys, data)
     const [labelField, numberField] = keys
     if (!data.length) return null
 
@@ -63,6 +55,8 @@ class SinglePieChart extends Component {
     const height = chartRows.length < 6 ? 316 :
       chartRows.length < 10 ? 336 : 356
 
+    const pattern = colorTable[fields.Colors] || (chartRows.length < 10 ? rainbow : bigRainbow)
+
     return (
       <div className='chart'>
         <div>
@@ -72,7 +66,7 @@ class SinglePieChart extends Component {
               type: 'pie',
             }}
             color={{
-              pattern: chartRows.length < 10 ? rainbow : bigRainbow,
+              pattern,
             }}
             tooltip={{
               format: {