Merge pull request #2 from qlik-oss/replace-checked-in-vis-js

[QPE-246][QPE-248] Replace checked in vis.js

.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,7 +13,7 @@ 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));
 });
 
@@ -34,12 +34,12 @@ 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')

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,64 @@
 # 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)
 
+
+# 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,6 @@ Use at your own risk.
 */
 import "@babel/polyfill";
 import paint from './paint';
-import './styles/vis.min.css';
 
 const component = {
   initialProperties: {
@@ -74,8 +73,8 @@ const component = {
               { value: 'straightCross' },
               { value: 'horizontal' },
               { value: 'vertical' },
-              { value: 'curveCW' },
-              { value: 'curveCCW' },
+              { value: 'curvedCW' },
+              { value: 'curvedCCW' },
               { value: 'cubicBezier' }
             ],
             defaultValue: "dynamic"

src/paint.js

@@ -1,4 +1,4 @@
-import vis from './scripts/vis.min';
+import { Network } from 'vis/index-network';
 
 function isTextCellNotEmpty(c) {
   return (c.qText && !(c.qIsNull || c.qText.trim() == ''));
@@ -92,6 +92,9 @@ function paint ( $element, layout ) {
     var container = document.getElementById(containerId);
 
     var options = {
+      layout: {
+        randomSeed: 1
+      },
       nodes: {
         shape:layout.nodeShape,
         shadow:layout.shadowMode
@@ -122,7 +125,7 @@ function paint ( $element, layout ) {
         stabilization: { iterations: 150 }
       }
     };
-    var network = new vis.Network(container, data, options);
+    var network = new Network(container, data, options);
 
     // Handle Selection on 1-node
     $("#"+containerId).css('cursor','default');

src/qlik-network-chart.qext

@@ -1,9 +1,16 @@
 {
-	"name" : "Network Chart",
-	"description" : "NetWork Chart",
+	"name" : "Network chart",
+	"description" : "Network chart",
 	"icon" : "extension",
 	"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"
+  }
 }

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
 
@@ -26,6 +27,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 +66,8 @@ const config = {
     new CopyWebpackPlugin([
       'src/' + settings.name + '.qext'
     ], {}),
-    new StyleLintPlugin()
+    new StyleLintPlugin(),
+    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/en$/),
   ]
 };