fix: Convert js to ts

apache · May 15, 2023 · e77a188 · e77a188
1 parent 2d580bd
commit e77a188
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 36 deletions.
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.tsx
@@ -38,7 +38,7 @@ type deckGLComponentProps = {
   viewport: Viewport;
   width: number;
 };
-interface getLayerType<T> {
+export interface getLayerType<T> {
   (
     formData: QueryFormData,
     payload: JsonObject,

diff --git a/...art-deckgl/src/layers/Heatmap/Heatmap.jsx → ...art-deckgl/src/layers/Heatmap/Heatmap.tsx b/...art-deckgl/src/layers/Heatmap/Heatmap.jsx → ...art-deckgl/src/layers/Heatmap/Heatmap.tsx
@@ -16,16 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+// TODO: implement typescript fix for legacy versions of deck.gl
+// https://github.com/visgl/deck.gl/blob/master/docs/get-started/using-with-typescript.md#alternative-solution-for-legacy-versions
 import { HeatmapLayer } from 'deck.gl';
 import React from 'react';
 import { t, getSequentialSchemeRegistry } from '@superset-ui/core';
 import { commonLayerProps } from '../common';
 import sandboxedEval from '../../utils/sandbox';
 import { hexToRGB } from '../../utils/colors';
-import { createDeckGLComponent } from '../../factory';
+import { createDeckGLComponent, getLayerType } from '../../factory';
 import TooltipRow from '../../TooltipRow';
 
-function setTooltipContent(o) {
+function setTooltipContent(o: any) {
   return (
     <div className="deckgl-tooltip">
       <TooltipRow
@@ -35,8 +37,12 @@ function setTooltipContent(o) {
     </div>
   );
 }
-
-export function getLayer(formData, payload, onAddFilter, setTooltip) {
+export const getLayer: getLayerType<unknown> = (
+  formData,
+  payload,
+  onAddFilter,
+  setTooltip,
+) => {
   const fd = formData;
   const {
     intensity = 1,
@@ -54,28 +60,28 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
   }
 
   const colorScale = getSequentialSchemeRegistry()
-    .get(colorScheme)
-    .createLinearScale([0, 6]);
+    ?.get(colorScheme)
+    ?.createLinearScale([0, 6]);
   const colorRange = colorScale
-    .range()
-    .map(color => hexToRGB(color))
-    .reverse();
+    ?.range()
+    ?.map(color => hexToRGB(color))
+    ?.reverse();
 
   return new HeatmapLayer({
     id: `heatmp-layer-${fd.slice_id}`,
     data,
-    pickable: false,
     intensity,
     radiusPixels,
     colorRange,
     aggregation: aggregation.toUpperCase(),
-    getPosition: d => d.position,
-    getWeight: d => (d.weight ? d.weight : 1),
+    getPosition: (d: { position: number[]; weight: number }) => d.position,
+    getWeight: (d: { position: number[]; weight: number }) =>
+      d.weight ? d.weight : 1,
     ...commonLayerProps(fd, setTooltip, setTooltipContent),
   });
-}
+};
 
-function getPoints(data) {
+function getPoints(data: any[]) {
   return data.map(d => d.position);
 }
 

diff --git a/...-chart-deckgl/src/layers/Heatmap/index.js → ...-chart-deckgl/src/layers/Heatmap/index.ts b/...-chart-deckgl/src/layers/Heatmap/index.js → ...-chart-deckgl/src/layers/Heatmap/index.ts
@@ -17,9 +17,9 @@
  * under the License.
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
-import thumbnail from './images/thumbnail.png';
 import transformProps from '../../transformProps';
 import controlPanel from './controlPanel';
+import thumbnail from './images/thumbnail.png';
 
 const metadata = new ChartMetadata({
   category: t('Map'),

diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/types/external.d.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/types/external.d.ts
@@ -17,3 +17,28 @@
  * under the License.
  */
 declare module '@math.gl/web-mercator';
+
+declare module 'deck.gl' {
+  import { Layer, LayerProps } from '@deck.gl/core';
+
+  interface HeatmapLayerProps<T extends object = any> extends LayerProps<T> {
+    id?: string;
+    data?: T[];
+    getPosition?: (d: T) => number[] | null | undefined;
+    getWeight?: (d: T) => number | null | undefined;
+    radiusPixels?: number;
+    colorRange?: number[][];
+    threshold?: number;
+    intensity?: number;
+    aggregation?: string;
+  }
+
+  export class HeatmapLayer<T extends object = any> extends Layer<T, HeatmapLayerProps<T>> {
+    constructor(props: HeatmapLayerProps<T>);
+  }
+}
+
+declare module '*.png' {
+  const value: any;
+  export default value;
+}