more options... add download csv link and search

1 files changed, 8 insertions, 14 deletions

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: {