SlideShare a Scribd company logo
1 of 27
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
Step 1 - Getting the Metrics
© 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
© 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)
© 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
© 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"]
© 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
'''
© 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"
Step 2 - Analyzing the Data
© 2020 InfluxData. All rights reserved. 12
Query Builder
© 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")
© 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()
Step 3 - Making Dashboards
© 2020 InfluxData. All rights reserved. 16
Dashboards
Step 4 - My App
© 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!
© 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
© 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)
© 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
}
© 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,
}
© 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>
);
}
© 2020 InfluxData. All rights reserved. 24
My app
© 2020 InfluxData. All rights reserved. 25
Story
book
© 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
© 2020 InfluxData. All rights reserved. 27
Questions?

More Related Content

What's hot

A Deeper Dive into EXPLAIN
A Deeper Dive into EXPLAINA Deeper Dive into EXPLAIN
A Deeper Dive into EXPLAIN
EDB
 
Блохин Леонид - "Mist, как часть Hydrosphere"
Блохин Леонид - "Mist, как часть Hydrosphere"Блохин Леонид - "Mist, как часть Hydrosphere"
Блохин Леонид - "Mist, как часть Hydrosphere"
Provectus
 

What's hot (20)

Statsd introduction
Statsd introductionStatsd introduction
Statsd introduction
 
Flux and InfluxDB 2.0 by Paul Dix
Flux and InfluxDB 2.0 by Paul DixFlux and InfluxDB 2.0 by Paul Dix
Flux and InfluxDB 2.0 by Paul Dix
 
INFLUXQL & TICKSCRIPT
INFLUXQL & TICKSCRIPTINFLUXQL & TICKSCRIPT
INFLUXQL & TICKSCRIPT
 
Hadoop and Storm - AJUG talk
Hadoop and Storm - AJUG talkHadoop and Storm - AJUG talk
Hadoop and Storm - AJUG talk
 
Realtime Computation with Storm
Realtime Computation with StormRealtime Computation with Storm
Realtime Computation with Storm
 
Engineering Fast Indexes for Big-Data Applications: Spark Summit East talk by...
Engineering Fast Indexes for Big-Data Applications: Spark Summit East talk by...Engineering Fast Indexes for Big-Data Applications: Spark Summit East talk by...
Engineering Fast Indexes for Big-Data Applications: Spark Summit East talk by...
 
InfluxData Platform Future and Vision
InfluxData Platform Future and VisionInfluxData Platform Future and Vision
InfluxData Platform Future and Vision
 
DECK36 - Log everything! and Realtime Datastream Analytics with Storm
DECK36 - Log everything! and Realtime Datastream Analytics with StormDECK36 - Log everything! and Realtime Datastream Analytics with Storm
DECK36 - Log everything! and Realtime Datastream Analytics with Storm
 
Collecting metrics with Graphite and StatsD
Collecting metrics with Graphite and StatsDCollecting metrics with Graphite and StatsD
Collecting metrics with Graphite and StatsD
 
RxJS - The Reactive extensions for JavaScript
RxJS - The Reactive extensions for JavaScriptRxJS - The Reactive extensions for JavaScript
RxJS - The Reactive extensions for JavaScript
 
Business Dashboards using Bonobo ETL, Grafana and Apache Airflow
Business Dashboards using Bonobo ETL, Grafana and Apache AirflowBusiness Dashboards using Bonobo ETL, Grafana and Apache Airflow
Business Dashboards using Bonobo ETL, Grafana and Apache Airflow
 
A Deeper Dive into EXPLAIN
A Deeper Dive into EXPLAINA Deeper Dive into EXPLAIN
A Deeper Dive into EXPLAIN
 
Automatic Features Generation And Model Training On Spark: A Bayesian Approach
Automatic Features Generation And Model Training On Spark: A Bayesian ApproachAutomatic Features Generation And Model Training On Spark: A Bayesian Approach
Automatic Features Generation And Model Training On Spark: A Bayesian Approach
 
Kapacitor Alert Topic handlers
Kapacitor Alert Topic handlersKapacitor Alert Topic handlers
Kapacitor Alert Topic handlers
 
Блохин Леонид - "Mist, как часть Hydrosphere"
Блохин Леонид - "Mist, как часть Hydrosphere"Блохин Леонид - "Mist, как часть Hydrosphere"
Блохин Леонид - "Mist, как часть Hydrosphere"
 
JS Fest 2019. Anjana Vakil. Serverless Bebop
JS Fest 2019. Anjana Vakil. Serverless BebopJS Fest 2019. Anjana Vakil. Serverless Bebop
JS Fest 2019. Anjana Vakil. Serverless Bebop
 
Highly Available Graphite
Highly Available GraphiteHighly Available Graphite
Highly Available Graphite
 
RxJS101 - What you need to know to get started with RxJS tomorrow
RxJS101 - What you need to know to get started with RxJS tomorrowRxJS101 - What you need to know to get started with RxJS tomorrow
RxJS101 - What you need to know to get started with RxJS tomorrow
 
WattGo: Analyses temps-réél de series temporelles avec Spark et Solr (Français)
WattGo: Analyses temps-réél de series temporelles avec Spark et Solr (Français)WattGo: Analyses temps-réél de series temporelles avec Spark et Solr (Français)
WattGo: Analyses temps-réél de series temporelles avec Spark et Solr (Français)
 
The Directions Pipeline at Mapbox - AWS Meetup Berlin June 2015
The Directions Pipeline at Mapbox - AWS Meetup Berlin June 2015The Directions Pipeline at Mapbox - AWS Meetup Berlin June 2015
The Directions Pipeline at Mapbox - AWS Meetup Berlin June 2015
 

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

Flexible Event Tracking (Paul Gebheim)
Flexible Event Tracking (Paul Gebheim)Flexible Event Tracking (Paul Gebheim)
Flexible Event Tracking (Paul Gebheim)
MongoSF
 
Portfolio for IOS
Portfolio for IOSPortfolio for IOS
Portfolio for IOS
Alind Bajaj
 

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

Running your Spring Apps in the Cloud Javaone 2014
Running your Spring Apps in the Cloud Javaone 2014Running your Spring Apps in the Cloud Javaone 2014
Running your Spring Apps in the Cloud Javaone 2014
 
InfluxDB Client Libraries and Applications | Miroslav Malecha | Bonitoo
InfluxDB Client Libraries and Applications | Miroslav Malecha | BonitooInfluxDB Client Libraries and Applications | Miroslav Malecha | Bonitoo
InfluxDB Client Libraries and Applications | Miroslav Malecha | Bonitoo
 
Advanced kapacitor
Advanced kapacitorAdvanced kapacitor
Advanced kapacitor
 
maXbox Starter 40 REST API Coding
maXbox Starter 40 REST API CodingmaXbox Starter 40 REST API Coding
maXbox Starter 40 REST API Coding
 
Pivorak.javascript.global domination
Pivorak.javascript.global dominationPivorak.javascript.global domination
Pivorak.javascript.global domination
 
Andriy Vandakurov about "Frontend. Global domination"
Andriy Vandakurov about  "Frontend. Global domination" Andriy Vandakurov about  "Frontend. Global domination"
Andriy Vandakurov about "Frontend. Global domination"
 
Flexible Event Tracking (Paul Gebheim)
Flexible Event Tracking (Paul Gebheim)Flexible Event Tracking (Paul Gebheim)
Flexible Event Tracking (Paul Gebheim)
 
Tim Hall [InfluxData] | InfluxDB Roadmap | InfluxDays Virtual Experience Lond...
Tim Hall [InfluxData] | InfluxDB Roadmap | InfluxDays Virtual Experience Lond...Tim Hall [InfluxData] | InfluxDB Roadmap | InfluxDays Virtual Experience Lond...
Tim Hall [InfluxData] | InfluxDB Roadmap | InfluxDays Virtual Experience Lond...
 
Railway reservation(c++ project)
Railway reservation(c++ project)Railway reservation(c++ project)
Railway reservation(c++ project)
 
Railway reservation(c++ project)
Railway reservation(c++ project)Railway reservation(c++ project)
Railway reservation(c++ project)
 
MongoDB.local DC 2018: Scaling Realtime Apps with Change Streams
MongoDB.local DC 2018: Scaling Realtime Apps with Change StreamsMongoDB.local DC 2018: Scaling Realtime Apps with Change Streams
MongoDB.local DC 2018: Scaling Realtime Apps with Change Streams
 
Stateful stream processing made easy with Apache Flink. - A.Mancini F.Tosi - ...
Stateful stream processing made easy with Apache Flink. - A.Mancini F.Tosi - ...Stateful stream processing made easy with Apache Flink. - A.Mancini F.Tosi - ...
Stateful stream processing made easy with Apache Flink. - A.Mancini F.Tosi - ...
 
Stateful stream processing made easy with Apache Flink
Stateful stream processing made easy with Apache FlinkStateful stream processing made easy with Apache Flink
Stateful stream processing made easy with Apache Flink
 
Portfolio for IOS
Portfolio for IOSPortfolio for IOS
Portfolio for IOS
 
Making flow Mule
Making flow MuleMaking flow Mule
Making flow Mule
 
Colloquium Report
Colloquium ReportColloquium Report
Colloquium Report
 
Android Basics
Android BasicsAndroid Basics
Android Basics
 
Stream processing IoT time series data with Kafka & InfluxDB | Al Sargent, In...
Stream processing IoT time series data with Kafka & InfluxDB | Al Sargent, In...Stream processing IoT time series data with Kafka & InfluxDB | Al Sargent, In...
Stream processing IoT time series data with Kafka & InfluxDB | Al Sargent, In...
 
Easing offline web application development with GWT
Easing offline web application development with GWTEasing offline web application development with GWT
Easing offline web application development with GWT
 
Shashi Raina [AWS] & Al Sargent [InfluxData] | Build Modern Monitoring with I...
Shashi Raina [AWS] & Al Sargent [InfluxData] | Build Modern Monitoring with I...Shashi Raina [AWS] & Al Sargent [InfluxData] | Build Modern Monitoring with I...
Shashi Raina [AWS] & Al Sargent [InfluxData] | Build Modern Monitoring with I...
 

More from InfluxData

How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
InfluxData
 
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
InfluxData
 
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
InfluxData
 
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
InfluxData
 

More from InfluxData (20)

Announcing InfluxDB Clustered
Announcing InfluxDB ClusteredAnnouncing InfluxDB Clustered
Announcing InfluxDB Clustered
 
Best Practices for Leveraging the Apache Arrow Ecosystem
Best Practices for Leveraging the Apache Arrow EcosystemBest Practices for Leveraging the Apache Arrow Ecosystem
Best Practices for Leveraging the Apache Arrow Ecosystem
 
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...
How Bevi Uses InfluxDB and Grafana to Improve Predictive Maintenance and Redu...
 
Power Your Predictive Analytics with InfluxDB
Power Your Predictive Analytics with InfluxDBPower Your Predictive Analytics with InfluxDB
Power Your Predictive Analytics with InfluxDB
 
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
How Teréga Replaces Legacy Data Historians with InfluxDB, AWS and IO-Base
 
Build an Edge-to-Cloud Solution with the MING Stack
Build an Edge-to-Cloud Solution with the MING StackBuild an Edge-to-Cloud Solution with the MING Stack
Build an Edge-to-Cloud Solution with the MING Stack
 
Meet the Founders: An Open Discussion About Rewriting Using Rust
Meet the Founders: An Open Discussion About Rewriting Using RustMeet the Founders: An Open Discussion About Rewriting Using Rust
Meet the Founders: An Open Discussion About Rewriting Using Rust
 
Introducing InfluxDB Cloud Dedicated
Introducing InfluxDB Cloud DedicatedIntroducing InfluxDB Cloud Dedicated
Introducing InfluxDB Cloud Dedicated
 
Gain Better Observability with OpenTelemetry and InfluxDB
Gain Better Observability with OpenTelemetry and InfluxDB Gain Better Observability with OpenTelemetry and InfluxDB
Gain Better Observability with OpenTelemetry and InfluxDB
 
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...
How a Heat Treating Plant Ensures Tight Process Control and Exceptional Quali...
 
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...How Delft University's Engineering Students Make Their EV Formula-Style Race ...
How Delft University's Engineering Students Make Their EV Formula-Style Race ...
 
Introducing InfluxDB’s New Time Series Database Storage Engine
Introducing InfluxDB’s New Time Series Database Storage EngineIntroducing InfluxDB’s New Time Series Database Storage Engine
Introducing InfluxDB’s New Time Series Database Storage Engine
 
Start Automating InfluxDB Deployments at the Edge with balena
Start Automating InfluxDB Deployments at the Edge with balena Start Automating InfluxDB Deployments at the Edge with balena
Start Automating InfluxDB Deployments at the Edge with balena
 
Understanding InfluxDB’s New Storage Engine
Understanding InfluxDB’s New Storage EngineUnderstanding InfluxDB’s New Storage Engine
Understanding InfluxDB’s New Storage Engine
 
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDB
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDBStreamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDB
Streamline and Scale Out Data Pipelines with Kubernetes, Telegraf, and InfluxDB
 
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...
Ward Bowman [PTC] | ThingWorx Long-Term Data Storage with InfluxDB | InfluxDa...
 
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022
Scott Anderson [InfluxData] | New & Upcoming Flux Features | InfluxDays 2022
 
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts | InfluxDays 2022
 
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
Steinkamp, Clifford [InfluxData] | Welcome to InfluxDays 2022 - Day 2 | Influ...
 
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
Steinkamp, Clifford [InfluxData] | Closing Thoughts Day 1 | InfluxDays 2022
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 

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

  • 1. Barbara Nelson Head of Applications, InfluxData How Can I Put That Dashboard in My App?
  • 2. Using time series data to improve my commute
  • 3. © 2020 InfluxData. All rights reserved. 3 High Level Approach InfluxDB CloudTelegraf
  • 4. Step 1 - Getting the Metrics
  • 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. © 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. © 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. © 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. © 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. © 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. Step 2 - Analyzing the Data
  • 12. © 2020 InfluxData. All rights reserved. 12 Query Builder
  • 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. © 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. Step 3 - Making Dashboards
  • 16. © 2020 InfluxData. All rights reserved. 16 Dashboards
  • 17. Step 4 - My App
  • 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. © 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. © 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. © 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. © 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. © 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. © 2020 InfluxData. All rights reserved. 24 My app
  • 25. © 2020 InfluxData. All rights reserved. 25 Story book
  • 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. © 2020 InfluxData. All rights reserved. 27 Questions?