From 543045d06725d892bbdb4c4d6c1d165c97f6d216 Mon Sep 17 00:00:00 2001 From: Maksim Suslov Date: Tue, 5 Apr 2022 14:42:38 +0300 Subject: [PATCH] [Chore]: Technical: Translate heatmap-layer (#1773) * Renamed js files Signed-off-by: Maksim Suslov * Added typings Signed-off-by: Maksim Suslov * Fixed ts esrros Signed-off-by: Maksim Suslov --- src/layers/base-layer.ts | 4 +- ...p-layer-icon.js => heatmap-layer-icon.tsx} | 0 .../{heatmap-layer.js => heatmap-layer.ts} | 62 ++++++++++++++----- 3 files changed, 48 insertions(+), 18 deletions(-) rename src/layers/heatmap-layer/{heatmap-layer-icon.js => heatmap-layer-icon.tsx} (100%) rename src/layers/heatmap-layer/{heatmap-layer.js => heatmap-layer.ts} (76%) diff --git a/src/layers/base-layer.ts b/src/layers/base-layer.ts index c7265a944e..6be54f3175 100644 --- a/src/layers/base-layer.ts +++ b/src/layers/base-layer.ts @@ -147,7 +147,7 @@ export type VisualChannel = { // TODO: define fixed fixed?: any; - supportedFieldTypes?: boolean; + supportedFieldTypes?: Array; aggregation?: 'colorAggregation' | 'sizeAggregation'; }; @@ -426,7 +426,7 @@ class Layer { getDefaultLayerConfig( props: Partial = {} - ): LayerBaseConfig & LayerColorConfig & LayerSizeConfig { + ): LayerBaseConfig & Partial { return { dataId: props.dataId || null, label: props.label || DEFAULT_LAYER_LABEL, diff --git a/src/layers/heatmap-layer/heatmap-layer-icon.js b/src/layers/heatmap-layer/heatmap-layer-icon.tsx similarity index 100% rename from src/layers/heatmap-layer/heatmap-layer-icon.js rename to src/layers/heatmap-layer/heatmap-layer-icon.tsx diff --git a/src/layers/heatmap-layer/heatmap-layer.js b/src/layers/heatmap-layer/heatmap-layer.ts similarity index 76% rename from src/layers/heatmap-layer/heatmap-layer.js rename to src/layers/heatmap-layer/heatmap-layer.ts index d612d0e4c3..c5e26f3bf4 100644 --- a/src/layers/heatmap-layer/heatmap-layer.js +++ b/src/layers/heatmap-layer/heatmap-layer.ts @@ -22,17 +22,43 @@ import {createSelector} from 'reselect'; import memoize from 'lodash.memoize'; import {CHANNEL_SCALES, SCALE_FUNC, ALL_FIELD_TYPES} from 'constants/default-settings'; import {hexToRgb} from 'utils/color-utils'; -import MapboxGLLayer from '../mapboxgl-layer'; +import MapboxGLLayer, {MapboxLayerGLConfig} from '../mapboxgl-layer'; import HeatmapLayerIcon from './heatmap-layer-icon'; +import {LayerColumn, LayerWeightConfig, VisualChannels} from '../base-layer'; +import {DataContainerInterface} from 'utils/table-utils/data-container-interface'; +import {VisConfigColorRange, VisConfigNumber} from '../layer-factory'; +import {ColorRange} from 'constants/color-ranges'; +import {HexColor, Merge} from 'reducers'; + +export type HeatmapLayerVisConfigSettings = { + opacity: VisConfigNumber; + colorRange: VisConfigColorRange; + radius: VisConfigNumber; +}; + +export type HeatmapLayerColumnsConfig = {lat: LayerColumn; lng: LayerColumn}; + +export type HeatmapLayerVisConfig = { + opacity: number; + colorRange: ColorRange; + radius: number; +}; + +export type HeatmapLayerVisualChannelConfig = LayerWeightConfig; +export type HeatmapLayerConfig = Merge< + MapboxLayerGLConfig, + {columns: HeatmapLayerColumnsConfig; visConfig: HeatmapLayerVisConfig} +> & + HeatmapLayerVisualChannelConfig; export const MAX_ZOOM_LEVEL = 18; -export const pointPosAccessor = ({lat, lng}) => dc => d => [ - dc.valueAt(d.index, lng.fieldIdx), - dc.valueAt(d.index, lat.fieldIdx) -]; +export const pointPosAccessor = ({lat, lng}: HeatmapLayerColumnsConfig) => ( + dc: DataContainerInterface +) => d => [dc.valueAt(d.index, lng.fieldIdx), dc.valueAt(d.index, lat.fieldIdx)]; -export const pointColResolver = ({lat, lng}) => `${lat.fieldIdx}-${lng.fieldIdx}`; +export const pointColResolver = ({lat, lng}: HeatmapLayerColumnsConfig) => + `${lat.fieldIdx}-${lng.fieldIdx}`; export const heatmapVisConfigs = { opacity: 'opacity', @@ -42,8 +68,8 @@ export const heatmapVisConfigs = { /** * - * @param {Object} colorRange - * @return {Array} [ + * @param colorRange + * @return [ * 0, "rgba(33,102,172,0)", * 0.2, "rgb(103,169,207)", * 0.4, "rgb(209,229,240)", @@ -52,12 +78,12 @@ export const heatmapVisConfigs = { * 1, "rgb(178,24,43)" * ] */ -const heatmapDensity = colorRange => { +const heatmapDensity = (colorRange: ColorRange): string[] => { const scaleFunction = SCALE_FUNC.quantize; - const colors = ['#000000', ...colorRange.colors]; + const colors: HexColor[] = ['#000000', ...colorRange.colors]; - const scale = scaleFunction() + const scale = scaleFunction() .domain([0, 1]) .range(colors); @@ -74,18 +100,24 @@ const heatmapDensity = colorRange => { }; class HeatmapLayer extends MapboxGLLayer { + declare visConfigSettings: HeatmapLayerVisConfigSettings; + declare config: HeatmapLayerConfig; + + getPosition: (config: HeatmapLayerColumnsConfig) => any; + constructor(props) { super(props); this.registerVisConfig(heatmapVisConfigs); this.getPosition = memoize(pointPosAccessor, pointColResolver); } - get type() { + get type(): 'heatmap' { return 'heatmap'; } - get visualChannels() { + get visualChannels(): VisualChannels { return { + // @ts-expect-error weight: { property: 'weight', field: 'weightField', @@ -117,10 +149,9 @@ class HeatmapLayer extends MapboxGLLayer { }; } - getDefaultLayerConfig(props = {}) { + getDefaultLayerConfig(props = {}): HeatmapLayerConfig { // mapbox heatmap layer color is always based on density // no need to set colorField, colorDomain and colorScale - /* eslint-disable no-unused-vars */ const {colorField, colorDomain, colorScale, ...layerConfig} = { ...super.getDefaultLayerConfig(props), @@ -128,7 +159,6 @@ class HeatmapLayer extends MapboxGLLayer { weightDomain: [0, 1], weightScale: 'linear' }; - /* eslint-enable no-unused-vars */ return layerConfig; }