Polish tooltips (#27965)

* polish-tooltips

* review

frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/KeyValuePairChartTooltip.styled.tsx

+import styled from "@emotion/styled";
+
+export const TooltipTableCell = styled.td`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 240px;
+`;

frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip.tsx → 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>
 );
 

frontend/src/metabase/visualizations/components/ChartTooltip/KeyValuePairChartTooltip/index.ts

+export { default } from "./KeyValuePairChartTooltip";

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;

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 && (

frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.ts

 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 {

frontend/src/metabase/visualizations/visualizations/RowChart/utils/events.unit.spec.ts

-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 => {