[Chore]: Technical: Translate hexagon-layer (#1775)

* Renamed js files Signed-off-by: Maksim Suslov <maksim.suslov@actionengine.com> * Added typings Signed-off-by: Maksim Suslov <maksim.suslov@actionengine.com>
keplergl · Apr 5, 2022 · 2d2ba1d · 2d2ba1d
1 parent 543045d
commit 2d2ba1d
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 11 deletions.
diff --git a/src/constants/default-settings.ts b/src/constants/default-settings.ts
@@ -444,7 +444,21 @@ export const CHANNEL_SCALES = keyMirror({
   sizeAggr: null
 });
 
-export const AGGREGATION_TYPES = {
+export const AGGREGATION_TYPES: {
+  // default
+  count: 'count';
+  // linear
+  average: 'average';
+  maximum: 'maximum';
+  minimum: 'minimum';
+  median: 'median';
+  stdev: 'stdev';
+  sum: 'sum';
+  variance: 'variance';
+  // ordinal
+  mode: 'mode';
+  countUnique: 'count unique';
+} = {
   // default
   count: 'count',
   // linear

diff --git a/src/layers/base-layer.ts b/src/layers/base-layer.ts
@@ -128,6 +128,8 @@ export type LayerWeightConfig = {
 
 export type VisualChannels = {[key: string]: VisualChannel};
 
+export type VisualChannelAggregation = 'colorAggregation' | 'sizeAggregation';
+
 export type VisualChannel = {
   property: string;
   field: string;
@@ -149,7 +151,7 @@ export type VisualChannel = {
 
   supportedFieldTypes?: Array<keyof typeof ALL_FIELD_TYPES>;
 
-  aggregation?: 'colorAggregation' | 'sizeAggregation';
+  aggregation?: VisualChannelAggregation;
 };
 
 export type VisualChannelDescription = {

diff --git a/src/layers/cluster-layer/cluster-layer.ts b/src/layers/cluster-layer/cluster-layer.ts
@@ -25,6 +25,7 @@ import DeckGLClusterLayer from 'deckgl-layers/cluster-layer/cluster-layer';
 import {CHANNEL_SCALES} from 'constants/default-settings';
 import ClusterLayerIcon from './cluster-layer-icon';
 import {
+  AggregationTypes,
   VisConfigColorRange,
   VisConfigNumber,
   VisConfigRange,
@@ -48,7 +49,7 @@ export type ClusterLayerVisConfig = {
   clusterRadius: number;
   colorRange: ColorRange;
   radiusRange: [number, number];
-  colorAggregation: keyof typeof AGGREGATION_TYPES;
+  colorAggregation: AggregationTypes;
 };
 
 export type ClusterLayerConfig = Merge<AggregationLayerConfig, {visConfig: ClusterLayerVisConfig}>;

diff --git a/src/layers/grid-layer/grid-layer.ts b/src/layers/grid-layer/grid-layer.ts
@@ -24,6 +24,7 @@ import AggregationLayer, {AggregationLayerConfig} from '../aggregation-layer';
 import {pointToPolygonGeo} from './grid-utils';
 import GridLayerIcon from './grid-layer-icon';
 import {
+  AggregationTypes,
   VisConfigBoolean,
   VisConfigColorRange,
   VisConfigNumber,
@@ -59,8 +60,8 @@ export type GridLayerVisConfig = {
   elevationPercentile: [number, number];
   elevationScale: number;
   enableElevationZoomFactor: boolean;
-  colorAggregation: keyof typeof AGGREGATION_TYPES;
-  sizeAggregation: keyof typeof AGGREGATION_TYPES;
+  colorAggregation: AggregationTypes;
+  sizeAggregation: AggregationTypes;
   enable3d: boolean;
 };
 

diff --git a/...ayers/hexagon-layer/hexagon-layer-icon.js → ...yers/hexagon-layer/hexagon-layer-icon.tsx b/...ayers/hexagon-layer/hexagon-layer-icon.js → ...yers/hexagon-layer/hexagon-layer-icon.tsx
diff --git a/src/layers/hexagon-layer/hexagon-layer.js → src/layers/hexagon-layer/hexagon-layer.ts b/src/layers/hexagon-layer/hexagon-layer.js → src/layers/hexagon-layer/hexagon-layer.ts
@@ -19,11 +19,56 @@
 // THE SOFTWARE.
 
 import {GeoJsonLayer} from '@deck.gl/layers';
-import AggregationLayer from '../aggregation-layer';
+import AggregationLayer, {AggregationLayerConfig} from '../aggregation-layer';
 import EnhancedHexagonLayer from 'deckgl-layers/hexagon-layer/enhanced-hexagon-layer';
 import {hexagonToPolygonGeo} from './hexagon-utils';
 import HexagonLayerIcon from './hexagon-layer-icon';
 import {clamp} from 'utils/data-utils';
+import {Merge} from '../../reducers';
+import {
+  AggregationTypes,
+  VisConfigBoolean,
+  VisConfigColorRange,
+  VisConfigNumber,
+  VisConfigRange,
+  VisConfigSelection
+} from '../layer-factory';
+import {ColorRange} from '../../constants/color-ranges';
+import {AGGREGATION_TYPES} from '../../constants/default-settings';
+
+export type HexagonLayerVisConfigSettings = {
+  opacity: VisConfigNumber;
+  worldUnitSize: VisConfigNumber;
+  resolution: VisConfigNumber;
+  colorRange: VisConfigColorRange;
+  coverage: VisConfigNumber;
+  sizeRange: VisConfigRange;
+  percentile: VisConfigRange;
+  elevationPercentile: VisConfigRange;
+  elevationScale: VisConfigNumber;
+  enableElevationZoomFactor: VisConfigBoolean;
+  colorAggregation: VisConfigSelection;
+  sizeAggregation: VisConfigSelection;
+  enable3d: VisConfigBoolean;
+};
+
+export type HexagonLayerVisConfig = {
+  opacity: number;
+  worldUnitSize: number;
+  resolution: number;
+  colorRange: ColorRange;
+  coverage: number;
+  sizeRange: [number, number];
+  percentile: [number, number];
+  elevationPercentile: [number, number];
+  elevationScale: number;
+  enableElevationZoomFactor: boolean;
+  colorAggregation: AggregationTypes;
+  sizeAggregation: AggregationTypes;
+  enable3d: boolean;
+};
+
+export type HexagonLayerConfig = Merge<AggregationLayerConfig, {visConfig: HexagonLayerVisConfig}>;
 
 export const hexagonVisConfigs = {
   opacity: 'opacity',
@@ -42,18 +87,21 @@ export const hexagonVisConfigs = {
 };
 
 export default class HexagonLayer extends AggregationLayer {
+  declare visConfigSettings: HexagonLayerVisConfigSettings;
+  declare config: HexagonLayerConfig;
+
   constructor(props) {
     super(props);
 
     this.registerVisConfig(hexagonVisConfigs);
     this.visConfigSettings.worldUnitSize.label = 'columns.hexagon.worldUnitSize';
   }
 
-  get type() {
+  get type(): 'hexagon' {
     return 'hexagon';
   }
 
-  get name() {
+  get name(): 'Hexbin' {
     return 'Hexbin';
   }
 

diff --git a/src/layers/hexagon-layer/hexagon-utils.js → src/layers/hexagon-layer/hexagon-utils.ts b/src/layers/hexagon-layer/hexagon-utils.js → src/layers/hexagon-layer/hexagon-utils.ts
@@ -20,6 +20,7 @@
 
 import {WebMercatorViewport} from '@deck.gl/core';
 import Console from 'global/console';
+import {Centroid} from '../h3-hexagon-layer/h3-utils';
 
 export function hexagonToPolygonGeo(object, properties, radius, mapState) {
   const viewport = new WebMercatorViewport(mapState);
@@ -55,7 +56,7 @@ export function hexagonToPolygonGeo(object, properties, radius, mapState) {
   };
 }
 
-function hex_corner(center, radius, i) {
+function hex_corner(center: Centroid, radius: number, i: number) {
   const angle_deg = 60 * i + 30;
   const angle_rad = (Math.PI / 180) * angle_deg;
 

diff --git a/src/layers/layer-factory.ts b/src/layers/layer-factory.ts
@@ -42,6 +42,8 @@ export type LayerTextLabel = {
   alignment: string;
 };
 
+export type AggregationTypes = keyof typeof AGGREGATION_TYPES;
+
 export type ColorUI = {
   // customPalette in edit
   customPalette: ColorRange;
@@ -420,7 +422,7 @@ export const LAYER_VIS_CONFIGS: LayerVisConfigSettings = {
     defaultValue: AGGREGATION_TYPES.average,
     label: 'layerVisConfigs.colorAggregation',
     // aggregation options are based on color field types
-    options: Object.keys(AGGREGATION_TYPES),
+    options: Object.keys(AGGREGATION_TYPES) as AggregationTypes[],
     group: PROPERTY_GROUPS.color,
     property: 'colorAggregation',
     condition: config => Boolean(config.colorField)
@@ -430,7 +432,7 @@ export const LAYER_VIS_CONFIGS: LayerVisConfigSettings = {
     defaultValue: AGGREGATION_TYPES.average,
     label: 'layerVisConfigs.heightAggregation',
     // aggregation options are based on color field types
-    options: Object.keys(AGGREGATION_TYPES),
+    options: Object.keys(AGGREGATION_TYPES) as AggregationTypes[],
     group: PROPERTY_GROUPS.height,
     property: 'sizeAggregation',
     condition: config => Boolean(config.sizeField)