Improvements to the polygon spatial viz

superset/assets/spec/javascripts/visualizations/deckgl/utils_spec.js

@@ -0,0 +1,138 @@
+import { expect, assert } from 'chai';
+
+import {
+  getBreakPoints,
+  getBreakPointColorScaler,
+  getBuckets,
+  hexToRGB,
+} from '../../../../src/visualizations/deckgl/utils';
+
+describe('getBreakPoints', () => {
+  it('is a function', () => {
+    assert.isFunction(getBreakPoints);
+  });
+
+  it('returns sorted break points', () => {
+    const fd = { break_points: ['0', '10', '100', '50', '1000'] };
+    const result = getBreakPoints(fd);
+    const expected = ['0', '10', '50', '100', '1000'];
+    expect(result).to.eql(expected);
+  });
+
+  it('returns evenly distributed break points when no break points are specified', () => {
+    const fd = { metric: 'count' };
+    const features = [0, 1, 2, 10].map(count => ({ count }));
+    const result = getBreakPoints(fd, features);
+    const expected = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
+    expect(result).to.eql(expected);
+  });
+
+  it('formats number with proper precision', () => {
+    const fd = { metric: 'count', num_buckets: 2 };
+    const features = [0, 1 / 3, 2 / 3, 1].map(count => ({ count }));
+    const result = getBreakPoints(fd, features);
+    const expected = ['0.0', '0.5', '1.0'];
+    expect(result).to.eql(expected);
+  });
+
+  it('works with a zero range', () => {
+    const fd = { metric: 'count', num_buckets: 1 };
+    const features = [1, 1, 1].map(count => ({ count }));
+    const result = getBreakPoints(fd, features);
+    const expected = ['1', '1'];
+    expect(result).to.eql(expected);
+  });
+});
+
+describe('hexToRGB', () => {
+  it('is a function', () => {
+    assert.isFunction(hexToRGB);
+  });
+
+  it('works with falsy values', () => {
+    expect(hexToRGB()).to.eql([0, 0, 0, 255]);
+    /* eslint-disable quotes */
+    [false, 0, -0, 0.0, '', "", ``, null, undefined, NaN].forEach((value) => {
+      expect(hexToRGB(value)).to.eql([0, 0, 0, 255]);
+    });
+  });
+
+  it('parses hex colors', () => {
+    expect(hexToRGB('#000000')).to.eql([0, 0, 0, 255]);
+    expect(hexToRGB('#ffffff')).to.eql([255, 255, 255, 255]);
+  });
+
+  it('takes and alpha argument', () => {
+    expect(hexToRGB('#000000', 100)).to.eql([0, 0, 0, 100]);
+    expect(hexToRGB('#ffffff', 0)).to.eql([255, 255, 255, 0]);
+  });
+});
+
+describe('getBreakPointColorScaler', () => {
+  it('is a function', () => {
+    assert.isFunction(getBreakPointColorScaler);
+  });
+
+  it('returns linear color scaler if there are no break points', () => {
+    const fd = {
+      metric: 'count',
+      linear_color_scheme: ['#000000', '#ffffff'],
+      opacity: 100,
+    };
+    const features = [10, 20, 30].map(count => ({ count }));
+    const scaler = getBreakPointColorScaler(fd, features);
+    expect(scaler({ count: 10 })).to.eql([0, 0, 0, 255]);
+    expect(scaler({ count: 15 })).to.eql([64, 64, 64, 255]);
+    expect(scaler({ count: 30 })).to.eql([255, 255, 255, 255]);
+  });
+
+  it('returns bucketing scaler if there are break points', () => {
+    const fd = {
+      metric: 'count',
+      linear_color_scheme: ['#000000', '#ffffff'],
+      break_points: ['0', '1', '10'],
+      opacity: 100,
+    };
+    const features = [];
+    const scaler = getBreakPointColorScaler(fd, features);
+    expect(scaler({ count: 0 })).to.eql([0, 0, 0, 255]);
+    expect(scaler({ count: 0.5 })).to.eql([0, 0, 0, 255]);
+    expect(scaler({ count: 1 })).to.eql([255, 255, 255, 255]);
+    expect(scaler({ count: 5 })).to.eql([255, 255, 255, 255]);
+  });
+
+  it('mask values outside the break points', () => {
+    const fd = {
+      metric: 'count',
+      linear_color_scheme: ['#000000', '#ffffff'],
+      break_points: ['0', '1', '10'],
+      opacity: 100,
+    };
+    const features = [];
+    const scaler = getBreakPointColorScaler(fd, features);
+    expect(scaler({ count: -1 })).to.eql([0, 0, 0, 0]);
+    expect(scaler({ count: 11 })).to.eql([0, 0, 0, 0]);
+  });
+});
+
+describe('getBuckets', () => {
+  it('is a function', () => {
+    assert.isFunction(getBuckets);
+  });
+
+  it('computes buckets for break points', () => {
+    const fd = {
+      metric: 'count',
+      linear_color_scheme: ['#000000', '#ffffff'],
+      break_points: ['0', '1', '10'],
+      opacity: 100,
+    };
+    const features = [];
+    const result = getBuckets(features, fd);
+    const expected = {
+      '0 - 1': { color: [0, 0, 0, 255], enabled: true },
+      '1 - 10': { color: [255, 255, 255, 255], enabled: true },
+    };
+    expect(result).to.eql(expected);
+  });
+});

superset/assets/src/explore/controls.jsx

@@ -1467,6 +1467,35 @@ export const controls = {
     description: t('Send range filter events to other charts'),
   },
 
+  toggle_polygons: {
+    type: 'CheckboxControl',
+    label: t('Multiple filtering'),
+    renderTrigger: true,
+    default: true,
+    description: t('Allow sending multiple polygons as a filter event'),
+  },
+
+  num_buckets: {
+    type: 'SelectControl',
+    multi: false,
+    freeForm: true,
+    label: t('Number of buckets to group data'),
+    default: 5,
+    choices: formatSelectOptions([2, 3, 5, 10]),
+    description: t('How many buckets should the data be grouped in.'),
+    renderTrigger: true,
+  },
+
+  break_points: {
+    type: 'SelectControl',
+    multi: true,
+    freeForm: true,
+    label: t('Bucket break points'),
+    choices: formatSelectOptions([]),
+    description: t('List of n+1 values for bucketing metric into n buckets.'),
+    renderTrigger: true,
+  },
+
   show_labels: {
     type: 'CheckboxControl',
     label: t('Show Labels'),

superset/assets/src/explore/visTypes.jsx

@@ -723,7 +723,7 @@ export const visTypes = {
         expanded: true,
         controlSetRows: [
           ['adhoc_filters'],
-          ['metric'],
+          ['metric', 'point_radius_fixed'],
           ['row_limit', null],
           ['line_column', 'line_type'],
           ['reverse_long_lat', 'filter_nulls'],
@@ -743,10 +743,12 @@ export const visTypes = {
         controlSetRows: [
           ['fill_color_picker', 'stroke_color_picker'],
           ['filled', 'stroked'],
-          ['extruded', null],
+          ['extruded', 'multiplier'],
           ['line_width', null],
           ['linear_color_scheme', 'opacity'],
-          ['table_filter', null],
+          ['num_buckets', 'break_points'],
+          ['table_filter', 'toggle_polygons'],
+          ['legend_position', null],
         ],
       },
       {
@@ -769,6 +771,9 @@ export const visTypes = {
       line_type: {
         label: t('Polygon Encoding'),
       },
+      point_radius_fixed: {
+        label: t('Elevation'),
+      },
     },
   },
 

superset/assets/src/modules/colors.js

@@ -15,7 +15,7 @@ export function hexToRGB(hex, alpha = 255) {
 }
 
 export const colorScalerFactory = function (colors, data, accessor, extents, outputRGBA = false) {
-  // Returns a linear scaler our of an array of color
+  // Returns a linear scaler out of an array of color
   if (!Array.isArray(colors)) {
     /* eslint no-param-reassign: 0 */
     colors = getSequentialSchemeRegistry().get(colors).colors;

superset/assets/src/visualizations/deckgl/layers/Arc/Arc.jsx

@@ -21,7 +21,7 @@ export function getLayer(fd, payload, onAddFilter, setTooltip) {
     getSourceColor: d => d.sourceColor || d.color || [sc.r, sc.g, sc.b, 255 * sc.a],
     getTargetColor: d => d.targetColor || d.color || [tc.r, tc.g, tc.b, 255 * tc.a],
     strokeWidth: (fd.stroke_width) ? fd.stroke_width : 3,
-    ...commonLayerProps(fd, onAddFilter, setTooltip),
+    ...commonLayerProps(fd, setTooltip),
   });
 }
 

superset/assets/src/visualizations/deckgl/layers/Geojson/Geojson.jsx

@@ -88,7 +88,7 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     stroked: fd.stroked,
     extruded: fd.extruded,
     pointRadiusScale: fd.point_radius_scale,
-    ...commonLayerProps(fd, onAddFilter, setTooltip),
+    ...commonLayerProps(fd, setTooltip),
   });
 }
 

superset/assets/src/visualizations/deckgl/layers/Grid/Grid.jsx

@@ -28,7 +28,7 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     outline: false,
     getElevationValue: points => points.reduce((sum, point) => sum + point.weight, 0),
     getColorValue: points => points.reduce((sum, point) => sum + point.weight, 0),
-    ...commonLayerProps(fd, onAddFilter, setTooltip),
+    ...commonLayerProps(fd, setTooltip),
   });
 }
 

superset/assets/src/visualizations/deckgl/layers/Hex/Hex.jsx

@@ -28,7 +28,7 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     outline: false,
     getElevationValue: points => points.reduce((sum, point) => sum + point.weight, 0),
     getColorValue: points => points.reduce((sum, point) => sum + point.weight, 0),
-    ...commonLayerProps(fd, onAddFilter, setTooltip),
+    ...commonLayerProps(fd, setTooltip),
   });
 }
 

superset/assets/src/visualizations/deckgl/layers/Path/Path.jsx

@@ -24,7 +24,7 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     data,
     rounded: true,
     widthScale: 1,
-    ...commonLayerProps(fd, onAddFilter, setTooltip),
+    ...commonLayerProps(fd, setTooltip),
   });
 }