[superset] branch master updated: fix: Date column in Heatmap is displayed as unix timestamp (#25009)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 35eb66a322 fix: Date column in Heatmap is displayed as unix timestamp (#25009)
35eb66a322 is described below

commit 35eb66a322f7938f840778633a4aea11c7f24dce
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Thu Aug 17 11:24:40 2023 -0300

    fix: Date column in Heatmap is displayed as unix timestamp (#25009)
---
 .../legacy-plugin-chart-heatmap/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 7d62622313..a6967301c6 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 70a71e5024..1b115a17e9 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 c4906ddbe9..fa531ef9da 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,
   };
 }