Add multi color support to continuous color legend

OpenGeoscience · Apr 19, 2018 · df5749a · df5749a
1 parent 0baf387
commit df5749a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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 () {