Pass column settings when formatting pivot column headers (#74628)

frontend/src/metabase/visualizations/lib/data_grid.js

@@ -120,7 +120,7 @@ export function multiLevelPivot(data, settings) {
 }
 
 // This is the pivot function used in the normal table visualization.
-export function pivot(data, normalCol, pivotCol, cellCol) {
+export function pivot(data, normalCol, pivotCol, cellCol, settings) {
   const { pivotValues, normalValues } = distinctValuesSorted(
     data.rows,
     pivotCol,
@@ -154,6 +154,13 @@ export function pivot(data, normalCol, pivotCol, cellCol) {
     sourceRows[normalColIdx][pivotColIdx] = j;
   }
 
+  // Use the pivot column's full visualization settings (date_style, time_style, etc.)
+  // when formatting headers so units like hour-of-day render as just the hour.
+  const pivotColumn = data.cols[pivotCol];
+  const pivotColumnSettings = settings?.column?.(pivotColumn) ?? {
+    column: pivotColumn,
+  };
+
   // provide some column metadata to maintain consistency
   const cols = pivotValues.map(function (value, idx) {
     if (idx === 0) {
@@ -164,11 +171,11 @@ export function pivot(data, normalCol, pivotCol, cellCol) {
         ...data.cols[cellCol],
         // `name` must be the same for conditional formatting, but put the
         // formatted pivotted value in the `display_name`
-        display_name: formatValue(value, { column: data.cols[pivotCol] }) || "",
+        display_name: formatValue(value, pivotColumnSettings) || "",
         // for onVisualizationClick:
         _dimension: {
           value: value,
-          column: data.cols[pivotCol],
+          column: pivotColumn,
         },
       };
     }

frontend/src/metabase/visualizations/lib/data_grid.unit.spec.js

@@ -133,6 +133,42 @@ describe("data_grid", () => {
       expect(pivotedData.cols[1].display_name).toEqual(expect.any(String));
     });
 
+    it("should format hour-of-day pivot column headers without the date (metabase#74525)", () => {
+      const Dhour = {
+        name: "Dhour",
+        display_name: "Created At: Hour of day",
+        base_type: TYPE.DateTime,
+        unit: "hour-of-day",
+        source: "breakout",
+      };
+      const data = {
+        rows: [
+          ["a", "2020-01-01T00:00:00", 1],
+          ["a", "2020-01-01T06:00:00", 2],
+          ["b", "2020-01-01T00:00:00", 3],
+          ["b", "2020-01-01T06:00:00", 4],
+        ],
+        cols: [D1, Dhour, M],
+      };
+      const settings = {
+        column: (col) =>
+          col === Dhour
+            ? {
+                column: col,
+                date_style: "",
+                time_style: "h:mm A",
+                time_enabled: "minutes",
+              }
+            : { column: col },
+      };
+      const pivotedData = pivot(data, 0, 1, 2, settings);
+      expect(pivotedData.cols.map((col) => col.display_name)).toEqual([
+        "Dimension 1",
+        "12:00 AM",
+        "6:00 AM",
+      ]);
+    });
+
     it("should infer sort order of sparse data correctly", () => {
       const data = makeData([
         ["a", "x", 1],

frontend/src/metabase/visualizations/visualizations/Table/Table.tsx

@@ -492,7 +492,13 @@ export class Table extends Component<TableProps, TableState> {
         (col, index) => index !== pivotIndex && index !== cellIndex,
       );
       this.setState({
-        data: DataGrid.pivot(data, normalIndex, pivotIndex, cellIndex),
+        data: DataGrid.pivot(
+          data,
+          normalIndex,
+          pivotIndex,
+          cellIndex,
+          settings,
+        ),
         question,
       });
     } else {