Skip to content

I
interface
Commit 5441faed authored by Uciel's avatar Uciel
Browse files
Options

polish data visualization

parent a02f0cdc
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 45 deletions
package-lock.json
View file @ 5441faed
...@@ -11644,9 +11644,9 @@ ...@@ -11644,9 +11644,9 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
}, },
"typedarray-to-buffer": { "typedarray-to-buffer": {
"version": "3.1.2", "version": "3.1.5",
"resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.2.tgz", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
"integrity": "sha1-EBezLZhP9VbroQD1AViauhrOLgQ=", "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
"requires": { "requires": {
"is-typedarray": "1.0.0" "is-typedarray": "1.0.0"
} }
...@@ -12160,9 +12160,9 @@ ...@@ -12160,9 +12160,9 @@
} }
}, },
"web3": { "web3": {
"version": "1.0.0-beta.33", "version": "1.0.0-beta.22",
"resolved": "https://registry.npmjs.org/web3/-/web3-1.0.0-beta.33.tgz", "resolved": "https://registry.npmjs.org/web3/-/web3-1.0.0-beta.22.tgz",
"integrity": "sha1-xgIbV2mSdyY3HBhLhoRFMRsTkpU=", "integrity": "sha1-lu7zfn4BfUvu3u/5G6M0Por3qf8=",
"requires": { "requires": {
"web3-bzz": "1.0.0-beta.33", "web3-bzz": "1.0.0-beta.33",
"web3-core": "1.0.0-beta.33", "web3-core": "1.0.0-beta.33",
...@@ -12435,25 +12435,6 @@ ...@@ -12435,25 +12435,6 @@
"underscore": "1.8.3", "underscore": "1.8.3",
"web3-core-helpers": "1.0.0-beta.33", "web3-core-helpers": "1.0.0-beta.33",
"websocket": "git://github.com/frozeman/WebSocket-Node.git#7004c39c42ac98875ab61126e5b4a925430f592c" "websocket": "git://github.com/frozeman/WebSocket-Node.git#7004c39c42ac98875ab61126e5b4a925430f592c"
},
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"requires": {
"ms": "2.0.0"
}
},
"websocket": {
"version": "git://github.com/frozeman/WebSocket-Node.git#7004c39c42ac98875ab61126e5b4a925430f592c",
"requires": {
"debug": "2.6.9",
"nan": "2.9.2",
"typedarray-to-buffer": "3.1.2",
"yaeti": "0.0.6"
}
}
} }
}, },
"web3-shh": { "web3-shh": {
...@@ -12883,6 +12864,25 @@ ...@@ -12883,6 +12864,25 @@
"source-map": "0.6.1" "source-map": "0.6.1"
} }
}, },
"websocket": {
"version": "git://github.com/frozeman/WebSocket-Node.git#7004c39c42ac98875ab61126e5b4a925430f592c",
"requires": {
"debug": "2.6.9",
"nan": "2.9.2",
"typedarray-to-buffer": "3.1.5",
"yaeti": "0.0.6"
},
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"requires": {
"ms": "2.0.0"
}
}
}
},
"websocket-driver": { "websocket-driver": {
"version": "0.7.0", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
......
package.json
View file @ 5441faed
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-subscriber": "^1.1.0", "redux-subscriber": "^1.1.0",
"redux-thunk": "^2.2.0", "redux-thunk": "^2.2.0",
"web3": "1.0.0-beta.33" "web3": "1.0.0-beta.22"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
......
src/components/Candlesticks.js
View file @ 5441faed
...@@ -20,7 +20,7 @@ class Candlesticks extends Component { ...@@ -20,7 +20,7 @@ class Candlesticks extends Component {
} }
}`; }`;
axios.get('http://localhost:3000/graphql', { params: { query: query } }) axios.get('http://ec2-18-233-168-186.compute-1.amazonaws.com:3000/graphql', { params: { query: query } })
.then(data => this.setState({data: data.data.data.Event})) .then(data => this.setState({data: data.data.data.Event}))
.then(()=> this.visualizeData()) .then(()=> this.visualizeData())
.catch(err => console.error(err)); .catch(err => console.error(err));
......
src/components/Visualization.js
View file @ 5441faed
...@@ -29,27 +29,19 @@ class Visualization extends Component { ...@@ -29,27 +29,19 @@ class Visualization extends Component {
console.log(query, 'query') console.log(query, 'query')
axios.get('http://localhost:3000/graphql', { params: {query: query } }) axios.get('http://ec2-18-233-168-186.compute-1.amazonaws.com:3000/graphql', { params: {query: query } })
.then(data => this.setState({data: data.data.data.Event })) .then(data => this.setState({data: data.data.data.Event }))
.then(() => { .then(() => this.createLineGraph())
console.log('data to be visualized', this.state.data);
this.createLineGraph();
})
.catch(err => console.error(err)); .catch(err => console.error(err));
this.outputTokenSubscriber(); this.outputTokenSubscriber();
} }
// componentDidUpdate() {
// if (this.state.data !== null) {
// this.createNewLineGraph()
// }
// }
outputTokenSubscriber() { outputTokenSubscriber() {
const outputTokenSubscriber = subscribe('exchange.outputToken', state => { const outputTokenSubscriber = subscribe('exchange.outputToken', state => {
let outputToken = state.exchange.outputToken.value; let outputToken = state.exchange.outputToken.value;
console.log('outputToken change deteced', outputToken, this.state.data) console.log('outputToken change deteced', outputToken)
let query = `{ let query = `{
Event(input:"${outputToken}"){ Event(input:"${outputToken}"){
ethValueOfToken ethValueOfToken
...@@ -57,9 +49,11 @@ class Visualization extends Component { ...@@ -57,9 +49,11 @@ class Visualization extends Component {
} }
}`; }`;
axios.get('http://localhost:3000/graphql', { params: { query: query }}) axios.get('http://ec2-18-233-168-186.compute-1.amazonaws.com:3000/graphql', { params: { query: query }})
.then(data => this.setState({data: data.data.data.Event})) .then(data => this.setState({data: data.data.data.Event}))
.then(() => this.createNewLineGraph()) .then(() => {
this.createNewLineGraph()
})
.catch(err => console.error(err)); .catch(err => console.error(err));
}) })
} }
...@@ -73,6 +67,7 @@ class Visualization extends Component { ...@@ -73,6 +67,7 @@ class Visualization extends Component {
let svg = this.d3Graph let svg = this.d3Graph
// first we want to see the min and max of our token prices // first we want to see the min and max of our token prices
let ethValueOfTokenExtent = d3.extent(this.state.data, element => element.ethValueOfToken); let ethValueOfTokenExtent = d3.extent(this.state.data, element => element.ethValueOfToken);
console.log('initial data visualized', this.state.data)
// create a y scale, for the eth value of the token // create a y scale, for the eth value of the token
let yScale = d3.scaleLinear() let yScale = d3.scaleLinear()
.domain(ethValueOfTokenExtent) .domain(ethValueOfTokenExtent)
...@@ -88,7 +83,7 @@ class Visualization extends Component { ...@@ -88,7 +83,7 @@ class Visualization extends Component {
.call(yAxis); .call(yAxis);
// sanitize the data for the x-axis // sanitize the data for the x-axis
this.state.data.map(e => {e.createdAt = new Date(e.createdAt)}); this.state.data.map(e => e.createdAt = new Date(e.createdAt));
// similarly, check the min and max of our times // similarly, check the min and max of our times
let timeExtent = d3.extent(this.state.data, element => element.createdAt) let timeExtent = d3.extent(this.state.data, element => element.createdAt)
console.log('previous time extent', timeExtent) console.log('previous time extent', timeExtent)
...@@ -127,11 +122,12 @@ class Visualization extends Component { ...@@ -127,11 +122,12 @@ class Visualization extends Component {
let width = 1039; let width = 1039;
let height = 200; let height = 200;
let margin = {top: 20, bottom:20, left:20, right:20} let margin = {top: 20, bottom:20, left:20, right:20}
this.state.data.map(e => {e.createdAt = new Date(e.createdAt)}); this.state.data.map(e => e.createdAt = new Date(e.createdAt));
console.log('createNewLineGraph', this.state.data) console.log('data is being set correctly', this.state.data)
// we set the range of the data again // we set the range of the data again
let yExtent = d3.extent(this.state.data, e => e.ethValueOfToken); let yExtent = d3.extent(this.state.data, e => e.ethValueOfToken);
let xExtent = d3.extent(this.state.data, e => e.createdAt); let xExtent = d3.extent(this.state.data, e => e.createdAt);
console.log('new yExtent', yExtent)
console.log('new xExtent', xExtent) console.log('new xExtent', xExtent)
// we also redefine the scales for the new data // we also redefine the scales for the new data
let yScale = d3.scaleLinear() let yScale = d3.scaleLinear()
......
src/store/initial-state.js
View file @ 5441faed
...@@ -37,7 +37,7 @@ export default { ...@@ -37,7 +37,7 @@ export default {
inputBalance: 0, inputBalance: 0,
outputBalance: 0, outputBalance: 0,
inputToken: { value: 'ETH', label: 'ETH', clearableValue: false }, inputToken: { value: 'ETH', label: 'ETH', clearableValue: false },
outputToken: { value: 'MKR', label: 'MKR', clearableValue: false }, outputToken: { value: 'BAT', label: 'BAT', clearableValue: false },
investToken: { value: 'BAT', label: 'BAT', clearableValue: false }, investToken: { value: 'BAT', label: 'BAT', clearableValue: false },
invariant1: 0, invariant1: 0,
invariant2: 0, invariant2: 0,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment