@carto/kepler.gl 0.0.33 → 0.0.34-alpha.0

package/src/constants/default-settings.js

@@ -28,7 +28,8 @@ import {
   scaleOrdinal,
   scaleSqrt,
   scaleLog,
-  scalePoint
+  scalePoint,
+  scaleThreshold
 } from 'd3-scale';
 import {
   Layers,
@@ -306,7 +307,8 @@ export const SCALE_TYPES = keyMirror({
   log: null,
 
   // ordinal domain to linear range
-  point: null
+  point: null,
+  custom: null
 });
 
 export const SCALE_FUNC = {
@@ -316,7 +318,8 @@ export const SCALE_FUNC = {
   [SCALE_TYPES.ordinal]: scaleOrdinal,
   [SCALE_TYPES.sqrt]: scaleSqrt,
   [SCALE_TYPES.log]: scaleLog,
-  [SCALE_TYPES.point]: scalePoint
+  [SCALE_TYPES.point]: scalePoint,
+  [SCALE_TYPES.custom]: scaleThreshold
 };
 
 export const ALL_FIELD_TYPES = keyMirror({
@@ -449,20 +452,20 @@ export const AGGREGATION_TYPES = {
 };
 
 export const linearFieldScaleFunctions = {
-  [CHANNEL_SCALES.color]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
+  [CHANNEL_SCALES.color]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
   [CHANNEL_SCALES.radius]: [SCALE_TYPES.sqrt],
   [CHANNEL_SCALES.size]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log]
 };
 
 export const linearFieldAggrScaleFunctions = {
   [CHANNEL_SCALES.colorAggr]: {
-    [AGGREGATION_TYPES.average]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.maximum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.minimum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.median]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.stdev]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.sum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile],
-    [AGGREGATION_TYPES.variance]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile]
+    [AGGREGATION_TYPES.average]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.maximum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.minimum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.median]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.stdev]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.sum]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
+    [AGGREGATION_TYPES.variance]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom]
   },
 
   [CHANNEL_SCALES.sizeAggr]: {
@@ -486,7 +489,11 @@ export const ordinalFieldAggrScaleFunctions = {
   // [CHANNEL_SCALES.colorAggr]: [SCALE_TYPES.ordinal, SCALE_TYPES.linear],
   [CHANNEL_SCALES.colorAggr]: {
     [AGGREGATION_TYPES.mode]: [SCALE_TYPES.ordinal],
-    [AGGREGATION_TYPES.countUnique]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile]
+    [AGGREGATION_TYPES.countUnique]: [
+      SCALE_TYPES.quantize,
+      SCALE_TYPES.quantile,
+      SCALE_TYPES.custom
+    ]
   },
 
   // Currently doesn't support yet
@@ -509,7 +516,7 @@ export const notSupportAggrOpts = {
  */
 export const DEFAULT_AGGREGATION = {
   [CHANNEL_SCALES.colorAggr]: {
-    [AGGREGATION_TYPES.count]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile]
+    [AGGREGATION_TYPES.count]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom]
   },
   [CHANNEL_SCALES.sizeAggr]: {
     [AGGREGATION_TYPES.count]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log]
@@ -629,6 +636,7 @@ export const DEFAULT_LAYER_COLOR = {
 export const DEFAULT_TOOLTIP_FIELDS = [];
 
 export const NO_VALUE_COLOR = [0, 0, 0, 0];
+export const UNKNOWN_COLOR = [134, 141, 145];
 
 export const LAYER_BLENDINGS = {
   additive: {

package/src/constants/index.js

@@ -66,7 +66,8 @@ export {
   SPEED_CONTROL_RANGE,
   RESOLUTIONS,
   SORT_ORDER,
-  MAP_CONTROLS
+  MAP_CONTROLS,
+  UNKNOWN_COLOR
 } from './default-settings';
 
 export {BUG_REPORT_LINK, USER_GUIDE_DOC} from './user-guides';

package/src/deckgl-layers/layer-utils/cpu-aggregator.js

@@ -23,7 +23,12 @@ import {AGGREGATION_OPERATION, _BinSorter as BinSorter} from '@deck.gl/aggregati
 import {console as Console} from 'global/window';
 
 import {aggregate} from 'utils/aggregate-utils';
-import {AGGREGATION_TYPES, SCALE_FUNC} from 'constants/default-settings';
+import {
+  AGGREGATION_TYPES,
+  SCALE_FUNC,
+  UNKNOWN_COLOR,
+  SCALE_TYPES
+} from 'constants/default-settings';
 
 export const DECK_AGGREGATION_MAP = {
   [AGGREGATION_OPERATION.SUM]: AGGREGATION_TYPES.sum,
@@ -97,7 +102,10 @@ export function getDimensionValueDomain(step, props, dimensionUpdater) {
     [props[lowerPercentile.prop], props[upperPercentile.prop]]
   );
 
-  this._setDimensionState(key, {valueDomain});
+  this._setDimensionState(key, {
+    // By default sortedBins order by ascending frecuency  but if we've an ordinal scale we want to order by descending frecuency
+    valueDomain: props[scaleType.prop] === SCALE_TYPES.ordinal ? valueDomain.reverse() : valueDomain
+  });
 }
 
 export function getDimensionScale(step, props, dimensionUpdater) {
@@ -112,12 +120,20 @@ export function getDimensionScale(step, props, dimensionUpdater) {
   const dimensionRange = props[range.prop];
   const dimensionDomain = props[domain.prop] || this.state.dimensions[key].valueDomain;
 
-  const scaleFunctor = getScaleFunctor(scaleType && props[scaleType.prop])();
+  const scaleTypeProp = scaleType && props[scaleType.prop];
+  const scaleFunctor = getScaleFunctor(scaleTypeProp)();
 
-  const scaleFunc = scaleFunctor.domain(dimensionDomain).range(dimensionRange);
+  const scaleFunc = scaleFunctor
+    .domain(
+      scaleTypeProp === SCALE_TYPES.ordinal
+        ? dimensionDomain.slice(0, dimensionRange.length)
+        : dimensionDomain
+    )
+    .range(dimensionRange)
+    .unknown(UNKNOWN_COLOR);
 
   if (typeof onSet === 'object' && typeof props[onSet.props] === 'function') {
-    props[onSet.props](scaleFunc.domain());
+    props[onSet.props](this.state.dimensions[key].valueDomain);
   }
   this._setDimensionState(key, {scaleFunc});
 }
@@ -180,12 +196,13 @@ function getSubLayerAccessor(dimensionState, dimension, layerProps) {
     }
 
     const cv = bin && bin.value;
-    const domain = scaleFunc.domain();
+    // const domain = scaleFunc.domain();
 
-    const isValueInDomain = cv >= domain[0] && cv <= domain[domain.length - 1];
+    // const isValueInDomain = cv >= domain[0] && cv <= domain[domain.length - 1];
 
     // if cell value is outside domain, set alpha to 0
-    return isValueInDomain ? scaleFunc(cv) : dimension.nullValue;
+    // return isValueInDomain ? scaleFunc(cv) : dimension.nullValue;
+    return scaleFunc(cv);
   };
 }
 

package/src/layers/aggregation-layer.js

@@ -53,7 +53,23 @@ export const getValueAggrFunc = (field, aggregation) => {
 export const getFilterDataFunc = (filterRange, getFilterValue) => pt =>
   getFilterValue(pt).every((val, i) => val >= filterRange[i][0] && val <= filterRange[i][1]);
 
-const getLayerColorRange = colorRange => colorRange.colors.map(hexToRgb);
+const getLayerColorRange = colorRange => {
+  const {colorMap} = colorRange;
+
+  if (colorMap) {
+    return colorMap.map(cMap => hexToRgb(cMap[1]));
+  }
+  return colorRange.colors.map(hexToRgb);
+};
+
+const getLayerColorDomain = colorDomain => {
+  const {colorMap} = colorDomain;
+
+  if (colorMap) {
+    return colorMap.map(cMap => cMap[0]);
+  }
+  return null;
+};
 
 export const aggregateRequiredColumns = ['lat', 'lng'];
 
@@ -64,6 +80,7 @@ export default class AggregationLayer extends Layer {
     this.getPositionAccessor = dataContainer =>
       pointPosAccessor(this.config.columns)(dataContainer);
     this.getColorRange = memoize(getLayerColorRange);
+    this.getColorDomain = memoize(getLayerColorDomain);
   }
 
   get isAggregated() {
@@ -315,6 +332,7 @@ export default class AggregationLayer extends Layer {
 
       // color
       colorRange: this.getColorRange(visConfig.colorRange),
+      colorDomain: this.getColorDomain(visConfig.colorRange),
       colorScaleType: this.config.colorScale,
       upperPercentile: visConfig.percentile[1],
       lowerPercentile: visConfig.percentile[0],

package/src/layers/base-layer.js

@@ -35,7 +35,8 @@ import {
   FIELD_OPTS,
   SCALE_FUNC,
   CHANNEL_SCALE_SUPPORTED_FIELDS,
-  MAX_GPU_FILTERS
+  MAX_GPU_FILTERS,
+  UNKNOWN_COLOR
 } from 'constants/default-settings';
 import {COLOR_RANGES} from 'constants/color-ranges';
 import {DataVizColors} from 'constants/custom-color-ranges';
@@ -43,7 +44,6 @@ import {
   LAYER_VIS_CONFIGS,
   DEFAULT_TEXT_LABEL,
   DEFAULT_COLOR_UI,
-  UNKNOWN_COLOR_KEY,
   DEFAULT_HIGHLIGHT_COLOR,
   DEFAULT_LAYER_LABEL
 } from './layer-factory';
@@ -636,6 +636,7 @@ class Layer {
     });
   }
 
+  // eslint-disable-next-line complexity
   updateColorRangeByColorUI(newConfig, previous, prop) {
     // only update colorRange if changes in UI is made to 'reversed', 'steps' or steps
     const shouldUpdate =
@@ -664,6 +665,10 @@ class Layer {
         if (update && colorRange.reversed) {
           update = reverseColorRange(true, update);
         }
+
+        if (update && colorRange.colorMap) {
+          update = this.updateColorMap(prop, colorRange.colorMap, update);
+        }
       }
     }
 
@@ -676,6 +681,69 @@ class Layer {
     }
   }
 
+  updateColorMap(prop, colorMap, colorRange) {
+    // @ts-ignore
+    const {field, domain} = Object.values(this.visualChannels).find(value => value.range === prop);
+    const type = this.config[field]?.type;
+
+    if (type === 'string' || type === 'boolean' || type === 'date') {
+      return this.updateCategoryColorMap(colorMap, this.config[domain], colorRange);
+    }
+
+    // If no type or type is not string, boolean or date
+    return this.updateNumericColorMap(colorMap, this.config[domain], colorRange);
+  }
+
+  updateCategoryColorMap(colorMap, domain, colorRange) {
+    const colors = colorRange.colors;
+    const assignedCategories = [];
+    const newColorMap = colorMap.slice(0, colors.length).map((cMap, index) => {
+      assignedCategories.push(cMap[0]);
+      return [cMap[0], colors[index]];
+    });
+    const unassignedColors = colors.slice(newColorMap.length, colors.length);
+
+    for (const color of unassignedColors) {
+      const category = domain.find(d => !assignedCategories.includes(d));
+      if (!category) {
+        break;
+      }
+      assignedCategories.push(category);
+      newColorMap.push([category, color]);
+    }
+    return {
+      ...colorRange,
+      colorMap: newColorMap
+    };
+  }
+
+  updateNumericColorMap(colorMap, domain, update) {
+    const colors = update.colors;
+    let newColorMap = colorMap.slice(0, colors.length);
+
+    newColorMap = newColorMap.map((cMap, index) => {
+      const value = index === newColorMap.length - 1 ? null : cMap[0];
+      return [value, colors[index]];
+    });
+    const unassignedColors = colors.slice(newColorMap.length, colors.length);
+
+    if (unassignedColors.length > 0) {
+      const maxValue = domain[domain.length - 1];
+      const prevValue = newColorMap[newColorMap.length - 2][0];
+      const step = (maxValue - prevValue) / (unassignedColors.length + 1);
+      newColorMap[newColorMap.length - 1][0] = prevValue + step;
+
+      for (const [i, color] of unassignedColors.entries()) {
+        const value = i === unassignedColors.length - 1 ? null : prevValue + (step * (i + 2));
+        newColorMap.push([value, color]);
+      }
+    }
+    return {
+      ...update,
+      colorMap: newColorMap
+    };
+  }
+
   /**
    * Check whether layer has all columns
    * @returns {boolean} yes or no
@@ -724,10 +792,10 @@ class Layer {
       });
 
       // @ts-ignore d3 scale
-      const scale = SCALE_FUNC[SCALE_TYPES.ordinal]()
-        .domain(cMap.keys())
-        .range(cMap.values())
-        .unknown(cMap.get(UNKNOWN_COLOR_KEY) || NO_VALUE_COLOR);
+      const scale = SCALE_FUNC[colorScale]()
+        .domain(Array.from(cMap.keys()))
+        .range(Array.from(cMap.values()))
+        .unknown(UNKNOWN_COLOR);
       return scale;
     }
 
@@ -795,6 +863,14 @@ class Layer {
   }
 
   getVisChannelScale(scale, domain, range, fixed) {
+    if (scale === SCALE_TYPES.ordinal) {
+      // @ts-ignore d3-scale type
+      return SCALE_FUNC[scale]()
+        .domain(domain.slice(0, range.length))
+        .range(range)
+        .unknown(UNKNOWN_COLOR);
+    }
+
     // @ts-ignore d3-scale type
     return SCALE_FUNC[fixed ? 'linear' : scale]()
       .domain(domain)

package/src/layers/cluster-layer/cluster-layer.js

@@ -93,6 +93,7 @@ export default class ClusterLayer extends AggregationLayer {
 
         // color
         colorRange: this.getColorRange(visConfig.colorRange),
+        colorDomain: this.getColorDomain(visConfig.colorRange),
         colorScaleType: this.config.colorScale,
         colorAggregation: visConfig.colorAggregation,
 

package/src/utils/data-scale-utils.js

@@ -20,6 +20,7 @@
 
 import {notNullorUndefined, unique} from './data-utils';
 import {extent} from 'd3-array';
+import {uniqueSortedByFrequency} from './data-utils';
 
 /**
  * return quantile domain for an array of data
@@ -37,10 +38,7 @@ export function getQuantileDomain(data, valueAccessor, sortFunc) {
  */
 export function getOrdinalDomain(dataContainer, valueAccessor) {
   const values = dataContainer.mapIndex(valueAccessor);
-
-  return unique(values)
-    .filter(notNullorUndefined)
-    .sort();
+  return uniqueSortedByFrequency(values);
 }
 
 /**

package/src/utils/data-utils.d.ts

@@ -12,6 +12,7 @@ export function isNumber(d: any): boolean;
 export function isPlainObject(d: any): boolean;
 export function numberSort(a: any, b: any): any;
 export function unique(values: any[]): any[];
+export function uniqueSortedByFrequency(values: any[]): any[];
 export function arrayMove(array: any[], from: number, to: number);
 export function getSortingFunction(fieldType: string): numberSort | undefined;
 export function preciseRound(num: number, decimals: number): string;

package/src/utils/data-utils.js

@@ -47,6 +47,20 @@ export function unique(values) {
   return results;
 }
 
+export function uniqueSortedByFrequency(values) {
+  const frequency = values.reduce((res, value) => {
+    if (notNullorUndefined(value)) {
+      if (!res[value]) {
+        res[value] = 0;
+      }
+      res[value] += 1;
+    }
+    return res;
+  }, {});
+
+  return Object.keys(frequency).sort((a, b) => frequency[b] - frequency[a]);
+}
+
 /* eslint-disable max-statements */
 /**
  * return center of map from given points