2 files changed, 64 insertions, 35 deletions

diff --git a/client/chart/constants.js b/client/chart/constants.js
index b916cbd2..0f23f06b 100644
--- a/client/chart/constants.js
+++ b/client/chart/constants.js
@@ -15,6 +15,24 @@ export const rainbow = [
   // '#888888',
 ]
 
+export const bigRainbow = [
+  '#9e0142',
+  '#d53e4f',
+  '#f46d43',
+  '#fdae61',
+  '#fee08b',
+  '#ffffbf',
+  '#e6f598',
+  '#abdda4',
+  '#66c2a5',
+  '#3288bd',
+  '#5e4fa2',
+  '#8744ae',
+  '#a044ae',
+  '#b342a4',
+  '#b34287',
+  // '#888888',
+]
 export const colorblindSafeRainbow = [
   '#a50026',
   '#d73027',
@@ -30,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
@@ -45,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 fcff3214..2e770bd7 100644
--- a/client/chart/singlePie.chart.js
+++ b/client/chart/singlePie.chart.js
@@ -2,41 +2,28 @@ 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,
+  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)
@@ -45,9 +32,9 @@ class SinglePieChart extends Component {
   }
 
   render() {
-    const { payload } = this.props
-    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
 
@@ -59,15 +46,16 @@ class SinglePieChart extends Component {
       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)
+    let otherCount = rows.slice(rowsToDisplay).reduce((a, b) => a + b[1], 0)
     if (otherCount > 0) {
       chartRows.push([fields.OtherLabel, otherCount])
     }
 
-    console.log(rowsToDisplay, chartRows)
+    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'>
@@ -78,7 +66,7 @@ class SinglePieChart extends Component {
               type: 'pie',
             }}
             color={{
-              pattern: rainbow,
+              pattern,
             }}
             tooltip={{
               format: {
@@ -86,7 +74,7 @@ class SinglePieChart extends Component {
               }
             }}
             size={{
-              height: chartRows.length < 4 ? 316 : 336,
+              height,
             }}
           />
           <span className='chartCaption'>{fields.Caption}</span>