blob: c5ad3c84d93d4c2eea5ce5ae7fd7e69be2bbc19b (
plain)
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
|
import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { Cast, StrCast } from "../../../../fields/Types";
import { CsvField } from "../../../../fields/URLField";
import { Utils } from "../../../../Utils";
import { ViewBoxBaseComponent } from "../../DocComponent";
import { FieldViewProps, FieldView } from "../FieldView";
import { ChartBox } from "./ChartBox";
import "./DataVizBox.scss";
import { HistogramBox } from "./HistogramBox";
import { TableBox } from "./TableBox";
enum DataVizView {
TABLE = "table",
HISTOGRAM= "histogram"
}
@observer
export class DataVizBox extends ViewBoxBaseComponent<FieldViewProps>() {
@observable private pairs: {x: number, y:number}[] = [];
// TODO: nda - make this use enum values instead
// @observable private currView: DataVizView = DataVizView.TABLE;
@computed get currView() {
if (this.rootDoc._dataVizView) {
return StrCast(this.rootDoc._dataVizView);
} else {
return "table";
}
}
constructor(props: any) {
super(props);
if (!this.rootDoc._dataVizView) {
// TODO: nda - this might not always want to default to "table"
this.rootDoc._dataVizView = "table";
}
}
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DataVizBox, fieldKey); }
@computed get selectView() {
switch(this.currView) {
case "table":
return (<TableBox pairs={this.pairs} />);
case "histogram":
return (<ChartBox rootDoc={this.rootDoc} pairs={this.pairs}/>);
// case "histogram":
// return (<HistogramBox rootDoc={this.rootDoc} pairs={this.pairs}/>)
}
}
@computed get pairVals() {
return fetch("/csvData?uri=" + this.dataUrl?.url.href).then(res => res.json());
}
@computed get dataUrl() { return Cast(this.dataDoc[this.fieldKey], CsvField) }
componentDidMount() {
// this.createPairs();
this.fetchData();
}
// async fetchData() {
// console.log(Cast(this.dataDoc[this.fieldKey], CsvField));
// const uri = this.dataUrl?.url.href;
// console.log(uri);
// const res = await fetch("/csvData?uri=" + uri);
// return await res.json();
// }
fetchData() {
const uri = this.dataUrl?.url.href;
fetch("/csvData?uri=" + uri).then(
res => res.json().then(
action(res => {
this.pairs = res;
})
))
}
// handle changing the view using a button
@action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
e.preventDefault();
e.stopPropagation();
this.rootDoc._dataVizView = this.currView == "table" ? "histogram" : "table";
}
render() {
if (this.pairs.length == 0) {
return <div>Loading...</div>
}
return (
<div className="dataViz">
<button onClick={(e) => this.changeViewHandler(e)}>Change View</button>
{this.selectView}
</div>
);
}
}
|
