fix(legend): Fix legend title to show data.names if set

Make legend title to use data.names values if specified. Fix #3662
naver · Feb 28, 2024 · e8fa131 · e8fa131
1 parent b8a2944
commit e8fa131
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/ChartInternal/internals/legend.ts b/src/ChartInternal/internals/legend.ts
@@ -30,13 +30,14 @@ function getLegendColor(id: string): string {
 /**
  * Get formatted text value
  * @param {string} id Legend text id
+ * @param {boolean} formatted Whether or not to format the text
  * @returns {string} Formatted legend text
  */
-function getFormattedText<T = string>(id: T): T {
+function getFormattedText<T = string>(id: T, formatted = true): T {
 	const {config} = this;
 	let text = config.data_names[id] ?? id;
 
-	if (isFunction(config.legend_format)) {
+	if (formatted && isFunction(config.legend_format)) {
 		text = config.legend_format(text);
 	}
 
@@ -589,12 +590,12 @@ export default {
 		if (config.legend_tooltip) {
 			legend.selectAll("title")
 				.data(targetIdz)
-				.text(id => id);
+				.text(id => getFormattedText.bind($$)(id, false));
 		}
 
 		const texts = legend.selectAll("text")
 			.data(targetIdz)
-			.text(getFormattedText.bind($$)) // MEMO: needed for update
+			.text(id => getFormattedText.bind($$)(id)) // MEMO: needed for update
 			.each(function(id, i) {
 				updatePositions(this, id, i);
 			});
@@ -749,7 +750,7 @@ export default {
 		}
 
 		l.append("text")
-			.text(getFormattedText.bind($$))
+			.text(id => getFormattedText.bind($$)(id))
 			.each(function(id, i) {
 				updatePositions(this, id, i);
 			})

diff --git a/test/internals/legend-spec.ts b/test/internals/legend-spec.ts
@@ -939,5 +939,32 @@ describe("LEGEND", () => {
 
 			expect(dataIds).to.be.deep.equal(legendTitle);
 		});
+
+		it("set options: data.names", () => {
+			args = {
+				data: {
+					names: {
+					  "data1": "Detailed Name",
+					  "data2": "Name Detailed"
+					},
+					columns: [
+					  ["data1", 71.4],
+					  ["data2", 10],
+					],
+					type: "gauge"
+				},
+				legend: {
+					format: id => id.substr(0, 2) + "...",
+					tooltip: true
+				}
+			}
+		});
+
+		it("should legend title show data.names values.", () => {
+			const legendTitle = chart.$.legend.selectAll("title").nodes().map(v => v.textContent);
+			const dataNames = Object.values(chart.data.names());
+
+			expect(legendTitle).to.be.deep.equal(dataNames);
+		});
 	});
 });