fix: chart label not being translated (#18212) (#18228)

* Fix  chart translation issue

also used .html() instead of .text() in line 58, because otherwise it resulted in html escape errors. In french ' is used in many words and when using the text() method it results in this string being inserted '

* refactor: use data attribute

for semantic consistency

Co-authored-by: Ankush Menat <ankush@frappe.io>
(cherry picked from commit 13e6aca115)

Co-authored-by: aliX40 <55487948+aliX40@users.noreply.github.com>

frappe/public/js/frappe/utils/dashboard_utils.js

@@ -15,7 +15,7 @@ frappe.dashboard_utils = {
 			let chart_filter_html = `<div class="${button_class} ${filter_class} btn-group dropdown pull-right">
 					<a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						<button class="btn btn-secondary btn-xs">
-			 				${icon_html}
+							${icon_html}
 							<span class="filter-label">${__(filter.label)}</span>
 							${frappe.utils.icon("select", "xs")}
 						</button>
@@ -26,16 +26,21 @@ frappe.dashboard_utils = {
 				options_html = filter.options
 					.map(
 						(option, i) =>
-							// TODO: Make option translatable - be careful, since the text of the a tag is later used to perform some action
 							`<li>
-						<a class="dropdown-item" data-fieldname="${filter.fieldnames[i]}">${option}</a>
+						<a class="dropdown-item" data-fieldname="${
+							filter.fieldnames[i]
+						}" data-option="${encodeURIComponent(option)}">${__(option)}</a>
 					</li>`
 					)
 					.join("");
 			} else {
-				// TODO: Make option translatable - be careful, since the text of the a tag is later used to perform some action
 				options_html = filter.options
-					.map((option) => `<li><a class="dropdown-item">${option}</a></li>`)
+					.map(
+						(option) =>
+							`<li><a class="dropdown-item" data-option="${encodeURIComponent(
+								option
+							)}">${__(option)}</a></li>`
+					)
 					.join("");
 			}
 
@@ -54,8 +59,8 @@ frappe.dashboard_utils = {
 					fieldname = $el.attr("data-fieldname");
 				}
 
-				let selected_item = $el.text();
-				$el.parents(`.${button_class}`).find(".filter-label").text(selected_item);
+				let selected_item = decodeURIComponent($el.data("option"));
+				$el.parents(`.${button_class}`).find(".filter-label").html(__(selected_item));
 				filter.action(selected_item, fieldname);
 			});
 		});