Throughout an InfluxData inner hackathon, I used to be seeking to work on a mission that will assist me strengthen my Telegraf and Flux abilities. I additionally needed to make use of InfluxData’s Giraffe to visualise my mission in a React utility. After studying Sean Brickley’s weblog publish on monitoring the Worldwide House Station with InfluxDB, I used to be impressed to construct on this concept. So I landed on constructing a React utility that might observe the ISS’s place reside and doc its journey utilizing InfluxDB, ExpressJS, Telegraf, and Giraffe.
There are three major parts for this mission:
- The Telegraf config
- The ExpressJS API server
- The React utility
Let’s begin with the Telegraf config.
Like Sean, I used a public API to get the present place of the ISS. My plan was to make use of Telegraf to ballot this API, parse the coordinate information, and ship this location info to InfluxDB. I used Telegraf’s HTTP plug-in to realize this. The subsequent step was to parse the coordinate info from the JSON and convert the strings into floats. This may be completed with Telegraf’s Converter plug-in. And at last, I wanted to ship my location information to my InfluxDB cloud occasion working in AWS. Naturally, that is simply achieved with Telegraf’s InfluxDB plug-in. The first step full! Now we are able to run telegraf --config ./telegraf/iss.conf
and begin accumulating the ISS’s location.
Now that we’re starting to gather some information, the subsequent step is querying it. I made a decision to construct an API utilizing ExpressJS and to question my InfluxDB occasion utilizing the InfluxDB JS consumer. The objective right here is to construct an API that the React app can use to retrieve the placement information that it might want to visualize the ISS’s flight path utilizing Giraffe.
First we have to hook up with InfluxDB, and we are able to do this by passing our URL and token to the InfluxDB object. Since we’re going to make use of the consumer to run queries, we have to get the Question API object. In case you needed to get bucket info, for instance, you’d need to get the Bucket API object as a substitute.
const influxDB = new InfluxDB({ url: baseURL, token: influxToken })
const queryApi = influxDB.getQueryApi(orgID)
Subsequent, we are able to use the InfluxDB JS consumer to question our InfluxDB occasion like so:
app.get('/iss, (_, res) => {
let csv = ''
const issQuery = `todo`
let clientQuery = flux``+issQuery
queryApi.queryLines(clientQuery, {
subsequent(line) {
csv = `${csv}${line}n`;
},
error(error) {
console.error(error)
console.log('nFinished /iss ERROR')
res.finish()
},
full() {
console.log('nFinished /iss SUCCESS')
res.finish(JSON.stringify({ csv }))
},
})
})
This route will use the Question API object from the InfluxDB consumer to execute our question (which we haven’t outlined but). We’ll use the queryLines
operate to get our response again line by line. The ensuing string shall be a csv response that Giraffe can perceive.
Nice! Now we simply want a Flux question. I experimented with a number of queries to try to see which one I assumed highlighted the ISS’s motion one of the best. If I merely grabbed all the information over the previous a number of hours, the Giraffe plot is perhaps too busy. If I targeted on attempting to seize the information for one full orbit, there’s a bizarre downside to unravel with drawing a round, steady line throughout a flat map. So I ended up deciding to attract the ISS’s present orbit, from west to east, that means I grabbed all the information factors from 0 levels longitude to its present place. The ISS orbits each 93 minutes, so I restricted my question inside that vary. Right here’s what I got here up with:
import "experimental/geo"
currentPos = from(bucket: "iss")
|> vary(begin: -1m)
|> filter(fn: (r) => r._field == "iss_position_longitude")
|> tail(n: 1)
|> findRecord(
fn: (key) => true,
idx: 0
)
from(bucket: "iss")
|> vary(begin: -93m)
|> aggregateWindow(each: 3m, fn: min, createEmpty: false)
|> geo.shapeData(latField: "iss_position_latitude", lonField: "iss_position_longitude", stage: 14)
|> filter(fn: (r) => r.lon <= currentPos._value)
|> geo.asTracks()
The question begins by discovering the present longitude place of the ISS, which might be the latest file. Then we question for all of the positional information, aggregated into three-minute home windows the place the longitude is lower than the ISS’s present place. We use Flux’s experimental Geo package to shape the data and to return the positional data as a track.
OK now on to the fun part — drawing the graph! I’m just going to cover the highlights, so feel free to check out the details of the implementation in the repo. Basically, we have a React application that is using InfluxData’s Giraffe visualization library. Giraffe recently added Geo plots with the ability to plot markers and tracks (check out the Storybook to play around with them). Our React application will query our API every 30 seconds or so to retrieve the latest data. We’ll use the fromFlux
function to parse the response into a table that Giraffe can consume. As you can see from the Storybook, there are a lot of knobs you can tweak with the Geo plot. One important parameter is tileServerConfiguration
, which tells Giraffe where to get the map images. I used OpenStreetMap and provided Giraffe the following object so it knows how to retrieve the correct map tiles:
const osmTileServerConfiguration = {
tileServerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
}
At this point, all the pieces are falling together! I added a checkbox into my UI to add the markers as an optional layer and also provided the ability to query for historical data of a custom time range.
And there we have it — the ISS’s location updated live as it travels around the globe! Feel free to check out the source code and play with it yourself. Let me know if you find other Flux queries that produce interesting visualizations of this data.
As Sean mentioned in his post, the Geo features shown here are still experimental, but we’re working hard to get them ready for production. Stay tuned for more exciting updates in this space (pun intended)! If you’re working on a fun InfluxDB project like Sean and you need help please reach out on our community forum or Slack. We’d love to answer your questions and learn about what you’re doing with InfluxDB.
Gene Hynson is a software engineer at InfluxData who is passionate about building thrilling product features for InfluxDB. Gene has five years of experience as a full-stack engineer building modern, cloud-first software at VMware, Pivotal, and Boeing.
—
New Tech Forum provides a venue to explore and discuss emerging enterprise technology in unprecedented depth and breadth. The selection is subjective, based on our pick of the technologies we believe to be important and of greatest interest to InfoWorld readers. InfoWorld does not accept marketing collateral for publication and reserves the right to edit all contributed content. Send all inquiries to [email protected]
Copyright © 2021 IDG Communications, Inc.