Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
A React-Based Library
Kristina Robinson
Software Engineering Manager, InfluxData
January 2021
Visualize Your
Time-Stamped D...
© 2021 InfluxData. All rights reserved.
2
•
•
© 2021 InfluxData. All rights reserved.
3
•
•
•
•
•
•
•
▪
▪
▪
© 2021 InfluxData. All rights reserved.
4
•
const fluxResultCSV =
`#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,...
© 2021 InfluxData. All rights reserved.
5
© 2021 InfluxData. All rights reserved.
6
© 2021 InfluxData. All rights reserved.
7
© 2021 InfluxData. All rights reserved.
8
© 2021 InfluxData. All rights reserved.
9
© 2021 InfluxData. All rights reserved.
10
© 2021 InfluxData. All rights reserved.
11
© 2021 InfluxData. All rights reserved.
12
© 2021 InfluxData. All rights reserved.
13
© 2021 InfluxData. All rights reserved.
14
•
•
•
•
•
•
•
•
© 2021 InfluxData. All rights reserved.
15
const body = { query: query,
dialect: { header: true,
delimiter: ',',
quoteChar:...
© 2021 InfluxData. All rights reserved.
16
const { InfluxDB, flux } = require('@influxdata/influxdb-client')
// vars to con...
© 2021 InfluxData. All rights reserved.
17
•
•
// fluxResultsCSV is annotated CSV
const dataFromFlux = fromFlux(fluxResultC...
© 2021 InfluxData. All rights reserved.
18
•
•
•
© 2021 InfluxData. All rights reserved.
19
• Settings Templates
• Step 2
• Lookup
•
•
• Data Dashboards Speedtest Dashboard...
© 2021 InfluxData. All rights reserved.
20
Q & A
© 2021 InfluxData. All rights reserved.
22
•
•
•
•
•
© 2021 InfluxData. All rights reserved.
23
•
•
•
•
•
•
© 2021 InfluxData. All rights reserved.
24
•
•
•
•
Thank You
Prochain SlideShare
Chargement dans…5
×

Meet the Experts: Visualize Your Time-Stamped Data Using the React-Based Giraffe Library

191 vues

Publié le

Giraffe is the open source React-based visualization library that powers data visualizations in the InfluxDB 2.0 UI. Giraffe can be used to display your data within your own app and is Fluxlang-supported! It uses algorithms to handle visualizing high volumes of time series data that InfluxDB can ingest and query.

Kristina Robinson, the engineering manager for the Giraffe team at InfluxData, will dive into:

The basics of using the Giraffe library including how to query your data with Flux
Specific Giraffe visualization types for dashboards (e.g. single number, table and graph)
How to incorporate visualizations in your own custom apps

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Meet the Experts: Visualize Your Time-Stamped Data Using the React-Based Giraffe Library

  1. 1. A React-Based Library Kristina Robinson Software Engineering Manager, InfluxData January 2021 Visualize Your Time-Stamped Data Using Giraffe
  2. 2. © 2021 InfluxData. All rights reserved. 2 • •
  3. 3. © 2021 InfluxData. All rights reserved. 3 • • • • • • • ▪ ▪ ▪
  4. 4. © 2021 InfluxData. All rights reserved. 4 • const fluxResultCSV = `#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTi me:RFC3339,double,string,string,string,string #group,false,false,true,true,false,false,true,true,true,true #default,_result,,,,,,,,, ,result,table,_start,_stop,_time,_value,_field,_measurement,exa mple,location ,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,202 0-04-03T18:31:33.95Z,29.9,value,temperature,index.html,browser ,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,202 0-04-03T18:55:23.863Z,28.7,value,temperature,index.html,browser ,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,202 0-04-03T19:50:52.357Z,15,value,temperature,index.html,browser
  5. 5. © 2021 InfluxData. All rights reserved. 5
  6. 6. © 2021 InfluxData. All rights reserved. 6
  7. 7. © 2021 InfluxData. All rights reserved. 7
  8. 8. © 2021 InfluxData. All rights reserved. 8
  9. 9. © 2021 InfluxData. All rights reserved. 9
  10. 10. © 2021 InfluxData. All rights reserved. 10
  11. 11. © 2021 InfluxData. All rights reserved. 11
  12. 12. © 2021 InfluxData. All rights reserved. 12
  13. 13. © 2021 InfluxData. All rights reserved. 13
  14. 14. © 2021 InfluxData. All rights reserved. 14 • • • • • • • •
  15. 15. © 2021 InfluxData. All rights reserved. 15 const body = { query: query, dialect: { header: true, delimiter: ',', quoteChar: '"', commentPrefix: "#", annotations: ["datatype","group","default"]}, type: 'flux'} const headers = new Headers() headers.append('Authorization', `Token ${Constants.Influx.TOKEN}`) headers.append('Content-Type', 'application/json') var request = new Request(`${Constants.Influx.URL}/api/v2/query?org=${Constants.Influx.ORG}`, method: 'POST', headers: headers, body: JSON.stringify(body)})
  16. 16. © 2021 InfluxData. All rights reserved. 16 const { InfluxDB, flux } = require('@influxdata/influxdb-client') // vars to connect to bucket in influxdb const baseURL = process.env.INFLUX_URL // url of your cloud instance const influxToken = process.env.INFLUX_TOKEN; // all access token from the UI const orgID = process.env.ORG_ID // export your org id; const bucket = process.env.BUCKET_NAME //export the name of your bucket // connect to influxdb const influxDB = new InfluxDB({ url: baseURL, token: influxToken }) const queryApi = influxDB.getQueryApi(orgID) let clientQuery = flux``+query queryApi.queryLines(clientQuery, { next(line) { csv = `${csv}${line}n`; }, complete() { res.end(JSON.stringify({ csv: csv })) }, })
  17. 17. © 2021 InfluxData. All rights reserved. 17 • • // fluxResultsCSV is annotated CSV const dataFromFlux = fromFlux(fluxResultCSV) const config = { table: dataFromFlux.table, layers: [lineLayer], } OR const config = { fluxResponse, layers: [lineLayer], } • const lineLayer = { type: "line", x: "_time", y: "_value", }
  18. 18. © 2021 InfluxData. All rights reserved. 18 • • •
  19. 19. © 2021 InfluxData. All rights reserved. 19 • Settings Templates • Step 2 • Lookup • • • Data Dashboards Speedtest Dashboard •
  20. 20. © 2021 InfluxData. All rights reserved. 20
  21. 21. Q & A
  22. 22. © 2021 InfluxData. All rights reserved. 22 • • • • •
  23. 23. © 2021 InfluxData. All rights reserved. 23 • • • • • •
  24. 24. © 2021 InfluxData. All rights reserved. 24 • • • •
  25. 25. Thank You

×