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

Barbara Nelson
Head of Applications, InfluxData
How Can I Put That
Dashboard in My App?

Using time series data to improve my commute

© 2020 InfluxData. All rights reserved. 3
High Level Approach
InfluxDB
CloudTelegraf

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

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",
"length": "10",
"color": "YELLOW",
"hexcolor": "#ffff33",
"bikeflag": "1",
"delay": "0"
}
]
},
{
"destination": "Richmond",
"abbreviation": "RICH",
"limited": "0",
"estimate": [
{
"minutes": "8",
"platform": "2",
… (truncated)

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

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"]

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
'''

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"

Query Builder

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")

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()

Dashboards

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!

Building my React app
Three parts:
1. Connect to InfluxDB
2. Execute Flux query to get the data
3. Display the results visually

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)

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
}

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,
}

Display the Results
const config = {
table: dataFromFlux.table,
layers: [lineLayer],
xAxisLabel: "TIME",
yAxisLabel: "MINUTES TO WAIT",
}
return (
<div>
<Plot config={config} />
</div>
);
}

My app

Story
book

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

Questions?

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

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

Mehr von InfluxData

Mehr von InfluxData (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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