Successfully reported this slideshow.
Your SlideShare is downloading. ×

Barbara Nelson [InfluxData] | How Can I Put That Dashboard in My App? | InfluxDays Virtual Experience NA 2020

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 27 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Barbara Nelson [InfluxData] | How Can I Put That Dashboard in My App? | InfluxDays Virtual Experience NA 2020 (20)

Advertisement

More from InfluxData (20)

Recently uploaded (20)

Advertisement

Barbara Nelson [InfluxData] | How Can I Put That Dashboard in My App? | InfluxDays Virtual Experience NA 2020

  1. 1. Barbara Nelson Head of Applications, InfluxData How Can I Put That Dashboard in My App?
  2. 2. Using time series data to improve my commute
  3. 3. © 2020 InfluxData. All rights reserved. 3 High Level Approach InfluxDB CloudTelegraf
  4. 4. Step 1 - Getting the Metrics
  5. 5. © 2020 InfluxData. All rights reserved. 5 BART API http://api.bart.gov REST API for schedules, fares, real-time estimates, station information, etc. http://api.bart.gov/api/etd.aspx? cmd=etd&orig=COLM&key=mytoken&dir=n&json=y Response in XML or JSON format
  6. 6. © 2020 InfluxData. All rights reserved. 6 Example Response "date": "10/13/2020", "time": "05:51:31 PM PDT", "station": [ { "name": "Colma", "abbr": "COLM", "etd": [ { "destination": "Antioch", "abbreviation": "ANTC", "limited": "0", "estimate": [ { "minutes": "16", "platform": "2", "direction": "North", "length": "10", "color": "YELLOW", "hexcolor": "#ffff33", "bikeflag": "1", "delay": "0" } { "minutes": "46", "platform": "2", "direction": "North", "length": "10", "color": "YELLOW", "hexcolor": "#ffff33", "bikeflag": "1", "delay": "0" } ] }, { "destination": "Richmond", "abbreviation": "RICH", "limited": "0", "estimate": [ { "minutes": "8", "platform": "2", "direction": "North", … (truncated)
  7. 7. © 2020 InfluxData. All rights reserved. 7 Telegraf http input plugin Starlark processor plugin InfluxDB output plugin Calls the BART API Parses the JSON response Data cleanup Convert metrics to integers Sends metrics to InfluxDB Cloud
  8. 8. © 2020 InfluxData. All rights reserved. 8 Input Plugin [[inputs.http]] urls = [ "http://api.bart.gov/api/etd.aspx?cmd=etd&orig=COLM&key=MYTOKEN&dir=n&json=y", "http://api.bart.gov/api/etd.aspx?cmd=etd&orig=POWL&key=MYTOKEN&dir=s&json=y" ] json_name_key = "etd" data_format = "json" json_query = "root.station.0.etd" tag_keys = ["abbr", "abbreviation", "estimate_0_direction"] json_string_fields = ["estimate_0_minutes"]
  9. 9. © 2020 InfluxData. All rights reserved. 9 Processor Plugin [[processors.starlark]] source = ''' def apply(metric): if metric.fields['estimate_0_minutes'] == "Leaving": metric.fields['estimate_0_minutes'] = '0' metric.fields['minutes'] = int(metric.fields['estimate_0_minutes']) return metric '''
  10. 10. © 2020 InfluxData. All rights reserved. 10 Output Plugin [[outputs.influxdb_v2]] urls = ["https://us-central1-1.gcp.cloud2.influxdata.com"] token = "$INFLUX_TOKEN" organization = "bnelson@influxdata.com" bucket = "bnelson's Bucket"
  11. 11. Step 2 - Analyzing the Data
  12. 12. © 2020 InfluxData. All rights reserved. 12 Query Builder
  13. 13. © 2020 InfluxData. All rights reserved. 13 Flux Query: minutes to wait for southbound train from(bucket: "bnelson's Bucket") |> range(start: v.timeRangeStart, stop: v.timeRangeStop) |> filter(fn: (r) => r._measurement == "http") |> filter(fn: (r) => r.estimate_0_direction == "South") |> filter(fn: (r) => r._field == "minutes")
  14. 14. © 2020 InfluxData. All rights reserved. 14 Flux Query: average wait time millbrae_trains = from(bucket: "bnelson's Bucket") … (truncated) sf_airport_trains = from(bucket: "bnelson's Bucket") … (truncated) join(tables: {sf_airport_trains, millbrae_trains}, on: ["_time", "_stop", "_start", "_measurement"]) |> map(fn: (r) => ({ r with _value: (if r._value_sf_airport_trains < r._value_millbrae_trains then r._value_sf_airport_trains else r._value_millbrae_trains)})) |> mean()
  15. 15. Step 3 - Making Dashboards
  16. 16. © 2020 InfluxData. All rights reserved. 16 Dashboards
  17. 17. Step 4 - My App
  18. 18. © 2020 InfluxData. All rights reserved. 18 Giraffe to the Rescue • Giraffe is an open-source React- based visualization library • React is a JavaScript library for building user interfaces • Powers the graphs in InfluxDB UI https://github.com/influxdata/giraffe • Contributions welcome!
  19. 19. © 2020 InfluxData. All rights reserved. 19 Building my React app Three parts: 1. Connect to InfluxDB 2. Execute Flux query to get the data 3. Display the results visually
  20. 20. © 2020 InfluxData. All rights reserved. 20 Connect to InfluxDB const token = <influx_token> const org = 'bnelson@influxdata.com' const queryApi = new InfluxDB( {url: 'https://us-central1- 1.gcp.cloud2.influxdata.com’, token: token}).getQueryApi(org)
  21. 21. © 2020 InfluxData. All rights reserved. 21 Define the Flux Query const query = 'from(bucket: "bnelson's Bucket") |> range(start: -20m) |> filter(fn: (r) => r._measurement == "http") |> filter(fn: (r) => r.estimate_0_direction == "South") |> filter(fn: (r) => r._field == "minutes")'; const useQuery = (query) => { const [csvData, setCsvData] = useState('') useEffect(() => { queryApi.queryLines(query, { error(error) {console.error(error)}, next(line) {fluxResultFromCloud = fluxResultFromCloud.concat(line, 'n')}, complete() {setCsvData(fluxResultFromCloud)},}) },[]) return csvData }
  22. 22. © 2020 InfluxData. All rights reserved. 22 Execute the Query & Prepare the Results function App() { let dataFromFlux = useQuery(query) dataFromFlux = fromFlux(dataFromFlux) const fill = dataFromFlux.table.columnKeys.filter( (k) => dataFromFlux.table.getColumnType(k) === 'string' ) const lineLayer = { type: "line", x: "_time", y: "_value", fill, }
  23. 23. © 2020 InfluxData. All rights reserved. 23 Display the Results const config = { table: dataFromFlux.table, layers: [lineLayer], xAxisLabel: "TIME", yAxisLabel: "MINUTES TO WAIT", } return ( <div> <Plot config={config} /> </div> ); }
  24. 24. © 2020 InfluxData. All rights reserved. 24 My app
  25. 25. © 2020 InfluxData. All rights reserved. 25 Story book
  26. 26. © 2020 InfluxData. All rights reserved. 26 For more info 1. Giraffe project: https://github.com/influxdata/giraffe 2. Storybook: https://influxdata.github.io/giraffe 3. Giraffe docs: https://github.com/influxdata/giraffe/blob/mast er/README.md
  27. 27. © 2020 InfluxData. All rights reserved. 27 Questions?

×