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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { Cast, NumCast, StrCast } from '../../../../fields/Types';
import { CsvField } from '../../../../fields/URLField';
import { Docs } from '../../../documents/Documents';
import { ViewBoxAnnotatableComponent } from '../../DocComponent';
import { FieldView, FieldViewProps } from '../FieldView';
import { PinProps } from '../trails';
import { LineChart } from './components/LineChart';
import { TableBox } from './components/TableBox';
import './DataVizBox.scss';
enum DataVizView {
TABLE = 'table',
LINECHART = 'lineChart',
}
@observer
export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(DataVizBox, fieldKey);
}
// says we have an object and any string
// 2 ways of doing it
// @observable private pairs: { [key: string]: number | string | undefined }[] = [];
// @observable private pairs: { [key: string]: FieldResult }[] = [];
@observable private pairs: { x: number; y: number }[] = [];
private _chartRenderer: LineChart | undefined;
// // another way would be store a schema that defines the type of data we are expecting from an imported doc
// method1() {
// this.pairs[0].x = 3;
// }
// method() {
// // this.pairs[0].x = 3;
// // go through the pairs
// const x = this.pairs[0].x;
// if (typeof x == 'number') {
// let x1 = Number(x);
// // let x1 = NumCast(x);
// }
// }
// could use field result
// [key: string]: FieldResult;
// instead of numeric x,y in there,
// TODO: nda - use onmousedown and onmouseup when dragging and changing height and width to update the height and width props only when dragging stops
@computed get dataVizView(): DataVizView {
return StrCast(this.rootDoc._dataVizView, 'table') as DataVizView;
}
@action
restoreView = (data: Doc) => {
const changed = this.dataVizView !== data.presDataVizView && (this.rootDoc._dataVizView = data.presDataVizView);
const func = () => this._chartRenderer?.restoreView(data);
if (changed) {
setTimeout(func, 100);
return changed ? true : false;
}
return func() ?? false;
};
getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
const anchor =
this._chartRenderer?.getAnchor(pinProps) ??
Docs.Create.TextanchorDocument({
// when we clear selection -> we should have it so chartBox getAnchor returns undefined
// this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
/*put in some options*/
});
anchor.presDataVizView = this.dataVizView;
this.addDocument(anchor);
return anchor;
};
@computed get selectView() {
const width = NumCast(this.rootDoc._width) * 0.9;
const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
const margin = { top: 10, right: 50, bottom: 50, left: 50 };
// prettier-ignore
switch (this.dataVizView) {
case DataVizView.TABLE: return <TableBox pairs={this.pairs} />;
case DataVizView.LINECHART: return <LineChart ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} pairs={this.pairs} dataDoc={this.dataDoc} />;
}
}
@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.props.setContentView?.(this);
this.fetchData();
}
fetchData() {
fetch('/csvData?uri=' + this.dataUrl?.url.href) //
.then(res => res.json().then(action(res => !res.errno && (this.pairs = res))));
}
// handle changing the view using a button
@action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
e.preventDefault();
e.stopPropagation();
this.rootDoc._dataVizView = this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE;
}
render() {
return this.pairs.length == 0 ? (
<div>Loading...</div>
) : (
<div
className="dataViz"
onWheel={e => e.stopPropagation()}
ref={r =>
r?.addEventListener(
'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
(e: WheelEvent) => {
if (!r.scrollTop && e.deltaY <= 0) e.preventDefault();
e.stopPropagation();
},
{ passive: false }
)
}>
<button onClick={e => this.changeViewHandler(e)}>Change View</button>
{this.selectView}
</div>
);
}
}
|
