Skip to content

Commit 29d1f7b

Browse files
twattanawaroontwattanawaroon
authored
Merge pull request #247 from dataspread/reactIntegrate
React integrate
2 parents 601e8e1 + 7fabe99 commit 29d1f7b

11 files changed

Lines changed: 1328 additions & 602 deletions

File tree

‎dataspread-ui/package-lock.json‎

Lines changed: 283 additions & 392 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dataspread-ui/public/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66
<meta name="theme-color" content="#000000">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
8+
79
<!--
810
manifest.json provides metadata used when your web app is added to the
911
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1012
-->
1113
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
1214
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
15+
<!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">-->
16+
1317
<!--
1418
Notice the use of %PUBLIC_URL% in the tags above.
1519
It will be replaced with the URL of the `public` folder during the build.

‎dataspread-ui/src/App.js‎

Lines changed: 113 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import Toolbar from './Components/Menu/toolbar'
55
import Stylebar from './Components/Stylebar'
66
import StartupBox from './Components/StatupBox'
77

8+
import Navigation from "./Components/Navigation";
9+
import ExplorationForm from "./Components/ExplorationForm";
10+
import BinCustomizationForm from "./Components/BinCustomizationForm";
11+
import HistoryBar from "./Components/HistoryBar"
812

913
class App extends Component {
1014

@@ -22,6 +26,16 @@ class App extends Component {
2226
this.onNavFormOpen = this.onNavFormOpen.bind(this)
2327
this.updateHierFormOption = this.updateHierFormOption.bind(this)
2428
this.submitHierForm = this.submitHierForm.bind(this)
29+
//this.onBinFormOpen = this.onBinFormOpen.bind(this)
30+
31+
this.submitNavForm = this.submitNavForm.bind(this);
32+
this.openBinForm = this.openBinForm.bind(this);
33+
this.scrollTo = this.scrollTo.bind(this);
34+
this.updateBreadcrumb = this.updateBreadcrumb.bind(this);
35+
this.computePath = this.computePath.bind(this);
36+
this.jumpToHistorialView = this.jumpToHistorialView.bind(this);
37+
this.brushNlink = this.brushNlink.bind(this);
38+
this.updateHighlight = this.updateHighlight.bind(this);
2539
}
2640

2741
onSelectFile(bookId) {
@@ -39,7 +53,20 @@ class App extends Component {
3953

4054
onNavFormOpen() {
4155
if (this.grid !== null) {
42-
this.grid.openNavForm();
56+
fetch(this.grid.urlPrefix + '/api/getSortAttrs/' + this.state.bookId + '/' + this.grid.state.sheetName)
57+
.then(response => response.json())
58+
.then(data => {
59+
console.log(data)
60+
let options = [];
61+
for (let i = 0; i < data.data.length; i++) {
62+
options.push({
63+
"text": data.data[i],
64+
"value": i + 1,
65+
})
66+
}
67+
this.navForm.setState({options: options, navFormOpen: true});
68+
this.nav.setState({options: data.data});
69+
})
4370
}
4471
}
4572

@@ -48,9 +75,85 @@ class App extends Component {
4875
}
4976

5077
submitHierForm(data) {
51-
this.grid.nav.submitHierForm(data);
78+
this.nav.submitHierForm(data);
79+
}
80+
81+
// onBinFormOpen(){
82+
// if (this.grid !== null) {
83+
// this.grid.openBinForm();
84+
// }
85+
// }
86+
87+
submitNavForm(attribute) {
88+
if (attribute) {
89+
fetch(this.grid.urlPrefix + '/api/startNav/' + this.state.bookId + '/' + this.grid.state.sheetName + '/' + attribute)
90+
.then(response => response.json())
91+
.then(data => {
92+
console.log(data);
93+
this.navForm.setState({navFormOpen: false, processing: false});
94+
this.nav.setState({
95+
navOpen: true,
96+
sheetName: this.grid.state.sheetName,
97+
urlPrefix: this.grid.urlPrefix
98+
});
99+
this.updateHierFormOption(this.navForm.state.options);
100+
this.nav.startNav(data);
101+
this.navBar.setState({
102+
breadcrumb_ls: [],
103+
attribute: 0,
104+
open: true,
105+
navHistoryPathIndex: {},
106+
navHistoryTable: {},
107+
historyList: [],
108+
});
109+
this.grid.setState({
110+
exploreCol: attribute - 1,
111+
})
112+
console.log(this.grid)
113+
this.nav.brushNlink(this.grid.rowStartIndex,this.grid.rowStopIndex);
114+
})
115+
}
116+
}
117+
118+
updateBreadcrumb(breadcrumb_ls, path_index) {
119+
this.navBar.updateNavPath(breadcrumb_ls, path_index);
120+
}
121+
122+
jumpToHistorialView(path) {
123+
// console.log(path)
124+
this.nav.jumpToHistorialView(path);
52125
}
53126

127+
computePath() {
128+
return this.nav.computePath();
129+
}
130+
131+
openBinForm() {
132+
if (this.state.navOpen) {
133+
this.setState({binFormOpen: true});
134+
}
135+
}
136+
137+
scrollTo(lowerRange) {
138+
this.grid.grid.scrollToCell({columnIndex: 0, rowIndex: lowerRange});
139+
}
140+
141+
brushNlink(lower, upper) {
142+
if (this.nav.state.navOpen) {
143+
this.nav.brushNlink(lower, upper);
144+
}
145+
}
146+
147+
148+
updateHighlight(colNum, brushNLinkRows) {
149+
console.log(colNum);
150+
console.log(brushNLinkRows);
151+
this.grid.setState({
152+
hierarchicalCol: colNum,
153+
brushNLinkRows: brushNLinkRows,
154+
})
155+
156+
}
54157

55158
render() {
56159
// console.log(this)
@@ -69,9 +172,15 @@ class App extends Component {
69172
<div>
70173
<Toolbar username={this.state.username} onSelectFile={this.onSelectFile}
71174
onNavFormOpen={this.onNavFormOpen} ref={ref => this.toolBar = ref}
72-
submitHierForm = {this.submitHierForm}/>
175+
submitHierForm={this.submitHierForm}/>
73176
<Stylebar/>
74-
<DSGrid bookId={this.state.bookId} ref={ref => this.grid = ref}
177+
<HistoryBar ref={ref => this.navBar = ref} computePath={this.computePath}
178+
jumpToHistorialView={this.jumpToHistorialView}/>
179+
<Navigation bookId={this.state.bookId} scrollTo={this.scrollTo} ref={ref => this.nav = ref}
180+
updateBreadcrumb={this.updateBreadcrumb} updateHighlight={this.updateHighlight}/>
181+
<ExplorationForm grid={this.grid} submitNavForm={this.submitNavForm}
182+
ref={ref => this.navForm = ref}/>
183+
<DSGrid bookId={this.state.bookId} ref={ref => this.grid = ref} brushNlink={this.brushNlink}
75184
updateHierFormOption={this.updateHierFormOption}/>
76185
</div>
77186
)

‎dataspread-ui/src/Components/BinCustomizationForm.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, {Component} from 'react'
2+
import {Form, Button,Radio} from 'semantic-ui-react'
3+
import './Navigation.css';
4+
5+
export default class BinCustomizationForm extends Component {
6+
constructor(props) {
7+
super(props);
8+
console.log(this);
9+
this.state = {
10+
options:[],
11+
attribute:0,
12+
}
13+
this.handleChange = this.handleChange.bind(this);
14+
this.handleSubmit = this.handleSubmit.bind(this);
15+
this.handleClose = this.handleClose.bind(this);
16+
17+
}
18+
19+
componentDidMount() {
20+
console.log( "componentmout binform form")
21+
console.log(this.props.grid.state.sheetName)
22+
}
23+
24+
handleChange = (e, { value }) => {
25+
26+
}
27+
28+
handleSubmit = () =>{
29+
30+
}
31+
32+
handleClose = () =>{
33+
34+
}
35+
render(){
36+
if(this.props.grid.state.binFormOpen){
37+
var optionList = this.state.options;
38+
return(<div id = "bin-form">
39+
</div>
40+
);
41+
} else {
42+
return null;
43+
}
44+
45+
}
46+
}
47+

‎dataspread-ui/src/Components/ExplorationForm.js‎

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React, {Component} from 'react'
2-
import {Form, Button,Radio} from 'semantic-ui-react'
2+
import {Form, Dimmer, Loader, Modal} from 'semantic-ui-react'
33
import './Navigation.css';
44

55
export default class ExplorationForm extends Component {
66
constructor(props) {
77
super(props);
88
console.log(this);
99
this.state = {
10-
options:[],
11-
attribute:0,
10+
options: [],
11+
attribute: 1,
12+
processing: false,
1213
}
1314
this.handleChange = this.handleChange.bind(this);
1415
this.handleSubmit = this.handleSubmit.bind(this);
@@ -17,49 +18,58 @@ export default class ExplorationForm extends Component {
1718
}
1819

1920
componentDidMount() {
20-
console.log( "componentmoutn explore form")
21-
console.log(this.props.grid.state.sheetName)
21+
console.log("componentmoutn explore form")
22+
//console.log(this.props.grid.state.sheetName)
2223
}
2324

24-
handleChange = (e, { value }) => {
25-
this.setState({ attribute: value });
25+
handleChange = (e, {value}) => {
26+
this.setState({attribute: value});
2627
console.log(value);
2728
}
2829

29-
handleSubmit = () =>{
30+
handleSubmit = () => {
3031
console.log("submit")
32+
console.log(this.state.attribute)
33+
this.setState({
34+
processing:true,
35+
})
3136
this.props.submitNavForm(this.state.attribute);
3237
}
3338

34-
handleClose = () =>{
39+
handleClose = () => {
3540
console.log("close")
36-
this.props.closeNavForm();
41+
this.setState({
42+
navFormOpen: false,
43+
})
3744
}
38-
render(){
39-
if(this.props.grid.state.navFormOpen){
40-
var optionList = this.state.options;
41-
return(<div id = "explore-form">
42-
43-
<Form >
44-
<Button icon='close' id="formClose" onClick = {this.handleClose}/>
45-
{optionList.map((opt, index) =>{
46-
let idx = index + 1;
47-
return(
48-
<Form.Field key = {idx}>
49-
<Radio
50-
label = {opt}
51-
name='radioGroup'
52-
value= {idx}
53-
checked={this.state.attribute === idx}
54-
onChange={this.handleChange}
55-
/>
56-
</Form.Field>
57-
);
5845

59-
})}
60-
<Form.Button onClick={this.handleSubmit}>Start Explore!</Form.Button>
61-
</Form>
62-
</div>
46+
render() {
47+
if (this.state.navFormOpen) {
48+
var optionList = this.state.options;
49+
return (<Modal
50+
closeIcon
51+
onClose={this.handleClose}
52+
open={this.state.navFormOpen}>
53+
<Modal.Header>Exploration Form</Modal.Header>
54+
<Modal.Content>
55+
<Form onSubmit={this.handleSubmit}>
56+
<div>
57+
<Form.Group>
58+
<Form.Dropdown
59+
width={14}
60+
options={optionList} selection
61+
defaultValue={optionList[0].value}
62+
onChange={this.handleChange}
63+
/>
64+
</Form.Group>
65+
</div>
66+
<Form.Button>Start Explore!</Form.Button>
67+
</Form>
68+
<Dimmer active ={this.state.processing}>
69+
<Loader>Loading</Loader>
70+
</Dimmer>
71+
</Modal.Content>
72+
</Modal>
6373
);
6474
} else {
6575
return null;

‎dataspread-ui/src/Components/HierarchiForm.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,13 @@ export default class HierarchiForm extends Component {
2121
};
2222
this.handleRankOrder = this.handleRankOrder.bind(this);
2323
this.handleSubTotalFunc = this.handleSubTotalFunc.bind(this);
24-
this, this.updateOption = this.updateOption.bind(this);
24+
this.updateOption = this.updateOption.bind(this);
2525
}
2626

2727
updateOption(data) {
28-
let opt = [];
29-
for (let i = 0; i < data.length; i++) {
30-
let temp = {text: data[i], value: i + 1};
31-
opt.push(temp);
32-
}
3328
this.setState({
3429
navPanelOpen: true,
35-
options: opt
30+
options: data
3631
});
3732
}
3833

@@ -64,6 +59,11 @@ export default class HierarchiForm extends Component {
6459
if (formula_ls[i].param_ls[1] == "") {
6560
alert("Please fill in the parameter")
6661
return;
62+
}else if(formula_ls[i].param_ls[1].charAt(0) === '\''){
63+
formula_ls[i].param_ls[1] = formula_ls[i].param_ls[1].replace(/'/g,'\"');
64+
console.log(formula_ls[i].param_ls[1])
65+
} else if(formula_ls[i].param_ls[1].charAt(0) !== '\"'){
66+
formula_ls[i].param_ls[1] = "\"" + formula_ls[i].param_ls[1] +"\"";
6767
}
6868
break;
6969
case "RANK":
@@ -124,9 +124,9 @@ export default class HierarchiForm extends Component {
124124
//console.log(e);
125125
let formula = this.state.formula_ls;
126126
let temp = {
127-
attr_index: 0,
127+
attr_index: 1,
128128
function: "AVEDEV",
129-
param_ls: [],
129+
param_ls: [""],
130130
};
131131
formula.splice(e + 1, 0, temp);
132132
this.setState({
@@ -241,8 +241,11 @@ export default class HierarchiForm extends Component {
241241
}
242242
return null;
243243
}
244-
245244
render() {
245+
246+
if(this.state.navPanelOpen !== true){
247+
return null;
248+
}
246249
const chartOpt = [
247250
{key: 'r', text: 'Raw Value', value: '1'},
248251
{key: 'c', text: 'Chart', value: '2'},
@@ -284,8 +287,8 @@ export default class HierarchiForm extends Component {
284287
<Modal.Content>
285288
<Form onSubmit={this.handleSubmit}>
286289
{formula_ls.map((line, index) => {
287-
//console.log(line);
288-
//console.log(selected);
290+
// console.log(line)
291+
// console.log(this.state.options)
289292
return (<div>
290293
<Form.Group>
291294
<i className="fa fa-minus-circle hierRemove" id="rm1"

0 commit comments

Comments
 (0)