feat: Add deck.gl Heatmap Visualization (#23551)

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/sequential/common.ts

@@ -218,6 +218,11 @@ const schemes = [
     isDiverging: false,
     colors: ['#f6EFA6', '#D88273', '#BF444C'],
   },
+  {
+    id: 'deck_gl_heatmap_gradient',
+    label: 'Deck.gl Heatmap Default',
+    colors: ['#bd0026', '#f03b20', '#fd8d3c', '#feb24c', '#fed976', '#ffffb2'],
+  },
 ].map(s => new SequentialScheme(s));
 
 export default schemes;

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,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/Heatmap.tsx

@@ -0,0 +1,86 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+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, getLayerType } from '../../factory';
+import TooltipRow from '../../TooltipRow';
+
+function setTooltipContent(o: any) {
+  return (
+    <div className="deckgl-tooltip">
+      <TooltipRow
+        label={t('Centroid (Longitude and Latitude): ')}
+        value={`(${o.coordinate[0]}, ${o.coordinate[1]})`}
+      />
+    </div>
+  );
+}
+export const getLayer: getLayerType<unknown> = (
+  formData,
+  payload,
+  onAddFilter,
+  setTooltip,
+) => {
+  const fd = formData;
+  const {
+    intensity = 1,
+    radius_pixels: radiusPixels = 30,
+    aggregation = 'SUM',
+    js_data_mutator: jsFnMutator,
+    linear_color_scheme: colorScheme,
+  } = fd;
+  let data = payload.data.features;
+
+  if (jsFnMutator) {
+    // Applying user defined data mutator if defined
+    const jsFnMutatorFunction = sandboxedEval(fd.js_data_mutator);
+    data = jsFnMutatorFunction(data);
+  }
+
+  const colorScale = getSequentialSchemeRegistry()
+    ?.get(colorScheme)
+    ?.createLinearScale([0, 6]);
+  const colorRange = colorScale
+    ?.range()
+    ?.map(color => hexToRGB(color))
+    ?.reverse();
+
+  return new HeatmapLayer({
+    id: `heatmp-layer-${fd.slice_id}`,
+    data,
+    intensity,
+    radiusPixels,
+    colorRange,
+    aggregation: aggregation.toUpperCase(),
+    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: any[]) {
+  return data.map(d => d.position);
+}
+
+export default createDeckGLComponent(getLayer, getPoints);