indicator: test that it supports layout.template

Author: antoinerg

src/traces/indicator/attributes.js

@@ -254,6 +254,7 @@ module.exports = {
                     'Sets the color for increasing value.'
                 ].join(' ')
             },
+            // TODO: add attribute to show sign
             editType: 'plot'
         },
         decreasing: {
@@ -275,6 +276,7 @@ module.exports = {
                     'Sets the color for increasing value.'
                 ].join(' ')
             },
+            // TODO: add attribute to hide sign
             editType: 'plot'
         },
         font: extendFlat({}, textFontAttrs, {
@@ -335,7 +337,7 @@ module.exports = {
             dtick: axesAttrs.dtick,
             tickvals: axesAttrs.tickvals,
             ticktext: axesAttrs.ticktext,
-            ticks: extendFlat({}, axesAttrs.ticks, {dflt: ''}),
+            ticks: extendFlat({}, axesAttrs.ticks, {dflt: 'outside'}),
             ticklen: axesAttrs.ticklen,
             tickwidth: axesAttrs.tickwidth,
             tickcolor: axesAttrs.tickcolor,

src/traces/indicator/defaults.js

@@ -89,6 +89,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     }
     if(traceOut._hasGauge) {
         gaugeIn = traceIn.gauge;
+        if(!gaugeIn) gaugeIn = {};
         gaugeOut = Template.newContainer(traceOut, 'gauge');
         coerceGauge('shape');
         var isBullet = traceOut._isBullet = traceOut.gauge.shape === 'bullet';
@@ -113,14 +114,10 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
         coerceGauge('bar.thickness', defaultBarThickness);
 
         // Gauge steps
-        if(gaugeIn && gaugeIn.steps) {
-            handleArrayContainerDefaults(gaugeIn, gaugeOut, {
-                name: 'steps',
-                handleItemDefaults: stepDefaults
-            });
-        } else {
-            gaugeOut.steps = [];
-        }
+        handleArrayContainerDefaults(gaugeIn, gaugeOut, {
+            name: 'steps',
+            handleItemDefaults: stepDefaults
+        });
 
         // Gauge threshold
         coerceGauge('threshold.value');
@@ -135,20 +132,20 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
         coerceGaugeAxis('visible');
         coerceGaugeAxis('range', [0, 1.5 * traceOut.value]);
 
+        var opts = {outerTicks: true};
         handleTickValueDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear');
-        var opts = {outerTicks: false, font: layout.font};
         handleTickLabelDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear', opts);
-        handleTickMarkDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear', opts);
+        handleTickMarkDefaults(axisIn, axisOut, coerceGaugeAxis, opts);
     } else {
         coerce('title.align', 'center');
         coerce('align', 'center');
         traceOut._isAngular = traceOut._isBullet = false;
     }
 }
 
-function stepDefaults(valueIn, valueOut) {
+function stepDefaults(stepIn, stepOut) {
     function coerce(attr, dflt) {
-        return Lib.coerce(valueIn, valueOut, attributes.gauge.steps, attr, dflt);
+        return Lib.coerce(stepIn, stepOut, attributes.gauge.steps, attr, dflt);
     }
 
     coerce('color');

test/image/baselines/indicator_grid_template.png

@@ -8,20 +8,17 @@
   }, {
       "type": "indicator",
       "value": 120,
-      "delta": {"reference": 60},
       "gauge": {"shape": "bullet", "axis": {"visible": false}},
-      "domain": {"row": 1, "y": [0.15, 0.35]}
+      "domain": {"x": [0.05, 0.5], "y": [0.15, 0.35]}
   }, {
       "type": "indicator",
       "mode": "number+delta",
       "value": 120,
-      "delta": {"reference": 60},
       "domain": {"row": 0, "column": 1}
   }, {
       "type": "indicator",
       "mode": "delta",
       "value": 40,
-      "delta": {"reference": 60},
       "domain": {"row": 1, "column": 1}
   }],
   "layout": {
@@ -32,7 +29,9 @@
     "template": {
       "data": {
         "indicator": [{
-          "mode": "number+delta+gauge"
+          "title": {"text": "Title"},
+          "mode": "number+delta+gauge",
+          "delta": {"reference": 60}
         }]
       }
     }

test/image/mocks/indicator_grid_template.json

@@ -544,3 +544,84 @@ describe('Indicator animations', function() {
         });
     });
 });
+
+describe('Indicator attributes', function() {
+    var gd;
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+    afterEach(destroyGraphDiv);
+
+    it('are inherited from template', function(done) {
+        Plotly.newPlot(gd, [{
+            type: 'indicator',
+            value: 5,
+            mode: 'number+delta+gauge'
+        }], {template: {
+            data: {
+                indicator: [{
+                    delta: {
+                        valueformat: '0.9f',
+                        reference: -100,
+                        increasing: {
+                            symbol: 'a',
+                            color: 'blue'
+                        },
+                        font: {
+                            family: 'ArialDelta',
+                            size: 20
+                        }
+                    },
+                    number: {
+                        valueformat: '0.8f',
+                        suffix: 'km/h',
+                        font: {
+                            family: 'ArialNumber',
+                            color: 'blue'
+                        }
+                    },
+                    gauge: {
+                        axis: {
+                            range: [0, 500],
+                            tickcolor: 'white',
+                            tickangle: 20,
+                            tickwidth: 1
+                        },
+                        steps: [{
+                            range: [0, 250],
+                            color: 'rgba(255, 255, 0, 0.5)'
+                        }, {
+                            range: [250, 400],
+                            color: 'rgba(0, 0, 255, 0.75)'
+                        }]
+                    }
+                }]
+            }
+        }})
+        .then(function() {
+            // Check number
+            expect(gd._fullData[0].number.valueformat).toEqual('0.8f');
+            expect(gd._fullData[0].number.suffix).toEqual('km/h');
+            expect(gd._fullData[0].number.font.color).toEqual('blue');
+            expect(gd._fullData[0].number.font.family).toEqual('ArialNumber');
+
+            // Check delta
+            expect(gd._fullData[0].delta.valueformat).toEqual('0.9f');
+            expect(gd._fullData[0].delta.reference).toEqual(-100);
+            expect(gd._fullData[0].delta.increasing.symbol).toEqual('a');
+            expect(gd._fullData[0].delta.font.family).toEqual('ArialDelta');
+            expect(gd._fullData[0].delta.font.size).toEqual(20);
+
+            // Check gauge axis
+            expect(gd._fullData[0].gauge.axis.range).toEqual([0, 500], 'wrong gauge.axis.range');
+            expect(gd._fullData[0].gauge.axis.tickangle).toEqual(20, 'wrong gauge.axis.tickangle');
+            expect(gd._fullData[0].gauge.axis.tickcolor).toBe('white', 'wrong gauge.axis.tickcolor');
+
+            // TODO: check this works once handleArrayContainerDefaults supports template
+            // expect(gd._fullData[0].gauge.steps[0].range).toEqual([0, 250], 'wrong gauge.steps[0].range');
+            // expect(gd._fullData[0].gauge.steps[0].color).toEqual('rgba(255, 255, 0, 0.5)');
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});