pie chart sizing

3 files changed, 111 insertions, 98 deletions

diff --git a/client/chart/constants.js b/client/chart/constants.js
index 295b9232..70375ba3 100644
--- a/client/chart/constants.js
+++ b/client/chart/constants.js
@@ -1,3 +1,5 @@
+/* various nice HSL gradients */
+
 export const rainbow = [
   '#9e0142',
   '#d53e4f',
@@ -28,6 +30,35 @@ export const colorblindSafeRainbow = [
   // '#888888',
 ]
 
+export const institutionColors = [
+  '#f2f293', // edu (yellow)
+  '#3264f6', // company (blue)
+  '#f30000', // gov/mil (red)
+]
+
+/* stuff for a 'countries' legend */
+
 export const topCountryCount = 10
 
 export const otherCountriesLabel = 'Other Countries'
+
+/* institution tuples, labels and templates */
+
+export const initialInstitutionLookup = {
+  'edu': 0,
+  'company': 0,
+  'gov': 0,
+}
+
+export const institutionOrder = {
+  'edu': 0,
+  'company': 1,
+  'gov': 2,
+}
+
+export const institutionLabels = {
+  'edu': 'Academic',
+  'company': 'Commercial',
+  'gov': 'Government / Military',
+  'mil': 'Government / Military',
+}
\ No newline at end of file
diff --git a/client/chart/countriesByYear.chart.js b/client/chart/countriesByYear.chart.js
index c846fd0f..4257748c 100644
--- a/client/chart/countriesByYear.chart.js
+++ b/client/chart/countriesByYear.chart.js
@@ -32,7 +32,6 @@ class CountriesByYearChart extends Component {
           years[year][country] += 1
         } else {
           years[year][country] = 1
-          countries[country] = true
         }
       })
     })
diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js
index 998d6758..47f7756c 100644
--- a/client/chart/pie.charts.js
+++ b/client/chart/pie.charts.js
@@ -1,26 +1,27 @@
 import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { toArray } from '../util'
+import { toArray, toTuples } from '../util'
 import C3Chart from 'react-c3js'
 import 'c3/c3.css'
 import './chart.css'
 
