feat(legend): Add argument to legend template

Pass data argument for template function Fix #302 Close #322
naver · Mar 7, 2018 · 2ecab0d · 2ecab0d
1 parent 67ff3c6
commit 2ecab0d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/spec/internals/legend-spec.js b/spec/internals/legend-spec.js
@@ -319,9 +319,9 @@ describe("LEGEND", () => {
 		});
 
 		it("set options legend.content.template as function", () => {
-			args.legend.contents.template = function(title, color) {
+			args.legend.contents.template = function(title, color, data) {
 				if (title !== "data1") {
-					return `<li style='background-color:${color}'>${title}</li>`;
+					return `<li style='background-color:${color}'>${title}-${data[0].value}</li>`;
 				}
 			}
 		});
@@ -335,7 +335,7 @@ describe("LEGEND", () => {
 			items.each(function(v) {
 				const item = d3.select(this);
 
-				expect(item.html()).to.be.equal(v);
+				expect(item.html()).to.be.equal(`${v}-${chart.data.values(v)[0]}`);
 				expect(item.style("background-color")).to.be.equal(chart.color(v));
 
 				// check for event bind

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -1077,9 +1077,13 @@ export default class Options {
 			 *  If true given, all legend will be hidden. If string or array given, only the legend that has the id will be hidden.
 			 * @property {String|HTMLElement} [legend.contents.bindto=undefined] Set CSS selector or element reference to bind legend items.
 			 * @property {String|Function} [legend.contents.template=undefined] Set item's template.<br>
-			 *  If set string value, within template the 'color' and 'title' can be replaced using template-like syntax string:
-			 *  - {=COLOR}: data color value
-			 *  - {=TITLE}: data title value
+			 *  - If set `string` value, within template the 'color' and 'title' can be replaced using template-like syntax string:
+			 *    - {=COLOR}: data color value
+			 *    - {=TITLE}: data title value
+			 *  - If set `function` value, will pass following arguments to the given function:
+			 *   - title {String}: data's id value
+			 *   - color {String}: color string
+			 *   - data {Array}: data array
 			 * @property {String} [legend.position=bottom] Change the position of legend.<br>
 			 *  Available values are: `bottom`, `right` and `inset` are supported.
 			 * @property {Object} [legend.inset={anchor: 'top-left',x: 10,y: 0,step: undefined}] Change inset legend attributes.<br>
@@ -1114,7 +1118,7 @@ export default class Options {
 			 *          template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>"
 			 *
 			 *          // or using function
-			 *          template: function(title, color) {
+			 *          template: function(id, color, data) {
 			 *               // if you want omit some legend, return falsy value
 			 *               if (title !== "data1") {
 			 *                    return "<li style='background-color:"+ color +">"+ title +"</li>";

diff --git a/src/internals/legend.js b/src/internals/legend.js
@@ -51,13 +51,13 @@ extend(ChartInternal.prototype, {
 		const template = config.legend_contents_template;
 
 		if (!wrapper.empty()) {
-			const targets = $$.mapToIds($$.data.targets);
+			const targets = $$.data.targets;
 			const ids = [];
 			let html = "";
 
-			targets.forEach(v => {
+			$$.mapToIds(targets).forEach(v => {
 				const content = isFunction(template) ?
-					template.call($$, v, $$.color(v)) :
+					template.call($$, v, $$.color(v), $$.api.data(v)[0].values) :
 					template
 						.replace(/{=COLOR}/g, $$.color(v))
 						.replace(/{=TITLE}/g, v);