Skip to content

Commit

Permalink
chore: apply prettier v2 formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
sranka committed Jul 11, 2022
1 parent 9808d05 commit 6caa47d
Show file tree
Hide file tree
Showing 55 changed files with 412 additions and 498 deletions.
2 changes: 1 addition & 1 deletion examples/createBucket.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ async function recreateBucket(name) {

recreateBucket('example-bucket')
.then(() => console.log('\nFinished SUCCESS'))
.catch(error => {
.catch((error) => {
console.error(error)
console.log('\nFinished ERROR')
})
2 changes: 1 addition & 1 deletion examples/delete.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ async function deleteData(): Promise<void> {

deleteData()
.then(() => console.log('\nFinished SUCCESS'))
.catch(error => {
.catch((error) => {
console.error(error)
console.log('\nFinished ERROR')
})
6 changes: 3 additions & 3 deletions examples/follow-redirects.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ server.listen(0, 'localhost', () => {
}).getQueryApi(org)
queryApi
.collectRows('buckets()')
.then(data => {
.then((data) => {
console.info('Available buckets:')
data.forEach(x => console.info('', x.name))
data.forEach((x) => console.info('', x.name))
console.log('\nQuery SUCCESS')
})
.catch(error => {
.catch((error) => {
console.error(error)
console.log('\nQuery ERROR')
})
Expand Down
116 changes: 68 additions & 48 deletions examples/giraffe.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<script>
// required by react
window.process = {
env : 'development'
env: 'development',
}
// required by giraffe
global = window
Expand All @@ -21,27 +21,37 @@
<h1>Example: Flux Query Results visualized with Giraffe</h1>
<fieldset>
<legend>Flux Query</legend>
<div style="display:flex; margin-bottom: 10px;">
<textarea id="fluxQuery" style="flex: 1" rows="2"
>from(bucket:"my-bucket") |> range(start: -1d) |> filter(fn: (r) => r._measurement == "temperature")</textarea>
<div style="display: flex; margin-bottom: 10px">
<textarea id="fluxQuery" style="flex: 1" rows="2">
from(bucket:"my-bucket") |> range(start: -1d) |> filter(fn: (r) => r._measurement == "temperature")</textarea
>
</div>
</fieldset>
<fieldset>
<legend>Giraffe Visualization</legend>
<div style="width: 100%;height: 200px; border: 1px solid grey; margin-bottom: 10px;" id="renderArea">
</div>
<div
style="
width: 100%;
height: 200px;
border: 1px solid grey;
margin-bottom: 10px;
"
id="renderArea"
></div>
</fieldset>
<button id="reloadButton">Reload</button>
<button id="sampleButton">Show Sample Data</button>
<button id="clientExamples">Open InfluxDB JavaScript Client Examples</button>
<button id="clientExamples">
Open InfluxDB JavaScript Client Examples
</button>
<script>
// get query from request parameter or use default
fluxQuery = new URLSearchParams(window.location.search).get('fluxQuery');
if (!fluxQuery){
fluxQuery = new URLSearchParams(window.location.search).get('fluxQuery')
if (!fluxQuery) {
fluxQuery = `from(bucket:"my-bucket") |> range(start: -1d) |> filter(fn: (r) => r._measurement == "temperature")`
}
const fluxQueryInput = document.getElementById('fluxQuery')
fluxQueryInput.value = fluxQuery
fluxQueryInput.value = fluxQuery

// create query API
const {url, token, org} = window.INFLUX_ENV // loaded in ./env_browser.js
Expand All @@ -52,83 +62,93 @@ <h1>Example: Flux Query Results visualized with Giraffe</h1>
// execute query and fill query data into giraffe table
const giraffe = window['@influxdata/giraffe']
// React functional component that renders query results or an error
function RenderResults({error, table}){
if (error){
function RenderResults({error, table}) {
if (error) {
// render error message
return React.createElement('center', null, error.toString())
} else if (table.length) {
// render giraffe plot
const plotConfig = {
const plotConfig = {
table: table,
layers: [{
type: 'line',
x: '_time',
y: '_value'
}],
layers: [
{
type: 'line',
x: '_time',
y: '_value',
},
],
valueFormatters: {
_time: giraffe.timeFormatter({
timeZone: 'UTC',
format: 'YYYY-MM-DD HH:mm:ss ZZ',
}),
}
};
},
}
return React.createElement(giraffe.Plot, {config: plotConfig})
} else {
// render empty table recevied
return React.createElement('center', null, 'Empty Table Received')
}
}
const influxDBClientGiraffe = window['@influxdata/influxdb-client-giraffe']
const influxDBClientGiraffe =
window['@influxdata/influxdb-client-giraffe']
function queryAndVisualize() {
influxDBClientGiraffe.queryToTable(
queryApi,
fluxQueryInput.value,
giraffe.newTable
). then(table => {
console.log('queryToTable returns', table)
ReactDOM.render(
influxDBClientGiraffe
.queryToTable(queryApi, fluxQueryInput.value, giraffe.newTable)
.then((table) => {
console.log('queryToTable returns', table)
ReactDOM.render(
React.createElement(RenderResults, {table}),
document.getElementById('renderArea')
);
}). catch(error => {
console.log('queryToTable fails', error)
ReactDOM.render(
)
})
.catch((error) => {
console.log('queryToTable fails', error)
ReactDOM.render(
React.createElement(RenderResults, {error}),
document.getElementById('renderArea')
);
})
)
})
}
queryAndVisualize()
document.getElementById('reloadButton').addEventListener('click', () => {
queryAndVisualize()
})
const clientExamples = document.getElementById('clientExamples')
clientExamples.addEventListener('click', e => {
const target = './index.html?fluxQuery='+encodeURIComponent(fluxQueryInput.value)
clientExamples.addEventListener('click', (e) => {
const target =
'./index.html?fluxQuery=' + encodeURIComponent(fluxQueryInput.value)
window.open(target, '_blank')
})
function sampleAndVisualize(){
function sampleAndVisualize() {
// create sample query response
let queryResponseData = '#datatype,string,long,string,string,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double\n'
queryResponseData += '#group,false,false,true,true,true,true,false,false\n'
let queryResponseData =
'#datatype,string,long,string,string,dateTime:RFC3339,dateTime:RFC3339,dateTime:RFC3339,double\n'
queryResponseData +=
'#group,false,false,true,true,true,true,false,false\n'
queryResponseData += '#default,_result,,,,,,,\n'
queryResponseData += ',result,table,_measurement,_field,_start,_stop,_time,_value\n'
const time = Math.trunc(Date.now()/60000) // start this second
const sampleStart = ',,0,temperature,value,2010-01-01T00:00:00Z,2030-01-01T00:00:00Z,'
queryResponseData +=
',result,table,_measurement,_field,_start,_stop,_time,_value\n'
const time = Math.trunc(Date.now() / 60000) // start this second
const sampleStart =
',,0,temperature,value,2010-01-01T00:00:00Z,2030-01-01T00:00:00Z,'
const value = Math.random() * Math.PI
for(let i=0; i<1000; i++){
for (let i = 0; i < 1000; i++) {
const _time = new Date((time + i) * 60000).toISOString()
const _value = 20 + 15*Math.sin(value+(i/1000)*Math.PI)
const _value = 20 + 15 * Math.sin(value + (i / 1000) * Math.PI)
queryResponseData += sampleStart
queryResponseData += `${_time},${_value}\n`
}
// transform response to giraffe table and visualize
const table = influxDBClientGiraffe.csvToTable(queryResponseData,giraffe.newTable)
const table = influxDBClientGiraffe.csvToTable(
queryResponseData,
giraffe.newTable
)
console.log('csvToTable returns', table)
ReactDOM.render(
React.createElement(RenderResults, {table}),
document.getElementById('renderArea')
);
React.createElement(RenderResults, {table}),
document.getElementById('renderArea')
)
}
document.getElementById('sampleButton').addEventListener('click', () => {
sampleAndVisualize()
Expand Down
Loading

0 comments on commit 6caa47d

Please sign in to comment.