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
142
143
144
145
146
147
148
149
150
151
|
import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, StrListCast } from '../../../../fields/Doc';
import { List } from '../../../../fields/List';
import { Cast, CsvCast, 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';
export 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 }[] = [];
static pairSet = new ObservableMap<string, { [key: string]: string }[]>();
@computed.struct get pairs() {
return DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
}
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.layoutDoc._dataVizView, 'table') as DataVizView;
}
@action
restoreView = (data: Doc) => {
const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
const func = () => this._chartRenderer?.restoreView(data);
if (changedView || changedAxes) {
setTimeout(func, 100);
return true;
}
return func() ?? false;
};
getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
const anchor = !pinProps
? this.rootDoc
: this._chartRenderer?.getAnchor(pinProps) ??
Docs.Create.ConfigDocument({
// 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;
anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
this.addDocument(anchor);
return anchor;
};
@computed.struct get axes() {
return StrListCast(this.layoutDoc.data_vizAxes);
}
selectAxes = (axes: string[]) => (this.layoutDoc.data_vizAxes = new List<string>(axes));
@computed get selectView() {
const width = this.props.PanelWidth() * 0.9;
const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
const margin = { top: 10, right: 25, bottom: 50, left: 25 };
if (!this.pairs) return 'no data';
// prettier-ignore
switch (this.dataVizView) {
case DataVizView.TABLE: return <TableBox pairs={this.pairs} axes={this.axes} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
case DataVizView.LINECHART: return <LineChart ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
}
}
@computed get dataUrl() {
return Cast(this.dataDoc[this.fieldKey], CsvField);
}
componentDidMount() {
this.props.setContentView?.(this);
this.fetchData();
}
fetchData() {
if (DataVizBox.pairSet.has(CsvCast(this.rootDoc[this.fieldKey]).url.href)) return;
DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, []);
fetch('/csvData?uri=' + this.dataUrl?.url.href) //
.then(res => res.json().then(action(res => !res.errno && DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res))));
}
// handle changing the view using a button
@action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
e.preventDefault();
e.stopPropagation();
this.layoutDoc._dataVizView = this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE;
}
render() {
return !this.pairs?.length ? (
<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)}>{this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE}</button>
{this.selectView}
</div>
);
}
}
|
