fix(legend): Add default for legend.contents.template

Add legend.contents.template value to not break when only legend.contents.bindto is specified. Fix #2780
naver · Jul 20, 2022 · 55fbb02 · 55fbb02
1 parent 4f3c101
commit 55fbb02
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/config/Options/common/legend.ts b/src/config/Options/common/legend.ts
@@ -16,7 +16,8 @@ export default {
 	 * @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>
+	 * - **NOTE:** Should be used along with `legend.contents.template`.
+	 * @property {string|Function} [legend.contents.template="<span style='color:#fff;padding:5px;background-color:{=COLOR}'>{=TITLE}</span>"] 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
@@ -94,7 +95,7 @@ export default {
 	legend_show: true,
 	legend_hide: false,
 	legend_contents_bindto: <string|HTMLElement|undefined> undefined,
-	legend_contents_template: <string|(() => string)|undefined>undefined,
+	legend_contents_template: <string|(() => string)|undefined> "<span style='color:#fff;padding:5px;background-color:{=COLOR}'>{=TITLE}</span>",
 	legend_position: <"bottom"|"right"|"inset"> "bottom",
 	legend_inset_anchor: <"top-left"|"top-right"|"bottom-left"|"bottom-right"> "top-left",
 	legend_inset_x: 10,

diff --git a/test/internals/grid-spec.ts b/test/internals/grid-spec.ts
@@ -5,7 +5,6 @@
 /* eslint-disable */
 import {expect} from "chai";
 import {select as d3Select} from "d3-selection";
-import { utils } from "mocha";
 import {$AXIS, $COMMON, $EVENT, $FOCUS, $GRID} from "../../src/config/classes";
 import util from "../assets/util";
 

diff --git a/test/internals/legend-spec.ts b/test/internals/legend-spec.ts
@@ -441,7 +441,7 @@ describe("LEGEND", () => {
 			expect(chart.internal.getCurrentHeight()).to.be.equal(newSize.height);
 		});
 
-		it("set options data.type='pie'", () => {
+		it("set options: data.type='pie'", () => {
 			args.data.type = "pie";
 		});
 
@@ -459,6 +459,30 @@ describe("LEGEND", () => {
 				expect(v).to.be.above(transform2[i]);
 			});
 		});
+
+		it("shoudn't throw error when contents.template isn't specified.", () => {
+			expect(
+				chart = util.generate({
+					data: {
+					columns: [
+						["data1", 120]
+					],
+					type: "line", // for ESM specify as: line()
+					},
+					legend: {
+						contents: {
+							bindto: "#legend"
+						}
+					}
+				})
+			).to.not.throw;
+
+			const template = chart.internal.config.legend_contents_template;
+
+			expect(template).to.be.equal(
+				"<span style='color:#fff;padding:5px;background-color:{=COLOR}'>{=TITLE}</span>"
+			);
+		});
 	});
 
 	describe("when using custom points", () => {
@@ -532,7 +556,7 @@ describe("LEGEND", () => {
 
 		// espacially for gauges with multiple arcs to have the same coloring between legend tiles, tooltip tiles and arc
 		it('selects the color from color_pattern if color_treshold is given', function () {
-			const tileColor = [];
+			const tileColor: string[] = [];
 
 			chart.internal.$el.svg.selectAll(`.${$LEGEND.legendItemTile}`).each(function () {
 				tileColor.push(d3Select(this).style('stroke'));
@@ -590,7 +614,7 @@ describe("LEGEND", () => {
 		});
 
 		it("selects the color from data_colors, data_color or default", function() {
-			const tileColor = [];
+			const tileColor: string[] = [];
 
 			chart.internal.$el.svg.selectAll(`.${$LEGEND.legendItemTile}`)
 				.each(function() {
@@ -670,7 +694,7 @@ describe("LEGEND", () => {
 			});
 
 			let cnt = 0
-			const pos = [];
+			const pos: string[] = [];
 			const interval = setInterval(() => {
 				if (cnt >= 5) {
 					clearInterval(interval);