[measures] offsets

dist/frappe-charts.esm.js

@@ -105,6 +105,14 @@ const BASE_MEASURES = {
 	titleFontSize: 12,
 };
 
+function getTopOffset(m) {
+	return m.titleHeight + m.margins.top + m.paddings.top;
+}
+
+function getLeftOffset(m) {
+	return m.margins.left + m.paddings.left;
+}
+
 function getExtraHeight(m) {
 	let totalExtraHeight = m.margins.top + m.margins.bottom
 		+ m.paddings.top + m.paddings.bottom
@@ -1491,17 +1499,17 @@ class BaseChart {
 			);
 		}
 
-		let top = m.margins.top + m.titleHeight + m.paddings.top;
+		let top = getTopOffset(m);
 		this.drawArea = makeSVGGroup(
 			this.type + '-chart chart-draw-area',
-			`translate(${m.margins.left + m.paddings.left}, ${top})`
+			`translate(${getLeftOffset(m)}, ${top})`
 		);
 
 		if(this.config.showLegend) {
 			top += this.height + m.paddings.bottom;
 			this.legendArea = makeSVGGroup(
 				'chart-legend',
-				`translate(${m.margins.left + m.paddings.left}, ${top})`
+				`translate(${getLeftOffset(m)}, ${top})`
 			);
 		}
 
