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
|
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { action, computed, observable } from 'mobx';
import { NumCast, StrCast } from '../../../../fields/Types';
import { LineChart } from './components/LineChart';
import { Chart, ChartData } from './ChartInterface';
export interface ChartBoxProps {
rootDoc: Doc;
dataDoc: Doc;
pairs: { x: number; y: number }[];
setChartBox: (chartBox: ChartBox) => void;
getAnchor: () => Doc;
}
export interface DataPoint {
x: number;
y: number;
}
@observer
export class ChartBox extends React.Component<ChartBoxProps> {
@observable private _chartData: ChartData | undefined = undefined;
private currChart: Chart | undefined;
@computed get currView() {
if (this.props.rootDoc._dataVizView) {
return StrCast(this.props.rootDoc._currChartView);
} else {
return 'table';
}
}
constructor(props: any) {
super(props);
if (!this.props.rootDoc._currChartView) {
this.props.rootDoc._currChartView = 'bar';
}
}
setCurrChart = (chart: Chart) => {
this.currChart = chart;
};
@action
generateChartData() {
if (this.props.rootDoc._chartData) {
this._chartData = JSON.parse(StrCast(this.props.rootDoc._chartData));
return;
}
const data: ChartData = {
xLabel: '',
yLabel: '',
data: [[]],
};
if (this.props.pairs && this.props.pairs.length > 0) {
data.xLabel = 'x';
data.yLabel = 'y';
this.props.pairs.forEach(pair => {
// TODO: nda - add actual support for multiple sets of data
data.data[0].push({ x: pair.x, y: pair.y });
});
}
this._chartData = data;
this.props.rootDoc._chartData = JSON.stringify(data);
}
componentDidMount = () => {
this.generateChartData();
// setting timeout to allow rerender cycle of the actual chart tof inish
// setTimeout(() => {
this.props.setChartBox(this);
// });
// this.props.setChartBox(this);
};
@action
onClickChangeChart = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
console.log(e.currentTarget.value);
this.props.rootDoc._currChartView = e.currentTarget.value.toLowerCase();
};
scrollFocus(doc: Doc, smooth: boolean): number | undefined {
// if x and y exist on this
// then highlight/focus the x and y position (datapoint)
// highlight for a few seconds and then remove (set a timer to unhighlight after a period of time,
// to be consistent, use 5 seconds and highlight color is orange)
// if x and y don't exist => link to whole doc => dash will take care of focusing on the entire doc
// return value is how long this action takes
// undefined => immediately, 0 => introduces a timeout
// number in ms => won't do any of the focus or call the automated highlighting thing until this timeout expires
// in this case probably number in ms doesn't matter
// for now could just update the currSelected in linechart to be what doc.x and doc.y
if (this.currChart && doc.x && doc.y) {
// update curr selected
this.currChart.setCurrSelected(Number(doc.x), Number(doc.y));
}
return 0;
}
_getAnchor() {
return this.currChart?._getAnchor();
}
render() {
if (this.props.pairs && this._chartData) {
let width = NumCast(this.props.rootDoc._width);
width = width * 0.7;
let height = NumCast(this.props.rootDoc._height);
height = height * 0.7;
console.log(width, height);
const margin = { top: 50, right: 50, bottom: 50, left: 50 };
return (
<div>
<div>
{/*{this.props.rootDoc._currChartView == 'line' ? (
<Line ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} />
) : (
<Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} />
)} */}
{/* {this.reLineChart} */}
<LineChart margin={margin} width={width} height={height} chartData={this._chartData} setCurrChart={this.setCurrChart} dataDoc={this.props.dataDoc} fieldKey={'data'} getAnchor={this.props.getAnchor} />
</div>
<button onClick={e => this.onClickChangeChart(e)} value="line">
Line
</button>
<button onClick={e => this.onClickChangeChart(e)} value="bar">
Bar
</button>
</div>
);
} else {
return <div></div>;
}
}
}
|
