Values over data points

dist/frappe-charts.esm.js

@@ -374,6 +374,14 @@ function makeSVGGroup(parent, className, transform='') {
 	});
 }
 
+function wrapInSVGGroup(elements, className='') {
+	let g = createSVG('g', {
+		className: className
+	});
+	elements.forEach(e => g.appendChild(e));
+	return g;
+}
+
 function makePath(pathStr, className='', stroke='none', fill='none') {
 	return createSVG('path', {
 		className: className,
@@ -1358,10 +1366,10 @@ class BarChartController extends AxisChartController {
 			? m.options.stacked : m.noOfDatasets);
 	}
 
-	draw(x, yTop, color, index, offset=0) {
+	draw(x, yTop, color, label='', index=0, offset=0) {
 		let [height, y] = getBarHeightAndYAttr(yTop, this.meta.zeroLine);
 
-		return createSVG('rect', {
+		let rect = createSVG('rect', {
 			className: `bar mini`,
 			style: `fill: ${color}`,
 			'data-point-index': index,
@@ -1370,6 +1378,22 @@ class BarChartController extends AxisChartController {
 			width: this.consts.width,
 			height: height || this.consts.minHeight
 		});
+
+		if(!label && !label.length) {
+			return rect;
+		} else {
+			let text = createSVG('text', {
+				className: 'data-point-value',
+				x: x,
+				y: y - offset,
+				dy: (FONT_SIZE / 2 * -1) + 'px',
+				'font-size': FONT_SIZE + 'px',
+				'text-anchor': 'middle',
+				innerHTML: label
+			});
+
+			return wrapInSVGGroup([rect, text]);
+		}
 	}
 
 	animate(bar, x, yTop, index, noOfDatasets) {
@@ -1395,14 +1419,30 @@ class LineChartController extends AxisChartController {
 		};
 	}
 
-	draw(x, y, color, index) {
+	draw(x, y, color, label='', index=0) {
-		return createSVG('circle', {
+		let dot = createSVG('circle', {
 			style: `fill: ${color}`,
 			'data-point-index': index,
 			cx: x,
 			cy: y,
 			r: this.consts.radius
 		});
+
+		if(!label && !label.length) {
+			return dot;
+		} else {
+			let text = createSVG('text', {
+				className: 'data-point-value',
+				x: x,
+				y: y,
+				dy: (FONT_SIZE / 2 * -1 - this.consts.radius) + 'px',
+				'font-size': FONT_SIZE + 'px',
+				'text-anchor': 'middle',
+				innerHTML: label
+			});
+
+			return wrapInSVGGroup([dot, text]);
+		}
 	}
 
 	animate(dot, x, yTop) {
@@ -1715,6 +1755,7 @@ class AxisChart extends BaseChart {
 	constructor(args) {
 		super(args);
 		this.isSeries = args.isSeries;
+		this.valuesOverPoints = args.valuesOverPoints;
 		this.formatTooltipY = args.formatTooltipY;
 		this.formatTooltipX = args.formatTooltipX;
 		this.barOptions = args.barOptions;
@@ -2068,17 +2109,14 @@ class AxisChart extends BaseChart {
 			make: () => {
 				let d = this.state.datasets[index];
 
-				console.log('d.positions', d.positions);
-				console.log('d.cumulativePositions', d.cumulativePositions);
-				console.log('d.cumulativeYs', d.cumulativeYs);
-
 				return d.positions.map((y, j) => {
 					return unitRenderer.draw(
 						this.state.xAxisPositions[j],
 						y,
 						this.colors[index],
-						j
+						(this.valuesOverPoints ? (this.barOptions &&
-						,
+							this.barOptions.stacked ? d.cumulativeYs[j] : d.values[j]) : ''),
+						j,
 						y - (d.cumulativePositions ? d.cumulativePositions[j] : y)
 					);
 				});
@@ -2190,10 +2228,6 @@ class AxisChart extends BaseChart {
 		});
 	}
 
-	// getXMarkerLines() {
-	// 	return [];
-	// }
-
 	getYRegions() {
 		if(!this.data.yRegions) {
 			return [];

docs/assets/js/index.js

@@ -51,7 +51,8 @@ let bar_composite_chart = new Chart ({
 	height: 180,
 	colors: ['orange'],
 	isNavigable: 1,
-	isSeries: 1
+	isSeries: 1,
+	valuesOverPoints: 1,
 	// regionFill: 1
 });
 
@@ -64,7 +65,8 @@ let line_composite_chart = new Chart ({
 	},
 	height: 180,
 	colors: ['green'],
-	isSeries: 1
+	isSeries: 1,
+	valuesOverPoints: 1,
 });
 
 bar_composite_chart.parent.addEventListener('data-select', (e) => {
@@ -124,7 +126,7 @@ let type_data = {
 		{
 			name: "Yet Another",
 			values: [15, 20, -3, -15, 58, 12, -17, 37],
-			// chartType: 'line'
+			chartType: 'line'
 		}
 
 		// temp : Stacked
@@ -147,12 +149,13 @@ let type_chart = new Chart({
 	parent: "#chart-types",
 	// title: "My Awesome Chart",
 	data: type_data,
-	type: 'line',
+	// type: 'bar',
 	height: 250,
 	colors: ['purple', 'magenta', 'light-blue'],
 	isSeries: 1,
 	xAxisMode: 'tick',
 	yAxisMode: 'span',
+	valuesOverPoints: 1,
 	barOptions: {
 		// stacked: 1
 	}
@@ -382,7 +385,7 @@ let aggr_data = {
 			"values": [25, 40, 30, 35, 8, 52, 17]
 		},
 		{
-			"values": [25, 50, -10, 15, 18, 32, 27],
+			"values": [25, 50, 10, 15, 18, 32, 27],
 		}
 	]
 };
@@ -393,6 +396,7 @@ let aggr_chart = new Chart({
 	type: 'bar',
 	height: 250,
 	colors: ['light-green', 'blue'],
+	valuesOverPoints: 1,
 	barOptions: {
 		stacked: 1
 	}

src/js/charts/AxisChart.js

@@ -14,6 +14,7 @@ export default class AxisChart extends BaseChart {
 	constructor(args) {
 		super(args);
 		this.isSeries = args.isSeries;
+		this.valuesOverPoints = args.valuesOverPoints;
 		this.formatTooltipY = args.formatTooltipY;
 		this.formatTooltipX = args.formatTooltipX;
 		this.barOptions = args.barOptions;
@@ -367,17 +368,14 @@ export default class AxisChart extends BaseChart {
 			make: () => {
 				let d = this.state.datasets[index];
 
-				console.log('d.positions', d.positions);
-				console.log('d.cumulativePositions', d.cumulativePositions);
-				console.log('d.cumulativeYs', d.cumulativeYs);
-
 				return d.positions.map((y, j) => {
 					return unitRenderer.draw(
 						this.state.xAxisPositions[j],
 						y,
 						this.colors[index],
-						j
+						(this.valuesOverPoints ? (this.barOptions &&
-						,
+							this.barOptions.stacked ? d.cumulativeYs[j] : d.values[j]) : ''),
+						j,
 						y - (d.cumulativePositions ? d.cumulativePositions[j] : y)
 					);
 				});
@@ -489,10 +487,6 @@ export default class AxisChart extends BaseChart {
 		});
 	}
 
-	// getXMarkerLines() {
-	// 	return [];
-	// }
-
 	getYRegions() {
 		if(!this.data.yRegions) {
 			return [];

src/js/objects/AxisChartControllers.js

@@ -1,5 +1,5 @@
 import { getBarHeightAndYAttr } from '../utils/draw-utils';
-import { createSVG, makePath, makeGradient } from '../utils/draw';
+import { createSVG, makePath, makeGradient, wrapInSVGGroup, FONT_SIZE } from '../utils/draw';
 import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from '../utils/animate';
 
 const MIN_BAR_PERCENT_HEIGHT = 0.01;
@@ -69,10 +69,10 @@ export class BarChartController extends AxisChartController {
 			? m.options.stacked : m.noOfDatasets);
 	}
 
-	draw(x, yTop, color, index, offset=0) {
+	draw(x, yTop, color, label='', index=0, offset=0) {
 		let [height, y] = getBarHeightAndYAttr(yTop, this.meta.zeroLine);
 
-		return createSVG('rect', {
+		let rect = createSVG('rect', {
 			className: `bar mini`,
 			style: `fill: ${color}`,
 			'data-point-index': index,
@@ -81,6 +81,22 @@ export class BarChartController extends AxisChartController {
 			width: this.consts.width,
 			height: height || this.consts.minHeight
 		});
+
+		if(!label && !label.length) {
+			return rect;
+		} else {
+			let text = createSVG('text', {
+				className: 'data-point-value',
+				x: x,
+				y: y - offset,
+				dy: (FONT_SIZE / 2 * -1) + 'px',
+				'font-size': FONT_SIZE + 'px',
+				'text-anchor': 'middle',
+				innerHTML: label
+			});
+
+			return wrapInSVGGroup([rect, text]);
+		}
 	}
 
 	animate(bar, x, yTop, index, noOfDatasets) {
@@ -106,14 +122,30 @@ export class LineChartController extends AxisChartController {
 		};
 	}
 
-	draw(x, y, color, index) {
+	draw(x, y, color, label='', index=0) {
-		return createSVG('circle', {
+		let dot = createSVG('circle', {
 			style: `fill: ${color}`,
 			'data-point-index': index,
 			cx: x,
 			cy: y,
 			r: this.consts.radius
 		});
+
+		if(!label && !label.length) {
+			return dot;
+		} else {
+			let text = createSVG('text', {
+				className: 'data-point-value',
+				x: x,
+				y: y,
+				dy: (FONT_SIZE / 2 * -1 - this.consts.radius) + 'px',
+				'font-size': FONT_SIZE + 'px',
+				'text-anchor': 'middle',
+				innerHTML: label
+			});
+
+			return wrapInSVGGroup([dot, text]);
+		}
 	}
 
 	animate(dot, x, yTop) {

src/js/utils/draw.js

@@ -4,7 +4,7 @@ import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from '
 
 const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
-const FONT_SIZE = 10;
+export const FONT_SIZE = 10;
 const BASE_LINE_COLOR = '#dadada';
 const BASE_BG_COLOR = '#F7FAFC';
 
@@ -88,6 +88,14 @@ export function makeSVGGroup(parent, className, transform='') {
 	});
 }
 
+export function wrapInSVGGroup(elements, className='') {
+	let g = createSVG('g', {
+		className: className
+	});
+	elements.forEach(e => g.appendChild(e));
+	return g;
+}
+
 export function makePath(pathStr, className='', stroke='none', fill='none') {
 	return createSVG('path', {
 		className: className,