1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import React, { Component } from 'react'
import { ReactTabulator } from 'react-tabulator'
import csv from 'parse-csv'
import { domainFromUrl } from '../util'
import { Loader } from '../common'
class FileTable extends Component {
state = {
keys: [],
data: [],
filteredData: [],
columns: [],
q: '',
}
componentDidMount() {
const { payload } = this.props
console.log(payload.url)
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 } })
// console.log(data)
const columns = this.getColumns(keys, data, payload.fields)
this.setState({ keys, data, filteredData: data, columns })
} catch (e) {
console.error("error making json:", payload.url)
console.error(e)
}
})
}
getColumns(keys, data, fields) {
let titles = fields.Headings ? fields.Headings.split(', ') : keys
// let numberFields = []
let columns = keys.map((field, i) => {
const title = titles[i] || field
let widthGrow = 1
if (field.match('url')) {
let textField = field.replace('url', 'label')
data.forEach(el => el[textField] = domainFromUrl(el[field]))
return {
title,
field: textField,
formatter: 'link',
formatterParams: { target: "_blank", urlField: field },
sorter: 'string'
}
}
if (title === 'Embassy') {
widthGrow = 2
}
switch (field) {
case 'images':
case 'year':
return { title, field: field.toLowerCase(), sorter: 'number' }
default:
return { title, field: field.toLowerCase(), sorter: 'string', widthGrow }
}
})
return columns
}
updateFilter(q) {
const { keys, data } = this.state
if (!q.length) {
this.setState({ q, filteredData: data })
} else {
let qRe = new RegExp('(' + q.replace(/\s+/g, ' ').trim().replace(' ', '|') + ')', 'gi')
let filteredData = data.filter(row => keys.some(key => row[key].match(qRe)))
this.setState({ q, filteredData })
}
}
render() {
const { payload } = this.props
const { q, columns, data, filteredData } = this.state
if (!this.state.data.length) {
return <Loader />
}
const fn = payload.url.split('/').pop()
return (
<div className='citationBrowser'>
<div className='citationHeader'>
<input
type="text"
value={q}
onChange={e => this.updateFilter(e.target.value)}
className='q'
placeholder='Enter text to search data'
/>
<a className='download' href={payload.url} filename={fn}>Download CSV</a>
</div>
<ReactTabulator
columns={columns}
data={filteredData}
options={{
height: Math.min(37 * data.length + 29, 311),
layout: 'fitColumns',
placeholder: 'No Data Set',
}}
/>
</div>
)
}
}
export default FileTable
|
