feat: pr 366 initial merge

src/js/objects/ChartComponents.js

@@ -4,6 +4,7 @@ import {
 	makePath,
 	xLine,
 	yLine,
+	generateAxisLabel,
 	yMarker,
 	yRegion,
 	datasetBar,
@@ -72,7 +73,11 @@ class ChartComponent {
 
 		this.layer.textContent = "";
 		this.store.forEach((element) => {
-      this.layer.appendChild(element);
+			element.length
+				? element.forEach((el) => {
+						this.layer.appendChild(el);
+				  })
+				: this.layer.appendChild(element);
 		});
 		this.labels.forEach((element) => {
 			this.layer.appendChild(element);
@@ -158,16 +163,97 @@ let componentConfigs = {
 	yAxis: {
 		layerClass: "y axis",
 		makeElements(data) {
-      return data.positions.map((position, i) =>
+			let elements = [];
+			// will loop through each yaxis dataset if it exists
+			if (data.length) {
+				data.forEach((item, i) => {
+					item.positions.map((position, i) => {
+						elements.push(
+							yLine(
+								position,
+								item.labels[i],
+								this.constants.width,
+								{
+									mode: this.constants.mode,
+									pos: item.pos || this.constants.pos,
+									shortenNumbers:
+										this.constants.shortenNumbers,
+									title: item.title,
+								}
+							)
+						);
+					});
+					// we need to make yAxis titles if they are defined
+					if (item.title) {
+						elements.push(
+							generateAxisLabel({
+								title: item.title,
+								position: item.pos,
+								height: this.constants.height || data.zeroLine,
+								width: this.constants.width,
+							})
+						);
+					}
+				});
+
+				return elements;
+			}
+
+			data.positions.forEach((position, i) => {
+				elements.push(
 					yLine(position, data.labels[i], this.constants.width, {
 						mode: this.constants.mode,
-          pos: this.constants.pos,
+						pos: data.pos || this.constants.pos,
 						shortenNumbers: this.constants.shortenNumbers,
 					})
 				);
+			});
+
+			if (data.title) {
+				elements.push(
+					generateAxisLabel({
+						title: data.title,
+						position: data.pos,
+						height: this.constants.height || data.zeroLine,
+						width: this.constants.width,
+					})
+				);
+			}
+
+			return elements;
 		},
 
 		animateElements(newData) {
+			const animateMultipleElements = (oldData, newData) => {
+				let newPos = newData.positions;
+				let newLabels = newData.labels;
+				let oldPos = oldData.positions;
+				let oldLabels = oldData.labels;
+
+				[oldPos, newPos] = equilizeNoOfElements(oldPos, newPos);
+				[oldLabels, newLabels] = equilizeNoOfElements(
+					oldLabels,
+					newLabels
+				);
+
+				this.render({
+					positions: oldPos,
+					labels: newLabels,
+				});
+
+				return this.store.map((line, i) => {
+					return translateHoriLine(line, newPos[i], oldPos[i]);
+				});
+			};
+
+			// we will need to animate both axis if we have more than one.
+			// so check if the oldData is an array of values.
+			if (this.oldData instanceof Array) {
+				return this.oldData.forEach((old, i) => {
+					animateMultipleElements(old, newData[i]);
+				});
+			}
+
 			let newPos = newData.positions;
 			let newLabels = newData.labels;
 			let oldPos = this.oldData.positions;
@@ -231,7 +317,10 @@ let componentConfigs = {
 			);
 		},
 		animateElements(newData) {
-      [this.oldData, newData] = equilizeNoOfElements(this.oldData, newData);
+			[this.oldData, newData] = equilizeNoOfElements(
+				this.oldData,
+				newData
+			);
 
 			let newPos = newData.map((d) => d.position);
 			let newLabels = newData.map((d) => d.label);
@@ -265,7 +354,10 @@ let componentConfigs = {
 			);
 		},
 		animateElements(newData) {
-      [this.oldData, newData] = equilizeNoOfElements(this.oldData, newData);
+			[this.oldData, newData] = equilizeNoOfElements(
+				this.oldData,
+				newData
+			);
 
 			let newPos = newData.map((d) => d.endPos);
 			let newLabels = newData.map((d) => d.label);
@@ -395,7 +487,10 @@ let componentConfigs = {
 
 			[oldXPos, newXPos] = equilizeNoOfElements(oldXPos, newXPos);
 			[oldYPos, newYPos] = equilizeNoOfElements(oldYPos, newYPos);
-      [oldOffsets, newOffsets] = equilizeNoOfElements(oldOffsets, newOffsets);
+			[oldOffsets, newOffsets] = equilizeNoOfElements(
+				oldOffsets,
+				newOffsets
+			);
 			[oldLabels, newLabels] = equilizeNoOfElements(oldLabels, newLabels);
 
 			this.render({

src/js/utils/axis-chart-utils.js

@@ -35,7 +35,8 @@ export function dataPrep(data, type, config) {
 			// Trim or extend
 			if (vals.length > datasetLength) {
 				vals = vals.slice(0, datasetLength);
-      } if (config) {
+			}
+			if (config) {
 				vals = fillArray(vals, datasetLength - vals.length, null);
 			} else {
 				vals = fillArray(vals, datasetLength - vals.length, 0);
@@ -73,7 +74,9 @@ export function zeroDataPrep(realData) {
 	let zeroData = {
 		labels: realData.labels.slice(0, -1),
 		datasets: realData.datasets.map((d) => {
+			const { axisID } = d;
 			return {
+				axisID,
 				name: "",
 				values: zeroArray.slice(0, -1),
 				chartType: d.chartType,

src/js/utils/draw.js

@@ -9,6 +9,8 @@ import { DOT_OVERLAY_SIZE_INCR } from "./constants";
 
 export const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
+const LABEL_WIDTH = 25;
+const TOTAL_PADDING = 120;
 const LABEL_MAX_CHARS = 18;
 export const FONT_SIZE = 10;
 const BASE_LINE_COLOR = "#E2E6E9";
@@ -134,7 +136,10 @@ export function makeArcPathStr(
 		center.x + startPosition.x,
 		center.y + startPosition.y,
 	];
-  let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
+	let [arcEndX, arcEndY] = [
+		center.x + endPosition.x,
+		center.y + endPosition.y,
+	];
 	return `M${center.x} ${center.y}
 		L${arcStartX} ${arcStartY}
 		A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
@@ -179,7 +184,10 @@ export function makeArcStrokePathStr(
 		center.x + startPosition.x,
 		center.y + startPosition.y,
 	];
-  let [arcEndX, arcEndY] = [center.x + endPosition.x, center.y + endPosition.y];
+	let [arcEndX, arcEndY] = [
+		center.x + endPosition.x,
+		center.y + endPosition.y,
+	];
 
 	return `M${arcStartX} ${arcStartY}
 		A ${radius} ${radius} 0 ${largeArc} ${clockWise ? 1 : 0}
@@ -417,7 +425,9 @@ function makeVertLine(x, label, y1, y2, options = {}) {
 }
 
 function makeHoriLine(y, label, x1, x2, options = {}) {
+	if (!options.stroke) options.stroke = BASE_LINE_COLOR;
 	if (!options.lineType) options.lineType = "";
+	if (!options.alignment) options.alignment = "left";
 	if (options.shortenNumbers) label = shortenLargeNumber(label);
 
 	let className =
@@ -425,6 +435,17 @@ function makeHoriLine(y, label, x1, x2, options = {}) {
 		options.className +
 		(options.lineType === "dashed" ? "dashed" : "");
 
+	const textXPos =
+		options.alignment === "left"
+			? options.title
+				? x1 - LABEL_MARGIN + LABEL_WIDTH
+				: x1 - LABEL_MARGIN
+			: options.title
+			? x2 + LABEL_MARGIN * 4 - LABEL_WIDTH
+			: x2 + LABEL_MARGIN * 4;
+	const lineX1Post = options.title ? x1 + LABEL_WIDTH : x1;
+	const lineX2Post = options.title ? x2 - LABEL_WIDTH : x2;
+
 	let l = createSVG("line", {
 		className: className,
 		x1: x1,
@@ -460,6 +481,47 @@ function makeHoriLine(y, label, x1, x2, options = {}) {
 	return line;
 }
 
+export function generateAxisLabel(options) {
+	if (!options.title) return;
+
+	const y =
+		options.position === "left"
+			? (options.height - TOTAL_PADDING) / 2 +
+			  getStringWidth(options.title, 5) / 2
+			: (options.height - TOTAL_PADDING) / 2 -
+			  getStringWidth(options.title, 5) / 2;
+	const x = options.position === "left" ? 0 : options.width;
+	const y2 =
+		options.position === "left"
+			? FONT_SIZE - LABEL_WIDTH
+			: FONT_SIZE + LABEL_WIDTH * -1;
+
+	const rotation =
+		options.position === "right" ? `rotate(90)` : `rotate(270)`;
+
+	const labelSvg = createSVG("text", {
+		className: "chart-label",
+		x: 0, // getStringWidth(options.title, 5) / 2,
+		y: 0, // y,
+		dy: `${y2}px`,
+		"font-size": `${FONT_SIZE}px`,
+		"text-anchor": "start",
+		innerHTML: `${options.title} `,
+	});
+
+	let wrapper = createSVG("g", {
+		x: 0,
+		y: 0,
+		transformBox: "fill-box",
+		transform: `translate(${x}, ${y}) ${rotation}`,
+		className: `test-${options.position}`,
+	});
+
+	wrapper.appendChild(labelSvg);
+
+	return wrapper;
+}
+
 export function yLine(y, label, width, options = {}) {
 	if (!isValidNumber(y)) y = 0;
 
@@ -479,14 +541,20 @@ export function yLine(y, label, width, options = {}) {
 
 	// let offset = options.pos === 'left' ? -1 * options.offset : options.offset;
 
+	// pr_366
+	//x1 += offset;
+	//x2 += offset;
 	x1 += options.offset;
 	x2 += options.offset;
 
 	if (typeof label === "number") label = round(label);
 
 	return makeHoriLine(y, label, x1, x2, {
+		stroke: options.stroke,
 		className: options.className,
 		lineType: options.lineType,
+		alignment: options.pos,
+		title: options.title,
 		shortenNumbers: options.shortenNumbers,
 	});
 }