@@ -1509,7 +1517,7 @@ class BaseChart {
 		this.svg.appendChild(this.drawArea);
 		if(this.config.showLegend) { this.svg.appendChild(this.legendArea); }
 
-		this.updateTipOffset(m.margins.left + m.paddings.left, m.margins.top + m.paddings.top + m.titleHeight);
+		this.updateTipOffset(getLeftOffset(m), getTopOffset(m));
 	}
 
 	updateTipOffset(x, y) {
@@ -3411,11 +3419,11 @@ class AxisChart extends BaseChart {
 		this.container.addEventListener('mousemove', (e) => {
 			let m = this.measures;
 			let o = getOffset(this.container);
-			let relX = e.pageX - o.left - m.margins.left - m.paddings.left;
+			let relX = e.pageX - o.left - getLeftOffset(m);
 			let relY = e.pageY - o.top;
 
-			if(relY < this.height + m.titleHeight + m.margins.top + m.paddings.top
+			if(relY < this.height + getTopOffset(m)
-				&& relY >  m.titleHeight + m.margins.top + m.paddings.top) {
+				&& relY >  getTopOffset(m)) {
 				this.mapTooltipXPosition(relX);
 			} else {
 				this.tip.hideTip();
@@ -3429,7 +3437,6 @@ class AxisChart extends BaseChart {
 
 		let index = getClosestInArray(relX, s.xAxis.positions, true);
 
-		console.log(relX, s.xAxis.positions[index], s.xAxis.positions, this.tip.offset.x);
 		this.tip.setValues(
 			s.xAxis.positions[index] + this.tip.offset.x,
 			s.yExtremes[index] + this.tip.offset.y,

docs/assets/js/index.js

@@ -1,4 +1,4 @@
-import { shuffle } from '../../../src/js/utils/helpers';
+import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
 import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
 import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
 	barCompositeData, typeData, trendsData, moonData, heatmapData } from './data';
@@ -104,7 +104,7 @@ let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun
 	"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
 	"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
 
-let getRandom = () => Math.floor(Math.random() * 75 - 15);
+let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
 let updateDataAllValues = Array.from({length: 30}, getRandom);
 
 // We're gonna be shuffling this

docs/assets/js/index.min.js

@@ -389,7 +389,7 @@ document.querySelector('.export-aggr').addEventListener('click', function () {
 var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
 
 var getRandom = function getRandom() {
-	return Math.floor(Math.random() * 75 - 15);
+	return Math.floor(getRandomBias(-40, 60, 0.8, 1));
 };
 var updateDataAllValues = Array.from({ length: 30 }, getRandom);
 

src/js/charts/AxisChart.js

@@ -6,7 +6,8 @@ import { getOffset, fire } from '../utils/dom';
 import { calcChartIntervals, getIntervalSize, getValueRange, getZeroIndex, scale, getClosestInArray } from '../utils/intervals';
 import { floatTwo } from '../utils/helpers';
 import { makeOverlay, updateOverlay, legendBar } from '../utils/draw';
-import { MIN_BAR_PERCENT_HEIGHT, BAR_CHART_SPACE_RATIO, LINE_CHART_DOT_SIZE } from '../utils/constants';
+import { getTopOffset, getLeftOffset, MIN_BAR_PERCENT_HEIGHT, BAR_CHART_SPACE_RATIO,
+	LINE_CHART_DOT_SIZE } from '../utils/constants';
 
 export default class AxisChart extends BaseChart {
 	constructor(parent, args) {
@@ -367,11 +368,11 @@ export default class AxisChart extends BaseChart {
 		this.container.addEventListener('mousemove', (e) => {
 			let m = this.measures;
 			let o = getOffset(this.container);
-			let relX = e.pageX - o.left - m.margins.left - m.paddings.left;
+			let relX = e.pageX - o.left - getLeftOffset(m);
 			let relY = e.pageY - o.top;
 
-			if(relY < this.height + m.titleHeight + m.margins.top + m.paddings.top
+			if(relY < this.height + getTopOffset(m)
-				&& relY >  m.titleHeight + m.margins.top + m.paddings.top) {
+				&& relY >  getTopOffset(m)) {
 				this.mapTooltipXPosition(relX);
 			} else {
 				this.tip.hideTip();
@@ -385,7 +386,6 @@ export default class AxisChart extends BaseChart {
 
 		let index = getClosestInArray(relX, s.xAxis.positions, true);
 
-		console.log(relX, s.xAxis.positions[index], s.xAxis.positions, this.tip.offset.x);
 		this.tip.setValues(
 			s.xAxis.positions[index] + this.tip.offset.x,
 			s.yExtremes[index] + this.tip.offset.y,

src/js/charts/BaseChart.js

@@ -1,8 +1,8 @@
 import SvgTip from '../objects/SvgTip';
 import { $, isElementInViewport, getElementContentWidth } from '../utils/dom';
 import { makeSVGContainer, makeSVGDefs, makeSVGGroup, makeText, yLine } from '../utils/draw';
-import { BASE_MEASURES, getExtraHeight, getExtraWidth, INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT,
+import { BASE_MEASURES, getExtraHeight, getExtraWidth, getTopOffset, getLeftOffset,
-	DEFAULT_COLORS} from '../utils/constants';
+	INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT, DEFAULT_COLORS} from '../utils/constants';
 import { getColor, isValidColor } from '../utils/colors';
 import { runSMILAnimation } from '../utils/animation';
 import { downloadFile, prepareForExport } from '../utils/export';
@@ -181,17 +181,17 @@ export default class BaseChart {
 			);
 		}
 
-		let top = m.margins.top + m.titleHeight + m.paddings.top;
+		let top = getTopOffset(m);
 		this.drawArea = makeSVGGroup(
 			this.type + '-chart chart-draw-area',
-			`translate(${m.margins.left + m.paddings.left}, ${top})`
+			`translate(${getLeftOffset(m)}, ${top})`
 		);
 
 		if(this.config.showLegend) {
 			top += this.height + m.paddings.bottom;
 			this.legendArea = makeSVGGroup(
 				'chart-legend',
-				`translate(${m.margins.left + m.paddings.left}, ${top})`
+				`translate(${getLeftOffset(m)}, ${top})`
 			);
 		}
 
@@ -199,7 +199,7 @@ export default class BaseChart {
 		this.svg.appendChild(this.drawArea);
 		if(this.config.showLegend) { this.svg.appendChild(this.legendArea); }
 
-		this.updateTipOffset(m.margins.left + m.paddings.left, m.margins.top + m.paddings.top + m.titleHeight);
+		this.updateTipOffset(getLeftOffset(m), getTopOffset(m));
 	}
 
 	updateTipOffset(x, y) {

src/js/utils/constants.js

@@ -37,6 +37,14 @@ export const BASE_MEASURES = {
 	titleFontSize: 12,
 };
 
+export function getTopOffset(m) {
+	return m.titleHeight + m.margins.top + m.paddings.top;
+}
+
+export function getLeftOffset(m) {
+	return m.margins.left + m.paddings.left;
+}
+
 export function getExtraHeight(m) {
 	let totalExtraHeight = m.margins.top + m.margins.bottom
 		+ m.paddings.top + m.paddings.bottom