Merge pull request #1376 from CartoDB/feature/1348-change-eval-method…

…s-for-multiple-features Change eval methods for multiple feature
CartoDB · Jul 12, 2019 · 644e4af · 644e4af
2 parents 5effde9 + 8c91928
commit 644e4af
Show file tree

Hide file tree

Showing 26 changed files with 1,458 additions and 650 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## UNRELEASED
 
 ### Fixed
+- Fix `value`, `eval()` and `getLegendData()` for binary operations
 - Support mixed multi geometries in GeoJSON: LineString & MultiLineString, Polygon & MultiPolygon
 
 ## [1.3.1] 2019-06-17

diff --git a/debug/advanced/bivariate-legends.html b/debug/advanced/bivariate-legends.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="../../dist/carto-vl.js"></script>
+  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
+  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
+  <link rel="stylesheet" type="text/css" href="../../examples/style.css">
+  <style>
+    ul.legend {
+      display: grid;
+      list-style: none;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr 1fr;
+      grid-gap: 1px;
+      width: 100%;
+      height: 100%;
+      background: white;
+      box-sizing: border-box;
+      margin: 12px 0 0;
+      padding: 0;
+    }
+
+    ul.legend > li {
+      height: 70px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="map"></div>
+  <aside class="toolbox">
+    <div class="box">
+      <header>
+        <h1>Bivariate Legends</h1>
+      </header>
+      <section>
+        <div id="legend" class="bivariate-legend">
+          <ul id="legend-content" class="legend"></ul>
+        </div>
+        <div id="controls">
+          <ul id="content"></ul>
+        </div>
+      </section>
+      <footer class="js-footer"></footer>
+    </div>
+  </aside>
+  <div id="loader">
+    <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
+      <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
+      </svg>
+    </div>
+  </div>
+
+  <script>
+    const map = new mapboxgl.Map({
+      container: 'map',
+      style: carto.basemaps.positron,
+      center: [-96.72033740507385, 32.84383032617839],
+      zoom: 10.2
+    });
+
+    carto.setDefaultAuth({
+      username: 'cartovl',
+      apiKey: 'default_public'
+    });
+
+    const source = new carto.source.Dataset('dallas_mkt');
+
+    const viz = new carto.Viz(`
+        strokeColor: rgba(255,255,255,0.2)
+        @pop: $pop_sqkm
+        @percent: $percent_25_29
+        color: ramp(globalQuantiles($pop_sqkm, 3), [#e8e8e8, #dfb0d6, #be64ac]) *
+        ramp(globalQuantiles($percent_25_29, 3), [#e8e8e8, #ace4e4, #5ac8c8])
+    `);
+
+    const layer = new carto.Layer('layer', source, viz);
+    layer.addTo(map);
+
+    layer.on('loaded', () => {
+      hideLoader();
+
+      const legends = layer.viz.color.getLegendData();
+      let content = '';
+
+      legends.data.forEach((legend) => {
+        const colorHex = rgbToHex(legend.value);
+        content +=
+          `<li style="background-color:${colorHex};"></li>`
+      });
+
+      document.getElementById('legend-content').innerHTML = content;
+    });
+
+    function hideLoader() {
+      document.getElementById('loader').style.opacity = '0';
+    }
+
+    function rgbToHex(color) {
+      return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
+    }
+  </script>
+</body>
+
+</html>
diff --git a/src/client/windshaft-filtering.js b/src/client/windshaft-filtering.js
@@ -1,4 +1,11 @@
-import { And, Or, Equals, NotEquals, LessThan, LessThanOrEqualTo, GreaterThan, GreaterThanOrEqualTo } from '../renderer/viz/expressions/binary';
+import GreaterThan from '../renderer/viz/expressions/binary/GreaterThan';
+import GreaterThanOrEqualTo from '../renderer/viz/expressions/binary/GreaterThanOrEqualTo';
+import LessThan from '../renderer/viz/expressions/binary/LessThan';
+import LessThanOrEqualTo from '../renderer/viz/expressions/binary/LessThanOrEqualTo';
+import And from '../renderer/viz/expressions/binary/And';
+import Or from '../renderer/viz/expressions/binary/Or';
+import Equals from '../renderer/viz/expressions/binary/Equals';
+import NotEquals from '../renderer/viz/expressions/binary/NotEquals';
 import { In, Nin } from '../renderer/viz/expressions/belongs';
 import Between from '../renderer/viz/expressions/between';
 import Property from '../renderer/viz/expressions/basic/property';

diff --git a/src/interactivity/featureVizProperty.js b/src/interactivity/featureVizProperty.js
@@ -22,6 +22,17 @@ export default class FeatureVizProperty {
     }
 
     get value () {
-        return this._viz[this._propertyName].eval(this._properties);
+        return this._viz[this._propertyName].value;
+    }
+
+    eval (...properties) {
+        const props = [];
+        properties.forEach((property) => {
+            const prop = {};
+            prop[property] = this._properties[property];
+            props.push(prop);
+        });
+
+        return this._viz[this._propertyName].eval(props);
     }
 }
diff --git a/src/renderer/viz/expressions.js b/src/renderer/viz/expressions.js
@@ -451,20 +451,21 @@ import { Nin } from './expressions/belongs';
 
 import Between from './expressions/between';
 
-import { Mul } from './expressions/binary';
-import { Div } from './expressions/binary';
-import { Add } from './expressions/binary';
-import { Sub } from './expressions/binary';
-import { Mod } from './expressions/binary';
-import { Pow } from './expressions/binary';
-import { GreaterThan } from './expressions/binary';
-import { GreaterThanOrEqualTo } from './expressions/binary';
-import { LessThan } from './expressions/binary';
-import { LessThanOrEqualTo } from './expressions/binary';
-import { Equals } from './expressions/binary';
-import { NotEquals } from './expressions/binary';
-import { Or } from './expressions/binary';
-import { And } from './expressions/binary';
+// Binary Operations
+import Add from './expressions/binary/Add';
+import And from './expressions/binary/And';
+import Div from './expressions/binary/Div';
+import Equals from './expressions/binary/Equals';
+import GreaterThan from './expressions/binary/GreaterThan';
+import GreaterThanOrEqualTo from './expressions/binary/GreaterThanOrEqualTo';
+import LessThan from './expressions/binary/LessThan';
+import LessThanOrEqualTo from './expressions/binary/LessThanOrEqualTo';
+import Mod from './expressions/binary/Mod';
+import Mul from './expressions/binary/Mul';
+import NotEquals from './expressions/binary/NotEquals';
+import Or from './expressions/binary/Or';
+import Pow from './expressions/binary/Pow';
+import Sub from './expressions/binary/Sub';
 
 import Blend from './expressions/blend';
 

diff --git a/src/renderer/viz/expressions/Ramp.js b/src/renderer/viz/expressions/Ramp.js
@@ -129,6 +129,7 @@ export default class Ramp extends BaseExpression {
         super({ input, palette });
         this.palette = palette;
         this.others = others;
+        this.type = palette.type;
         this._defaultOthers = others === DEFAULT_RAMP_OTHERS;
     }
 

diff --git a/src/renderer/viz/expressions/basic/List.js b/src/renderer/viz/expressions/basic/List.js
@@ -63,6 +63,7 @@ export default class List extends Base {
 
         super(elems);
         this.elems = elems;
+        this.type = elems[0].type;
     }
 
     get value () {