forked from sqlpad/sqlpad
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathQueryChartOnly.js
More file actions
99 lines (97 loc) · 3.55 KB
/
Copy pathQueryChartOnly.js
File metadata and controls
99 lines (97 loc) · 3.55 KB
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
import React from 'react'
import DropdownButton from 'react-bootstrap/lib/DropdownButton'
import MenuItem from 'react-bootstrap/lib/MenuItem'
import IncompleteDataNotification from './components/IncompleteDataNotification'
import fetchJson from './utilities/fetch-json.js'
import SqlpadTauChart from './components/SqlpadTauChart.js'
const QueryEditor = React.createClass({
getInitialState: function () {
return {
isRunning: false,
runQueryStartTime: undefined,
queryResult: undefined
}
},
runQuery: function (queryId) {
this.setState({
isRunning: true,
runQueryStartTime: new Date()
})
fetchJson('GET', this.props.config.baseUrl + '/api/queries/' + queryId)
.then((json) => {
if (json.error) console.error(json.error)
this.setState({
query: json.query
})
})
.then(() => {
return fetchJson('GET', this.props.config.baseUrl + '/api/query-result/' + queryId)
})
.then((json) => {
if (json.error) console.error(json.error)
this.setState({
isRunning: false,
queryError: json.error,
queryResult: json.queryResult
})
})
.catch((ex) => {
console.error(ex.toString())
this.setState({
isRunning: false
})
})
},
componentDidMount: function () {
this.runQuery(this.props.queryId)
},
onSaveImageClick: function (e) {
if (this.sqlpadTauChart && this.sqlpadTauChart.chart) {
this.sqlpadTauChart.chart.fire('exportTo', 'png')
}
},
hasRows: function () {
var queryResult = this.state.queryResult
return !!(queryResult && queryResult.rows && queryResult.rows.length)
},
isChartable: function () {
var pending = this.state.isRunning || this.state.queryError
return !pending && this.hasRows()
},
render: function () {
var csvDownloadLink
var xlsxDownloadLink
if (this.state.queryResult) {
csvDownloadLink = this.props.config.baseUrl + '/download-results/' + this.state.queryResult.cacheKey + '.csv'
xlsxDownloadLink = this.props.config.baseUrl + '/download-results/' + this.state.queryResult.cacheKey + '.xlsx'
}
return (
<div style={{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}>
<h3 style={{marginLeft: 20}}>{(this.state.query ? this.state.query.name : '')}</h3>
<div style={{position: 'absolute', top: 20, right: 20}}>
<IncompleteDataNotification queryResult={this.state.queryResult} />
{(this.state.queryResult ? (
<DropdownButton title='Export' id='export-dropdown-button' pullRight>
<MenuItem eventKey='1' onClick={this.onSaveImageClick}>png</MenuItem>
{(this.props.config.allowCsvDownload ? (<MenuItem eventKey='2' target='_blank' href={csvDownloadLink}>csv</MenuItem>) : null)}
{(this.props.config.allowCsvDownload ? (<MenuItem eventKey='3' target='_blank' href={xlsxDownloadLink}>xlsx</MenuItem>) : null)}
</DropdownButton>
) : null)}
</div>
<div style={{position: 'absolute', top: 60, right: 0, bottom: 0, left: 0, padding: 40}}>
<SqlpadTauChart
query={this.state.query}
config={this.props.config}
queryResult={this.state.queryResult}
queryError={this.state.queryError}
isRunning={this.state.isRunning}
renderChart={this.isChartable()}
ref={(ref) => {
this.sqlpadTauChart = ref
}} />
</div>
</div>
)
}
})
export default QueryEditor