From 213c89c7ff478e3fba73b0efbfd88cc084ceb43c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Jun 2019 19:01:55 -0400 Subject: adding single pie chart --- client/applet.js | 4 +- client/chart/index.js | 2 + client/chart/pie.charts.js | 14 +++--- client/chart/singlePie.chart.js | 99 +++++++++++++++++++++++++++++++++++++++++ client/index.js | 2 +- client/table/file.table.js | 2 +- 6 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 client/chart/singlePie.chart.js (limited to 'client') diff --git a/client/applet.js b/client/applet.js index ebc0e3fc..5cfa6e3e 100644 --- a/client/applet.js +++ b/client/applet.js @@ -5,7 +5,7 @@ import React, { Component } from 'react' // import { Container as NameSearchContainer } from './nameSearch' import { Container as DatasetListContainer } from './datasetList' import { CitationsTable, FileTable } from './table' -import { CountriesByYear, PieCharts } from './chart' +import { CountriesByYear, PieCharts, SinglePieChart } from './chart' export default class Applet extends Component { render() { @@ -23,6 +23,8 @@ export default class Applet extends Component { return case 'piechart': return + case 'single_pie_chart': + return case 'citations': return case 'load_file': diff --git a/client/chart/index.js b/client/chart/index.js index 27650020..690b4975 100644 --- a/client/chart/index.js +++ b/client/chart/index.js @@ -1,7 +1,9 @@ import CountriesByYear from './countriesByYear.chart' import PieCharts from './pie.charts' +import SinglePieChart from './singlePie.chart' export { CountriesByYear, PieCharts, + SinglePieChart, } diff --git a/client/chart/pie.charts.js b/client/chart/pie.charts.js index 939e9262..a73c953e 100644 --- a/client/chart/pie.charts.js +++ b/client/chart/pie.charts.js @@ -1,8 +1,6 @@ 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 { toTuples } from '../util' import 'c3/c3.css' import './chart.css' @@ -38,7 +36,7 @@ class PieCharts extends Component { institutionTypes[address.type] += 1 break case 'mil': - institutionTypes['gov'] += 1 + institutionTypes.gov += 1 break default: console.log('weird institution type', address) @@ -47,10 +45,10 @@ class PieCharts extends Component { }) }) - const countryTuples = toTuples(countries).sort((a,b) => b[1] - a[1]) + const countryTuples = toTuples(countries).sort((a, b) => b[1] - a[1]) let countryRows = countryTuples.slice(0, 10) - const otherCountryCount = countryTuples.slice(10).reduce((a,b) => (a + b[1]), 0) + const otherCountryCount = countryTuples.slice(10).reduce((a, b) => (a + b[1]), 0) if (otherCountryCount > 0) { countryRows.push([ otherCountriesLabel, @@ -61,12 +59,10 @@ class PieCharts extends Component { const institutionRows = toTuples(institutionTypes) .map(a => [institutionOrder[a[0]], a]) - .sort((a,b) => a[0] - b[0]) + .sort((a, b) => a[0] - b[0]) .map(a => a[1]) .map(a => [institutionLabels[a[0]], a[1]]) - const colorPattern = rainbow - return (
diff --git a/client/chart/singlePie.chart.js b/client/chart/singlePie.chart.js new file mode 100644 index 00000000..fcff3214 --- /dev/null +++ b/client/chart/singlePie.chart.js @@ -0,0 +1,99 @@ +import React, { Component } from 'react' +import csv from 'parse-csv' +import C3Chart from 'react-c3js' + +import { toTuples } from '../util' + +import 'c3/c3.css' +import './chart.css' + +import { + rainbow, otherCountriesLabel, + institutionOrder, institutionLabels, + initialInstitutionLookup, +} 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 }) + } catch (e) { + console.error("error making json:", payload.url) + console.error(e) + } + }) + } + + render() { + const { payload } = this.props + const { keys, data, fields } = this.state + console.log(keys, data) + const [labelField, numberField] = keys + if (!data.length) return null + + const rowsToDisplay = parseInt(fields.Top, 10) + + const rows = data.map(row => { + const label = row[labelField] + const number = parseFloat(row[numberField]) + return [label, number] + }).sort((a, b) => b[1] - a[1]) + + console.log(rows) + + let chartRows = rows.slice(0, rowsToDisplay) + let otherCount = rows.slice(rowsToDisplay).reduce((a, b) => { return a + b[1] }, 0) + if (otherCount > 0) { + chartRows.push([fields.OtherLabel, otherCount]) + } + + console.log(rowsToDisplay, chartRows) + + return ( +
+
+ value, + } + }} + size={{ + height: chartRows.length < 4 ? 316 : 336, + }} + /> + {fields.Caption} +
+
+ ) + } +} + +export default SinglePieChart diff --git a/client/index.js b/client/index.js index e0f7d270..835d859c 100644 --- a/client/index.js +++ b/client/index.js @@ -73,7 +73,7 @@ function runApplets() { let opt = null payload.cmd = cmd payload.partz = cmdPartz - if (payload.cmd === 'load_file') { + if (payload.cmd === 'load_file' || payload.cmd === 'single_pie_chart') { payload.url = 'https://nyc3.digitaloceanspaces.com/megapixels/v1' + cmdPartz.shift() return [el, payload] } diff --git a/client/table/file.table.js b/client/table/file.table.js index db53243a..ff6c0af6 100644 --- a/client/table/file.table.js +++ b/client/table/file.table.js @@ -14,7 +14,7 @@ class FileTable extends Component { data: [], columns: [], } - + componentDidMount() { const { payload } = this.props console.log(payload.url) -- cgit v1.2.3-70-g09d2