2.2.12-c • Published 9 months ago

@hopara/iframe v2.2.12-c

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
9 months ago

Hopara Iframe Client

This package provides an iframe to add Hopara visualizations to your project.

Installing

You can install the iframe as a NPM module or using the Hopara CDN directly:

As a module:

$ npm install @hopara/iframe

Using Hopara CDN:

<script src="https://statics.hopara.app/embedded/latest/client.js"></script>

Authentication

The iframe requires a valid accessToken. Use the Auth API to fetch it, as explained in our integration guide

Example

Node.JS

import React from 'react'
import Hopara from 'hopara'

class MyComponent extends React.Component {
  componentDidMount(): void {
    const hopara = Hopara.init({
      visualizationId: 'my-hopara-viz',
      accessToken: 'my-hopara-token',
      targetElementId: 'my-target-element',
    })
  }

  render() {
    <div id="my-target-element" />
  }
}

HTML

<html>
  <head>
    ...
    <script src="https://statics.hopara.app/embedded/latest/client.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function(){
        const hopara = Hopara.init({
          visualizationId: 'my-hopara-viz',
          accessToken: 'my-hopara-token',
          targetElementId: 'my-target-element',
        })
      });
    </script>
  </head>
  <body>
    <div id="my-target-element"></div>
  </body>
</html>

API

Init

The init command starts the Hopara Visualization and returns a hopara instance that can be used to further interactions

const hopara = Hopara.init(config)

Update

Use the update command to update any config passed previously in the init command.

...
const hopara = Hopara.init(config)
hopara.update({accessToken: 'newAccessToken'})
...

Hopara Instance

{
  // When triggered Hopara Visualization will reload every data source on the view
  reload: () => void
}

Hopara Config

{
  // The vizualization
  visualizationId: string

  // Short-lived token provided by Auth API used for authentication in API calls
  accessToken: string

  // Long-lived token used to obtain a new accessToken when the current one expires.
  refreshToken: string | undefined

  // 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 filters to be added on data fetches
  filters: Filter[] | undefined

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

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 customDataLoaders = [{
  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,
      }
    ]
  }
}]

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

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
}

Manual refresh

You can manually trigger a data refresh by calling the refresh method. This will result in all data loaders being called again.

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

// force data refresh every 3 seconds
setInterval(() => {
  if (!hopara) return
  hopara.refresh()
}, 3000)

Filter

When adding a filter, the field name is handled as a dimension in Hopara.

Hopara.init({
  visualizationId: 'my-hopara-viz',
  accessToken: 'my-hopara-token',
  targetElementId: 'my-target-element',
  filters: [
    {
      field: 'type',
      values: ['REFRIGERATOR', 'FREEZER'],
    }
  ],
})

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)
      }
    }
  ],
})
@infinitebrahmanuniverse/nolb-_hop@everything-registry/sub-chunk-401
2.2.12-a

9 months ago

2.2.12-c

9 months ago

2.2.12-b

9 months ago

2.2.12

9 months ago

2.2.10-a

9 months ago

2.2.1

10 months ago

2.2.3

10 months ago

2.2.2

10 months ago

2.2.5

10 months ago

2.2.4

10 months ago

2.2.7

9 months ago

2.2.6

9 months ago

2.2.9

9 months ago

2.2.1-a

10 months ago

2.2.10

9 months ago

2.2.5-b

9 months ago

2.2.5-a

9 months ago

2.2.5-f

9 months ago

2.2.5-d

9 months ago

2.0.3-c

1 year ago

2.0.3-d

1 year ago

2.0.19-c

12 months ago

2.0.19-d

12 months ago

2.0.19-a

12 months ago

2.0.19-b

12 months ago

0.4.10

1 year ago

0.4.11

1 year ago

2.2.0

10 months ago

2.1.2

11 months ago

2.0.15

12 months ago

2.1.1

11 months ago

2.0.16

12 months ago

2.1.4

11 months ago

2.0.13

1 year ago

2.1.6

10 months ago

2.1.5

10 months ago

2.0.12

1 year ago

2.1.8

10 months ago

2.1.7

10 months ago

2.0.10

1 year ago

2.1.0

11 months ago

2.0.19

12 months ago

2.0.17

12 months ago

2.0.26

12 months ago

2.0.27

12 months ago

2.0.25

12 months ago

2.0.22

12 months ago

2.0.23

12 months ago

2.0.20

12 months ago

2.0.21

12 months ago

0.4.9

1 year ago

0.4.8

1 year ago

2.0.28

12 months ago

2.0.29

12 months ago

2.0.37

11 months ago

2.0.3

1 year ago

2.0.38

11 months ago

2.0.2

1 year ago

2.0.35

11 months ago

2.0.5

1 year ago

2.0.4

1 year ago

2.0.33

11 months ago

2.0.7

1 year ago

2.0.34

11 months ago

2.0.31

11 months ago

2.0.9

1 year ago

2.0.32

