[formatted] data by index and format

dist/frappe-charts.esm.js

@@ -236,12 +236,13 @@ class SvgTip {
 
 		this.listValues.map((set, i) => {
 			const color = this.colors[i] || 'black';
+			let value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
 
 			let li = $.create('li', {
 				styles: {
 					'border-top': `3px solid ${color}`
 				},
-				innerHTML: `<strong style="display: block;">${ set.value === 0 || set.value ? set.value : '' }</strong>
+				innerHTML: `<strong style="display: block;">${ value === 0 || value ? value : '' }</strong>
 					${set.title ? set.title : '' }`
 			});
 
@@ -3420,18 +3421,30 @@ class AxisChart extends BaseChart {
 		this.dataByIndex = {};
 
 		let s = this.state;
-
-		// let formatY = this.config.formatTooltipY;
 		let formatX = this.config.formatTooltipX;
-
+		let formatY = this.config.formatTooltipY;
 		let titles = s.xAxis.labels;
-		if(formatX && formatX(titles[0])) {
-			titles = titles.map(d=>formatX(d));
-		}
 
-		// formatY = formatY && formatY(s.yAxis.labels[0]) ? formatY : 0;
+		titles.map((label, index) => {
+			let values = this.state.datasets.map((set, i) => {
+				let value = set.values[index];
+				return {
+					title: set.name,
+					value: value,
+					yPos: set.yPositions[index],
+					color: this.colors[i],
+					formatted: formatY ? formatY(value) : value,
+				};
+			});
 
-		// yVal = formatY ? formatY(set.values[i]) : set.values[i]
+			this.dataByIndex[index] = {
+				label: label,
+				formattedLabel: formatX ? formatX(label) : label,
+				xPos: s.xAxis.positions[index],
+				values: values,
+				yExtreme: s.yExtremes[index],
+			};
+		});
 	}
 
 	bindTooltip() {
@@ -3456,18 +3469,13 @@ class AxisChart extends BaseChart {
 		if(!s.yExtremes) return;
 
 		let index = getClosestInArray(relX, s.xAxis.positions, true);
+		let dbi = this.dataByIndex[index];
 
 		this.tip.setValues(
-			s.xAxis.positions[index] + this.tip.offset.x,
+			dbi.xPos + this.tip.offset.x,
-			s.yExtremes[index] + this.tip.offset.y,
+			dbi.yExtreme + this.tip.offset.y,
-			{name: s.xAxis.labels[index], value: ''},
+			{name: dbi.formattedLabel, value: ''},
-			this.data.datasets.map((set, i) => {
+			dbi.values,
-				return {
-					title: set.name,
-					value: set.values[index],
-					color: this.colors[i],
-				};
-			}),
 			index
 		);
 

docs/index.html

@@ -78,7 +78,12 @@
     title: "My Awesome Chart",
     type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
     height: 300,
-    colors: ['purple', '#ffa3ef', 'red']
+    colors: ['purple', '#ffa3ef', 'red'],
+
+    tooltipOptions: {
+      formatTooltipX: d => (d + '').toUpperCase(),
+      formatTooltipY: d => d + ' pts',
+    }
   });
 
   chart.export();

src/js/charts/AxisChart.js

@@ -353,18 +353,30 @@ export default class AxisChart extends BaseChart {
 		this.dataByIndex = {};
 
 		let s = this.state;
-
-		// let formatY = this.config.formatTooltipY;
 		let formatX = this.config.formatTooltipX;
-
+		let formatY = this.config.formatTooltipY;
 		let titles = s.xAxis.labels;
-		if(formatX && formatX(titles[0])) {
-			titles = titles.map(d=>formatX(d));
-		}
 
-		// formatY = formatY && formatY(s.yAxis.labels[0]) ? formatY : 0;
+		titles.map((label, index) => {
+			let values = this.state.datasets.map((set, i) => {
+				let value = set.values[index];
+				return {
+					title: set.name,
+					value: value,
+					yPos: set.yPositions[index],
+					color: this.colors[i],
+					formatted: formatY ? formatY(value) : value,
+				};
+			});
 
-		// yVal = formatY ? formatY(set.values[i]) : set.values[i]
+			this.dataByIndex[index] = {
+				label: label,
+				formattedLabel: formatX ? formatX(label) : label,
+				xPos: s.xAxis.positions[index],
+				values: values,
+				yExtreme: s.yExtremes[index],
+			}
+		});
 	}
 
 	bindTooltip() {
@@ -389,18 +401,13 @@ export default class AxisChart extends BaseChart {
 		if(!s.yExtremes) return;
 
 		let index = getClosestInArray(relX, s.xAxis.positions, true);
+		let dbi = this.dataByIndex[index];
 
 		this.tip.setValues(
-			s.xAxis.positions[index] + this.tip.offset.x,
+			dbi.xPos + this.tip.offset.x,
-			s.yExtremes[index] + this.tip.offset.y,
+			dbi.yExtreme + this.tip.offset.y,
-			{name: s.xAxis.labels[index], value: ''},
+			{name: dbi.formattedLabel, value: ''},
-			this.data.datasets.map((set, i) => {
+			dbi.values,
-				return {
-					title: set.name,
-					value: set.values[index],
-					color: this.colors[i],
-				};
-			}),
 			index
 		);
 

src/js/objects/SvgTip.js

@@ -64,12 +64,13 @@ export default class SvgTip {
 
 		this.listValues.map((set, i) => {
 			const color = this.colors[i] || 'black';
+			let value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
 
 			let li = $.create('li', {
 				styles: {
 					'border-top': `3px solid ${color}`
 				},
-				innerHTML: `<strong style="display: block;">${ set.value === 0 || set.value ? set.value : '' }</strong>
+				innerHTML: `<strong style="display: block;">${ value === 0 || value ? value : '' }</strong>
 					${set.title ? set.title : '' }`
 			});