adding chart... whole verify app working nicer

1 files changed, 26 insertions, 6 deletions

diff --git a/scraper/client/paper/paper.info.js b/scraper/client/paper/paper.info.js
index b4fe54ba..25f4472f 100644
--- a/scraper/client/paper/paper.info.js
+++ b/scraper/client/paper/paper.info.js
@@ -3,17 +3,40 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import * as actions from '../actions'
-
 import { TableObject } from '../common'
+import { USES_DATASET } from '../types'
+
+import PaperChart from './paper.chart'
 
 class PaperInfo extends Component {
   render() {
-    const { paperInfo, unknownCitations } = this.props.api
+    const { paperInfo, sortedCitations, unknownCitations } = this.props.api
     const { dataset, paper, address } = paperInfo
     if (!dataset) return null
+
+    let counts = {}
+    const citationLabels = ['Uses Dataset', 'Doesn\'t Use Dataset', 'Not Enough Information', 'Unknown']
+    const citationCountOrder = [ USES_DATASET.YES, USES_DATASET.NO, USES_DATASET.UNKNOWN, USES_DATASET.NO_DATA ]
+    citationCountOrder.forEach(v => counts[v] = 0)
+
+    sortedCitations.forEach(c => counts[c.verified] += 1)
+
+    let citationCounts = {}
+    let citationRows = []
+    citationCountOrder.forEach((v, i) => {
+      const count = counts[v]
+      const label = citationLabels[i]
+      citationCounts[label] = count
+      citationRows.push([ label, count ])
+    })
+
     return (
       <div className='paperInfo'>
         <h2>{dataset.name_full}</h2>
+        <PaperChart
+          rows={citationRows}
+          title={'Dataset coverage'}
+        />
         <TableObject summary
           tag="Dataset"
           object={dataset}
@@ -43,10 +66,7 @@ class PaperInfo extends Component {
         />
         <TableObject summary
           tag="Citations"
-          object={{
-            'geocoded': paperInfo.citations.length,
-            'unknown': unknownCitations.citations ? unknownCitations.citations.length : 'Loading',
-          }}
+          object={citationCounts}
         />
       </div>
     )