Hi, I’m currently working with Giraffe, I was able to plot the example provided on github, but I can’t go any further. I get the data but I don’t know how to visualize it.
How can I generate a Plot from a query? Are there more code samples available?
Here is part of my code
...
let INFLUX_ENV = {
url: 'http://192.168.1.100:8086',
token: 'AwMv2Z0FFfHqgBGhGDkH_LIHJbjcjIwoAhYdzu9Yvf65gbshLQkiAKw9fobgDfhsgkRhWgkn5uRIlAsyIJ_Clw=='
}
let Influx = window['@influxdata/influxdb-client'];
let InfluxDB = Influx.InfluxDB;
let influxDB = new InfluxDB(INFLUX_ENV);
let queryApi = influxDB.getQueryApi('my-org');
let query = cell.properties.queries[0]; // Query from dashboard cell
queryApi.queryRows(query.text, {
next(row, tableMeta) {
const o = tableMeta.toObject(row)
console.log(o) // Data is OK at this point
},
error(error) {
console.log('QUERY FAILED', error)
},
complete() {
console.log('QUERY FINISHED')
ReactDOM.render(
React.createElement(
PlotRenderer,
{id, type, data} // Properties
),
document.getElementById(`${cell.id}`)
);
}
});
class PlotRenderer extends React.Component {
render() {
let id = this.props.id; // Cell id
let data = this.props.data; // Data
let type = this.props.type; // Graph type - line, gauge, etc
// This is where I am stuck.
const style = {...};
const lineLayer = {...};
const table = ...;
const config = {...};
const SimplePlot = React.createElement(Giraffe.Plot, {config}, null);
return React.createElement('div', {style}, SimplePlot);
}
}
