From 4e3d1ca8ca7de7a8abf6a7650affe753614a8de5 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <michael.s.molina@gmail.com>
Date: Wed, 16 Aug 2023 16:46:49 -0300
Subject: [PATCH] fix: Date column in Heatmap is displayed as unix timestamp

---
 .../src/Heatmap.js                            |  9 +++++++-
 .../src/controlPanel.tsx                      | 11 ++++++++++
 .../src/transformProps.js                     | 22 ++++++++++++++++---
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js
index 7d62622313b92..a6967301c6a6b 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js
+++ b/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,
diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx
index 70a71e5024da5..1b115a17e994a 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/controlPanel.tsx
+++ b/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'],
         [
           {
diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js
index c4906ddbe96e9..fa531ef9da1d3 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js
+++ b/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,
   };
 }