feat(legend): Implement legend.contents

- Added updateLegendTemplate() to handle template option
- Split legend item setting to setLegendItem()
- Fixed wrong param call on test helper

Fix #58 
Close #134

spec/assets/util.js

@@ -37,7 +37,7 @@ const generate = args => {
 			args.bindto = "#chart";
 		}
 
-		initDom(args);
+		initDom(args.bindto);
 
 		// when touch param is set, make to be 'touch' input mode
 		if (args.interaction && args.interaction.inputType && args.interaction.inputType.touch) {

spec/legend-spec.js

@@ -5,6 +5,7 @@
 /* eslint-disable */
 /* global describe, beforeEach, it, expect */
 import util from "./assets/util";
+import CLASS from "../src/config/classes";
 
 describe("LEGEND", () => {
 	let chart;
@@ -230,7 +231,7 @@ describe("LEGEND", () => {
 		});
 	});
 
-	describe("custom legend size", () => {
+	describe("custom legend settings", () => {
 		before(() => {
 			args = {
 				data: {
@@ -259,20 +260,10 @@ describe("LEGEND", () => {
 				expect(tileWidth).to.be.equal(args.legend.item.tile.width);
 			});
 		});
-	});
 
-	describe("custom legend padding", () => {
-		before(() => {
-			args = {
-				data: {
-					columns: [
-						["padded1", 30, 200, 100, 400, 150, 250],
-						["padded2", 130, 100, 200, 100, 250, 150]
-					]
-				},
-				legend: {
-					padding: 10
-				}
+		it("set options legend.padding=10", () => {
+			args.legend = {
+				padding: 10
 			};
 		});
 
@@ -289,4 +280,75 @@ describe("LEGEND", () => {
 				});
 		});
 	});
+
+	describe("set legend using template", () => {
+		before(() => {
+			sandbox("legend-wrapper").innerHTML = "<ul id='legend'></ul>";
+
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 130, 100, 200, 100, 250, 150]
+					],
+					colors: {
+						data1: "rgb(42, 208, 255)",
+						data2: "rgb(250, 113, 113)"
+					}
+				},
+				legend: {
+					contents: {
+						bindto: "#legend",
+						template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>"
+					}
+				}
+			};
+		});
+
+		it("check for legend template setting with template string", () => {
+			const legend = d3.select("#legend");
+			const items = legend.selectAll(`.${CLASS.legendItem}`);
+
+			expect(legend.html()).not.to.be.null;
+
+			items.each(function(v) {
+				const item = d3.select(this);
+
+				expect(item.html()).to.be.equal(v);
+				expect(item.style("background-color")).to.be.equal(chart.color(v));
+
+				// check for event bind
+				expect(item.on("click")).not.be.null;
+			});
+
+			expect(items.size()).to.be.equal(2);
+		});
+
+		it("set options legend.content.template as function", () => {
+			args.legend.contents.template = function(title, color) {
+				if (title !== "data1") {
+					return `<li style='background-color:${color}'>${title}</li>`;
+				}
+			}
+		});
+
+		it("check for legend template setting with template function callback", () => {
+			const legend = d3.select("#legend");
+			const items = legend.selectAll(`.${CLASS.legendItem}`);
+
+			expect(legend.html()).not.to.be.null;
+
+			items.each(function(v) {
+				const item = d3.select(this);
+
+				expect(item.html()).to.be.equal(v);
+				expect(item.style("background-color")).to.be.equal(chart.color(v));
+
+				// check for event bind
+				expect(item.on("click")).not.be.null;
+			});
+
+			expect(items.size()).to.be.equal(1);
+		});
+	});
 });

src/api/api.show.js

@@ -59,8 +59,7 @@ extend(Chart.prototype, {
 				targets.style("opacity", null).style("opacity", "0");
 			});
 
-		options.withLegend &&
-		$$.hideLegend(targetIds);
+		options.withLegend && $$.hideLegend(targetIds);
 
 		$$.redraw({
 			withUpdateOrgXDomain: true,

src/config/Options.js

@@ -991,6 +991,11 @@ export default class Options {
 			 * @property {Boolean} [legend.show=true] Show or hide legend.
 			 * @property {Boolean} [legend.hide=false] Hide legend
 			 *  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
 			 * @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>
@@ -1015,6 +1020,20 @@ export default class Options {
 			 *      hide: true,
 			 *      //or hide: "data1"
              *      //or hide: ["data1", "data2"]
+			 *      contents: {
+			 *          bindto: "#legend",   // <ul id='legend'></ul>
+			 *
+			 *          // will be as: <li style='background-color:#1f77b4'>data1</li>
+			 *          template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>"
+			 *
+			 *          // or using function
+			 *          template: function(title, color) {
+			 *               // if you want omit some legend, return falsy value
+			 *               if (title !== "data1") {
+			 *                    return "<li style='background-color:"+ color +">"+ title +"</li>";
+			 *               }
+			 *          }
+			 *      },
              *      position: "bottom",  // bottom, right, inset
 			 *      inset: {
 			 *          anchor: "top-right"  // top-left, top-right, bottom-left, bottom-right
@@ -1039,6 +1058,8 @@ export default class Options {
 			 */
 			legend_show: true,
 			legend_hide: false,
+			legend_contents_bindto: undefined,
+			legend_contents_template: undefined,
 			legend_position: "bottom",
 			legend_inset_anchor: "top-left",
 			legend_inset_x: 10,

src/internals/ChartInternal.js

@@ -553,7 +553,7 @@ export default class ChartInternal {
 		$$.inputType === "touch" && $$.hideTooltip();
 
 		// update legend and transform each g
-		if (withLegend && config.legend_show) {
+		if (withLegend && config.legend_show && !config.legend_contents_bindto) {
 			$$.updateLegend($$.mapToIds($$.data.targets), options, transitions);
 		} else if (withDimension) {
 			// need to update dimension (e.g. axis.y.tick.values) because y tick values should change