Merge pull request #8 from qlik-oss/standardize-object-properties

[QPE-236] Standardize object properties

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

@@ -31,6 +31,9 @@ The measures are optional
 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
 

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,7 +70,8 @@ const component = {
         }
       },
       settings: {
-        uses: "settings",
+        type: "items",
+        label: "Settings",
         items: {
           edgeType: {
             ref: "edgeType",
@@ -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/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$/),
   ]
 };