feat(legend): Provide original data id in format callback

When data.names option is specified, provide original data id to format callback Fix #3663
naver · Aug 13, 2024 · 5ce41c7 · 5ce41c7
1 parent 0c9fbc6
commit 5ce41c7
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 25 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -3517,28 +3517,51 @@ d3.select(".chart_area")
 				}
 			}
 		},
-		LegendFormat: {
-			description: "Stay hovering on each of legend items to see full data name text.",
-			options: {
-				data: {
-					columns: [
-						["SELECT idx, title, date, count from TEST_TABLE WHERE idx=5", 2, 3, 5],
-						["very long long data name needed to be", 1, 2, 2],
-					],
-					type: "line"
-				},
-				legend: {
-					format: function(id) {
-						if (id.length > 5) {
-							id = id.substr(0, 5) + "...";
-						}
-
-						return id;
+		LegendFormat: [
+			{
+				description: "Stay hovering on each of legend items to see full data name text.",
+				options: {
+					data: {
+						columns: [
+							["SELECT idx, title, date, count from TEST_TABLE WHERE idx=5", 2, 3, 5],
+							["very long long data name needed to be", 1, 2, 2],
+						],
+						type: "line"
 					},
-					tooltip: true
+					legend: {
+						format: function(id) {
+							if (id.length > 5) {
+								id = id.substr(0, 5) + "...";
+							}
+
+							return id;
+						},
+						tooltip: true
+					}
+				}
+			}, 
+			{
+				options: {
+					data: {
+						names: {
+							"data1": "Detailed Name",
+							"data2": "Name Detailed"
+						},
+						columns: [
+							["data1", 71.4],
+							["data2", 10],
+						],
+						type: "gauge"
+					},
+					legend: {
+						format: function(id, dataId) {
+						return id === "Name Detailed" ? dataId : id;
+    },
+						tooltip: true
+					}
 				}
 			}
-		},
+		],
 		LegendItemInteraction: [
 			{
 				description: "<b>Single click + AltKey(Win)/optionKey(Mac)</b><br>or <b>Double click</b> legend item to show/hide data series",

diff --git a/src/ChartInternal/internals/legend.ts b/src/ChartInternal/internals/legend.ts
@@ -41,7 +41,7 @@ function getFormattedText<T = string>(id: T, formatted = true): T {
 	let text = config.data_names[id] ?? id;
 
 	if (formatted && isFunction(config.legend_format)) {
-		text = config.legend_format(text);
+		text = config.legend_format(text, id !== text ? id : undefined);
 	}
 
 	return text;

diff --git a/src/config/Options/common/legend.ts b/src/config/Options/common/legend.ts
@@ -68,7 +68,8 @@ export default {
 	 *   - rectangle
 	 * @property {boolean} [legend.format] Set formatter function for legend text.
 	 * The argument:<br>
-	 *  - `id`: legend text value. When `data.names` is specified, will pass from it, otherwise will pass data id.
+	 *  - `id`: Legend text value. When `data.names` is specified, will pass from it, otherwise will pass data id.
+	 *  - `dataId`: When `data.names` specified, will pass the original data id. Otherwise will be undefined.
 	 * @property {boolean} [legend.tooltip=false] Show full legend text value using system tooltip(via `<title>` element).
 	 * @property {boolean} [legend.usePoint=false] Whether to use custom points in legend.
 	 * @see [Demo: format](https://naver.github.io/billboard.js/demo/#Legend.LegendFormat)
@@ -134,7 +135,7 @@ export default {
 	 *              r: 10
 	 *          }
 	 *      },
-	 *      format: function(id) {
+	 *      format: function(id, dataId) {
 	 *          // set ellipsis string when length is > 5
 	 *          // to get full legend value, combine with 'legend.tooltip=true'
 	 *          if (id.length > 5) {

diff --git a/test/internals/legend-spec.ts b/test/internals/legend-spec.ts
@@ -964,5 +964,18 @@ describe("LEGEND", () => {
 
 			expect(legendTitle).to.be.deep.equal(dataNames);
 		});
+
+		it("set options: legend.format", () => {
+			args.legend.format = function(id, dataId) {
+				return id === "Name Detailed" ? dataId : id;
+			};
+		});
+
+		it("should legend format function receive original data id.", () => {
+			const legend = chart.$.legend.select("g:last-child");
+
+			expect(legend.select("text").text()).to.be.equal("data2");
+			expect(legend.select("title").text()).to.be.equal("Name Detailed");
+		});
 	});
 });
diff --git a/types/options.d.ts b/types/options.d.ts
@@ -440,7 +440,7 @@ export interface LegendOptions {
 	 * Change the position of legend.
 	 * Currently bottom, right and inset are supported.
 	 */
-	position?: string;
+	position?: "bottom" | "right" | "inset";
 
 	/**
 	 * Change inset legend attributes.
@@ -450,7 +450,7 @@ export interface LegendOptions {
 	 * - step: defines the max step the lagend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).
 	 */
 	inset?: {
-		anchor?: string;
+		anchor?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 		x?: number;
 		y?: number;
 		step?: number;
@@ -552,7 +552,7 @@ export interface LegendOptions {
 	/**
 	 * Set formatter function for legend text.
 	 */
-	format?: (id: string) => string;
+	format?: (id: string, dataId?: string) => string;
 
 	/**
 	 * Show full legend text value using system tooltip(via 'title' element).