Mutate to display route elevation data
Route elevation has impact on the battery performance. Having the elevation data at hand with segment details demonstrates this.
View on Github
Requirements
- Chargetrip API key - to plot routes outside this region
- Mapbox API key - to display the map
- URQL - a lightweight graphQL client
- Chart.js - to display a graph
Steps to take
- Plotting elevation data starts by executing the newRoute mutation. This mutation requires information about the car, origin and destination. After the mutation is finished executing a route id will be returned.
- This id can be used to request route updates through the routeUpdatedById subscription. This subscription receives dynamic updates.
- After the subscription returns done as status, the pathPlot field will be available. It contains 100 segments which are rendered using the open source chart.js library. The polyline and legs object can be used to display the route and charge stations on the map. Additional data such as distance, duration and consumption are also available.
Next steps
As seen in the example, route elevation impacts the battery performance. To be more conservative or aggressive on battery level, it might be useful to play with the capacity. This will be explained in the next example.
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
import { SubscriptionClient } from 'subscriptions-transport-ws';import { createClient, createRequest, defaultExchanges, subscriptionExchange } from '@urql/core';import { createRouteQuery, routeUpdateSubscription } from './queries';import { pipe, subscribe } from 'wonka'; /** * For the purpose of this example we use urgl - lightweights GraphQL client. * To establish a connection with Chargetrip GraphQL API you need to have an API key. * The key in this example is a public one and gives access only to a part of our extensive database. * You need a registered `x-client-id` to access the full database. * Read more about authorisation in our documentation (https://docs.chargetrip.com/#authorisation). */const headers = { //Replace this x-client-id and app-id with your own to get access to more cars 'x-client-id': '5ed1175bad06853b3aa1e492', 'x-app-id': '623998b2c35130073829b2d2',}; const subscriptionClient = new SubscriptionClient('wss://api.chargetrip.io/graphql', { reconnect: true, connectionParams: headers,}); const client = createClient({ url: 'https://api.chargetrip.io/graphql', fetchOptions: { method: 'POST', headers, }, exchanges: [ ...defaultExchanges, subscriptionExchange({ forwardSubscription(operation) { return subscriptionClient.request(operation); }, }), ],}); /** * To create a route you need to: * * 1. create a new route and receive back its ID; * 2. subscribe to route updates in order to receive its details. */export const getRoute = callback => { client .mutation(createRouteQuery) .toPromise() .then(response => { const routeId = response.data.newRoute; const { unsubscribe } = pipe( client.executeSubscription(createRequest(routeUpdateSubscription, { id: routeId })), subscribe(result => { const { status, route } = result.data?.routeUpdatedById; // You can keep listening to the route changes to update route information. // For this example we want to only draw the initial route. if (status === 'done' && route) { unsubscribe(); callback(routeId, route); } }), ); }) .catch(error => console.log(error));};