Merge pull request #12 from qlik-oss/Caele-qext-update

Update qlik-network-chart.qext

gulpfile.js

@@ -17,6 +17,10 @@ gulp.task('zip-build', function(){
     .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;
@@ -42,7 +46,7 @@ gulp.task('update-qext-version', function () {
 });
 
 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) => {

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

@@ -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' },

src/paint.js

@@ -1,5 +1,7 @@
 import { Network } from 'vis/index-network';
 import qlik from 'qlik';
+import { createTooltipHTML } from './tooltip';
+import { escapeHTML } from './utilities';
 
 const colorScheme = 'Diverging Classes';
 
@@ -23,7 +25,7 @@ function paint ( $element, layout, qTheme, component ) {
   if(qData && qData.qMatrix) {
     $element.empty().append($('<div />')
       .attr({ id: containerId })
-      .toggleClass('is-edit-mode', _this.inEditState())
+      .toggleClass('is-edit-mode', component.inEditState())
       .css({
         height: $element.height(),
         width: $element.width(),
@@ -31,20 +33,30 @@ function paint ( $element, layout, qTheme, component ) {
       }));
 
     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
+          });
         }
       }
 
@@ -73,9 +85,18 @@ function paint ( $element, layout, qTheme, component ) {
 
     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
@@ -141,6 +162,7 @@ function paint ( $element, layout, qTheme, component ) {
       }
     };
     var network = new Network(container, data, options);
+    network.fit();
 
     // Handle Selection on 1-node
     $("#"+containerId).css('cursor','default');

src/qlik-network-chart.qext

@@ -1,6 +1,6 @@
 {
 	"name" : "Network chart",
-	"description" : "Network chart",
+	"description" : "Display hierarchical or relational dimensions as nodes and edges, adding measures to show the significance of the links.",
 	"icon" : "extension",
 	"type" : "visualization",
 	"version": "X.Y.Z",

src/styles/main.less

@@ -1,3 +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;
+}