chart!

1 files changed, 200 insertions, 0 deletions

diff --git a/client/chart/chart.container.js b/client/chart/chart.container.js
new file mode 100644
index 00000000..cbfc4de1
--- /dev/null
+++ b/client/chart/chart.container.js
@@ -0,0 +1,200 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { toArray } from '../util'
+import C3Chart from 'react-c3js'
+import 'c3/c3.css'
+import './chart.css'
+
+const rainbow = [
+  '#9e0142',
+  '#d53e4f',
+  '#f46d43',
+  '#fdae61',
+  '#fee08b',
+  '#e6f598',
+  '#abdda4',
+  '#66c2a5',
+  '#3288bd',
+  '#5e4fa2',
+  // '#888888',
+]
+
+const colorblindSafeRainbow = [
+  '#a50026',
+  '#d73027',
+  '#f46d43',
+  '#fdae61',
+  '#fee090',
+  '#e0f3f8',
+  '#abd9e9',
+  '#74add1',
+  '#4575b4',
+  '#313695',
+  // '#888888',
+]
+
+const topCountryCount = 9
+
+const otherCountriesLabel = 'Other Countries'
+
+class ChartContainer extends Component {
+  state = {
+  }
+
+  render() {
+    const { payload } = this.props
+    const { paper, citations } = payload.data
+    if (!citations.length) return null
+    const years = {}
+    const countries = {}
+    citations.forEach(citation => {
+      let { year, addresses } = citation
+      if (!year || !parseInt(year)) return
+      year = parseInt(year)
+      years[year] = years[year] || {}
+      addresses.forEach(address => {
+        const { country } = address
+        if (!country) return
+        if (!(country in countries)) {
+          countries[country] = 1
+        } else {
+          countries[country] += 1
+        }
+        if (country in years[year]) {
+          years[year][country] += 1
+        } else {
+          years[year][country] = 1
+          countries[country] = true
+        }
+      })
+    })
+    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])
+            )
+          )
+        )
+
+    citationCountsByYear.push(
+      [otherCountriesLabel].concat(
+        yearList.map(year => otherCountries.reduce((a,b) => (a + years[year][b]), 0))
+      )
+    )
+
+    const maxCitationsInAYear = citationCountsByYear
+      .slice(1)
+      .reduce((a,b) => (
+        Math.max(
+          a,
+          b.slice(1).reduce((a2, b2) => (
+              a2 + b2
+            ),
+            0)
+          )
+        ), 0)
+
+    let ticks = []
+    for (let i = 0; i < maxCitationsInAYear; i += 50) {
+      ticks.push(i)
+    }
+    if (ticks[ticks.length - 1] < maxCitationsInAYear) {
+      ticks.push('')
+    }
+
+    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 ],
+              show: true,
+            }
+          }}
+          legend={{
+            position: 'right'
+          }}
+          color={{
+            pattern: colorPattern
+          }}
+          tooltip={{
+            contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
+              const countriesByYearLookup = years[yearList[d[0].x]]
+              let countriesByYear = Object.keys(countriesByYearLookup).map(country => [country, countriesByYearLookup[country]]).sort((a,b) => b[1] - a[1])
+              let topCountriesForThisYear = countriesByYear.slice(0, topCountryCount)
+              let bottomTotal = countriesByYear.slice(topCountryCount).reduce((a,b) => (a + b[1]), 0)
+              console.log(topCountriesForThisYear)
+              topCountriesForThisYear.push([otherCountriesLabel, bottomTotal])
+              const tableRows = topCountriesForThisYear.map(([country, total]) => {
+                let colorIndex = topCountries.indexOf(country)
+                if (colorIndex < 0) colorIndex = colorPattern.length - 1
+                const color = colorPattern[ colorIndex ]
+                return [
+                  "<tr>",
+                  "<td>",
+                    "<span style='background-color:" + color + "' class='swatch'></span>",
+                    country,
+                  "</td>",
+                  "<td>",
+                    total,
+                  "</td>",
+                  "</tr>",
+                ].join('')
+              })
+              return [
+                "<table class='c3-tooltip'>",
+                ...tableRows,
+                "</table>",
+              ].join('')
+            }
+          }}
+        />
+      </div>
+    )
+  }
+}
+
+export default ChartContainer