@domoinc/bars - npm Package Compare versions

Comparing version 4.1.3 to 4.1.4

CreateWidget.js

@@ -119,2 +119,3 @@ //----------------------------------------------------------------------------------
 var textSize = 18;
+var isMobile = true;
 
@@ -128,2 +129,3 @@ var horizontalStackedChart = d3.select("#vis")
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -143,2 +145,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -158,2 +161,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -166,5 +170,2 @@ 'height': 250,
   });
-setTimeout(function() {
-  horizontalChart.c('color', 'green').draw(data2);
-}, 1000);
 
@@ -178,2 +179,3 @@ var horizontalSeriesChart = d3.select("#vis")
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -194,2 +196,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -208,2 +211,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -223,2 +227,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -237,2 +242,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -263,2 +269,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -278,2 +285,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -292,2 +300,3 @@ 'height': 250,
   .c({
+    'isOnMobile': isMobile,
     'width': 250,
@@ -294,0 +303,0 @@ 'height': 250,

package.json

 {
   "name": "@domoinc/bars",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "Bars - Domo Widget",
@@ -17,3 +17,3 @@ "main": "dist/bundle.js",
   "dependencies": {
-    "@domoinc/basewidget": "^1.2.2",
+    "@domoinc/base-widget": "^1.4.0",
     "@domoinc/da-theme": "^4.2.1",
@@ -20,0 +20,0 @@ "@domoinc/da-theme2": "^2.1.1",

src/Widget.js

 var d3 = require('d3');
 var d3Chart = require('d3.chart');
 var Notifier = require('@domoinc/notifier');
-var BaseWidget = require('@domoinc/basewidget');
+var BaseWidget = require('@domoinc/base-widget');
 var i18n = require('@domoinc/i18n');
@@ -41,11 +41,2 @@ var Utilities = require('@domoinc/utilities');
 
-    function findSvg(selection) {
-      var selectionParent = selection.parentNode;
-      if (selectionParent.tagName === 'svg') {
-        return d3.select(selectionParent);
-      } else {
-        return findSvg(selectionParent);
-      }
-    }
-
     //----------------------------------------------------------------------------------
@@ -277,2 +268,4 @@ // Wiget's configurable options.
     _Chart.on('external:mouseout:bar', unhighlight);
+    _Chart.on('external:touchstart:bar', highlight);
+    _Chart.on('external:touchstart:document', unhighlight);
 
@@ -285,4 +278,4 @@ _Chart.on('external:highlight', highlightSeries);
     //----------------------------------------------------------------------------------
-    _Chart._layerGroup.attr('class', 'bar-layer-group');
-
+    _Chart._layerGroup.attr('class', 'bar-layer-group')
+      .style({'-webkit-touch-callout': 'none', '-webkit-user-select': 'none', '-webkit-tap-highlight-color': 'rgba(0,0,0,0)'});
     //----------------------------------------------------------------------------------
@@ -335,3 +328,7 @@ // Layers: This is where you'll place your layers.
 
-
+    _Chart.destroy = function destroy () {
+      if (_Chart.c('isOnMobile')) {
+        removeDocTouchListener();
+      }
+    };
     //**********************************************************************************
@@ -406,6 +403,5 @@ // The layer of the bars grouped by series
         series.attr('class', function (d, i) { return 'series-group series-' + i; });
-
-        series.exit()
-          .selectAll('.bar-segment')
-          .transition()
+       series.exit()
+        .selectAll('.bar-segment')
+        .transition()
           .call(endall, function () { series.exit().remove(); })
@@ -430,15 +426,28 @@ .duration(_Chart.c('transitionDuration') * 0.25)
         'enter': function () {
-          return this.on('mouseover', function (d) {
+          var bars = this;
+
+          if (_Chart.c('isOnMobile')) {
+            bars.on('touchstart', function (d) {
               highlight(d, d[_Chart.c('highlightKey')]);
-              _Chart.trigger('dispatch:mouseover:bar', d);
-            })
-            .on('mouseout', function (d) {
-              unhighlight();
-              _Chart.trigger('dispatch:mouseout:bar');
-            })
-            .on('click', function (d,i) {
-              _Chart.trigger('dispatch:click:bar', d);
-            })
-            .style(getBarStyles())
+              moveToolTip();
+              _Chart.trigger('dispatch:touchstart:bar', d);
+            });
+          } else {
+            bars.on('mouseover', function (d) {
+                highlight(d, d[_Chart.c('highlightKey')]);
+                _Chart.trigger('dispatch:mouseover:bar', d);
+              })
+              .on('mouseout', function (d) {
+                unhighlight();
+                _Chart.trigger('dispatch:mouseout:bar');
+              })
+              .on('click', function (d,i) {
+                _Chart.trigger('dispatch:click:bar', d);
+              });
+          }
+
+          bars.style(getBarStyles())
             .attr(getBarAttrs(getBarTransitionAttrs('enter')));
+
+          return bars;
         },
@@ -519,8 +528,22 @@ 'merge:transition': function () {
 
+    function findSvg(selection) {
+      var selectionParent = selection.parentNode;
+      if (selectionParent.tagName === 'svg') {
+        return d3.select(selectionParent);
+      } else {
+        return findSvg(selectionParent);
+      }
+    }
 
+    function handleDocBarsTouchstart (e) {
+      if(_Chart._barLayer.node().contains(e.target)) { return; }
+
+      unhighlight();
+      _Chart.trigger('dispatch:touchstart:document');
+    }
+
     /**
      * processLabelCollisions
      */
-    function processLabelCollisions()
-    {
+    function processLabelCollisions () {
       var labels = _Chart._labelLayer.selectAll('.segment-label');
@@ -541,3 +564,3 @@
      */
-    function getLabelCollisionNodes(labels) {
+    function getLabelCollisionNodes (labels) {
       var box;
@@ -569,3 +592,3 @@ var nodes = [];
      */
-    function processCollisionsIntoLabelData(nodes) {
+    function processCollisionsIntoLabelData (nodes) {
       var quadTree = d3.geom.quadtree()
@@ -585,3 +608,3 @@ .x(function (d) {return d.x1;})
      */
-    function collide(node) {
+    function collide (node) {
 
@@ -606,3 +629,2 @@ var nx1 = node.x1,
 
-
     /**
@@ -615,3 +637,3 @@ * This function will re-initialize and re-setup the
      */
-    function setupPollyFillArea() {
+    function setupPollyFillArea () {
       var seen = d3.set();
@@ -660,3 +682,3 @@
 
-    function verifyLayout() {
+    function verifyLayout () {
       var layout = _Chart.c('layout');
@@ -683,3 +705,3 @@ var orientation = _Chart.c('orientation');
 
-    function verifyOrientation(newValue) {
+    function verifyOrientation (newValue) {
       var possibleValues = ['vertical', 'horizontal'];
@@ -693,3 +715,3 @@ if (possibleValues.indexOf(_Chart.c('orientation').toLowerCase()) === -1) {
 
-    function initTooltip() {
+    function initTooltip () {
       _tooltip = _svg.append('g')
@@ -794,2 +816,6 @@ .attr('class', 'tooltip')
 
+      if (_Chart.c('isOnMobile')) {
+        document.addEventListener('touchstart', handleDocBarsTouchstart);
+      }
+
       var seriesLabel;
@@ -838,3 +864,2 @@ var transition = _Chart.base.transition()
       highlightPollyFills(key, value, normalFill, transition);
-
     }
@@ -862,2 +887,6 @@
       unhighlightPollyFills(transition);
+
+      if (_Chart.c('isOnMobile')) {
+        removeDocTouchListener();
+      }
     }
@@ -867,3 +896,5 @@
       if (key === 'series' && normalFill !== true) {
-        transition.selectAll('.pollyFill_' + value).style('opacity', 1);
+        transition.selectAll('.gPollyFill').style('opacity', function (d) {
+          return d.key === value ? 1 : 0;
+        });
       }
@@ -876,3 +907,2 @@ }
 
-
     function highlightSeries(datum, value, key, normalFill) {
@@ -884,2 +914,5 @@ if (datum !== undefined && value !== undefined && key !== undefined && normalFill !== undefined) {
 
+    function removeDocTouchListener () {
+      document.removeEventListener('touchstart', handleDocBarsTouchstart);
+    }
 
@@ -1315,2 +1348,3 @@
       if (!data.length) {
+        _stack = [];
         return data;
@@ -1317,0 +1351,0 @@ }

webpack.config.js

@@ -41,7 +41,7 @@ var webpack = require('webpack');
     },
-    "@domoinc/basewidget": {
+    "@domoinc/base-widget": {
       root: 'BaseWidget',
-      commonjs: '@domoinc/basewidget',
-      commonjs2: '@domoinc/basewidget',
-      amd: 'basewidget'
+      commonjs: '@domoinc/base-widget',
+      commonjs2: '@domoinc/base-widget',
+      amd: 'base-widget'
     },
@@ -48,0 +48,0 @@ "@domoinc/da-theme": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-66.67%

Number of low supply chain risk alerts

2

decreased by-85.71%

Worsened metrics

Total package byte prevSize

264518

decreased by-87.77%

Number of package files

37

decreased by-82.46%

Lines of code

4331

decreased by-90.4%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@domoinc/base-widget@^1.4.0

• - Removed@domoinc/basewidget@^1.2.2