Javascript SDK

The development folder has a small app that uses all the modules, use this for example / development.

Note: some of modules require specific propties. Check the types the module you want to use and make sure you're query matches, type-errors/runtime errors will be thrown if it doesn't match the spec

Fetcher

Simple fetcher for GraphQL endpoints, initialize like:

const fetcher = new Fetcher({
    headers: {
      Referer: 'http://localhost:5174/',
      'content-type': 'application/json',
      'x-app-id': 'YOUR_APP_ID_HERE',
      'x-client-id': 'YOUR_CLIENT_ID_HERE',
    },
    baseUrl: "https://chargetrip.io",
    wsBaseUrl: "wss://chargetrip.io"
})

You can fetch any query you want with query<Query, Variables>() (you can obtain the VehicleQuery type with codegen):

const response = await fetcher.query<VehicleQuery, VehicleQueryVariables>({
  query: VEHICLE_QUERY,
  variables: { id: vehicleId },
})

The fetcher class also has a build in getRoute method which automatically starts a subscription if the route has status pending or processing:

fetcher.getRoute<GetRouteV2Query, RouteV2Subscription, GetRouteV2QueryVariables>({
  query: ROUTE_QUERY,
  subscription: ROUTE_SUBSCRIPTION,
  variables: { id: routeId },
})

Breakdown (exact name tbd.)

Used for rendering the journey/route overview, use like:

Parameters:

export interface BreakdownConfig {
  legs: BreakdownLegInput[];
  departureDate?: Date;
  stations?: BreakdownStationInput[]; // Provide your own stations and we will attach them to the output.
}

Usage:

const module = new BreakdownModule({
    legs: route.recommended?.legs.filter(isDefined) || [],
    stations: stations
})

Now that the module is initiated we can use it to get the following:

module.isReady // Promise to wait for stations to load, only if you pass the fetcher, otherwise it will be ready instantly.
module.originName // legs[0].origin.properties?.name
module.destinationName // legs[this.legs.length - 1].destination.properties?.name
module.totalCost // Total cost of the route.
module.breakdown // BreakdownItem[]

Mapbox

Usage:

const module = new MapboxHelper({
  map: map, // Mapbox Map reference
  stations: stations,
  routeDetails: routeDetails,
  styling: Styling,
})

Now that the module is initiated we can use it to get the following:

module.draw() // Draws everything below
module.drawPolyline // Draws polyline + polyline border
module.drawMarkers // Draws origin / destination / stations / mapbox markers
module.drawOrigin
module.drawDestination
module.addMarker // Add a custom marker
module.drawStations
module.drawAlternativeStations

module.center // Centers map based on route polyline.
module.toggleAlternativeStations
module.toggleLayerVisibility
module.setLayerVisibility
module.addLayerToMap
module.removeAllLayers
module.removeAllMarkers
module.removeLayer
module.setRouteDetails // update route details, automatically re-draws the layers
module.setStations // update stations, automatically re-draws the layers

Pricing

Usage:

const module = new Pricing({ evses: station?.evses?.filter(isDefined) || [] })

Now that the module is initiated we can use it to get the following:

module.standards // List of reduced connector standards with supported powers
module.getPrice({ connector: connector, partnerId: partner }) // Get price by partner id

After module.getPrice we get the full pricing object, you can calculate prices yourself or use PriceFormatter to handle this for you.

Usage:

const module = new PriceFormatter({ price: price, consumption: 50, duration: 60 * 15 })
module.currency // Currency used.
module.totalPrice // Total price of charging
module.flatFee // Flat fee (included in total price).
module.idleFee // Idle fee (included in total price).