From 5f3da072607b1586028eee2455a45a58ec796477 Mon Sep 17 00:00:00 2001
From: Aleksandr Lesnenko <alxnddr@users.noreply.github.com>
Date: Thu, 2 Feb 2023 14:42:47 -0300
Subject: [PATCH] Polish tooltips (#27965)
* polish-tooltips
* review
---
.../KeyValuePairChartTooltip.styled.tsx | 8 ++++
.../KeyValuePairChartTooltip.tsx | 17 ++++++---
.../KeyValuePairChartTooltip/index.ts | 1 +
.../TooltipRow/TooltipRow.styled.tsx | 13 +++++++
.../ChartTooltip/TooltipRow/TooltipRow.tsx | 7 ++--
.../visualizations/RowChart/utils/events.ts | 21 ++++++++--
.../RowChart/utils/events.unit.spec.ts | 38 +++++++++++++++++--
7 files changed, 90 insertions(+), 15 deletions(-)
create mode 100644 frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/KeyValuePairChartTooltip.styled.tsx
rename frontend/src/metabase/visualizations/components/ChartTooltip/{ => KeyValuePairChartTooltip}/KeyValuePairChartTooltip.tsx (84%)
create mode 100644 frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/index.ts
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/KeyValuePairChartTooltip.styled.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/KeyValuePairChartTooltip.styled.tsx
new file mode 100644
index 00000000000..b3cdd612282
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/KeyValuePairChartTooltip.styled.tsx
@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const TooltipTableCell = styled.td`
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 240px;
+`;
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/KeyValuePairChartTooltip.tsx
similarity index 84%
rename from frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip.tsx
rename to frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/KeyValuePairChartTooltip.tsx
index 66a83479a22..821d54784e8 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/KeyValuePairChartTooltip.tsx
@@ -6,8 +6,9 @@ import {
HoveredDimension,
HoveredObject,
VisualizationSettings,
-} from "./types";
-import { formatValueForTooltip } from "./utils";
+} from "../types";
+import { formatValueForTooltip } from "../utils";
+import { TooltipTableCell } from "./KeyValuePairChartTooltip.styled";
export interface StackedDataTooltipProps {
hovered: HoveredObject;
@@ -46,12 +47,18 @@ export interface TooltipRowProps {
const TooltipRow = ({ name, value, column, settings }: TooltipRowProps) => (
<tr>
- {name ? <td className="text-light text-right pr1">{name}:</td> : <td />}
- <td className="text-bold text-left">
+ {name ? (
+ <TooltipTableCell className="text-light text-right pr1">
+ {name}:
+ </TooltipTableCell>
+ ) : (
+ <TooltipTableCell />
+ )}
+ <TooltipTableCell className="text-bold text-left">
{React.isValidElement(value)
? value
: formatValueForTooltip({ value, column, settings })}
- </td>
+ </TooltipTableCell>
</tr>
);
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/index.ts b/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/index.ts
new file mode 100644
index 00000000000..168e5e42999
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/index.ts
@@ -0,0 +1 @@
+export { default } from "./KeyValuePairChartTooltip";
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/TooltipRow/TooltipRow.styled.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/TooltipRow/TooltipRow.styled.tsx
index 973114b4672..15a8ec9d6f2 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/TooltipRow/TooltipRow.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/TooltipRow/TooltipRow.styled.tsx
@@ -27,6 +27,10 @@ export const Cell = styled.td`
vertical-align: middle;
padding: 0.375rem 0.5rem;
font-weight: 700;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 220px;
& + & {
padding-left: 0.5rem;
@@ -48,6 +52,15 @@ export const Cell = styled.td`
}
`;
+export const ColorIndicatorCell = styled(Cell)`
+ width: 1%;
+ text-align: center;
+
+ && {
+ padding-right: 0.25rem;
+ }
+`;
+
export const ValueCell = styled(Cell)`
padding-left: 2rem;
text-align: right;
diff --git a/frontend/src/metabase/visualizations/components/ChartTooltip/TooltipRow/TooltipRow.tsx b/frontend/src/metabase/visualizations/components/ChartTooltip/TooltipRow/TooltipRow.tsx
index 3c3c185c7a3..9e9a945b2fd 100644
--- a/frontend/src/metabase/visualizations/components/ChartTooltip/TooltipRow/TooltipRow.tsx
+++ b/frontend/src/metabase/visualizations/components/ChartTooltip/TooltipRow/TooltipRow.tsx
@@ -5,6 +5,7 @@ import { TooltipRowModel } from "../types";
import {
Cell,
ColorIndicator,
+ ColorIndicatorCell,
PercentCell,
TooltipRowRoot,
TotalRowRoot,
@@ -26,9 +27,9 @@ export const TooltipRow = ({
}: TooltipRowProps) => (
<TooltipRowRoot isHeader={isHeader}>
{color && (
- <Cell>
+ <ColorIndicatorCell>
<ColorIndicator size={isHeader ? 12 : 8} color={color} />
- </Cell>
+ </ColorIndicatorCell>
)}
<Cell data-testid="row-name">{name}</Cell>
<ValueCell data-testid="row-value">{formatter(value)}</ValueCell>
@@ -52,7 +53,7 @@ export const TooltipTotalRow = ({
hasIcon,
}: TotalTooltipRow) => (
<TotalRowRoot>
- {hasIcon && <Cell>=</Cell>}
+ {hasIcon && <ColorIndicatorCell>=</ColorIndicatorCell>}
<Cell data-testid="row-name">{t`Total`}</Cell>
<ValueCell data-testid="row-value">{value}</ValueCell>
{percent != null && (
diff --git a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts
index 14574c8fb6d..f347395f599 100644
--- a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts
+++ b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts
@@ -1,4 +1,5 @@
import _ from "underscore";
+import { getIn } from "icepick";
import {
DatasetColumn,
RowValue,
@@ -33,13 +34,17 @@ import { isMetric } from "metabase-lib/types/utils/isa";
const getMetricColumnData = (
columns: DatasetColumn[],
metricDatum: MetricDatum,
+ visualizationSettings: VisualizationSettings,
) => {
return Object.entries(metricDatum).map(([columnName, value]) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const col = columns.find(column => column.name === columnName)!;
+ const key =
+ getIn(visualizationSettings, ["series_settings", col.name, "title"]) ??
+ col.display_name;
return {
- key: col.display_name,
+ key,
value: formatNullable(value),
col,
};
@@ -81,6 +86,7 @@ const getColumnsData = (
series: Series<GroupedDatum, unknown>,
datum: GroupedDatum,
datasetColumns: DatasetColumn[],
+ visualizationSettings: VisualizationSettings,
) => {
const data = [
{
@@ -104,7 +110,9 @@ const getColumnsData = (
metricDatum = datum.metrics;
}
- data.push(...getMetricColumnData(datasetColumns, metricDatum));
+ data.push(
+ ...getMetricColumnData(datasetColumns, metricDatum, visualizationSettings),
+ );
const otherColumnsDescriptiors = getColumnDescriptors(
datasetColumns
@@ -124,7 +132,13 @@ export const getClickData = (
datasetColumns: DatasetColumn[],
) => {
const { series, datum } = bar;
- const data = getColumnsData(chartColumns, series, datum, datasetColumns);
+ const data = getColumnsData(
+ chartColumns,
+ series,
+ datum,
+ datasetColumns,
+ visualizationSettings,
+ );
const xValue = series.xAccessor(datum);
const yValue = series.yAccessor(datum);
@@ -279,6 +293,7 @@ export const getHoverData = (
bar.series,
bar.datum,
datasetColumns,
+ settings,
);
return {
diff --git a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts
index 0c1166d3ee8..d1a983b812e 100644
--- a/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts
+++ b/frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts
@@ -1,4 +1,4 @@
-import { VisualizationSettings } from "metabase-types/api";
+import { SeriesSettings, VisualizationSettings } from "metabase-types/api";
import { MultipleMetricsChartColumns } from "metabase/visualizations/lib/graph/columns";
import { BarData } from "metabase/visualizations/shared/components/RowChart/types";
import {
@@ -8,9 +8,9 @@ import {
import { getHoverData } from "./events";
const datasetColumns = [
- { name: "y" } as RemappingHydratedDatasetColumn,
- { name: "x" } as RemappingHydratedDatasetColumn,
- { name: "x1" } as RemappingHydratedDatasetColumn,
+ { name: "y", display_name: "Y" } as RemappingHydratedDatasetColumn,
+ { name: "x", display_name: "X" } as RemappingHydratedDatasetColumn,
+ { name: "x1", display_name: "X1" } as RemappingHydratedDatasetColumn,
];
const chartColumns: MultipleMetricsChartColumns = {
@@ -69,6 +69,36 @@ const barData: BarData<GroupedDatum> = {
describe("events utils", () => {
describe("getHoverData", () => {
+ it("returns key-value pairs based on series_settings for charts without a breakout", () => {
+ const keyValueData = getHoverData(
+ barData,
+ {
+ series_settings: {
+ [chartColumns.metrics[0].column.name]: {
+ title: "my custom label",
+ } as SeriesSettings,
+ },
+ },
+ {
+ dimension: chartColumns.dimension,
+ metrics: [chartColumns.metrics[0]],
+ },
+ datasetColumns,
+ [series1],
+ seriesColors,
+ ).data;
+
+ expect(keyValueData).toStrictEqual([
+ { col: chartColumns.dimension.column, key: "Y", value: "foo" },
+ {
+ col: chartColumns.metrics[0].column,
+ key: "my custom label",
+ value: 100,
+ },
+ { col: chartColumns.metrics[1].column, key: "X1", value: 200 },
+ ]);
+ });
+
it.each(["stacked", "normalized"])(
"returns stacked tooltip model for stacked charts",
stackType => {
--
GitLab