Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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?

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

Views

Total views

108

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×