Forms: added in the legend

Author: Eubehi

demos/forms.html

@@ -235,6 +235,7 @@
 			return uPlot.assign({}, {
 				width: 800,
 				height: 567,
+				legend: { markers: { dash: 'dashed', before: false, }, },
 				cursor: { points: {
 							size:   (u, si)			=> u.series[si].points.size * 2,
 							width:  (u, si, size)	=> size / 4,

src/domClasses.js

@@ -17,6 +17,7 @@ export const LEGEND         = pre + "legend"
 export const LEGEND_LIVE    = pre + "live";
 export const LEGEND_INLINE  = pre + "inline";
 export const LEGEND_SERIES  = pre + "series";
-export const LEGEND_MARKER  = pre + "marker";
+export const LEGEND_MARKERR = pre + "marker-r";
+export const LEGEND_MARKERL = pre + "marker-l";
 export const LEGEND_LABEL   = pre + "label";
 export const LEGEND_VALUE   = pre + "value";

src/opts.js

@@ -400,7 +400,8 @@ export const legendOpts = {
 	mount: noop,
 	markers: {
 		show: true,
-		width: 2,
+		before: true,
+		width: 10,
 		stroke: legendStroke,
 		fill: legendFill,
 		dash: "solid",

src/uPlot.css

@@ -69,13 +69,20 @@
 	display: inline-block;
 }
 
-.u-legend .u-marker {
+.u-legend .u-marker-l {
 	width: 1em;
 	height: 1em;
 	margin-right: 4px;
 	background-clip: padding-box !important;
 }
 
+.u-marker-r {
+	width: 1em;
+	height: 1em;
+	margin-left: 4px;
+	background-clip: padding-box !important;
+}
+
 .u-inline.u-live th::after {
 	content: ":";
 	vertical-align: middle;

src/uPlot.js

@@ -106,7 +106,8 @@ import {
 	LEGEND_LIVE,
 	LEGEND_INLINE,
 	LEGEND_SERIES,
-	LEGEND_MARKER,
+	LEGEND_MARKERR,
+	LEGEND_MARKERL,
 	LEGEND_LABEL,
 	LEGEND_VALUE,
 } from './domClasses';
@@ -614,6 +615,32 @@ export default function uPlot(opts, data, then) {
 	const son  = {show: true};
 	const soff = {show: false};
 
+	function placeMarker(seriesIndex, label, before) {
+		const svgProp = series[seriesIndex].points.form.svg;
+
+		const svgURI = 'http://www.w3.org/2000/svg';
+		const svg = document.createElementNS(svgURI, 'svg');
+		svg.classList.add(before ? LEGEND_MARKERL : LEGEND_MARKERR);
+		const path = document.createElementNS(svgURI, 'path');
+		label.appendChild(svg);
+		svg.appendChild(path);
+		path.setAttribute('d', svgProp.path);
+
+		const width  = markers.width(self, seriesIndex);
+		const dw = ceil(width/2);
+		const vb = svgProp.viewBox;
+		// Adapting the viewBox to the stroke's width
+		svg.setAttribute('viewBox', (vb.minX - dw) + ' ' + (vb.minY - dw) + ' ' + (vb.width + 2 * dw) + ' ' + (vb.height + 2 * dw));
+		if (width) {
+			path.setAttribute('stroke-width', width);
+			path.setAttribute('stroke', markers.stroke(self, seriesIndex));
+			const dash = markers.dash(self, seriesIndex);
+			if (dash != 'solid') path.setAttribute('stroke-dasharray', Array.isArray(dash) ? dash.join(' ') : '35 15');
+		}
+		const fill = markers.fill(self, seriesIndex);
+		path.setAttribute('fill', fill == null ? transparent : fill);
+	}
+
 	function initLegendRow(s, i) {
 		if (i == 0 && (multiValLegend || !legend.live || mode == 2))
 			return nullNullTuple;
@@ -629,20 +656,9 @@ export default function uPlot(opts, data, then) {
 
 		let label = placeTag("th", null, row);
 
-		if (markers.show) {
-			let indic = placeDiv(LEGEND_MARKER, label);
-
-			if (i > 0) {
-				let width  = markers.width(self, i);
-
-				if (width)
-					indic.style.border = width + "px " + markers.dash(self, i) + " " + markers.stroke(self, i);
-
-				indic.style.background = markers.fill(self, i);
-			}
-		}
-
+		if (markers.show && markers.before && i > 0) placeMarker(i, label, true);
 		let text = placeDiv(LEGEND_LABEL, label);
+		if (markers.show && !markers.before && i > 0) placeMarker(i, label, false);
 
 		if (s.label instanceof HTMLElement)
 			text.appendChild(s.label);