-import { rainbow, colorblindSafeRainbow, topCountryCount, otherCountriesLabel } from './constants'
+import {
+  rainbow, colorblindSafeRainbow,
+  topCountryCount, otherCountriesLabel,
+  institutionOrder, institutionLabels, institutionColors,
+  initialInstitutionLookup,
+} from './constants'
 
 class PieCharts extends Component {
   render() {
     const { payload } = this.props
     const { paper, citations } = payload.data
     if (!citations.length) return null
-    const years = {}
     const countries = {}
+    const institutionTypes = { ...initialInstitutionLookup }
     citations.forEach(citation => {
-      let { year, addresses } = citation
-      if (!year || !parseInt(year)) return
-      year = parseInt(year)
-      years[year] = years[year] || {}
-      addresses.forEach(address => {
+      citation.addresses.forEach(address => {
         const { country } = address
         if (!country) return
         if (!(country in countries)) {
@@ -28,105 +29,91 @@ class PieCharts extends Component {
         } else {
           countries[country] += 1
         }
-        if (country in years[year]) {
-          years[year][country] += 1
-        } else {
-          years[year][country] = 1
-          countries[country] = true
+        switch (address.type) {
+          case 'company':
+          case 'edu':
+          case 'gov':
+            institutionTypes[address.type] += 1
+            break
+          case 'mil':
+            institutionTypes['gov'] += 1
+            break
+          default:
+            console.log('weird institution type', address)
+            break
         }
       })
     })
-    let yearList = Object.keys(years).map(year => parseInt(year)).sort()
-    for (let i = yearList[0]; i < yearList[-1]; i++) {
-      if (!(i in years)) {
-        years[i] = {}
-      }
-    }
-    yearList = Object.keys(years).map(year => parseInt(year)).sort()
-
-    Object.keys(countries).forEach(country => {
-      yearList.forEach(year => {
-        if (!(country in years[year])) years[year][country] = 0
-      })
-    })
-
-    // figure out the top N countries in the dataset
-    const countriesByCount = Object.keys(countries).sort((a,b) => countries[b] - countries[a])
-    // console.log(countriesByCount)
-    let topCountries = countriesByCount.slice(0, topCountryCount)
-    let otherCountries = countriesByCount.slice(topCountryCount)
 
-    let citationCountsByYear =
-      [ ['x'].concat(yearList.map(year => String(year))) ]
-        .concat(
-        topCountries
-          .map(country =>
-            [country]
-            .concat(
-              yearList
-              .map(year => years[year][country])
-            )
-          )
-        )
+    const countryTuples = toTuples(countries).sort((a,b) => b[1] - a[1])
+    let countryRows = countryTuples.slice(0, 9)
 
-    citationCountsByYear.push(
-      [otherCountriesLabel].concat(
-        yearList.map(year => otherCountries.reduce((a,b) => (a + years[year][b]), 0))
-      )
-    )
-
-    let maxCitationsInAYear = 0
-    let currentSum = 0
-    // for each year...
-    for (let j = 1; j < citationCountsByYear[0].length; j++) {
-      // for each country
-      currentSum = 0
-      for (let i = 1; i < citationCountsByYear.length; i++) {
-        currentSum += citationCountsByYear[i][j]
-      }
-      maxCitationsInAYear = Math.max(currentSum, maxCitationsInAYear)
+    const otherCountryCount = countryTuples.slice(9).reduce((a,b) => (a + b[1]), 0)
+    if (otherCountryCount > 0) {
+      countryRows.push([
+        otherCountriesLabel,
+        otherCountryCount,
+      ])
     }
+    console.log(countryTuples, otherCountryCount, countryRows)
 
-    let ticks = []
-    for (let i = 0; i < maxCitationsInAYear; i += 50) {
-      ticks.push(i)
-    }
-    if (ticks[ticks.length - 1] < maxCitationsInAYear) {
-      ticks.push('')
-    }
+    const institutionRows = toTuples(institutionTypes)
+      .map(a => [institutionOrder[a[0]], a])
+      .sort((a,b) => a[0] - b[0])
+      .map(a => a[1])
+      .map(a => [institutionLabels[a[0]], a[1]])
 
     const colorPattern = rainbow
 
     return (
       <div className='chart'>
-        <C3Chart
-          data={{
-            x: 'x',
-            columns: citationCountsByYear,
-            type: 'bar',
-            groups: [ topCountries.concat(otherCountriesLabel) ],
-          }}
-          axis={{
-            x: {
-              type: 'category' // this needed to load string x value
-            },
-            y: {
-              show: false,
-            },
-            y2: {
-              tick: {
-                values: ticks,
-              },
-              default: [ 0, maxCitationsInAYear * 286 / 261 ],
-              show: true,
-            }
-          }}
+        <div>
+          <C3Chart
+            data={{
+              columns: countryRows,
+              type: 'pie',
+            }}
+            color={{
+              pattern: rainbow,
+            }}
+            tooltip={{
+              format: {
+                value: value => value,
+              }
+            }}
+            size={{
+              height: 336,
+            }}
+          />
+        </div>
+        <div>
+          <C3Chart
+            data={{
+              columns: institutionRows,
+              type: 'pie',
+            }}
+            color={{
+              pattern: institutionColors,
+            }}
+            tooltip={{
+              format: {
+                value: value => value,
+              }
+            }}
+            size={{
+              height: 316,
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+/*
           legend={{
             position: 'right'
           }}
-          color={{
-            pattern: colorPattern
-          }}
           tooltip={{
             contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
               const countriesByYearLookup = years[yearList[d[0].x]]
@@ -158,10 +145,6 @@ class PieCharts extends Component {
               ].join('')
             }
           }}
-        />
-      </div>
-    )
-  }
-}
+*/
 
 export default PieCharts