From df5749a60517718c2cabf97c98f68176b07a1fc0 Mon Sep 17 00:00:00 2001
From: Matthew Ma <matthew.ma@kitware.com>
Date: Thu, 19 Apr 2018 14:06:00 -0400
Subject: [PATCH] Add multi color support to continuous color legend

---
 examples/color-legend/main.js |  7 +++++++
 src/ui/colorLegendWidget.js   |  7 ++++++-
 tests/cases/colorLegend.js    | 11 +++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/examples/color-legend/main.js b/examples/color-legend/main.js
index 95cbddb940..158e58aaa5 100644
--- a/examples/color-legend/main.js
+++ b/examples/color-legend/main.js
@@ -92,6 +92,13 @@ $(function () {
       base: Math.E,
       domain: [100, 10000],
       colors: ['blue', 'olive']
+    },
+    {
+      name: 'Continuous multicolor',
+      type: 'continuous',
+      scale: 'linear',
+      domain: [100, 1000],
+      colors: ['red', 'blue', 'green', 'orange']
     }
   ]);
 
diff --git a/src/ui/colorLegendWidget.js b/src/ui/colorLegendWidget.js
index b7767407fb..cea8102ba4 100644
--- a/src/ui/colorLegendWidget.js
+++ b/src/ui/colorLegendWidget.js
@@ -327,9 +327,14 @@ var colorLegendWidget = function (arg) {
     gradient.append('stop')
       .attr('offset', '0%')
       .attr('stop-color', category.colors[0]);
+    for (var i = 1; i < category.colors.length - 1; i++) {
+      gradient.append('stop')
+        .attr('offset', (100 / (category.colors.length - 1) * i).toFixed(6) + '%')
+        .attr('stop-color', category.colors[i]);
+    }
     gradient.append('stop')
       .attr('offset', '100%')
-      .attr('stop-color', category.colors[1]);
+      .attr('stop-color', category.colors[category.colors.length - 1]);
     svg.append('rect')
       .attr('fill', 'url(#gradient' + id + ')')
       .attr('width', width)
diff --git a/tests/cases/colorLegend.js b/tests/cases/colorLegend.js
index 9895d44c09..9e29d2ac99 100644
--- a/tests/cases/colorLegend.js
+++ b/tests/cases/colorLegend.js
@@ -67,6 +67,13 @@ describe('color legend', function () {
       base: Math.E,
       domain: [100, 10000],
       colors: ['blue', 'olive']
+    },
+    {
+      name: 'Continuous multicolor',
+      type: 'continuous',
+      scale: 'pow',
+      domain: [100, 1000],
+      colors:  ['red', 'blue', 'green', 'orange']
     }
   ];
 
@@ -164,6 +171,10 @@ describe('color legend', function () {
     expect($(legends[7]).find('svg g.tick text').toArray().map(function (text) {
       return $(text).text();
     }).join(', ')).toBe('150, 400, 1.1k, 3.0k, 8.1k');
+
+    expect($(legends[8]).find('svg>defs stop').length).toBe(4);
+    expect($(legends[8]).find('svg>defs stop:nth-child(2)').attr('offset')).toBe('33.333333%');
+    expect($(legends[8]).find('svg>defs stop:nth-child(3)').attr('offset')).toBe('66.666667%');
   });
 
   it('test mouse events', function () {