draw blank value arc/bullet when value is NaN

etpinard · etpinard · commit 0160e16897de · 2019-07-19T15:09:42.000-04:00
... so that we don't get console warnings
diff --git a/src/traces/indicator/plot.js b/src/traces/indicator/plot.js
@@ -316,7 +316,9 @@ function drawBulletGauge(gd, plotGroup, cd, opts) {
             .attr('width', Math.max(0, ax.c2p(Math.min(trace.gauge.axis.range[1], cd[0].y))));
     } else {
         fgBullet.select('rect')
-            .attr('width', Math.max(0, ax.c2p(Math.min(trace.gauge.axis.range[1], cd[0].y))));
+            .attr('width', typeof cd[0].y === 'number' ?
+                Math.max(0, ax.c2p(Math.min(trace.gauge.axis.range[1], cd[0].y))) :
+                0);
     }
     fgBullet.exit().remove();
 
@@ -483,8 +485,9 @@ function drawAngularGauge(gd, plotGroup, cd, opts) {
             .attrTween('d', arcTween(valueArcPathGenerator, valueToAngle(cd[0].lastY), valueToAngle(cd[0].y)));
         trace._lastValue = cd[0].y;
     } else {
-        valueArcPath
-            .attr('d', valueArcPathGenerator.endAngle(valueToAngle(cd[0].y)));
+        valueArcPath.attr('d', typeof cd[0].y === 'number' ?
+            valueArcPathGenerator.endAngle(valueToAngle(cd[0].y)) :
+            'M0,0Z');
     }
     valueArcPath.call(styleShape);
     valueArc.exit().remove();
diff --git a/test/jasmine/tests/indicator_test.js b/test/jasmine/tests/indicator_test.js
@@ -487,6 +487,39 @@ describe('Indicator plot', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should draw blank path when value is NaN', function(done) {
+        function getArcPath() {
+            return d3.selectAll('g.value-arc > path').attr('d');
+        }
+
+        function getBulletRect() {
+            return d3.selectAll('g.value-bullet > rect').attr('width');
+        }
+
+        Plotly.plot(gd, [{
+            type: 'indicator',
+            mode: 'number+delta+gauge',
+            value: null
+        }])
+        .then(function() {
+            expect(getArcPath()).toBe('M0,0Z', 'blank path with value:null');
+        })
+        .then(function() { return Plotly.restyle(gd, 'value', 10); })
+        .then(function() {
+            expect(getArcPath()).not.toBe('M0,0Z', 'non blank path with value:10');
+        })
+        .then(function() { return Plotly.restyle(gd, 'gauge.shape', 'bullet'); })
+        .then(function() {
+            expect(getBulletRect()).toBe('270', 'bullet of value:10');
+        })
+        .then(function() { return Plotly.restyle(gd, 'value', null); })
+        .then(function() {
+            expect(getBulletRect()).toBe('0', 'width-less bullet of value:null');
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('Indicator animations', function() {
