From 206c00c74c54a75c7783198d2a55a5ab3581e857 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20M=C3=B6stl?= <robert.moestl@scalingcurve.at>
Date: Thu, 20 Sep 2018 16:03:21 +0200
Subject: [PATCH] Fix pie's support for individual stroke width values [2989]

- Actually bug was not in pie trace but in legend's draw.
---
 src/components/legend/get_legend_data.js |  3 +-
 test/jasmine/tests/pie_test.js           | 44 +++++++++++++++++++++---
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/components/legend/get_legend_data.js b/src/components/legend/get_legend_data.js
index c7b3562dc2c..c96d34407f0 100644
--- a/src/components/legend/get_legend_data.js
+++ b/src/components/legend/get_legend_data.js
@@ -59,7 +59,8 @@ module.exports = function getLegendData(calcdata, opts) {
                         label: labelj,
                         color: cd[j].color,
                         i: cd[j].i,
-                        trace: trace
+                        trace: trace,
+                        pts: cd[j].pts
                     });
 
                     slicesShown[lgroup][labelj] = true;
diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js
index 49e451620cb..2c54323809b 100644
--- a/test/jasmine/tests/pie_test.js
+++ b/test/jasmine/tests/pie_test.js
@@ -14,6 +14,8 @@ var customAssertions = require('../assets/custom_assertions');
 var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
 var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
 
+var SLICES_SELECTOR = '.slice path';
+var LEGEND_ENTRIES_SELECTOR = '.legendpoints path';
 
 describe('Pie defaults', function() {
     function _supply(trace) {
@@ -100,11 +102,11 @@ describe('Pie traces:', function() {
                 expect(this.style.stroke.replace(/\s/g, '')).toBe('rgb(100,100,100)');
                 expect(this.style.strokeOpacity).toBe('0.7');
             }
-            var slices = d3.selectAll('.slice path');
+            var slices = d3.selectAll(SLICES_SELECTOR);
             slices.each(checkPath);
             expect(slices.size()).toBe(5);
 
-            var legendEntries = d3.selectAll('.legendpoints path');
+            var legendEntries = d3.selectAll(LEGEND_ENTRIES_SELECTOR);
             legendEntries.each(checkPath);
             expect(legendEntries.size()).toBe(5);
         })
@@ -141,7 +143,7 @@ describe('Pie traces:', function() {
 
     function _checkSliceColors(colors) {
         return function() {
-            d3.select(gd).selectAll('.slice path').each(function(d, i) {
+            d3.select(gd).selectAll(SLICES_SELECTOR).each(function(d, i) {
                 expect(this.style.fill.replace(/(\s|rgb\(|\))/g, '')).toBe(colors[i], i);
             });
         };
@@ -182,6 +184,40 @@ describe('Pie traces:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('supports separate stroke width values per slice', function(done) {
+        var data = [
+            {
+                values: [20, 26, 55],
+                labels: ['Residential', 'Non-Residential', 'Utility'],
+                type: 'pie',
+                pull: [0.1, 0, 0],
+                marker: {
+                    colors: ['rebeccapurple', 'purple', 'mediumpurple'],
+                    line: {
+                        width: [3, 0, 0]
+                    }
+                }
+            }
+        ];
+        var layout = {
+            showlegend: true
+        };
+
+        Plotly.plot(gd, data, layout)
+          .then(function() {
+              var expWidths = ['3', '0', '0'];
+
+              d3.selectAll(SLICES_SELECTOR).each(function(d) {
+                  expect(this.style.strokeWidth).toBe(expWidths[d.pointNumber]);
+              });
+              d3.selectAll(LEGEND_ENTRIES_SELECTOR).each(function(d) {
+                  expect(this.style.strokeWidth).toBe(expWidths[d[0].i]);
+              });
+          })
+          .catch(failTest)
+          .then(done);
+    });
 });
 
 describe('pie hovering', function() {
@@ -677,7 +713,7 @@ describe('pie relayout', function() {
             return Plotly.relayout(gd, 'colorway', relayoutColors);
         })
         .then(function() {
-            var slices = d3.selectAll('.slice path');
+            var slices = d3.selectAll(SLICES_SELECTOR);
             slices.each(checkRelayoutColor);
         })
         .then(done);