Fixes remapped columns support for the row chart type (#26845)

* fix row chart for remapped columns

* static viz remapped values

frontend/src/metabase-types/api/dataset.ts

@@ -13,12 +13,15 @@ export interface DatasetColumn {
   display_name: string;
   source: string;
   name: string;
+  // FIXME: this prop does not come from API
   remapped_to_column?: DatasetColumn;
   unit?: DatetimeUnit;
   field_ref?: DimensionReference;
   expression_name?: any;
   base_type?: string;
   semantic_type?: string;
+  remapped_from?: string;
+  remapped_to?: string;
   binning_info?: {
     bin_width?: number;
   };

frontend/src/metabase/static-viz/components/RowChart/RowChart.tsx

@@ -14,7 +14,10 @@ import {
 import { getChartGoal } from "metabase/visualizations/lib/settings/goal";
 import { VisualizationSettings } from "metabase-types/api";
 import { ColorGetter } from "metabase/static-viz/lib/colors";
-import { TwoDimensionalChartData } from "metabase/visualizations/shared/types/data";
+import {
+  RemappingHydratedChartData,
+  TwoDimensionalChartData,
+} from "metabase/visualizations/shared/types/data";
 import { getTwoDimensionalChartSeries } from "metabase/visualizations/shared/utils/series";
 import {
   getAxesVisibility,
@@ -26,6 +29,7 @@ import {
   getLabelsStaticFormatter,
   getStaticFormatters,
 } from "metabase/static-viz/lib/format";
+import { extractRemappedColumns } from "metabase/visualizations";
 import { calculateLegendRows } from "../Legend/utils";
 import { Legend } from "../Legend";
 
@@ -56,15 +60,18 @@ const staticTextMeasurer: TextMeasurer = (text: string, style: FontStyle) =>
   );
 
 const StaticRowChart = ({ data, settings, getColor }: StaticRowChartProps) => {
+  const remappedColumnsData = extractRemappedColumns(
+    data,
+  ) as RemappingHydratedChartData;
   const columnValueFormatter = getColumnValueStaticFormatter();
 
   const { chartColumns, series, seriesColors } = getTwoDimensionalChartSeries(
-    data,
+    remappedColumnsData,
     settings,
     columnValueFormatter,
   );
   const groupedData = getGroupedDataset(
-    data.rows,
+    remappedColumnsData.rows,
     chartColumns,
     columnValueFormatter,
   );

frontend/src/metabase/static-viz/lib/format.ts

@@ -20,6 +20,7 @@ import {
 import { ChartColumns } from "metabase/visualizations/lib/graph/columns";
 import { getStackOffset } from "metabase/visualizations/lib/settings/stacking";
 import { getLabelsMetricColumn } from "metabase/visualizations/shared/utils/series";
+import { RemappingHydratedDatasetColumn } from "metabase/visualizations/shared/types/data";
 import {
   isCoordinate,
   isDate,
@@ -30,6 +31,17 @@ import {
 import { rangeForValue } from "metabase-lib/queries/utils/range-for-value";
 import { getColumnKey } from "metabase-lib/queries/utils/get-column-key";
 
+const getRemappedValue = (
+  value: unknown,
+  column: RemappingHydratedDatasetColumn,
+) => {
+  if (column.remapping instanceof Map && column.remapping.has(value)) {
+    return column.remapping.get(value);
+  }
+
+  return value;
+};
+
 type StaticFormattingOptions = {
   column: DatasetColumn;
   number_separators?: string;
@@ -109,9 +121,10 @@ export const getStaticFormatters = (
   const yTickFormatter = (value: StringLike) => {
     const column = chartColumns.dimension.column;
     const columnSettings = settings.column_settings?.[getColumnKey(column)];
+    const valueToFormat = getRemappedValue(value, column);
 
     return String(
-      formatStaticValue(value, {
+      formatStaticValue(valueToFormat, {
         column,
         ...columnSettings,
         jsx: false,
@@ -140,9 +153,10 @@ export const getStaticFormatters = (
   const xTickFormatter = (value: NumberLike) => {
     const column = metricColumn.column;
     const columnSettings = settings.column_settings?.[getColumnKey(column)];
+    const valueToFormat = getRemappedValue(value, column);
 
     return String(
-      formatStaticValue(value, {
+      formatStaticValue(valueToFormat, {
         column,
         ...columnSettings,
         jsx: false,
@@ -181,6 +195,8 @@ export const getLabelsStaticFormatter = (
 };
 
 export const getColumnValueStaticFormatter = () => {
-  return (value: RowValue, column: DatasetColumn) =>
-    String(formatStaticValue(value, { column }));
+  return (value: RowValue, column: DatasetColumn) => {
+    const valueToFormat = getRemappedValue(value, column);
+    return String(formatStaticValue(valueToFormat, { column }));
+  };
 };

frontend/src/metabase/visualizations/index.js

@@ -106,7 +106,7 @@ export function getMaxDimensionsSupported(display) {
 }
 
 // removes columns with `remapped_from` property and adds a `remapping` to the appropriate column
-const extractRemappedColumns = data => {
+export const extractRemappedColumns = data => {
   const cols = data.cols.map(col => ({
     ...col,
     remapped_from_index:

frontend/src/metabase/visualizations/lib/graph/columns.ts

-import {
-  DatasetColumn,
-  DatasetData,
-  VisualizationSettings,
-} from "metabase-types/api";
+import { DatasetData, VisualizationSettings } from "metabase-types/api";
 import { isNotNull } from "metabase/core/utils/types";
-import { TwoDimensionalChartData } from "metabase/visualizations/shared/types/data";
+import {
+  RemappingHydratedChartData,
+  RemappingHydratedDatasetColumn,
+} from "metabase/visualizations/shared/types/data";
 
 export type ColumnDescriptor = {
   index: number;
-  column: DatasetColumn;
+  column: RemappingHydratedDatasetColumn;
 };
 
 export const getColumnDescriptors = (
   columnNames: string[],
-  columns: DatasetColumn[],
+  columns: RemappingHydratedDatasetColumn[],
 ): ColumnDescriptor[] => {
   return columnNames.map(columnName => {
     const index = columns.findIndex(column => column.name === columnName);
@@ -58,7 +57,7 @@ export type MultipleMetricsChartColumns = {
 export type ChartColumns = BreakoutChartColumns | MultipleMetricsChartColumns;
 
 export const getChartColumns = (
-  data: TwoDimensionalChartData,
+  data: RemappingHydratedChartData,
   visualizationSettings: VisualizationSettings,
 ): ChartColumns => {
   const [dimension, breakout] = getColumnDescriptors(

frontend/src/metabase/visualizations/shared/types/data.ts

@@ -7,6 +7,17 @@ import {
 
 export type TwoDimensionalChartData = Pick<DatasetData, "rows" | "cols">;
 
+export type RemappingHydratedDatasetColumn = DatasetColumn & {
+  remapped_from_index?: number;
+  remapped_to_column?: DatasetColumn;
+  remapping?: Map<any, any>;
+};
+
+export type RemappingHydratedChartData = {
+  rows: DatasetData["rows"];
+  cols: RemappingHydratedDatasetColumn[];
+};
+
 export type SeriesInfo = {
   metricColumn: DatasetColumn;
   dimensionColumn: DatasetColumn;

frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx

@@ -33,6 +33,7 @@ import { getTwoDimensionalChartSeries } from "metabase/visualizations/shared/uti
 import { getStackOffset } from "metabase/visualizations/lib/settings/stacking";
 import {
   GroupedDatum,
+  RemappingHydratedChartData,
   SeriesInfo,
 } from "metabase/visualizations/shared/types/data";
 import { IconProps } from "metabase/components/Icon";
@@ -43,6 +44,7 @@ import {
 } from "metabase/visualizations/lib/settings/validation";
 import { BarData } from "metabase/visualizations/shared/components/RowChart/types";
 import { FontStyle } from "metabase/visualizations/shared/types/measure-text";
+import { extractRemappedColumns } from "metabase/visualizations";
 import { isDimension, isMetric } from "metabase-lib/types/utils/isa";
 import { getChartWarnings } from "./utils/warnings";
 import {
@@ -124,7 +126,12 @@ const RowChartVisualization = ({
   const [chartSeries] = useMemo(() => {
     return isPlaceholder ? multipleSeries : rawMultipleSeries;
   }, [isPlaceholder, multipleSeries, rawMultipleSeries]);
-  const data = chartSeries.data;
+
+  const data = useMemo(
+    () =>
+      extractRemappedColumns(chartSeries.data) as RemappingHydratedChartData,
+    [chartSeries.data],
+  );
 
   const { chartColumns, series, seriesColors } = useMemo(
     () => getTwoDimensionalChartSeries(data, settings, formatColumnValue),