11 months ago

2.0.8

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

2.1.9

10 months ago

2.0.15-a

12 months ago

2.1.10

10 months ago

2.1.6-a

10 months ago

2.1.6-b

10 months ago

2.1.10-a

10 months ago

0.4.7

1 year ago

0.4.6

1 year ago

0.4.11-a

1 year ago

0.4.5

1 year ago

0.4.4

1 year ago

0.4.2

1 year ago

0.4.1

1 year ago

0.3.107

1 year ago

0.3.106

1 year ago

0.3.109

1 year ago

0.3.108

1 year ago

0.3.105

1 year ago

0.3.104

1 year ago

0.3.102

1 year ago

0.3.101

1 year ago

0.3.100

1 year ago

0.3.99

1 year ago

0.3.97

1 year ago

0.3.98

1 year ago

0.3.96-a

1 year ago

0.3.96-b

1 year ago

0.3.96

1 year ago

0.3.95

1 year ago

0.3.94

1 year ago

0.3.93

1 year ago

0.3.92

1 year ago

0.3.91

1 year ago

0.3.90

1 year ago

0.3.89

1 year ago

0.3.88-c

1 year ago

0.3.88-b

1 year ago

0.3.86

1 year ago

0.3.85

1 year ago

0.3.88

1 year ago

0.3.87

1 year ago

0.3.84

1 year ago

0.3.83

1 year ago

0.3.82

1 year ago

0.3.81

1 year ago

0.3.80

1 year ago

0.3.79

1 year ago

0.3.75

1 year ago

0.3.73

1 year ago

0.3.72

1 year ago

0.3.78

1 year ago

0.3.76

1 year ago

0.3.71

1 year ago

0.3.70

1 year ago

0.3.69

1 year ago

0.3.68

1 year ago

0.3.67

1 year ago

0.3.65

1 year ago

0.3.64

1 year ago

0.3.63

1 year ago

0.3.62

1 year ago

0.3.61

1 year ago

0.3.60

1 year ago

0.3.59

1 year ago

0.3.58

1 year ago

0.3.56

1 year ago

0.3.55

1 year ago

0.3.53

1 year ago

0.3.52

1 year ago

0.3.50-1

1 year ago

0.3.51

1 year ago

0.3.49-d

1 year ago

0.3.49-e

1 year ago

0.3.49-b

1 year ago

0.3.49-a

1 year ago

0.3.49-c

1 year ago

0.3.50

1 year ago

0.3.49

1 year ago

0.3.48

1 year ago

0.3.47

2 years ago

0.3.46

2 years ago

0.3.45

2 years ago

0.3.44

2 years ago

0.3.31

2 years ago

0.3.30

2 years ago

0.3.39

2 years ago

0.3.38

2 years ago

0.3.37

2 years ago

0.3.36

2 years ago

0.3.35

2 years ago

0.3.34

2 years ago

0.3.34-a

2 years ago

0.3.32

2 years ago

0.3.34-f

2 years ago

0.3.34-g

2 years ago

0.3.29

2 years ago

0.3.34-k

2 years ago

0.3.20

2 years ago

0.3.27

2 years ago

0.3.41-b

2 years ago

0.3.26

2 years ago

0.3.25

2 years ago

0.3.24

2 years ago

0.3.43-d

2 years ago

0.3.22

2 years ago

0.3.43-c

2 years ago

0.3.21

2 years ago

0.3.19

2 years ago

0.3.18

2 years ago

0.3.9

2 years ago

0.3.16

2 years ago

0.3.31-a

2 years ago

0.3.15

2 years ago

0.3.14

2 years ago

0.3.31-c

2 years ago

0.3.13

2 years ago

0.3.31-b

2 years ago

0.3.10

2 years ago

0.3.42

2 years ago

0.3.41

2 years ago

0.3.40

2 years ago

0.3.42-a

2 years ago

0.3.42-b

2 years ago

0.3.43

2 years ago

0.1.119

2 years ago

0.1.114

2 years ago

0.1.116

2 years ago

0.3.0

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.3.6

2 years ago

0.3.5

2 years ago

0.1.120

2 years ago

0.3.8

2 years ago

0.3.7

2 years ago

0.3.2

2 years ago

0.2.3

2 years ago

0.3.1

2 years ago

0.2.2

2 years ago

0.3.4

2 years ago

0.2.5

2 years ago

0.3.3

2 years ago

0.2.4

2 years ago

0.1.109

3 years ago

0.1.108

3 years ago

0.1.113

3 years ago

0.1.105

3 years ago

0.1.104

3 years ago

0.1.112

3 years ago

0.1.103

3 years ago

0.1.102

3 years ago

0.1.101

3 years ago

0.1.100

3 years ago

0.1.99

3 years ago

0.1.98

3 years ago

0.1.96

3 years ago

0.1.93

3 years ago

0.1.92

3 years ago

0.1.91

3 years ago

0.1.90

3 years ago