@deck.gl/carto 8.7.4 → 8.7.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/carto",
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
-  "version": "8.7.4",
+  "version": "8.7.5",
   "publishConfig": {
     "access": "public"
   },
@@ -51,10 +51,11 @@
     "@types/d3-scale": "^3.0.0"
   },
   "peerDependencies": {
+    "@deck.gl/aggregation-layers": "^8.0.0",
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/geo-layers": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.1.5"
   },
-  "gitHead": "eb545b0af1760f83d8225ef8282aca66754fd0b7"
+  "gitHead": "e32b546539b859933be006069f3301a8e4323b1e"
 }

package/src/api/layer-map.ts

@@ -1,4 +1,4 @@
-import {extent} from 'd3-array';
+import {deviation, extent, groupSort, median, variance} from 'd3-array';
 import {rgb} from 'd3-color';
 import {
   scaleLinear,
@@ -31,6 +31,22 @@ const SCALE_FUNCS = {
 };
 export type SCALE_TYPE = keyof typeof SCALE_FUNCS;
 
+export const AGGREGATION = {
+  average: 'MEAN',
+  maximum: 'MAX',
+  minimum: 'MIN',
+  sum: 'SUM'
+};
+
+const AGGREGATION_FUNC = {
+  'count unique': (values, accessor) => groupSort(values, v => v.length, accessor).length,
+  median,
+  // Unfortunately mode() is only available in d3-array@3+ which is ESM only
+  mode: (values, accessor) => groupSort(values, v => v.length, accessor).pop(),
+  stddev: deviation,
+  variance
+};
+
 const hexToRGBA = c => {
   const {r, g, b, opacity} = rgb(c);
   return [r, g, b, 255 * opacity];
@@ -61,19 +77,16 @@ const sharedPropMap = {
 };
 
 const aggregationVisConfig = {
-  colorAggregation: 'colorAggregation',
+  colorAggregation: x => ({colorAggregation: AGGREGATION[x] || AGGREGATION.sum}),
   colorRange: x => ({colorRange: x.colors.map(hexToRGBA)}),
   coverage: 'coverage',
   elevationPercentile: ['elevationLowerPercentile', 'elevationUpperPercentile'],
   percentile: ['lowerPercentile', 'upperPercentile']
 };
 
-const RADIUS_DOWNSCALE = 0.2;
-
 const defaultProps = {
   lineMiterLimit: 2,
   lineWidthUnits: 'pixels',
-  pointRadiusScale: RADIUS_DOWNSCALE,
   pointRadiusUnits: 'pixels',
   rounded: true,
   wrapLongitude: false
@@ -102,8 +115,7 @@ export function getLayer(
       propMap: {visConfig: {outline: 'stroked'}}
     },
     geojson: {
-      Layer: GeoJsonLayer,
-      defaultProps: {lineWidthScale: 2}
+      Layer: GeoJsonLayer
     },
     grid: {
       Layer: CPUGridLayer,
@@ -123,7 +135,7 @@ export function getLayer(
     hexagonId: {
       Layer: H3HexagonLayer,
       propMap: {visConfig: {coverage: 'coverage'}},
-      defaultProps: {getHexagon: d => d[hexagonId]}
+      defaultProps: {getHexagon: d => d[hexagonId], stroked: false}
     }
   }[type];
 
@@ -147,8 +159,6 @@ function getTileLayer(dataset) {
     propMap: sharedPropMap,
     defaultProps: {
       ...defaultProps,
-      pointRadiusScale: 0.3,
-      lineWidthScale: 2,
       uniqueIdProperty: 'geoid',
       formatTiles
     }
@@ -207,6 +217,12 @@ function normalizeAccessor(accessor, data) {
   return accessor;
 }
 
+export function getColorValueAccessor({name}, colorAggregation, data: any) {
+  const aggregator = AGGREGATION_FUNC[colorAggregation];
+  const accessor = values => aggregator(values, p => p[name]);
+  return normalizeAccessor(accessor, data);
+}
+
 export function getColorAccessor(
   {name},
   scaleType: SCALE_TYPE,
@@ -259,10 +275,7 @@ export function getTextPixelOffsetAccessor({alignment, anchor, size}, radius) {
   const signY = alignment === 'center' ? 0 : alignment === 'bottom' ? 1 : -1;
   const sizeOffset = alignment === 'center' ? 0 : size;
 
-  const calculateOffset = r => {
-    r = RADIUS_DOWNSCALE * r;
-    return [signX * (r + padding), signY * (r + padding + sizeOffset)];
-  };
+  const calculateOffset = r => [signX * (r + padding), signY * (r + padding + sizeOffset)];
 
   return typeof radius === 'function'
     ? d => {

package/src/api/maps-api-common.ts

@@ -20,6 +20,8 @@ export const MAP_TYPES = {
   TILESET: 'tileset'
 } as const;
 export type MapType = ValuesOf<typeof MAP_TYPES>;
+export const COLUMNS_SUPPORT = [MAP_TYPES.TABLE];
+export const GEO_COLUMN_SUPPORT = [MAP_TYPES.QUERY, MAP_TYPES.TABLE];
 
 // AVAILABLE FORMATS
 export const FORMATS = {

package/src/api/maps-v3-client.ts

@@ -4,9 +4,11 @@
 import {getDefaultCredentials, buildMapsUrlFromBase, CloudNativeCredentials} from '../config';
 import {
   API_VERSIONS,
+  COLUMNS_SUPPORT,
   encodeParameter,
   Format,
   FORMATS,
+  GEO_COLUMN_SUPPORT,
   MapInstantiation,
   MapType,
   MAP_TYPES,
@@ -135,13 +137,11 @@ function getParameters({
   const sourceName = type === MAP_TYPES.QUERY ? 'q' : 'name';
   parameters.push(encodeParameter(sourceName, source));
 
-  if (type === MAP_TYPES.TABLE) {
-    if (geoColumn) {
-      parameters.push(encodeParameter('geo_column', geoColumn));
-    }
-    if (columns) {
-      parameters.push(encodeParameter('columns', columns.join(',')));
-    }
+  if (GEO_COLUMN_SUPPORT.includes(type) && geoColumn) {
+    parameters.push(encodeParameter('geo_column', geoColumn));
+  }
+  if (COLUMNS_SUPPORT.includes(type) && columns) {
+    parameters.push(encodeParameter('columns', columns.join(',')));
   }
 
   return parameters.join('&');
@@ -429,6 +429,16 @@ export async function fetchMap({
     };
   }
 
+  const geojsonLayers = map.keplerMapConfig.config.visState.layers.filter(
+    ({type}) => type === 'geojson' || type === 'point'
+  );
+  const geojsonDatasetIds = geojsonLayers.map(({config}) => config.dataId);
+  map.datasets.forEach(dataset => {
+    if (geojsonDatasetIds.includes(dataset.id)) {
+      dataset.format = 'geojson';
+    }
+  });
+
   // Mutates map.datasets so that dataset.data contains data
   await fillInMapDatasets(map, clientId, localCreds);
   return {

package/src/api/parseMap.ts

@@ -1,7 +1,9 @@
 import GL from '@luma.gl/constants';
 import {
+  AGGREGATION,
   getLayer,
   getColorAccessor,
+  getColorValueAccessor,
   getSizeAccessor,
   getTextAccessor,
   getTextPixelOffsetAccessor
@@ -127,11 +129,17 @@ function mapProps(source, target, mapping) {
 function createStyleProps(config, mapping) {
   const result: Record<string, any> = {};
   mapProps(config, result, mapping);
+
+  // Kepler format sometimes omits strokeColor. TODO: remove once we can rely on
+  // `strokeColor` always being sert when `stroke: true`.
+  if (result.stroked && !result.getLineColor) {
+    result.getLineColor = result.getFillColor;
+  }
   result.highlightColor = config.visConfig.enable3d ? [255, 255, 255, 60] : [252, 242, 26, 255];
   return result;
 }
 
-/* eslint-disable complexity */
+/* eslint-disable complexity, max-statements */
 function createChannelProps(visualChannels, type, config, data) {
   const {colorField, colorScale, sizeField, sizeScale, strokeColorField, strokeColorScale} =
     visualChannels;
@@ -143,7 +151,18 @@ function createChannelProps(visualChannels, type, config, data) {
   const {textLabel, visConfig} = config;
   const result: Record<string, any> = {};
   const textLabelField = textLabel && textLabel.field;
-  if (colorField) {
+
+  if (type === 'grid' || type === 'hexagon') {
+    result.colorScaleType = colorScale;
+    if (colorField) {
+      const {colorAggregation} = config.visConfig;
+      if (!AGGREGATION[colorAggregation]) {
+        result.getColorValue = getColorValueAccessor(colorField, colorAggregation, data);
+      } else {
+        result.getColorWeight = d => [colorField.name];
+      }
+    }
+  } else if (colorField) {
     result.getFillColor = getColorAccessor(
       colorField,
       colorScale,
@@ -151,9 +170,8 @@ function createChannelProps(visualChannels, type, config, data) {
       1, // Rely on layer opacity
       data
     );
-  } else if (type === 'grid' || type === 'hexagon') {
-    result.colorScaleType = colorScale;
   }
+
   if (strokeColorField) {
     const opacity = visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : 1;
     result.getLineColor = getColorAccessor(

package/src/layers/carto-layer.js

@@ -3,7 +3,13 @@ import CartoTileLayer from './carto-tile-layer';
 import {MVTLayer} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {fetchLayerData, getDataV2, API_VERSIONS} from '../api';
-import {FORMATS, MAP_TYPES, TILE_FORMATS} from '../api/maps-api-common';
+import {
+  COLUMNS_SUPPORT,
+  FORMATS,
+  GEO_COLUMN_SUPPORT,
+  MAP_TYPES,
+  TILE_FORMATS
+} from '../api/maps-api-common';
 import {getDefaultCredentials} from '../config';
 
 const defaultProps = {
@@ -76,9 +82,14 @@ export default class CartoLayer extends CompositeLayer {
         Object.values(MAP_TYPES).includes(type),
         `Invalid type ${type}. Use MAP_TYPES enum.`
       );
-      if (type !== MAP_TYPES.TABLE) {
-        log.assert(!geoColumn, `geoColumn prop is only supported for type ${MAP_TYPES.TABLE}`);
-        log.assert(!columns, `columns prop is only supported for type ${MAP_TYPES.TABLE}`);
+      if (!COLUMNS_SUPPORT.includes(type)) {
+        log.assert(!columns, `columns prop is only supported for types: ${COLUMNS_SUPPORT.join()}`);
+      }
+      if (!GEO_COLUMN_SUPPORT.includes(type)) {
+        log.assert(
+          !geoColumn,
+          `geoColumn prop is only supported for types: ${GEO_COLUMN_SUPPORT.join()}`
+        );
       }
       if (columns) {
         log.assert(Array.isArray(columns), 'columns prop must be an Array');