Allow plot tooltip to show extra columns

.changeset/moody-crews-pull.md

@@ -0,0 +1,6 @@
+---
+"@gradio/nativeplot": minor
+"gradio": minor
+---
+
+feat:Allow plot tooltip to show extra columns

gradio/components/native_plot.py

@@ -58,6 +58,7 @@ def __init__(
         x_axis_labels_visible: bool = True,
         caption: str | None = None,
         sort: Literal["x", "y", "-x", "-y"] | list[str] | None = None,
+        tooltip: Literal["axis", "none", "all"] | list[str] = "axis",
         height: int | None = None,
         label: str | None = None,
         show_label: bool | None = None,
@@ -94,6 +95,7 @@ def __init__(
             x_axis_labels_visible: Whether the x-axis labels should be visible. Can be hidden when many x-axis labels are present.
             caption: The (optional) caption to display below the plot.
             sort: The sorting order of the x values, if x column is type string/category. Can be "x", "y", "-x", "-y", or list of strings that represent the order of the categories.
+            tooltip: The tooltip to display when hovering on a point. "axis" shows the values for the axis columns, "all" shows all column values, and "none" shows no tooltips. Can also provide a list of strings representing columns to show in the tooltip.
             height: The height of the plot in pixels.
             label: The (optional) label to display on the top left corner of the plot.
             show_label: Whether the label should be displayed.
@@ -125,6 +127,7 @@ def __init__(
         self.x_axis_labels_visible = x_axis_labels_visible
         self.caption = caption
         self.sort = sort
+        self.tooltip = tooltip
         self.height = height
 
         if label is None and show_label is None:
@@ -150,7 +153,6 @@ def __init__(
             if key in [
                 "stroke_dash",
                 "overlay_point",
-                "tooltip",
                 "x_label_angle",
                 "y_label_angle",
                 "interactive",

js/nativeplot/Index.svelte

@@ -47,6 +47,7 @@
 	export let x_axis_labels_visible = true;
 	export let caption: string | null = null;
 	export let sort: "x" | "y" | "-x" | "-y" | string[] | null = null;
+	export let tooltip: "axis" | "none" | "all" | string[] = "axis";
 	function reformat_sort(
 		_sort: typeof sort
 	):
@@ -114,6 +115,15 @@
 	function reformat_data(data: PlotData): {
 		[x: string]: string | number;
 	}[] {
+		if (tooltip == "all" || Array.isArray(tooltip)) {
+			return data.data.map((row) => {
+				const obj: { [x: string]: string | number } = {};
+				data.columns.forEach((col, i) => {
+					obj[col] = row[i];
+				});
+				return obj;
+			});
+		}
 		let x_index = data.columns.indexOf(x);
 		let y_index = data.columns.indexOf(y);
 		let color_index = color ? data.columns.indexOf(color) : null;
@@ -411,29 +421,46 @@
 										type: value.datatypes[color]
 									}
 								: undefined,
-							tooltip: [
-								{
-									field: y,
-									type: value.datatypes[y],
-									aggregate: aggregating ? _y_aggregate : undefined,
-									title: y_title || y
-								},
-								{
-									field: x,
-									type: value.datatypes[x],
-									title: x_title || x,
-									format: x_temporal ? "%Y-%m-%d %H:%M:%S" : undefined,
-									bin: _x_bin ? { step: _x_bin } : undefined
-								},
-								...(color
-									? [
+							tooltip:
+								tooltip == "none"
+									? undefined
+									: [
 											{
-												field: color,
-												type: value.datatypes[color]
-											}
+												field: y,
+												type: value.datatypes[y],
+												aggregate: aggregating ? _y_aggregate : undefined,
+												title: y_title || y
+											},
+											{
+												field: x,
+												type: value.datatypes[x],
+												title: x_title || x,
+												format: x_temporal ? "%Y-%m-%d %H:%M:%S" : undefined,
+												bin: _x_bin ? { step: _x_bin } : undefined
+											},
+											...(color
+												? [
+														{
+															field: color,
+															type: value.datatypes[color]
+														}
+													]
+												: []),
+											...(tooltip === "axis"
+												? []
+												: value?.columns
+														.filter(
+															(col) =>
+																col !== x &&
+																col !== y &&
+																col !== color &&
+																(tooltip === "all" || tooltip.includes(col))
+														)
+														.map((column) => ({
+															field: column,
+															type: value.datatypes[column]
+														})))
 										]
-									: [])
-							]
 						},
 						strokeDash: {},
 						mark: { clip: true, type: mode === "hover" ? "point" : value.mark },