feat(legend): Add shapes to legend

Implement 'legend.usePoint' option

Fix #269
Close #289

demo/demo.js

@@ -1580,6 +1580,29 @@ var demos = {
 							chart.toggle(id);
 						});
 			}
+		},
+		usePoint: {
+			options: {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 130, 100, 200, 100, 250, 150],
+						["data3", 60, 190, 320, 520, 20, 300],
+						["data4", 80, 20, 250, 320, 180, 50]
+					]
+				},
+				point: {
+					pattern: [
+						"circle",
+						"rectangle",
+						"<polygon points='2.5 0 0 5 5 5'></polygon>",
+						"<polygon points='2.5 0 0 2.5 2.5 5 5 2.5 2.5 0'></polygon>"
+					]
+				},
+				legend: {
+					usePoint: true
+				}
+			}
 		}
 	},
 

demo/simple-sidebar.css

@@ -185,6 +185,13 @@ div.row {
     color: white;
 }
 
+/* for IE10+ */
+@media all and (-ms-high-contrast:none) {
+    #sidebar-wrapper .link a.github {
+        background-position-x: -23px;
+    }
+}
+
 /* Style For Region */
 #StyleForRegion .bb-region-0 {fill:red;}
 #StyleForRegion .bb-region.foo {fill:green;}

spec/internals/legend-spec.js

@@ -345,4 +345,44 @@ describe("LEGEND", () => {
 			expect(items.size()).to.be.equal(1);
 		});
 	});
+
+	describe("when using custom points", () => {
+		before(() => {
+			args = {
+				data: {
+				  columns: [
+				    ["data1", 30, 200, 100, 400, 150, 250],
+				    ["data2", 130, 100, 200, 100, 250, 150],
+				    ["data3", 60, 190, 320, 520, 20, 300],
+				    ["data4", 80, 20, 250, 320, 180, 50]
+				  ]
+				},
+				legend: {
+					usePoint: true
+				},
+				point: {
+				  pattern: [
+				    "circle",
+				    "rectangle",
+				    "<polygon points='2.5 0 0 5 5 5'></polygon>"
+				  ]
+				}
+			};
+		});
+
+		it("should render custom points in legend", () => {
+			const nodes = chart.internal.svg.selectAll(`.${CLASS.legendItem} .${CLASS.legendItemPoint}`);
+
+			nodes.each((data, idx, selection) => {
+				const node = selection[idx];
+				const nodeName = node.nodeName.toLowerCase();
+				const expected = (idx === 0 || idx === 3) ?
+				  "circle" : (idx === 1) ? "rect" : (idx === 2) ? "use" : "";
+
+				expect(nodeName).to.be.equal(expected);
+			});
+
+			expect(nodes.size()).to.be.equal(chart.data().length);
+		});
+	});
 });

src/config/Options.js

@@ -1042,27 +1042,30 @@ 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
 			 * @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>
-			 *      This option accepts object that has the keys anchor, x, y and step.
-			 *      anchor decides the position of the legend. These anchors are available:
-			 *      - top-left
-			 *      - top-right
-			 *      - bottom-left
-			 *      - bottom-right
-			 *  x and y set the position of the legend based on the anchor.<br>
-			 *  step defines the max step the lagend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).
+			 *  This option accepts object that has the keys `anchor`, `x`, `y` and `step`.
+			 *  - **anchor** decides the position of the legend:
+			 *   - top-left
+			 *   - top-right
+			 *   - bottom-left
+			 *   - bottom-right
+			 *  - **x** and **y**:
+			 *   - set the position of the legend based on the anchor.
+			 *  - **step**:
+			 *   - defines the max step the legend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).
 			 * @property {Boolean} [legend.equally=false] Set to all items have same width size.
 			 * @property {Boolean} [legend.padding=0] Set padding value
 			 * @property {Function} [legend.item.onclick=undefined] Set click event handler to the legend item.
 			 * @property {Function} [legend.item.onover=undefined] Set mouse/touch over event handler to the legend item.
 			 * @property {Function} [legend.item.onout=undefined] Set mouse/touch out event handler to the legend item.
 			 * @property {Number} [legend.item.tile.width=10] Set width of item tile element
 			 * @property {Number} [legend.item.tile.height=10] Set height of item tile element
+			 * @property {Boolean} [legend.usePoint=false] Whether to use custom points in legend.
 			 * @example
 			 *  legend: {
 			 *      show: true,
@@ -1102,7 +1105,8 @@ export default class Options {
 			 *              width: 20,
 			 *              height: 15
 			 *          }
-			 *      }
+			 *      },
+			 *      usePoint: true
 			 *  }
 			 */
 			legend_show: true,
@@ -1121,6 +1125,7 @@ export default class Options {
 			legend_padding: 0,
 			legend_item_tile_width: 10,
 			legend_item_tile_height: 10,
+			legend_usePoint: false,
 
 			/**
 			 * Switch x and y axis position.

src/config/classes.js

@@ -76,6 +76,7 @@ export default {
 	legendItem: "bb-legend-item",
 	legendItemEvent: "bb-legend-item-event",
 	legendItemTile: "bb-legend-item-tile",
+	legendItemPoint: "bb-legend-item-point",
 	legendItemHidden: "bb-legend-item-hidden",
 	legendItemFocused: "bb-legend-item-focused",
 	dragarea: "bb-dragarea",