From 11ac443442ef61e48362be2b7fbd306b3892f565 Mon Sep 17 00:00:00 2001
From: Aleksandr Lesnenko <alxnddr@users.noreply.github.com>
Date: Thu, 1 Dec 2022 15:23:11 -0300
Subject: [PATCH] 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 | 3 +++
.../components/RowChart/RowChart.tsx | 13 +++++++---
.../src/metabase/static-viz/lib/format.ts | 24 +++++++++++++++----
frontend/src/metabase/visualizations/index.js | 2 +-
.../visualizations/lib/graph/columns.ts | 17 +++++++------
.../visualizations/shared/types/data.ts | 11 +++++++++
.../visualizations/RowChart/RowChart.tsx | 9 ++++++-
7 files changed, 61 insertions(+), 18 deletions(-)
diff --git a/frontend/src/metabase-types/api/dataset.ts b/frontend/src/metabase-types/api/dataset.ts
index c9f9d00aeaf..25d903bb7ec 100644
--- a/frontend/src/metabase-types/api/dataset.ts
+++ b/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;
};
diff --git a/frontend/src/metabase/static-viz/components/RowChart/RowChart.tsx b/frontend/src/metabase/static-viz/components/RowChart/RowChart.tsx
index 8cb7c73b03f..bcbbdd3cf88 100644
--- a/frontend/src/metabase/static-viz/components/RowChart/RowChart.tsx
+++ b/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,
);
diff --git a/frontend/src/metabase/static-viz/lib/format.ts b/frontend/src/metabase/static-viz/lib/format.ts
index 66d4afeee09..7254ca2bd05 100644
--- a/frontend/src/metabase/static-viz/lib/format.ts
+++ b/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 }));
+ };
};
diff --git a/frontend/src/metabase/visualizations/index.js b/frontend/src/metabase/visualizations/index.js
index c9455bb2cee..1cd76fd6422 100644
--- a/frontend/src/metabase/visualizations/index.js
+++ b/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:
diff --git a/frontend/src/metabase/visualizations/lib/graph/columns.ts b/frontend/src/metabase/visualizations/lib/graph/columns.ts
index ac7f51b91f1..0efc5dd49aa 100644
--- a/frontend/src/metabase/visualizations/lib/graph/columns.ts
+++ b/frontend/src/metabase/visualizations/lib/graph/columns.ts
@@ -1,19 +1,18 @@
-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(
diff --git a/frontend/src/metabase/visualizations/shared/types/data.ts b/frontend/src/metabase/visualizations/shared/types/data.ts
index 7c371e4b0ae..f81a7aba6e7 100644
--- a/frontend/src/metabase/visualizations/shared/types/data.ts
+++ b/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;
diff --git a/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx b/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx
index f17c71679b4..3121b16de22 100644
--- a/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.tsx
+++ b/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),
--
GitLab