fix: Date column in Heatmap is displayed as unix timestamp (#25009)

superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js

@@ -99,9 +99,16 @@ function Heatmap(element, props) {
     xScaleInterval,
     yScaleInterval,
     yAxisBounds,
+    xAxisFormatter,
+    yAxisFormatter,
   } = props;
 
-  const { records, extents } = data;
+  const { extents } = data;
+  const records = data.records.map(record => ({
+    ...record,
+    x: xAxisFormatter(record.x),
+    y: yAxisFormatter(record.y),
+  }));
 
   const margin = {
     top: 10,

superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx

@@ -31,6 +31,7 @@ import {
   sections,
   sharedControls,
   getStandardizedControls,
+  D3_TIME_FORMAT_DOCS,
 } from '@superset-ui/chart-controls';
 
 const sortAxisChoices = [
@@ -257,6 +258,16 @@ const config: ControlPanelConfig = {
           },
         ],
         ['y_axis_format'],
+        [
+          {
+            name: 'time_format',
+            config: {
+              ...sharedControls.x_axis_time_format,
+              default: '%d/%m/%Y',
+              description: `${D3_TIME_FORMAT_DOCS}.`,
+            },
+          },
+        ],
         ['currency_format'],
         [
           {

superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js

@@ -1,5 +1,3 @@
-import { getValueFormatter } from '@superset-ui/core';
-
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -18,6 +16,12 @@ import { getValueFormatter } from '@superset-ui/core';
  * specific language governing permissions and limitations
  * under the License.
  */
+import {
+  GenericDataType,
+  getTimeFormatter,
+  getValueFormatter,
+} from '@superset-ui/core';
+
 export default function transformProps(chartProps) {
   const { width, height, formData, queriesData, datasource } = chartProps;
   const {
@@ -38,8 +42,10 @@ export default function transformProps(chartProps) {
     yscaleInterval,
     yAxisBounds,
     yAxisFormat,
+    timeFormat,
     currencyFormat,
   } = formData;
+  const { data = [], coltypes = [] } = queriesData[0];
   const { columnFormats = {}, currencyFormats = {} } = datasource;
   const valueFormatter = getValueFormatter(
     metric,
@@ -48,10 +54,18 @@ export default function transformProps(chartProps) {
     yAxisFormat,
     currencyFormat,
   );
+  const xAxisFormatter =
+    coltypes[0] === GenericDataType.TEMPORAL
+      ? getTimeFormatter(timeFormat)
+      : String;
+  const yAxisFormatter =
+    coltypes[1] === GenericDataType.TEMPORAL
+      ? getTimeFormatter(timeFormat)
+      : String;
   return {
     width,
     height,
-    data: queriesData[0].data,
+    data,
     bottomMargin,
     canvasImageRendering,
     colorScheme: linearColorScheme,
@@ -69,5 +83,7 @@ export default function transformProps(chartProps) {
     yScaleInterval: parseInt(yscaleInterval, 10),
     yAxisBounds,
     valueFormatter,
+    xAxisFormatter,
+    yAxisFormatter,
   };
 }