Merge branch 'master' of asdf.us:megapixels_dev

1 files changed, 83 insertions, 0 deletions

diff --git a/scraper/client/paper/paper.chart.js b/scraper/client/paper/paper.chart.js
new file mode 100644
index 00000000..01d8d0e8
--- /dev/null
+++ b/scraper/client/paper/paper.chart.js
@@ -0,0 +1,83 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { toArray, toTuples } from '../util'
+import C3Chart from 'react-c3js'
+import 'c3/c3.css'
+
+class PaperChart extends Component {
+  render() {
+    const { rows, title } = this.props
+    if (!rows.length) return null
+    const colorPattern = [
+      "#00b200",
+      "#ff0000",
+      "#e0c200",
+      "#dddddd",
+    ]
+
+    return (
+      <div className='chart'>
+        <div>
+          <C3Chart
+            data={{
+              columns: rows,
+              type: 'pie',
+            }}
+            color={{
+              pattern: colorPattern,
+            }}
+            tooltip={{
+              format: {
+                value: value => value,
+              }
+            }}
+            size={{
+              height: rows.length < 4 ? 316 : 336,
+            }}
+          />
+          <span className='chartCaption'>{title}</span>
+        </div>
+      </div>
+    )
+  }
+}
+
+/*
+          legend={{
+            position: 'right'
+          }}
+          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.filter(pair => !!pair[1]).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('')
+            }
+          }}
+*/
+
+export default PaperChart