@hopara/iframe 0.3.20 → 0.3.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ import Hopara from 'hopara'
|
|
|
26
26
|
class MyComponent extends React.Component {
|
|
27
27
|
componentDidMount(): void {
|
|
28
28
|
const hopara = Hopara.init({
|
|
29
|
-
|
|
29
|
+
visualization: 'my-hopara-viz',
|
|
30
30
|
accessToken: 'my-hopara-token',
|
|
31
31
|
targetElementId: 'my-target-element',
|
|
32
32
|
})
|
|
@@ -53,7 +53,7 @@ class MyComponent extends React.Component {
|
|
|
53
53
|
<script>
|
|
54
54
|
document.addEventListener("DOMContentLoaded", function(){
|
|
55
55
|
const hopara = Hopara.init({
|
|
56
|
-
|
|
56
|
+
visualization: 'my-hopara-viz',
|
|
57
57
|
accessToken: 'my-hopara-token',
|
|
58
58
|
targetElementId: 'my-target-element',
|
|
59
59
|
})
|
|
@@ -75,7 +75,7 @@ class MyComponent extends React.Component {
|
|
|
75
75
|
# API
|
|
76
76
|
|
|
77
77
|
### Init
|
|
78
|
-
The init command starts the Hopara
|
|
78
|
+
The init command starts the Hopara Visualization and returns a hopara instance that can be used to further interactions
|
|
79
79
|
```js
|
|
80
80
|
const hopara = Hopara.init(config)
|
|
81
81
|
```
|
|
@@ -92,7 +92,7 @@ hopara.update({accessToken: 'newAccessToken'})
|
|
|
92
92
|
### Hopara Instance
|
|
93
93
|
```typescript
|
|
94
94
|
{
|
|
95
|
-
// When triggered Hopara
|
|
95
|
+
// When triggered Hopara Visualization will reload every data source on the view
|
|
96
96
|
reload: () => void
|
|
97
97
|
}
|
|
98
98
|
```
|
|
@@ -100,8 +100,8 @@ hopara.update({accessToken: 'newAccessToken'})
|
|
|
100
100
|
### Hopara Config
|
|
101
101
|
```typescript
|
|
102
102
|
{
|
|
103
|
-
// The
|
|
104
|
-
|
|
103
|
+
// The vizualization
|
|
104
|
+
visualization: string
|
|
105
105
|
|
|
106
106
|
// The accessToken provided by auth API
|
|
107
107
|
accessToken: string
|
|
@@ -123,11 +123,14 @@ hopara.update({accessToken: 'newAccessToken'})
|
|
|
123
123
|
|
|
124
124
|
// The initial row (e.g. asset) to load the visualization
|
|
125
125
|
initialRow: InitialRow | undefined
|
|
126
|
-
|
|
126
|
+
|
|
127
|
+
// The mapStyle that should be displayed by default. See the MapStyle section to verify the available value options
|
|
128
|
+
mapStyle: string | undefined
|
|
129
|
+
|
|
127
130
|
```
|
|
128
131
|
|
|
129
132
|
### Data Loader
|
|
130
|
-
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.
|
|
133
|
+
By default Hopara will load the same visualization and data as seen as in [hopara.app](https://hopara.app). You can use the data loader prop to provide a custom way to load the data.
|
|
131
134
|
|
|
132
135
|
```typescript
|
|
133
136
|
type DataLoader = {
|
|
@@ -177,7 +180,7 @@ const customDataLoaders = [{
|
|
|
177
180
|
}]
|
|
178
181
|
|
|
179
182
|
Hopara.init({
|
|
180
|
-
|
|
183
|
+
visualization: 'my-hopara-viz',
|
|
181
184
|
accessToken: 'my-hopara-token',
|
|
182
185
|
targetElementId: 'my-target-element',
|
|
183
186
|
dataLoaders: customDataLoaders,
|
|
@@ -185,7 +188,7 @@ Hopara.init({
|
|
|
185
188
|
```
|
|
186
189
|
|
|
187
190
|
### Data Updater
|
|
188
|
-
By default Hopara will update the visualization in the same database configured in hopara.app. You can use the data updater prop to provide a custom way to update the data.
|
|
191
|
+
By default Hopara will update the visualization in the same database configured in [hopara.app](https://hopara.app). You can use the data updater prop to provide a custom way to update the data.
|
|
189
192
|
|
|
190
193
|
The data updater is called when placing objetcs in a visualization and when resizing images.
|
|
191
194
|
|
|
@@ -214,7 +217,7 @@ const customDataUpdaters = [{
|
|
|
214
217
|
|
|
215
218
|
|
|
216
219
|
Hopara.init({
|
|
217
|
-
|
|
220
|
+
visualization: 'my-hopara-viz',
|
|
218
221
|
accessToken: 'my-hopara-token',
|
|
219
222
|
targetElementId: 'my-target-element',
|
|
220
223
|
dataUpdaters: customDataUpdaters,
|
|
@@ -251,7 +254,7 @@ You can manually trigger a data refresh by calling the refresh method. This will
|
|
|
251
254
|
|
|
252
255
|
```html
|
|
253
256
|
const hopara = Hopara.init({
|
|
254
|
-
|
|
257
|
+
visualization: 'my-hopara-viz',
|
|
255
258
|
accessToken: 'my-hopara-token',
|
|
256
259
|
targetElementId: 'my-target-element',
|
|
257
260
|
})
|
|
@@ -261,4 +264,18 @@ setInterval(() => {
|
|
|
261
264
|
if (!hopara) return
|
|
262
265
|
hopara.refresh()
|
|
263
266
|
}, 3000)
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### Map Style
|
|
270
|
+
The map style to be used by default (Geographic Visualizations only).
|
|
271
|
+
|
|
272
|
+
The available options are `'none'`, `'building'`, `'dark'`, `'light'`, `'light-street'`, `'navigation'`, `'satellite'`. The default behavior is to use the style defined in the visualization specification
|
|
273
|
+
|
|
274
|
+
```jsx
|
|
275
|
+
Hopara.init({
|
|
276
|
+
visualization: 'my-hopara-viz',
|
|
277
|
+
accessToken: 'my-hopara-token',
|
|
278
|
+
targetElementId: 'my-target-element',
|
|
279
|
+
mapStyle: 'building',
|
|
280
|
+
})
|
|
264
281
|
```
|
package/build/client.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define([],factory);else{var a=factory();for(var i in a)(typeof exports==="object"?exports:root)[i]=a[i]}})(this,(function(){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter})}};__webpack_require__.r=function(exports){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(exports,"__esModule",{value:true})};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if(mode&4&&typeof value==="object"&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,"default",{enumerable:true,value});if(mode&2&&typeof value!="string")for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=1)}([function(module){module.exports=JSON.parse('{"name":"@hopara/iframe","version":"0.3.
|
|
1
|
+
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define([],factory);else{var a=factory();for(var i in a)(typeof exports==="object"?exports:root)[i]=a[i]}})(this,(function(){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId]){return installedModules[moduleId].exports}var module=installedModules[moduleId]={i:moduleId,l:false,exports:{}};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.l=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.d=function(exports,name,getter){if(!__webpack_require__.o(exports,name)){Object.defineProperty(exports,name,{enumerable:true,get:getter})}};__webpack_require__.r=function(exports){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(exports,"__esModule",{value:true})};__webpack_require__.t=function(value,mode){if(mode&1)value=__webpack_require__(value);if(mode&8)return value;if(mode&4&&typeof value==="object"&&value&&value.__esModule)return value;var ns=Object.create(null);__webpack_require__.r(ns);Object.defineProperty(ns,"default",{enumerable:true,value});if(mode&2&&typeof value!="string")for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns};__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module["default"]}:function getModuleExports(){return module};__webpack_require__.d(getter,"a",getter);return getter};__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)};__webpack_require__.p="";return __webpack_require__(__webpack_require__.s=1)}([function(module){module.exports=JSON.parse('{"name":"@hopara/iframe","version":"0.3.22","main":"build/client.js","scripts":{"start":"ESLINT_NO_DEV_ERRORS=true react-app-rewired start","build":"react-app-rewired build","eject":"react-app-rewired eject","lint":"eslint --fix \'src/**/*.{ts,js,tsx,jsx}\' && tsc --noEmit","check-types":"tsc --noEmit"},"eslintConfig":{"extends":"react-app","overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":["defaults, not ie 11"],"devDependencies":{"@babel/register":"^7.15.3","@hopara/components":"^0.3.22","@hopara/design-system":"^0.3.22","@hopara/system-test":"^0.3.22","babel-loader":"8.1.0","customize-cra":"^1.0.0","react":"^18.2.0","react-app-rewired":"^2.2.1","react-dom":"^18.2.0","react-router-dom":"^6.10.0","typescript":"^4.5.2"}}')},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__.d(__webpack_exports__,"Hopara",(function(){return client_Hopara}));let EventType;(function(EventType){EventType["INIT"]="init";EventType["READY"]="ready";EventType["UPDATE"]="update";EventType["LOAD_DATA"]="loadData";EventType["LOAD_DATA_RESPONSE"]="loadDataResponse";EventType["UPDATE_DATA"]="updateData";EventType["UPDATE_DATA_RESPONSE"]="updateDataResponse";EventType["REFRESH"]="refresh"})(EventType||(EventType={}));const HOPARA_EVENT_TYPE="__hopara__eventType__";const isReadyEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.READY;const isLoadDataEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.LOAD_DATA;const isUpdateDataEvent=event=>event.data[HOPARA_EVENT_TYPE]===EventType.UPDATE_DATA;class EventEmitter_EventEmitter{static sendMessage(data,targetWindow){const target=targetWindow||window.parent||window.top;if(!window||window===target)return;target.postMessage(data,"*")}static ready(){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.READY})}static init(config,targetWindow){this.sendMessage(Object.assign(config,{[HOPARA_EVENT_TYPE]:EventType.INIT}),targetWindow)}static loadDataRequest(dataLoader,filterSet){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.LOAD_DATA,data:{name:dataLoader.name,source:dataLoader.source},filterSet})}static loadDataResponse(config,dataLoader,rows,targetWindow){this.sendMessage(Object.assign(config,{[HOPARA_EVENT_TYPE]:EventType.LOAD_DATA_RESPONSE},{data:{name:dataLoader.name,source:dataLoader.source},rows}),targetWindow)}static updateDataRequest(dataUpdater,newRow,oldRow,diff){this.sendMessage({[HOPARA_EVENT_TYPE]:EventType.UPDATE_DATA,data:{name:dataUpdater.name,source:dataUpdater.source},newRow,oldRow,diff})}static refresh(config,targetWindow){this.sendMessage({...config,[HOPARA_EVENT_TYPE]:EventType.REFRESH},targetWindow)}static update(config,targetWindow){this.sendMessage({...config,[HOPARA_EVENT_TYPE]:EventType.UPDATE},targetWindow)}}class EventReceiver_EventReceiver{static isHoparaMessage(event){return event.data[HOPARA_EVENT_TYPE]!==undefined}static loadDataResponse(dataLoader){return new Promise((resolve=>{const callback=event=>{if(event.data[HOPARA_EVENT_TYPE]===EventType.LOAD_DATA_RESPONSE&&event.data.data.name===dataLoader.name&&event.data.data.source===dataLoader.source){window.removeEventListener("message",callback,false);resolve(event.data.rows)}};window.addEventListener("message",callback,false)}))}}var package_0=__webpack_require__(0);const embeddedEnvUrl={test:"https://statics.test.hopara.app/embedded",production:"https://statics.hopara.app/embedded"};class client_Hopara{constructor(config){this.config=void 0;this.iframe=void 0;this.doInit=()=>{const targetElement=this.config.targetElementId?document.getElementById(this.config.targetElementId):this.config.targetElement;if(!targetElement){console&&console.warn("Hopara: targetElement not found");return this}const iframe=this.createIframe();targetElement.appendChild(iframe);this.iframe=iframe;this.createListeners();return this};this.config=config}getIframeSrc(){var _embeddedEnvUrl,_this$config$env;const envUrl=(_embeddedEnvUrl=embeddedEnvUrl[(_this$config$env=this.config.env)!==null&&_this$config$env!==void 0?_this$config$env:"production"])!==null&&_embeddedEnvUrl!==void 0?_embeddedEnvUrl:embeddedEnvUrl.production;const url=this.config.embeddedUrl?this.config.embeddedUrl:`${envUrl}/${this.config.version?this.config.version:"latest"}/index.html`;return`${url}${this.config.debug?"?debug=true":""}`}getIframeStyle(){return"background-color: transparent; border: 0px none transparent; padding: 0px; overflow: hidden; width: 100%; height: 100%;"}createIframe(){const iframe=document.createElement("iframe");iframe.src=this.getIframeSrc();iframe.style=this.getIframeStyle();return iframe}getCleanConfig(){var _this$config$visualiz,_this$config$dataLoad,_this$config$dataUpda;return{accessToken:this.config.accessToken,app:this.config.app,visualization:(_this$config$visualiz=this.config.visualization)!==null&&_this$config$visualiz!==void 0?_this$config$visualiz:this.config.app,env:this.config.env,tenant:this.config.tenant,initialPosition:this.config.initialPosition,initialRow:this.config.initialRow,dataLoaders:(_this$config$dataLoad=this.config.dataLoaders)===null||_this$config$dataLoad===void 0?void 0:_this$config$dataLoad.map((dataLoader=>({name:dataLoader.name,source:dataLoader.source}))),dataUpdaters:(_this$config$dataUpda=this.config.dataUpdaters)===null||_this$config$dataUpda===void 0?void 0:_this$config$dataUpda.map((dataUpdater=>({name:dataUpdater.name,source:dataUpdater.source}))),controller:true,darkMode:this.config.darkMode,toolbar:this.config.toolbar,mapStyle:this.config.mapStyle}}createListeners(){window.addEventListener("message",(event=>{const targetWindow=event.source;if(!targetWindow&&EventReceiver_EventReceiver.isHoparaMessage(event)){throw new Error("Hopara: targetWindow is not available")}if(isReadyEvent(event)){return EventEmitter_EventEmitter.init(this.getCleanConfig(),targetWindow)}if(isLoadDataEvent(event)){var _this$config$dataLoad2;const dataLoader=(_this$config$dataLoad2=this.config.dataLoaders)===null||_this$config$dataLoad2===void 0?void 0:_this$config$dataLoad2.find((dataLoader=>dataLoader.name===event.data.data.name&&dataLoader.source===event.data.data.source));if(dataLoader)return dataLoader.loader(event.data.filterSet).then((data=>EventEmitter_EventEmitter.loadDataResponse(this.getCleanConfig(),dataLoader,data,targetWindow)))}if(isUpdateDataEvent(event)){var _this$config$dataUpda2;const dataUpdater=(_this$config$dataUpda2=this.config.dataUpdaters)===null||_this$config$dataUpda2===void 0?void 0:_this$config$dataUpda2.find((dataUpdater=>dataUpdater.name===event.data.data.name&&dataUpdater.source===event.data.data.source));if(dataUpdater)return dataUpdater.updater(event.data.newRow,event.data.oldRow,event.data.diff)}}))}refresh(){if(!this.iframe)throw new Error("Hopara: iframe is not available");if(this.iframe.contentWindow){EventEmitter_EventEmitter.refresh(this.getCleanConfig(),this.iframe.contentWindow)}}update(config){var _this$iframe;this.config=Object.assign({},this.config,config);if((_this$iframe=this.iframe)!==null&&_this$iframe!==void 0&&_this$iframe.contentWindow){EventEmitter_EventEmitter.update(this.getCleanConfig(),this.iframe.contentWindow)}}static init(config){if(!config&&console){console.warn("Hopara: init config not present");return}if((!window||!window.document)&&console){console.warn("Hopara: window is not available");return}const client=new client_Hopara(config);return client.doInit()}static moduleVersion(){return this._version}moduleVersion(){return client_Hopara._version}}client_Hopara._version=package_0.version;var client=__webpack_exports__["default"]=client_Hopara}])}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hopara/iframe",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.22",
|
|
4
4
|
"main": "build/client.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "ESLINT_NO_DEV_ERRORS=true react-app-rewired start",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
],
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@babel/register": "^7.15.3",
|
|
30
|
-
"@hopara/components": "^0.3.
|
|
31
|
-
"@hopara/design-system": "^0.3.
|
|
32
|
-
"@hopara/system-test": "^0.3.
|
|
30
|
+
"@hopara/components": "^0.3.22",
|
|
31
|
+
"@hopara/design-system": "^0.3.22",
|
|
32
|
+
"@hopara/system-test": "^0.3.22",
|
|
33
33
|
"babel-loader": "8.1.0",
|
|
34
34
|
"customize-cra": "^1.0.0",
|
|
35
35
|
"react": "^18.2.0",
|
|
Binary file
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const
|
|
2
|
-
const
|
|
1
|
+
const {responses, httpServer, front} = require('@hopara/system-test')
|
|
2
|
+
const mockServer = require('mockttp').getLocal({cors: httpServer.cors})
|
|
3
3
|
|
|
4
4
|
const waitTime = () => {
|
|
5
5
|
if (process.env.DEBUGGER) return 1200000
|
|
@@ -9,7 +9,7 @@ const waitTime = () => {
|
|
|
9
9
|
const mismatchPercentage = 0.2
|
|
10
10
|
|
|
11
11
|
module.exports = {
|
|
12
|
-
'before': async () => await mockServer.start(
|
|
12
|
+
'before': async () => await mockServer.start(httpServer.port),
|
|
13
13
|
'after': async () => await mockServer.stop(),
|
|
14
14
|
|
|
15
15
|
'Circle Layer': (browser) => {
|
|
@@ -17,7 +17,7 @@ module.exports = {
|
|
|
17
17
|
mockServer.get('/view/queryName/row').thenReply(200, JSON.stringify(responses.geo.circle))
|
|
18
18
|
|
|
19
19
|
browser.setWindowSize(1280, 800)
|
|
20
|
-
.url(
|
|
20
|
+
.url(`http://localhost:${front.port}/`)
|
|
21
21
|
.execute(() => {
|
|
22
22
|
window.postMessage({
|
|
23
23
|
visualization: 'circle',
|
|
@@ -36,7 +36,7 @@ module.exports = {
|
|
|
36
36
|
mockServer.get('/view/queryName/row').thenReply(200, JSON.stringify(responses.geo.circle))
|
|
37
37
|
|
|
38
38
|
browser.setWindowSize(1280, 800)
|
|
39
|
-
.url(
|
|
39
|
+
.url(`http://localhost:${front.port}/`)
|
|
40
40
|
.execute(() => {
|
|
41
41
|
window.postMessage({
|
|
42
42
|
visualization: 'circle',
|