Allow non-numeric data in pivot cells (#10225)

frontend/src/metabase/visualizations/visualizations/Table.jsx

@@ -124,16 +124,13 @@ export default class Table extends Component {
       section: t`Columns`,
       title: t`Cell column`,
       widget: "field",
-      getDefault: (
-        [
-          {
-            data: { cols, rows },
-          },
-        ],
-        settings,
-      ) => {
-        const col = cols.filter(isMetric)[0];
-        return col && col.name;
+      getDefault: ([{ data }], { "table.pivot_column": pivotCol }) => {
+        // We try to show numeric values in pivot cells, but if none are
+        // available, we fall back to the last column in the unpivoted table
+        const nonPivotCols = data.cols.filter(c => c.name !== pivotCol);
+        const lastCol = nonPivotCols[nonPivotCols.length - 1];
+        const { name } = nonPivotCols.find(isMetric) || lastCol;
+        return name;
       },
       getProps: (
         [
@@ -143,7 +140,7 @@ export default class Table extends Component {
         ],
         settings,
       ) => ({
-        options: cols.filter(isMetric).map(getOptionFromColumn),
+        options: cols.map(getOptionFromColumn),
       }),
       getHidden: (
         [
@@ -152,7 +149,7 @@ export default class Table extends Component {
           },
         ],
         settings,
-      ) => !settings["table.pivot"] || cols.filter(isMetric).length < 2,
+      ) => !settings["table.pivot"],
       readDependencies: ["table.pivot", "table.pivot_column"],
       persistDefault: true,
     },

frontend/test/metabase/lib/data_grid.unit.spec.js

@@ -36,6 +36,27 @@ describe("data_grid", () => {
         ["b", 4, 5, 6],
       ]);
     });
+    it("should pivot non-numeric values correctly", () => {
+      const data = makeData([
+        ["a", "x", "q"],
+        ["a", "y", "w"],
+        ["a", "z", "e"],
+        ["b", "x", "r"],
+        ["b", "y", "t"],
+        ["b", "z", "y"],
+      ]);
+      const pivotedData = pivot(data, 0, 1, 2);
+      expect(pivotedData.cols.map(col => col.display_name)).toEqual([
+        "Dimension 1",
+        "x",
+        "y",
+        "z",
+      ]);
+      expect(pivotedData.rows.map(row => [...row])).toEqual([
+        ["a", "q", "w", "e"],
+        ["b", "r", "t", "y"],
+      ]);
+    });
     it("should pivot values correctly with columns flipped", () => {
       const data = makeData([
         ["a", "x", 1],

frontend/test/metabase/visualizations/lib/settings/visualization.unit.spec.js

@@ -62,6 +62,7 @@ describe("visualization_settings", () => {
         ));
     });
   });
+
   describe("getStoredSettingsForSeries", () => {
     it("should return an empty object if visualization_settings isn't defined", () => {
       const settings = getStoredSettingsForSeries([{ card: {} }]);
@@ -86,29 +87,72 @@ describe("visualization_settings", () => {
       expect(settings.column_settings).toEqual({ [newKey]: "blah" });
     });
   });
+  describe("table.cell_column", () => {
+    it("should pick the first metric column", () => {
+      const settings = getComputedSettingsForSeries(
+        cardWithTimeseriesBreakoutAndTwoMetrics({ display: "table" }),
+      );
+      expect(settings["table.cell_column"]).toBe("col2");
+    });
+
+    it("should not pick the pivot column", () => {
+      const settings = getComputedSettingsForSeries(
+        cardWithTimeseriesBreakoutAndTwoMetrics({
+          display: "table",
+          visualization_settings: { "table.pivot_column": "col2" },
+        }),
+      );
+      expect(settings["table.cell_column"]).toBe("col3");
+    });
+
+    it("should pick a non-metric column if necessary", () => {
+      const settings = getComputedSettingsForSeries(
+        cardWithTimeseriesBreakout({
+          display: "table",
+          visualization_settings: { "table.pivot_column": "col2" },
+        }),
+      );
+      expect(settings["table.cell_column"]).toBe("col1");
+    });
+  });
 });
 
-const cardWithTimeseriesBreakout = ({ unit, display = "bar" }) => [
+const cardWithTimeseriesBreakout = ({
+  unit,
+  display = "bar",
+  visualization_settings = {},
+}) => [
   {
     card: {
       display: display,
-      visualization_settings: {},
+      visualization_settings,
     },
     data: {
-      cols: [DateTimeColumn({ unit }), NumberColumn()],
+      cols: [
+        DateTimeColumn({ unit, name: "col1" }),
+        NumberColumn({ name: "col2" }),
+      ],
       rows: [[0, 0]],
     },
   },
 ];
 
-const cardWithTimeseriesBreakoutAndTwoMetrics = ({ unit, display = "bar" }) => [
+const cardWithTimeseriesBreakoutAndTwoMetrics = ({
+  unit,
+  display = "bar",
+  visualization_settings = {},
+}) => [
   {
     card: {
       display: display,
-      visualization_settings: {},
+      visualization_settings,
     },
     data: {
-      cols: [DateTimeColumn({ unit }), NumberColumn(), NumberColumn()],
+      cols: [
+        DateTimeColumn({ unit, name: "col1" }),
+        NumberColumn({ name: "col2" }),
+        NumberColumn({ name: "col3" }),
+      ],
       rows: [[0, 0, 0]],
     },
   },