docs: add qlik-sense-desktop mashup example (qlik-oss#96)

Donya-qlik · May 9, 2022 · eae24da · eae24da
1 parent 0802bb7
commit eae24da
Show file tree

Hide file tree

Showing 12 changed files with 823 additions and 2 deletions.
diff --git a/mashup-example/using-build-tool/qlik-sense-desktop/.gitignore b/mashup-example/using-build-tool/qlik-sense-desktop/.gitignore
@@ -0,0 +1,14 @@
+# Logs
+logs
+*.log
+yarn-debug.log*
+yarn-error.log*
+
+node_modules
+dist
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
diff --git a/mashup-example/using-build-tool/qlik-sense-desktop/README.md b/mashup-example/using-build-tool/qlik-sense-desktop/README.md
@@ -0,0 +1,8 @@
+# Pivot table
+
+> This example requires access to a running Qlik Engine using build tool.
+
+## With Qlik Sense Desktop
+
+1. Copy the `Example_Dashboard.qvf` app from `data/apps` into Qlik Sense Desktop.
+2. run `yarn install` and `yarn dev`.
diff --git a/mashup-example/using-build-tool/qlik-sense-desktop/configure.js b/mashup-example/using-build-tool/qlik-sense-desktop/configure.js
@@ -0,0 +1,35 @@
+import { embed } from '@nebula.js/stardust';
+// import table from '@nebula.js/sn-pivot-table';
+// To load local sn-pivot-table extension
+import pivotTable from '../../../core/esm/index';
+import customTheme from './theme/sense-dark-horizon';
+
+const types = [
+  {
+    name: 'pivot-table',
+    load: () => Promise.resolve(pivotTable),
+  },
+];
+
+const themes = [
+  {
+    id: 'myTheme',
+    load: () => Promise.resolve(customTheme),
+  },
+];
+
+const nuked = embed.createConfiguration({
+  types,
+  themes,
+  context: {
+    theme: 'myTheme',
+    language: 'en-US',
+    constraints: {
+      active: false, // turn off interactions that affect the state of the visual representation including selection, zoom, scroll, etc.
+      select: true, // turn off selections.
+      passive: false, // turn off interactions like tooltips.
+    },
+  },
+});
+
+export default nuked;
diff --git a/mashup-example/using-build-tool/qlik-sense-desktop/connect.js b/mashup-example/using-build-tool/qlik-sense-desktop/connect.js
@@ -0,0 +1,19 @@
+import enigma from 'enigma.js';
+
+export default function connect() {
+  const loadSchema = () =>
+    fetch('https://unpkg.com/enigma.js/schemas/12.34.11.json').then((response) => response.json());
+
+  const createConnection = () =>
+    loadSchema().then((schema) =>
+      enigma
+        .create({
+          schema,
+          url: `ws://localhost:9076/app/${Date.now()}`,
+        })
+        .open()
+        .then((qix) => qix.openDoc('/apps/Executive_Dashboard.qvf'))
+    );
+
+  return createConnection();
+}
diff --git a/mashup-example/using-build-tool/qlik-sense-desktop/index.html b/mashup-example/using-build-tool/qlik-sense-desktop/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Nebula mashup</title>
+
+  <style>
+    body {
+      background: #eee;
+    }
+
+    .content {
+      margin: 0 auto;
+      width: 80%;
+      max-width: 800px;
+    }
+
+    .object {
+      position: relative;
+      height: 600px;
+    }
+
+    .toolbar {
+      margin: 12px 0px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <div id="selections"></div>
+    <div class="object"></div>
+    <div class="object"></div>
+  </div>
+
+  <script src="./main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/mashup-example/using-build-tool/qlik-sense-desktop/main.js b/mashup-example/using-build-tool/qlik-sense-desktop/main.js
@@ -0,0 +1,55 @@
+import connect from './connect';
+import embed from './configure';
+import './style.css';
+
+(async () => {
+  const app = await connect();
+  const nuked = embed(app);
+
+  nuked.selections().then((selections) => selections.mount(document.getElementById('selections')));
+
+  // create a session object
+  nuked.render({
+    element: document.querySelector('.object'),
+    type: 'pivot-table',
+    properties: {
+      qHyperCubeDef: {
+        qDimensions: [
+          {
+            qLibraryId: 'jgxpDbw',
+          },
+          {
+            qDef: {
+              qGrouping: 'N',
+              qFieldDefs: [
+                'SegmentGroup'
+              ],
+            },
+          }
+        ],
+        qMeasures: [
+          {
+            qLibraryId: 'VjxMHP',
+          }
+        ],
+        qInitialDataFetch: [
+          {
+            qLeft: 0,
+            qTop: 0,
+            qWidth: 50,
+            qHeight: 50
+          }
+        ],
+        qMode: 'P',
+        qNoOfLeftDims: 1,
+      }
+    },
+  });
+
+  // create another session object
+  nuked.render({
+    element: document.querySelectorAll('.object')[1],
+    type: 'pivot-table',
+    fields: ['Region', 'SegmentGroup', '=Budget'],
+  });
+})();
diff --git a/mashup-example/using-build-tool/qlik-sense-desktop/package.json b/mashup-example/using-build-tool/qlik-sense-desktop/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "pivot-table-qlik-sense-desktop-mashup",
+  "private": true,
+  "version": "0.1.0",
+  "author": "QlikTech International AB",
+  "keywords": [
+    "qlik",
+    "nebula"
+  ],
+  "scripts": {
+    "dev": "vite --force",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@nebula.js/sn-pivot-table": "0.0.0",
+    "@nebula.js/stardust": "2.10.0",
+    "enigma.js": "2.9.0"
+  },
+  "devDependencies": {
+    "vite": "2.9.7"
+  }
+}
diff --git a/mashup-example/using-build-tool/qlik-sense-desktop/style.css b/mashup-example/using-build-tool/qlik-sense-desktop/style.css
@@ -0,0 +1,27 @@
+body {
+  font-family: Arial;
+  color: #404040;
+  background: #eee;
+  margin: 12px;
+}
+
+#selections {
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.object {
+  position: relative;
+  display: inline-block;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
+  height: 600px;
+  width: calc(50% - 8px);
+  /* margin-left: 12px; */
+}
+
+.object:first-child {
+  margin-right: 12px;
+}