@carto/kepler.gl 0.0.33-alpha1 → 0.0.34

package/src/layers/h3-hexagon-layer/h3-hexagon-layer.js

@@ -23,11 +23,10 @@ import {findDefaultColorField} from 'utils/dataset-utils';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {H3HexagonLayer} from '@deck.gl/geo-layers';
 import EnhancedColumnLayer from 'deckgl-layers/column-layer/enhanced-column-layer';
-import {getCentroid, idToPolygonGeo, h3IsValid, getHexFields} from './h3-utils';
+import {getCentroid, idToPolygonGeo, h3IsValid, getHexFields, getVertices} from './h3-utils';
 import H3HexagonLayerIcon from './h3-hexagon-layer-icon';
 import {CHANNEL_SCALES, HIGHLIGH_COLOR_3D} from 'constants/default-settings';
-
-import {createDataContainer} from 'utils/table-utils';
+import {getLatLngBounds} from 'utils/data-utils';
 
 const DEFAULT_LINE_SCALE_VALUE = 8;
 
@@ -183,22 +182,20 @@ export default class HexagonIdLayer extends Layer {
   /* eslint-enable complexity */
 
   updateLayerMeta(dataContainer, getHexId) {
-    const centroids = dataContainer.map((d, index) => {
-      const id = getHexId({index});
-      if (!h3IsValid(id)) {
-        return null;
-      }
-      // save a reference of centroids to dataToFeature
-      // so we don't have to re calculate it again
-      return getCentroid({id});
-    }, true);
+    const validHexagonIds = dataContainer.map((d, index) => getHexId({index})).filter(h3IsValid);
 
-    const centroidsDataContainer = createDataContainer(centroids);
-
-    const bounds = this.getPointsBounds(centroidsDataContainer, (d, dc) => {
-      return [dc.valueAt(d.index, 0), dc.valueAt(d.index, 1)];
-    });
+    // save a reference of centroids to dataToFeature
+    // so we don't have to re calculate it again
+    const centroids = validHexagonIds.map(id => getCentroid({id}));
     this.dataToFeature = {centroids};
+
+    const vertices = validHexagonIds.map(id => getVertices({id})).flat();
+    // using the same way to compute bounds as in base-layer.js, even if it's complicated and not very efficient
+    const latBounds = getLatLngBounds(vertices, 1, [-90, 90]);
+    const lngBounds = getLatLngBounds(vertices, 0, [-180, 180]);
+
+    const bounds =
+      !latBounds || !lngBounds ? null : [lngBounds[0], latBounds[0], lngBounds[1], latBounds[1]];
     this.updateMeta({bounds});
   }
 

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