Fix numeric color sorting in parcats bundles

draftlogs/7959_fix.md

@@ -0,0 +1 @@
+- Fix numeric color sorting for bundled parallel-categories paths [[#7959](https://github.com/plotly/plotly.js/pull/7959)]

src/traces/parcats/parcats.js

@@ -370,6 +370,18 @@ function compareRawColor(a, b) {
     }
 }
 
+function compareArrays(a, b) {
+    for(var i = 0; i < Math.min(a.length, b.length); i++) {
+        if(a[i] < b[i]) {
+            return -1;
+        } else if(a[i] > b[i]) {
+            return 1;
+        }
+    }
+
+    return a.length - b.length;
+}
+
 /**
  * Handle path mouseover
  * @param {PathViewModel} d
@@ -1734,15 +1746,8 @@ function updatePathViewModels(parcatsViewModel) {
             sortArray2.unshift(v2.rawColor);
         }
 
-        // colors equal, sort by display categories
-        if(sortArray1 < sortArray2) {
-            return -1;
-        }
-        if(sortArray1 > sortArray2) {
-            return 1;
-        }
-
-        return 0;
+        // Sort by color, then display categories
+        return compareArrays(sortArray1, sortArray2);
     });
 
     // Create path models

test/jasmine/tests/parcats_test.js

@@ -284,6 +284,29 @@ describe('Basic parcats trace', function() {
             .then(done, done.fail);
     });
 
+    it('should sort bundled paths by numeric color values', function(done) {
+        var trace = {
+            type: 'parcats',
+            dimensions: [
+                {values: ['a', 'a', 'a', 'a']},
+                {values: ['b', 'b', 'b', 'b']}
+            ],
+            line: {color: [1, 10, 2, 20]},
+            bundlecolors: true
+        };
+
+        Plotly.newPlot(gd, [trace])
+            .then(function() {
+                var parcatsViewModel = d3Select('g.trace.parcats').datum();
+                var pathColors = parcatsViewModel.paths.map(function(path) {
+                    return path.model.rawColor;
+                });
+
+                expect(pathColors).toEqual([1, 2, 10, 20]);
+            })
+            .then(done, done.fail);
+    });
+
     it('should compute initial model views properly', function(done) {
         Plotly.newPlot(gd, basicMock)
             .then(function() {