Bug fixes and working with wrong yAxis data

src/js/charts/AxisChart.js

@@ -51,7 +51,12 @@ export default class AxisChart extends BaseChart {
                 };
             });
         } else {
-            this.config.yAxisMode = axisOptions.yAxisMode || 'span';
+            this.config.yAxisMode = yAxis ? yAxis.yAxisMode : axisOptions.yAxisMode || 'span';
+
+			// if we have yAxis config settings lets populate a yAxis config array.
+			if (yAxis.id && yAxis.position) {
+				this.config.yAxisConfig = [yAxis]
+			}
         }
 
         this.config.xIsSeries = axisOptions.xIsSeries || 0;
@@ -102,7 +107,9 @@ export default class AxisChart extends BaseChart {
 
 
     calcYAxisParameters(dataValues, withMinimum = 'false') {
-        let yPts, scaleMultiplier, intervalHeight, zeroLine, positions;
+        let yPts, scaleMultiplier, intervalHeight, zeroLine, positions, yAxisConfigObject, yAxisAlignment;
+		yAxisConfigObject = this.config.yAxisMode || {};	
+		yAxisAlignment = yAxisConfigObject.position ? yAxisConfigObject.position : 'left';	
 
         // if we have an object we have multiple yAxisParameters.
         if (dataValues instanceof Array) {
@@ -110,9 +117,12 @@ export default class AxisChart extends BaseChart {
             scaleMultiplier = this.height / getValueRange(yPts);
             intervalHeight = getIntervalSize(yPts) * scaleMultiplier;
             zeroLine = this.height - getZeroIndex(yPts) * intervalHeight;
+
             this.state.yAxis = {
                 labels: yPts,
                 positions: yPts.map((d) => zeroLine - d * scaleMultiplier),
+				title: yAxisConfigObject.title || null,
+				pos: yAxisAlignment,
                 scaleMultiplier: scaleMultiplier,
                 zeroLine: zeroLine
             };
@@ -120,19 +130,15 @@ export default class AxisChart extends BaseChart {
             this.state.yAxis = [];
             for (let key in dataValues) {
                 const dataValue = dataValues[key];
+				yAxisConfigObject = this.config.yAxisConfig.find((item) => key === item.id) || [];
+				yAxisAlignment = yAxisConfigObject.position ? yAxisConfigObject.position : 'left';	
                 yPts = calcChartIntervals(dataValue, withMinimum);
                 scaleMultiplier = this.height / getValueRange(yPts);
                 intervalHeight = getIntervalSize(yPts) * scaleMultiplier;
                 zeroLine = this.height - getZeroIndex(yPts) * intervalHeight;
                 positions = yPts.map((d) => zeroLine - d * scaleMultiplier);
 
-                const yAxisConfigObject =
+                if (this.state.yAxis.length > 1) {
-                    this.config.yAxisConfig.find((item) => key === item.id) || [];
-                const yAxisAlignment = yAxisConfigObject
-                    ? yAxisConfigObject.position
-                    : 'right';
-
-                if (this.state.yAxis.length) {
                     const yPtsArray = [];
                     const firstArr = this.state.yAxis[0];
                     // we need to loop through original positions.

src/js/objects/ChartComponents.js

@@ -1,8 +1,28 @@
 import { makeSVGGroup } from '../utils/draw';
-import { makeText, generateAxisLabel, makePath, xLine, yLine, yMarker, yRegion, datasetBar, datasetDot, percentageBar, getPaths, heatSquare } from '../utils/draw';
+import {
+    makeText,
+    makePath,
+    xLine,
+    yLine,
+    generateAxisLabel,
+    yMarker,
+    yRegion,
+    datasetBar,
+    datasetDot,
+    percentageBar,
+    getPaths,
+    heatSquare
+} from '../utils/draw';
 import { equilizeNoOfElements } from '../utils/draw-utils';
-import { translateHoriLine, translateVertLine, animateRegion, animateBar,
+import {
-	animateDot, animatePath, animatePathStr } from '../utils/animate';
+    translateHoriLine,
+    translateVertLine,
+    animateRegion,
+    animateBar,
+    animateDot,
+    animatePath,
+    animatePathStr
+} from '../utils/animate';
 import { getMonthName } from '../utils/date-utils';
 
 class ChartComponent {
@@ -27,8 +47,8 @@ class ChartComponent {
         this.labels = [];
 
         this.layerClass = layerClass;
-		this.layerClass = typeof(this.layerClass) === 'function'
+        this.layerClass =
-			? this.layerClass() : this.layerClass;
+            typeof this.layerClass === 'function' ? this.layerClass() : this.layerClass;
 
         this.refresh();
     }
@@ -57,7 +77,7 @@ class ChartComponent {
                   })
                 : this.layer.appendChild(element);
         });
-		this.labels.forEach(element => {
+        this.labels.forEach((element) => {
             this.layer.appendChild(element);
         });
     }
@@ -122,7 +142,7 @@ let componentConfigs = {
         layerClass: 'y axis',
         makeElements(data) {
             let elements = [];
-
+			// will loop through each yaxis dataset if it exists 
             if (data.length) {
                 data.forEach((item, i) => {
                     item.positions.map((position, i) => {
@@ -150,13 +170,26 @@ let componentConfigs = {
                 return elements;
             }
 
-            return data.positions.map((position, i) => {
+            data.positions.forEach((position, i) => {
-                return yLine(position, data.labels[i], this.constants.width, {
+                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: data.zeroLine,
+						width: this.constants.width
+					})
+				);
+			}
+
+			return elements;
         },
 
         animateElements(newData) {
@@ -240,9 +273,12 @@ let componentConfigs = {
 	yMarkers: {
 		layerClass: 'y-markers',
 		makeElements(data) {
-			return data.map(m =>
+			return data.map((m) => 
-				yMarker(m.position, m.label, this.constants.width,
+				yMarker(m.position, m.label, this.constants.width, {
-					{labelPos: m.options.labelPos, mode: 'span', lineType: 'dashed'})
+					labelPos: m.options.labelPos,
+					mode: 'span',
+					lineType: 'dashed'
+				})
 			);
 		},
 		animateElements(newData) {
@@ -417,12 +453,14 @@ let componentConfigs = {
 	},
 
     lineGraph: {
-		layerClass: function() { return 'dataset-units dataset-line dataset-' + this.constants.index; },
+        layerClass: function () {
+            return 'dataset-units dataset-line dataset-' + this.constants.index;
+        },
         makeElements(data) {
             let c = this.constants;
             this.unitType = 'dot';
             this.paths = {};
-			if(!c.hideLine) {
+            if (!c.hideLine) {
                 this.paths = getPaths(
                     data.xPositions,
                     data.yPositions,
@@ -440,14 +478,15 @@ let componentConfigs = {
             }
 
             this.units = [];
-			if(!c.hideDots) {
+
+            if (!c.hideDots) {
                 this.units = data.yPositions.map((y, j) => {
                     return datasetDot(
                         data.xPositions[j],
                         y,
                         data.radius,
                         c.color,
-						(c.valuesOverPoints ? data.values[j] : ''),
+                        c.valuesOverPoints ? data.values[j] : '',
                         j
                     );
                 });
@@ -474,20 +513,28 @@ let componentConfigs = {
                 values: newValues,
 
                 zeroLine: this.oldData.zeroLine,
-				radius: this.oldData.radius,
+                radius: this.oldData.radius
             });
 
             let animateElements = [];
 
-			if(Object.keys(this.paths).length) {
+            if (Object.keys(this.paths).length) {
-				animateElements = animateElements.concat(animatePath(
+                animateElements = animateElements.concat(
-					this.paths, newXPos, newYPos, newData.zeroLine, this.constants.spline));
+                    animatePath(
+                        this.paths,
+                        newXPos,
+                        newYPos,
+                        newData.zeroLine,
+                        this.constants.spline
+                    )
+                );
             }
 
-			if(this.units.length) {
+            if (this.units.length) {
                 this.units.map((dot, i) => {
-					animateElements = animateElements.concat(animateDot(
+                    animateElements = animateElements.concat(
-						dot, newXPos[i], newYPos[i]));
+                        animateDot(dot, newXPos[i], newYPos[i])
+                    );
                 });
             }