alias surface can show gradient data

frontend-js/src/main/js/map/AbstractCustomMap.js

@@ -420,7 +420,7 @@ AbstractCustomMap.prototype._showDataOverlayAliases = function (overlay, startX,
     return Promise.each(overlayAliasesOnMap, function (overlayAlias) {
       return self.getModel().getAliasById(overlayAlias.getId()).then(function (aliasData) {
         var surface = new AliasSurface({
-          overlayAlias: overlayAlias,
+          overlayData: [overlayAlias],
           alias: aliasData,
           map: self,
           startX: startX,

frontend-js/src/main/js/map/surface/AliasSurface.js

@@ -16,7 +16,7 @@ var Point = require('../canvas/Point');
  * Class representing overlay of the alias on the map relevant for a specific
  * layout.
  *
- * @param {LayoutAlias} [params.overlayAlias] - {@link LayoutAlias} for which overlay is created
+ * @param {LayoutAlias[]} [params.overlayData] - {@link LayoutAlias} for which overlay is created
  * @param {number} [params.startX] - this is the ratio on OX axis that should be use as a
  *          starting point of the overlay. For instance when there are three
  *          overlays to visualize then
@@ -38,8 +38,11 @@ var Point = require('../canvas/Point');
 function AliasSurface(params) {
   // call super constructor
   AbstractSurfaceElement.call(this, params);
+  if (params.overlayAlias !== undefined) {
+    throw new Error();
+  }
 
-  this.setOverlayData(params.overlayAlias);
+  this.setOverlayData(params.overlayData);
   this.setStartX(params.startX);
   this.setEndX(params.endX);
 
@@ -175,13 +178,43 @@ AliasSurface.prototype.setBoundsForAlias = function (startX, endX) {
   this.getMapCanvasObjects()[0].setBounds(bounds);
 };
 
+AliasSurface.prototype._computeColors = function () {
+  var self = this;
+  var overlayData = self.getOverlayData();
+  if (overlayData === undefined || overlayData.length === 0) {
+    return self.getColor();
+  } else {
+    var promises = [];
+    for (var i = 0; i < overlayData.length; i++) {
+      promises.push(functions.overlayToColor(overlayData[i]));
+    }
+    return Promise.all(promises).then(function (colors) {
+      var countByColor = [], color;
+      for (var i = 0; i < colors.length; i++) {
+        color = colors[i];
+        if (countByColor[color] !== undefined) {
+          countByColor[color]++;
+        } else {
+          countByColor[color] = 1;
+        }
+      }
+      var result = [];
+      for (color in countByColor) {
+        if (countByColor.hasOwnProperty(color)) {
+          result.push({color: color, amount: countByColor[color]});
+        }
+      }
+      return result;
+    });
+  }
+
+};
 /**
  *
  * @returns {PromiseLike<any>}
  */
 AliasSurface.prototype.init = function () {
   var self = this;
-  var overlayData = self.getOverlayData();
   var alias = self.getBioEntity();
   var map = self.getCustomMap();
   var startX = self.getStartX();
@@ -197,26 +230,33 @@ AliasSurface.prototype.init = function () {
     if (fillOpacity === undefined) {
       fillOpacity = result;
     }
-    if (overlayData !== undefined) {
-      return functions.overlayToColor(overlayData);
+    return self._computeColors();
+  }).then(function (color) {
+    if (typeof color === 'string' || color instanceof String) {
+      self.addMapCanvasObject(map.getMapCanvas().createRectangle({
+        fillOpacity: fillOpacity,
+        strokeColor: self.getStrokeColor(),
+        strokeOpacity: self.getStrokeOpacity(),
+        strokeWeight: self.getStrokeWeight(),
+        fillColor: color,
+        bounds: bounds
+      }));
     } else {
-      return self.getColor();
+      self.addMapCanvasObject(map.getMapCanvas().createRectangle({
+        fillOpacity: fillOpacity,
+        strokeColor: self.getStrokeColor(),
+        strokeOpacity: self.getStrokeOpacity(),
+        strokeWeight: self.getStrokeWeight(),
+        fillGradient: color,
+        bounds: bounds
+      }));
     }
-  }).then(function (color) {
-    self.addMapCanvasObject(map.getMapCanvas().createRectangle({
-      fillOpacity: fillOpacity,
-      strokeColor: self.getStrokeColor(),
-      strokeOpacity: self.getStrokeOpacity(),
-      strokeWeight: self.getStrokeWeight(),
-      fillColor: color,
-      bounds: bounds
-    }));
   });
 };
 
 /**
  *
- * @returns {LayoutAlias}
+ * @returns {LayoutAlias[]}
  */
 AliasSurface.prototype.getOverlayData = function () {
   return this._overlayData;
@@ -224,7 +264,7 @@ AliasSurface.prototype.getOverlayData = function () {
 
 /**
  *
- * @param {LayoutAlias} overlayData
+ * @param {LayoutAlias[]} overlayData
  */
 AliasSurface.prototype.setOverlayData = function (overlayData) {
   this._overlayData = overlayData;

frontend-js/src/test/js/map/surface/AliasSurface-test.js

@@ -13,10 +13,9 @@ describe('AliasSurface', function () {
     it("default", function () {
       var map = helper.createCustomMap();
       var alias = helper.createAlias(map);
-      var layoutAlias = helper.createLayoutAlias(alias);
 
       var result = new AliasSurface({
-        overlayAlias: layoutAlias,
+        overlayData: [helper.createLayoutAlias(alias)],
         alias: alias,
         map: map,
         startX: 1,
@@ -30,10 +29,9 @@ describe('AliasSurface', function () {
     it("no bounds", function () {
       var map = helper.createCustomMap();
       var alias = helper.createAlias(map);
-      var layoutAlias = helper.createLayoutAlias(alias);
 
       var result = new AliasSurface({
-        overlayAlias: layoutAlias,
+        overlayData: [helper.createLayoutAlias(alias)],
         alias: alias,
         map: map
       });
@@ -55,7 +53,7 @@ describe('AliasSurface', function () {
         alias = result;
         surface = new AliasSurface({
           alias: result,
-          overlayAlias: helper.createLayoutAlias(result),
+          overlayData: [helper.createLayoutAlias(alias)],
           map: map
         });
         return surface.init();
@@ -72,7 +70,7 @@ describe('AliasSurface', function () {
       var map = helper.createCustomMap();
       var alias = helper.createAlias(map);
       var surface = new AliasSurface({
-        overlayAlias: helper.createLayoutAlias(alias),
+        overlayData: [helper.createLayoutAlias(alias)],
         alias: alias,
         map: map,
         startX: 1,
@@ -98,7 +96,7 @@ describe('AliasSurface', function () {
         alias = result;
         surface = new AliasSurface({
           alias: result,
-          overlayAlias: helper.createLayoutAlias(result),
+          overlayData: [helper.createLayoutAlias(result)],
           map: map,
           onClick: function () {
             clicked = true;