feat: allow stroke color for yMarker

src/js/charts/AxisChart.js

@@ -24,7 +24,7 @@ export default class AxisChart extends BaseChart {
 	}
 
 	setMeasures() {
-		if(this.data.datasets.length <= 1) {
+		if (this.data.datasets.length <= 1) {
 			this.config.showLegend = 0;
 			this.measures.paddings.bottom = 30;
 		}
@@ -48,17 +48,17 @@ export default class AxisChart extends BaseChart {
 		this.config.legendRowHeight = 30;
 	}
 
-	prepareData(data=this.data) {
+	prepareData(data = this.data) {
 		return dataPrep(data, this.type);
 	}
 
-	prepareFirstData(data=this.data) {
+	prepareFirstData(data = this.data) {
 		return zeroDataPrep(data);
 	}
 
 	calc(onlyWidthChange = false) {
 		this.calcXPositions();
-		if(!onlyWidthChange) {
+		if (!onlyWidthChange) {
 			this.calcYAxisParameters(this.getAllYValues(), this.type === 'line');
 		}
 		this.makeDataByIndex();
@@ -69,9 +69,9 @@ export default class AxisChart extends BaseChart {
 		let labels = this.data.labels;
 		s.datasetLength = labels.length;
 
-		s.unitWidth = this.width/(s.datasetLength);
+		s.unitWidth = this.width / (s.datasetLength);
 		// Default, as per bar, and mixed. Only line will be a special case
-		s.xOffset = s.unitWidth/2;
+		s.xOffset = s.unitWidth / 2;
 
 		// // For a pure Line Chart
 		// s.unitWidth = this.width/(s.datasetLength - 1);
@@ -127,14 +127,14 @@ export default class AxisChart extends BaseChart {
 
 	calcYExtremes() {
 		let s = this.state;
-		if(this.barOptions.stacked) {
+		if (this.barOptions.stacked) {
 			s.yExtremes = s.datasets[s.datasets.length - 1].cumulativeYPos;
 			return;
 		}
 		s.yExtremes = new Array(s.datasetLength).fill(9999);
 		s.datasets.map(d => {
 			d.yPositions.map((pos, j) => {
-				if(pos < s.yExtremes[j]) {
+				if (pos < s.yExtremes[j]) {
 					s.yExtremes[j] = pos;
 				}
 			});
@@ -143,21 +143,21 @@ export default class AxisChart extends BaseChart {
 
 	calcYRegions() {
 		let s = this.state;
-		if(this.data.yMarkers) {
+		if (this.data.yMarkers) {
 			this.state.yMarkers = this.data.yMarkers.map(d => {
 				d.position = scale(d.value, s.yAxis);
-				if(!d.options) d.options = {};
+				if (!d.options) d.options = {};
 				// if(!d.label.includes(':')) {
 				// 	d.label += ': ' + d.value;
 				// }
 				return d;
 			});
 		}
-		if(this.data.yRegions) {
+		if (this.data.yRegions) {
 			this.state.yRegions = this.data.yRegions.map(d => {
 				d.startPos = scale(d.start, s.yAxis);
 				d.endPos = scale(d.end, s.yAxis);
-				if(!d.options) d.options = {};
+				if (!d.options) d.options = {};
 				return d;
 			});
 		}
@@ -166,7 +166,7 @@ export default class AxisChart extends BaseChart {
 	getAllYValues() {
 		let key = 'values';
 
-		if(this.barOptions.stacked) {
+		if (this.barOptions.stacked) {
 			key = 'cumulativeYs';
 			let cumulative = new Array(this.state.datasetLength).fill(0);
 			this.data.datasets.map((d, i) => {
@@ -176,10 +176,10 @@ export default class AxisChart extends BaseChart {
 		}
 
 		let allValueLists = this.data.datasets.map(d => d[key]);
-		if(this.data.yMarkers) {
+		if (this.data.yMarkers) {
 			allValueLists.push(this.data.yMarkers.map(d => d.value));
 		}
-		if(this.data.yRegions) {
+		if (this.data.yRegions) {
 			this.data.yRegions.map(d => {
 				allValueLists.push([d.end, d.start]);
 			});
@@ -198,7 +198,7 @@ export default class AxisChart extends BaseChart {
 					shortenNumbers: this.config.shortenYAxisNumbers
 					// pos: 'right'
 				},
-				function() {
+				function () {
 					return this.state.yAxis;
 				}.bind(this)
 			],
@@ -210,7 +210,7 @@ export default class AxisChart extends BaseChart {
 					height: this.height,
 					// pos: 'right'
 				},
-				function() {
+				function () {
 					let s = this.state;
 					s.xAxis.calcLabels = getShortenedLabels(this.width,
 						s.xAxis.labels, this.config.xIsSeries);
@@ -225,7 +225,7 @@ export default class AxisChart extends BaseChart {
 					width: this.width,
 					pos: 'right'
 				},
-				function() {
+				function () {
 					return this.state.yRegions;
 				}.bind(this)
 			],
@@ -247,23 +247,23 @@ export default class AxisChart extends BaseChart {
 					valuesOverPoints: this.config.valuesOverPoints,
 					minHeight: this.height * MIN_BAR_PERCENT_HEIGHT,
 				},
-				function() {
+				function () {
 					let s = this.state;
 					let d = s.datasets[index];
 					let stacked = this.barOptions.stacked;
 
 					let spaceRatio = this.barOptions.spaceRatio || BAR_CHART_SPACE_RATIO;
 					let barsWidth = s.unitWidth * (1 - spaceRatio);
-					let barWidth = barsWidth/(stacked ? 1 : barDatasets.length);
+					let barWidth = barsWidth / (stacked ? 1 : barDatasets.length);
 
-					let xPositions = s.xAxis.positions.map(x => x - barsWidth/2);
-					if(!stacked) {
+					let xPositions = s.xAxis.positions.map(x => x - barsWidth / 2);
+					if (!stacked) {
 						xPositions = xPositions.map(p => p + barWidth * index);
 					}
 
 					let labels = new Array(s.datasetLength).fill('');
-					if(this.config.valuesOverPoints) {
-						if(stacked && d.index === s.datasets.length - 1) {
+					if (this.config.valuesOverPoints) {
+						if (stacked && d.index === s.datasets.length - 1) {
 							labels = d.cumulativeYs;
 						} else {
 							labels = d.values;
@@ -271,7 +271,7 @@ export default class AxisChart extends BaseChart {
 					}
 
 					let offsets = new Array(s.datasetLength).fill(0);
-					if(stacked) {
+					if (stacked) {
 						offsets = d.yPositions.map((y, j) => y - d.cumulativeYPos[j]);
 					}
 
@@ -307,7 +307,7 @@ export default class AxisChart extends BaseChart {
 					// same for all datasets
 					valuesOverPoints: this.config.valuesOverPoints,
 				},
-				function() {
+				function () {
 					let s = this.state;
 					let d = s.datasets[index];
 					let minLine = s.yAxis.positions[0] < s.yAxis.zeroLine
@@ -333,7 +333,7 @@ export default class AxisChart extends BaseChart {
 					width: this.width,
 					pos: 'right'
 				},
-				function() {
+				function () {
 					return this.state.yMarkers;
 				}.bind(this)
 			]
@@ -348,7 +348,7 @@ export default class AxisChart extends BaseChart {
 			.filter(args => !optionals.includes(args[0]) || this.state[args[0]])
 			.map(args => {
 				let component = getComponent(...args);
-				if(args[0].includes('lineGraph') || args[0].includes('barGraph')) {
+				if (args[0].includes('lineGraph') || args[0].includes('barGraph')) {
 					this.dataUnitComponents.push(component);
 				}
 				return [args[0], component];
@@ -393,8 +393,8 @@ export default class AxisChart extends BaseChart {
 			let relX = e.pageX - o.left - getLeftOffset(m);
 			let relY = e.pageY - o.top;
 
-			if(relY < this.height + getTopOffset(m)
-				&& relY >  getTopOffset(m)) {
+			if (relY < this.height + getTopOffset(m)
+				&& relY > getTopOffset(m)) {
 				this.mapTooltipXPosition(relX);
 			} else {
 				this.tip.hideTip();
@@ -404,7 +404,7 @@ export default class AxisChart extends BaseChart {
 
 	mapTooltipXPosition(relX) {
 		let s = this.state;
-		if(!s.yExtremes) return;
+		if (!s.yExtremes) return;
 
 		let index = getClosestInArray(relX, s.xAxis.positions, true);
 		if (index >= 0) {
@@ -413,7 +413,7 @@ export default class AxisChart extends BaseChart {
 			this.tip.setValues(
 				dbi.xPos + this.tip.offset.x,
 				dbi.yExtreme + this.tip.offset.y,
-				{name: dbi.formattedLabel, value: ''},
+				{ name: dbi.formattedLabel, value: '' },
 				dbi.values,
 				index
 			);
@@ -464,7 +464,7 @@ export default class AxisChart extends BaseChart {
 			};
 		});
 
-		if(this.state.currentIndex === undefined) {
+		if (this.state.currentIndex === undefined) {
 			this.state.currentIndex = this.state.datasetLength - 1;
 		}
 
@@ -478,7 +478,7 @@ export default class AxisChart extends BaseChart {
 	}
 
 	updateOverlayGuides() {
-		if(this.overlayGuides) {
+		if (this.overlayGuides) {
 			this.overlayGuides.forEach(g => {
 				let o = g.overlay;
 				o.parentNode.removeChild(o);
@@ -524,7 +524,7 @@ export default class AxisChart extends BaseChart {
 		this.setCurrentDataPoint(this.state.currentIndex + 1);
 	}
 
-	getDataPoint(index=this.state.currentIndex) {
+	getDataPoint(index = this.state.currentIndex) {
 		let s = this.state;
 		let data_point = {
 			index: index,
@@ -537,9 +537,9 @@ export default class AxisChart extends BaseChart {
 	setCurrentDataPoint(index) {
 		let s = this.state;
 		index = parseInt(index);
-		if(index < 0) index = 0;
-		if(index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1;
-		if(index === s.currentIndex) return;
+		if (index < 0) index = 0;
+		if (index >= s.xAxis.labels.length) index = s.xAxis.labels.length - 1;
+		if (index === s.currentIndex) return;
 		s.currentIndex = index;
 		fire(this.parent, "data-select", this.getDataPoint());
 	}
@@ -547,7 +547,7 @@ export default class AxisChart extends BaseChart {
 
 
 	// API
-	addDataPoint(label, datasetValues, index=this.state.datasetLength) {
+	addDataPoint(label, datasetValues, index = this.state.datasetLength) {
 		super.addDataPoint(label, datasetValues, index);
 		this.data.labels.splice(index, 0, label);
 		this.data.datasets.map((d, i) => {
@@ -556,7 +556,7 @@ export default class AxisChart extends BaseChart {
 		this.update(this.data);
 	}
 
-	removeDataPoint(index = this.state.datasetLength-1) {
+	removeDataPoint(index = this.state.datasetLength - 1) {
 		if (this.data.labels.length <= 1) {
 			return;
 		}
@@ -568,7 +568,7 @@ export default class AxisChart extends BaseChart {
 		this.update(this.data);
 	}
 
-	updateDataset(datasetValues, index=0) {
+	updateDataset(datasetValues, index = 0) {
 		this.data.datasets[index].values = datasetValues;
 		this.update(this.data);
 	}
@@ -577,7 +577,7 @@ export default class AxisChart extends BaseChart {
 
 	updateDatasets(datasets) {
 		this.data.datasets.map((d, i) => {
-			if(datasets[i]) {
+			if (datasets[i]) {
 				d.values = datasets[i];
 			}
 		});

src/js/objects/ChartComponents.js

@@ -185,7 +185,7 @@ let componentConfigs = {
 		makeElements(data) {
 			return data.map(m =>
 				yMarker(m.position, m.label, this.constants.width,
-					{labelPos: m.options.labelPos, mode: 'span', lineType: 'dashed'})
+					{ labelPos: m.options.labelPos, stroke: m.options.stroke, mode: 'span', lineType: 'dashed' })
 			);
 		},
 		animateElements(newData) {