@hopara/react v0.4.5

@hopara/react

This package provides a react component to add Hopara visualizations to your project.

Requirements

The Hopara component is built on top of React and React-Redux. It requires the following dependencies:

• react >= 18.2
• react-redux >= 8.0
• redux >= 4.2

Installing

Package manager

Using npm:

$ npm install --save @hopara/react

Using yarn:

$ yarn add @hopara/react

Once installed, you can import the library using import or require:

import {Hopara} from '@hopara/react';

Authentication

The component requires a valid accessToken. Use the Auth API to fetch it, as explained in our integration guide(https://docs.hopara.app/#/docs/integration-guide/2-authentication-integration.html)

Examples

Basic usage

<div className="HoparaEmbedded">
  <Hopara
    visualizationId="your-visualization-id"
    accessToken="your-access-token"
  />
</div>

Module API

You can further customize the integration by using the component props:

type HoparaProps = {
  // The visualization id
  visualizationId: string

  // The accessToken fetched from the auth API
  accessToken: string

  // Switch the theme mode to dark scheme (default: false)
  darkMode: boolean | undefined

  // Overwrites data at rendering time
  dataLoaders: DataLoader[] | undefined

  // The initial position to load the visualization
  initialPosition: InitialPosition | undefined

  // The initial row (e.g. asset) to load the visualization
  initialRow: InitialRow | undefined

  // The custom controller to be used on Hopara Visualization
  controller: HoparaController | undefined

  // Overrides the map style defined in the visualization studio. See the Map Style section for the available options
  mapStyle: string | undefined

  // Functions called when callback actions are triggered
  callbacks: CallbackFunction[]
}

Controller

You can provide a Hopara Controller to manually trigger a data refresh (i.e. fetch all data again).

Example

import {Hopara, HoparaController} from '@hopara/react'
const customController = new HoparaController()

<div className="HoparaEmbedded">
  <Hopara
    visualizationId="your-visualization-id"
    accessToken="your-access-token"
    controller={customController}
  />
</div>

Data Loader

By default Hopara will load the same visualization and data as seen as in hopara.app. You can use the data loader prop to provide a custom way to load the data.

type DataLoader = {
  // query name
  query: string

  // data source name
  source: string

  // callback to be used on data load
  loader: (filterSet: {limit: number, offset:number, filters: any[]}) => Promise<Record<string, any>[]>
}

Example

const dataLoaders = [{
  query: 'queryName',
  source: 'dataSourceName',
  loader: async () => {
    return [
      {
        id: 1,
        name: 'Eiffel Tower',
        country: 'France',
        longitude: 48.85845461500544,
        latitude: 2.294467845588995
      },
      {
        id: 2,
        name: 'Liberty Statue',
        country: 'USA',
        longitude: 40.68815550804761,
        latitude: -74.02620077137483
      },
      {
        id: 3,
        name: 'Great Wall of China',
        country: 'China',
        longitude: 40.43211592595951,
        latitude: 116.57040708445938,
      }
    ]
  }
}]
...
<div className="HoparaEmbedded">
  <Hopara
    visualizationId="your-visualization-id"
    accessToken="your-access-token"
    dataLoaders={dataLoaders}
  />

Initial Position

The initial position prop overrides the initial position of the visualization.

type InitialPosition = {
  latitude: number | undefined
  longitude: number | undefined
  x: number | undefined
  y: number | undefined
  z: number | undefined
  zoom: number | undefined
  bearing: number | undefined
}

Initial Row

The initial row prop centers the visualization around a specific row (e.g. asset, facility).

type InitialRow = {
  layerId: string
  rowId: string
}

Map Style

In a geo visualization this config overrides the map style defined in the visualization studio.

The available options are 'none', 'building', 'dark', 'light', 'light-street', 'navigation', 'satellite'.

Hopara.init({
  visualizationId: 'my-hopara-viz',
  accessToken: 'my-hopara-token',
  targetElementId: 'my-target-element',
  mapStyle: 'building',
})

Callback Function

You can implement custom interactions by adding callback actions to a layer. When the user selects an object in the visualization and click on the action the registered javascript function will be called with the associated row data.

type CallbackFunction = {
  name: string
  callback: (row) => void
}

Hopara.init({
  visualizationId: 'my-hopara-viz',
  accessToken: 'my-hopara-token',
  targetElementId: 'my-target-element',
  callbacks: [
    {
      name: 'my-callback-action',
      callback: (row) => {
        console.log('Callback triggered', row)
      }
    }
  ],
})