diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/chart/constants.js | 18 | ||||
| -rw-r--r-- | client/chart/singlePie.chart.js | 18 | ||||
| -rw-r--r-- | client/table/citations.table.js | 16 |
3 files changed, 32 insertions, 20 deletions
diff --git a/client/chart/constants.js b/client/chart/constants.js index b916cbd2..6fe94433 100644 --- a/client/chart/constants.js +++ b/client/chart/constants.js @@ -15,6 +15,24 @@ export const rainbow = [ // '#888888', ] +export const bigRainbow = [ + '#9e0142', + '#d53e4f', + '#f46d43', + '#fdae61', + '#fee08b', + '#ffffbf', + '#e6f598', + '#abdda4', + '#66c2a5', + '#3288bd', + '#5e4fa2', + '#8744ae', + '#a044ae', + '#b342a4', + '#b34287', + // '#888888', +] export const colorblindSafeRainbow = [ '#a50026', '#d73027', diff --git a/client/chart/singlePie.chart.js b/client/chart/singlePie.chart.js index fcff3214..ed2da582 100644 --- a/client/chart/singlePie.chart.js +++ b/client/chart/singlePie.chart.js @@ -2,15 +2,11 @@ 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, + rainbow, bigRainbow } from './constants' class SinglePieChart extends Component { @@ -45,7 +41,6 @@ class SinglePieChart extends Component { } render() { - const { payload } = this.props const { keys, data, fields } = this.state console.log(keys, data) const [labelField, numberField] = keys @@ -59,15 +54,14 @@ class SinglePieChart extends Component { 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) + let otherCount = rows.slice(rowsToDisplay).reduce((a, b) => a + b[1], 0) if (otherCount > 0) { chartRows.push([fields.OtherLabel, otherCount]) } - console.log(rowsToDisplay, chartRows) + const height = chartRows.length < 6 ? 316 : + chartRows.length < 10 ? 336 : 356 return ( <div className='chart'> @@ -78,7 +72,7 @@ class SinglePieChart extends Component { type: 'pie', }} color={{ - pattern: rainbow, + pattern: chartRows.length < 10 ? rainbow : bigRainbow, }} tooltip={{ format: { @@ -86,7 +80,7 @@ class SinglePieChart extends Component { } }} size={{ - height: chartRows.length < 4 ? 316 : 336, + height, }} /> <span className='chartCaption'>{fields.Caption}</span> diff --git a/client/table/citations.table.js b/client/table/citations.table.js index 8fe46b69..ef5ab0b5 100644 --- a/client/table/citations.table.js +++ b/client/table/citations.table.js @@ -64,12 +64,12 @@ class CitationsTable extends Component { if (!q.length) { this.setState({ q, filteredCitations: formattedCitations }) } else { - let q_re = new RegExp('(' + q.replace(/\s+/g, ' ').trim().replace(' ', '|') + ')', 'gi') + let qRe = new RegExp('(' + q.replace(/\s+/g, ' ').trim().replace(' ', '|') + ')', 'gi') let filteredCitations = formattedCitations.filter(citation => ( - citation.title.match(q_re) || - citation.institution.match(q_re) || - citation.country.match(q_re) - )) + citation.title.match(qRe) || + citation.institution.match(qRe) || + citation.country.match(qRe) + )) this.setState({ q, filteredCitations }) } } @@ -85,7 +85,7 @@ class CitationsTable extends Component { case 'number': return String(data) default: - return '\"' + String(data) + '\"' + return '"' + String(data) + '"' } }) return row.join(",") @@ -96,8 +96,8 @@ class CitationsTable extends Component { titles.join(','), ...rows, ].join('\n') - ], {type: "text/csv;charset=utf-8"}); - saveAs(blob, fn); + ], { type: "text/csv;charset=utf-8" }) + saveAs(blob, fn) } render() { |
