-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathQuery.js
More file actions
63 lines (55 loc) · 1.59 KB
/
Copy pathQuery.js
File metadata and controls
63 lines (55 loc) · 1.59 KB
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
import React, { useRef } from 'react'
export default function Query({ dataComp, setDataComp}) {
const columnRef = useRef()
const logicRef = useRef()
const valuesRef = useRef()
const columns = dataComp.columns
const logics = [">", "<", "<=", ">=", "==", "!="]
const query = ()=>{
const qColumn = columnRef.current.value
const qLogic = logicRef.current.value
const qValue = valuesRef.current.value
const df = dataComp.df.query({column: qColumn, is: qLogic, to: qValue})
setDataComp(prev => {
let new_data = prev.slice()
let dict = {
columns: df.columns,
values: df.values,
df: df
}
new_data.push(dict)
return new_data
})
}
return (
<div>
<form>
<div>
<span className="mr-2">Column</span>
<select ref={columnRef} className="border">
{
columns.map((column, index)=> {
return <option value={column}>{column}</option>
})
}
</select>
</div>
<div>
<span className="mr-2">is</span>
<select ref={logicRef} className="border">
{
logics.map((logic, index)=> {
return <option value={logic}>{logic}</option>
})
}
</select>
</div>
<div>
<span className="mr-2">to</span>
<input ref={valuesRef} placeholder="value" className="border"/>
</div>
</form>
<button onClick={()=>query()} className="btn btn-default dq-btn-add">Query</button>
</div>
)
}