Update qlik-network-chart.qext

Update qlik-network-chart.qext

.circleci/config.yml

@@ -92,4 +92,3 @@ workflows:
             branches:
               only:
                 - master
-                - project-configuration

LICENSE

@@ -0,0 +1,22 @@
+The MIT License
+
+Copyright (c) 2018-present QlikTech International AB
+Copyright (c) 2016 Michael Laenen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

LICENSE.md

@@ -1,24 +0,0 @@
-**2 Dimensional Heatmap** Visualization Extension for Qlik Sense is licensed under the "MIT" license:
-
-> 
-> The MIT License (MIT)
-> 
-> Copyright (c) 2016 Michael Laenen
-> 
-> Permission is hereby granted, free of charge, to any person obtaining a copy
-> of this software and associated documentation files (the "Software"), to deal
-> in the Software without restriction, including without limitation the rights
-> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-> copies of the Software, and to permit persons to whom the Software is
-> furnished to do so, subject to the following conditions:
-> 
-> The above copyright notice and this permission notice shall be included in all
-> copies or substantial portions of the Software.
-> 
-> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-> SOFTWARE.

gulpfile.js

@@ -13,10 +13,14 @@ gulp.task('remove-build-folder', function(){
 
 gulp.task('zip-build', function(){
   return gulp.src(settings.buildDestination + '/**/*')
-    .pipe(zip(settings.name + '_' + settings.version + '.zip'))
+    .pipe(zip(`${settings.name}_${settings.version}.zip`))
     .pipe(gulp.dest(settings.buildDestination));
 });
 
+gulp.task('add-assets', function(){
+  return gulp.src("./assets/**/*").pipe(gulp.dest(settings.buildDestination));
+});
+
 gulp.task('webpack-build', done => {
   webpack(webpackConfig, (error, statistics) => {
     const compilationErrors = statistics && statistics.compilation.errors;
@@ -34,15 +38,15 @@ gulp.task('webpack-build', done => {
 });
 
 gulp.task('update-qext-version', function () {
-  return gulp.src("./build/" + settings.name + ".qext")
+  return gulp.src(`${settings.buildDestination}/${settings.name}.qext`)
     .pipe(jeditor({
       'version': settings.version
     }))
-  .pipe(gulp.dest("./build"));
-})
+    .pipe(gulp.dest(settings.buildDestination));
+});
 
 gulp.task('build',
-  gulp.series('remove-build-folder', 'webpack-build', 'update-qext-version', 'zip-build')
+  gulp.series('remove-build-folder', 'webpack-build', 'update-qext-version', 'add-assets', 'zip-build')
 );
 
 gulp.task('watch', () => new Promise((resolve, reject) => {

karma.conf.js

@@ -19,6 +19,14 @@ module.exports = (config) => {
     webpack: {
       devtool: 'source-map',
       mode: settings.mode,
+      externals: {
+        qlik: {
+          amd: 'qlik',
+          commonjs: 'qlik',
+          commonjs2: 'qlik',
+          root: '_'
+        }
+      },
       module: {
         rules: [
           {

package-lock.json

@@ -3222,6 +3222,11 @@
         "minimalistic-crypto-utils": "^1.0.0"
       }
     },
+    "emitter-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
+      "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY="
+    },
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
@@ -4397,7 +4402,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4418,12 +4424,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4438,17 +4446,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4565,7 +4576,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4577,6 +4589,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4591,6 +4604,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4598,12 +4612,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4622,6 +4638,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4702,7 +4719,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4714,6 +4732,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4799,7 +4818,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4835,6 +4855,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4854,6 +4875,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4897,12 +4919,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -5480,6 +5504,11 @@
         "glogg": "^1.0.0"
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
@@ -6684,6 +6713,11 @@
         }
       }
     },
+    "keycharm": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz",
+      "integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -7315,6 +7349,11 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -8566,6 +8605,14 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "propagating-hammerjs": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.6.tgz",
+      "integrity": "sha1-/tAOmwB2f/1C0U9bUxvEk+tnLjc=",
+      "requires": {
+        "hammerjs": "^2.0.6"
+      }
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -11197,6 +11244,18 @@
         "vinyl": "^2.0.0"
       }
     },
+    "vis": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/vis/-/vis-4.21.0.tgz",
+      "integrity": "sha1-3XFji/9/ZJXQC8n0DCU1JhM97Ws=",
+      "requires": {
+        "emitter-component": "^1.1.1",
+        "hammerjs": "^2.0.8",
+        "keycharm": "^0.2.0",
+        "moment": "^2.18.1",
+        "propagating-hammerjs": "^1.4.6"
+      }
+    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",

package.json

@@ -43,5 +43,8 @@
     "webpack": "4.25.1",
     "webpack-cli": "3.1.2",
     "webpack-dev-server": "3.1.10"
+  },
+  "dependencies": {
+    "vis": "4.21.0"
   }
 }

readme.md

@@ -1,42 +1,67 @@
 # Qlik Network Chart
 
-[![CircleCI](https://circleci.com/gh/qlik-oss/network-vis-chart.svg?style=svg)](https://circleci.com/gh/qlik-oss/network-vis-chart)
+[![CircleCI](https://circleci.com/gh/qlik-oss/network-vis-chart.svg?style=shield)](https://circleci.com/gh/qlik-oss/network-vis-chart)
 
-<h2>Qlik Sense extension to visualize networks data</h2>
-<hr>
-Based on library vis.js (http://visjs.org)
-<br>Tested with Qlik Sense 2.2.3.
-<hr>
-<h3>Dimensions</h3>
+Qlik Sense extension to visualize networks data based on library vis.js (http://visjs.org).
+Tested with Qlik Sense 2.2.3.
+
+### Dimensions
 4 dimensions are mandatory :
-<ol>
-  <li>node identifier</li>
-  <li>node label</li>
-  <li>node parent identifier</li>
-  <li>node group</li>
-</ol>
 
-<h3>Measures</h3>
+  1. node identifier
+  2. node label
+  3. node parent identifier
+  4. node group
+
+### Measures
 The measures are optional
-<ol>
-  <li>tooltip : expression that will be push in the tooltip when hover on a node</li>
-  <li>node value : used to scale the node size</li>
-  <li>edge value : used to scale the edge width</li>
-</ol>
 
-<h3>Additional network settings</h3>
-<ul>
-<li>Edge Type : select type of curve between nodes</li>
-<li>Node Shape : dot, square, diamond, triangle ...</li>
-<li>Display Edge Value : switch to display the measures on edge curves</li>
-<li>Position Edge Label : top, bottom, middle, horizontal</li>
-<li>Display Shadow : switch to enable shadow effects behind edge and nodes</li>
-</ul>
+  1. tooltip : expression that will be push in the tooltip when hover on a node
+  2. node value : used to scale the node size
+  3. edge value : used to scale the edge width
 
-<h3>Sample</h3>
+### Additional network settings
+* Edge Type : select type of curve between nodes
+* Node Shape : dot, square, diamond, triangle ...
+* Display Edge Value : switch to display the measures on edge curves
+* Position Edge Label : top, bottom, middle, horizontal
+* Display Shadow : switch to enable shadow effects behind edge and nodes
+
+### Sample
 QVF based on characters from Victor Hugo's novel , Les Misérables.
 ![Network chart](resources/network_chart_v1.png)
 
+### Data Limit
+Starts having issues stabilizing(transforming into untangled view) at around 100-200 nodes depending on dataset.
+
+
+# Getting Started
+
+## Installation
+
+1. Download the extension zip, `qlik-network-chart_<version>.zip`, from the latest release(https://github.com/qlik-oss/network-vis-chart/releases/latest)
+2. Install the extension:
+
+   a. **Qlik Sense Desktop**: unzip to a directory under [My Documents]/Qlik/Sense/Extensions.
+
+   b. **Qlik Sense Server**: import the zip file in the QMC.
+
+
+# Developing the extension
+
+If you want to do code changes to the extension follow these simple steps to get going.
+
+1. Get Qlik Sense Desktop
+1. Create a new app and add the extension to a sheet.
+2. Clone the repository
+3. Run `npm install`
+4. Set the environment variable `BUILD_PATH` to your extensions directory. It will be something like `C:/Users/<user>/Documents/Qlik/Sense/Extensions/<extension_name>`.
+5. You now have two options. Either run the watch task or the build task. They are explained below. Both of them default to development mode but can be run in production by setting `NODE_ENV=production` before running the npm task.
+
+   a. **Watch**: `npm run watch`. This will start a watcher which will rebuild the extension and output all needed files to the `buildFolder` for each code change you make. See your changes directly in your Qlik Sense app.
+
+   b. **Build**: `npm run build`. If you want to build the extension package. The output zip-file can be found in the `buildFolder`.
+
 # Original Author
 
 **Michael Laenen**

src/index.js

@@ -7,7 +7,7 @@ Use at your own risk.
 */
 import "@babel/polyfill";
 import paint from './paint';
-import './styles/vis.min.css';
+import './styles/main.less';
 
 const component = {
   initialProperties: {
@@ -22,30 +22,41 @@ const component = {
     }
   },
   //property panel
+  data: {
+    dimensions: {
+      min: 4,
+      max: 4
+      /*
+      1. Dimension: Node ID, numeric (Event ID or else) or String
+      2. Dimension: Node Label
+      3. Dimension: Node Parent ID, numeric (Event ID or else) or String
+      4. Dimension: Node Cluster
+      */
+    },
+    measures: {
+      min: 0,
+      max: 3
+      /*
+      1. Measure: title text for tooltip (optional)
+      2. Measure: node value
+      3. Measure: edge value
+      */
+    }
+  },
   definition: {
     type: "items",
     component: "accordion",
     items: {
-      dimensions: {
-        uses: "dimensions",
-        min: 4,
-        max: 4
-        /*
-        1. Dimension: Node ID, numeric (Event ID or else) or String
-        2. Dimension: Node Label
-        3. Dimension: Node Parent ID, numeric (Event ID or else) or String
-        4. Dimension: Node Cluster
-        */
-      },
-      measures: {
-        uses: "measures",
-        min: 0,
-        max: 3
-        /*
-        1. Measure: title text for tooltip (optional)
-        2. Measure: node value
-        3. Measure: edge value
-        */
+      data: {
+        uses: "data",
+        items:{
+          dimensions:{
+            disabledRef: ""
+          },
+          measures: {
+            disabledRef: ""
+          }
+        }
       },
       sorting: {
         uses: "sorting"
@@ -59,13 +70,14 @@ const component = {
         }
       },
       settings: {
-        uses: "settings",
+        type: "items",
+        label: "Settings",
         items: {
           edgeType: {
             ref: "edgeType",
             type: "string",
             component: "dropdown",
-            label: "Egde Type",
+            label: "Edge Type",
             options: [
               { value: 'dynamic' },
               { value: 'continuous' },
@@ -74,8 +86,8 @@ const component = {
               { value: 'straightCross' },
               { value: 'horizontal' },
               { value: 'vertical' },
-              { value: 'curveCW' },
-              { value: 'curveCCW' },
+              { value: 'curvedCW' },
+              { value: 'curvedCCW' },
               { value: 'cubicBezier' }
             ],
             defaultValue: "dynamic"
@@ -137,11 +149,12 @@ const component = {
       }
     }
   },
-
+  support: {
+    export: true
+  },
   snapshot: {
     canTakeSnapshot: true
   },
-
   paint: paint
 };
 

src/paint.js

@@ -1,19 +1,31 @@
-import vis from './scripts/vis.min';
+import { Network } from 'vis/index-network';
+import qlik from 'qlik';
+import { createTooltipHTML } from './tooltip';
+import { escapeHTML } from './utilities';
+
+const colorScheme = 'Diverging Classes';
 
 function isTextCellNotEmpty(c) {
   return (c.qText && !(c.qIsNull || c.qText.trim() == ''));
 }
 
-function paint ( $element, layout ) {
-  var _this = this,
-    qData = layout.qHyperCube.qDataPages[0],
+function paint ( $element, layout, qTheme, component ) {
+  const colorScale = qTheme.properties.scales
+    .find(scale => scale.name === colorScheme).scale;
+  const colors = colorScale[colorScale.length - 1];
+
+  function getColor (number) {
+    return colors[number % colors.length];
+  }
+
+  var qData = layout.qHyperCube.qDataPages[0],
     id = layout.qInfo.qId,
     containerId = 'network-container_' + id;
 
-
   if(qData && qData.qMatrix) {
     $element.empty().append($('<div />')
       .attr({ id: containerId })
+      .toggleClass('is-edit-mode', component.inEditState())
       .css({
         height: $element.height(),
         width: $element.width(),
@@ -21,20 +33,30 @@ function paint ( $element, layout ) {
       }));
 
     var dataSet = qData.qMatrix.map(function(e){
-      var dataItem = {
+      const nodeName = e[1].qText;
+      const groupNumber = e[3].qText;
+
+      const dataItem = {
         id: e[0].qNum,
-        label: e[1].qText,
-        group: e[3].qText,
+        label: nodeName,
+        group: groupNumber,
         parentid : e[2].qNum
       };
 
       // optional measures set
       if (e.length > 4) {
-        // tooltip
-        if (isTextCellNotEmpty(e[4])) {
-          dataItem.title = e[4].qText;
+        const tooltip = e[4];
+
+        if (isTextCellNotEmpty(tooltip)) {
+          const tooltipText = tooltip.qText;
+          dataItem.title = escapeHTML(tooltipText);
         } else {
-          dataItem.title = "*** Default Tooltip ***" + "<BR/>" + "Name:" + e[1].qText + "<BR/>" + "Group:" + e[3].qText;
+          const nodeMeasure = e[5].qText;
+          dataItem.title = createTooltipHTML({
+            name: nodeName,
+            groupNumber,
+            nodeMeasure
+          });
         }
       }
 
@@ -59,12 +81,22 @@ function paint ( $element, layout ) {
     var uniqueId = [];
     var nodes = [];
     var edges = [];
+    const groups = {};
 
     for(let i = 0; i< dataSet.length; i++){
       if (layout.displayEdgeLabel) {
-        edges.push( { "from":dataSet[i].id, "to":dataSet[i].parentid, "value":dataSet[i].edgeValue, "label":dataSet[i].edgeValue } ); // with labels
+        edges.push({
+          "from":dataSet[i].id,
+          "to":dataSet[i].parentid,
+          "value":dataSet[i].edgeValue,
+          "label": `${dataSet[i].edgeValue}`
+        }); // with labels
       } else {
-        edges.push( { "from":dataSet[i].id, "to":dataSet[i].parentid, "value":dataSet[i].edgeValue } ); // create edges
+        edges.push({
+          "from":dataSet[i].id,
+          "to":dataSet[i].parentid,
+          "value":dataSet[i].edgeValue
+        }); // create edges
       }
 
       // process uniqueness
@@ -72,13 +104,16 @@ function paint ( $element, layout ) {
         uniqueId.push(dataSet[i].id);
 
         var nodeItem = {
-          "id": dataSet[i].id,
-          "label": dataSet[i].label,
-          "title": dataSet[i].title,
-          "group": dataSet[i].group,
-          "value": dataSet[i].nodeValue
+          id: dataSet[i].id,
+          label: dataSet[i].label,
+          title: dataSet[i].title,
+          group: dataSet[i].group,
+          value: dataSet[i].nodeValue
         };
         nodes.push(nodeItem); // create node
+        groups[nodeItem.group] = {
+          color: getColor(nodeItem.group)
+        };
       }
     }
 
@@ -92,6 +127,10 @@ function paint ( $element, layout ) {
     var container = document.getElementById(containerId);
 
     var options = {
+      groups: groups,
+      layout: {
+        randomSeed: 1
+      },
       nodes: {
         shape:layout.nodeShape,
         shadow:layout.shadowMode
@@ -122,7 +161,8 @@ function paint ( $element, layout ) {
         stabilization: { iterations: 150 }
       }
     };
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
+    network.fit();
 
     // Handle Selection on 1-node
     $("#"+containerId).css('cursor','default');
@@ -136,11 +176,24 @@ function paint ( $element, layout ) {
           connectedNodes.push(properties.nodes[0]);
 
           //Make the selections
-          _this.backendApi.selectValues(0,connectedNodes,false);
+          component.backendApi.selectValues(0,connectedNodes,false);
         }
       }
     });
   }
 }
 
-export default paint;
+function themePaint ($element, layout) {
+  const component = this;
+  try {
+    const app = qlik.currApp(this);
+
+    app.theme.getApplied().then( function( qTheme ) {
+      paint($element, layout, qTheme, component);
+    });
+  } catch (exception) {
+    console.error(exception); // eslint-disable-line no-console
+  }
+}
+
+export default themePaint;

src/qlik-network-chart.qext

@@ -1,9 +1,16 @@
 {
-	"name" : "Network Chart",
-	"description" : "NetWork Chart",
-	"icon" : "extension",
+	"name" : "Network chart",
+	"description" : "Display hierarchical or relational dimensions as nodes and edges, adding measures to show the significance of the links.",
+	"icon" : "bubbles",
 	"type" : "visualization",
-	"version": "1.0",
+	"version": "X.Y.Z",
 	"preview" : "network.png",
-	"author": "Michael Laenen , agilos.com"
+	"keywords": "qlik-sense, visualization",
+	"author": "Michael Laenen <michael.laenen@agilos.com>",
+	"homepage": "",
+	"license": "MIT",
+	"repository": "",
+	"dependencies": {
+      "qlik-sense": ">=5.5.x"
+  }
 }

src/styles/main.less

@@ -0,0 +1,13 @@
+.is-edit-mode > div {
+  pointer-events: none;
+}
+
+.vis-tooltip {
+  position: absolute;
+  background-color: #333;
+  opacity: 0.95;
+  border-radius: 5px;
+  color: #eee;
+  padding: 10px;
+  max-width: 200px;
+}

src/tooltip.js

@@ -0,0 +1,28 @@
+function createEntry(header, value) {
+  const entry = document.createElement('div');
+  const nameHeader = document.createElement('span');
+  const nameHeaderValue = document.createTextNode(header);
+  const nameValueContainer = document.createElement('b');
+  const nameValue = document.createTextNode(value);
+
+  nameHeader.appendChild(nameHeaderValue);
+  nameValueContainer.appendChild(nameValue);
+
+  entry.appendChild(nameHeader);
+  entry.appendChild(nameValueContainer);
+
+  return entry;
+}
+
+export function createTooltipHTML({ name, groupNumber, nodeMeasure }) {
+  const tooltip = document.createElement('div');
+  const nameEntry = createEntry('Name: ', name);
+  const groupNumberEntry = createEntry('Group number: ', groupNumber);
+  const nodeMeasureEntry = createEntry('Node measure: ', nodeMeasure);
+
+  tooltip.appendChild(nameEntry);
+  tooltip.appendChild(groupNumberEntry);
+  tooltip.appendChild(nodeMeasureEntry);
+
+  return tooltip.innerHTML;
+}

src/utilities.js

@@ -0,0 +1,5 @@
+export function escapeHTML(str){
+  var span = document.createElement('span');
+  span.appendChild(document.createTextNode(str));
+  return span.innerHTML;
+}

webpack.config.js

@@ -1,6 +1,7 @@
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 const settings = require('./settings');
+const webpack = require('webpack');
 
 console.log('Webpack mode:', settings.mode); // eslint-disable-line no-console
 
@@ -15,6 +16,14 @@ const config = {
     filename: settings.name + '.js',
     libraryTarget: 'umd'
   },
+  externals: {
+    qlik: {
+      amd: 'qlik',
+      commonjs: 'qlik',
+      commonjs2: 'qlik',
+      root: '_'
+    }
+  },
   module: {
     rules: [
       {
@@ -26,6 +35,16 @@ const config = {
           failOnError: true
         }
       },
+      {
+        test: /node_modules[\\\/]vis[\\\/].*\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
       {
         test: /.js$/,
         exclude: /node_modules/,
@@ -55,7 +74,8 @@ const config = {
     new CopyWebpackPlugin([
       'src/' + settings.name + '.qext'
     ], {}),
-    new StyleLintPlugin()
+    new StyleLintPlugin(),
+    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/en$/),
   ]
 };