account for parent padding for svg width

dist/frappe-charts.esm.js

@@ -2,15 +2,7 @@ function $(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
 }
 
-$.findNodeIndex = (node) =>
+
-{
-	var i = 0;
-	while (node.previousSibling) {
-		node = node.previousSibling;
-		i++;
-	}
-	return i;
-};
 
 $.create = (tag, o) => {
 	var element = document.createElement(tag);
@@ -43,7 +35,7 @@ $.create = (tag, o) => {
 	return element;
 };
 
-$.offset = (element) => {
+function offset(element) {
 	let rect = element.getBoundingClientRect();
 	return {
 		// https://stackoverflow.com/a/7436602/6495043
@@ -52,9 +44,9 @@ $.offset = (element) => {
 		top: rect.top + (document.documentElement.scrollTop || document.body.scrollTop),
 		left: rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft)
 	};
-};
+}
 
-$.isElementInViewport = (el) => {
+function isElementInViewport(el) {
 	// Although straightforward: https://stackoverflow.com/a/7557433/6495043
 	var rect = el.getBoundingClientRect();
 
@@ -64,7 +56,15 @@ $.isElementInViewport = (el) => {
         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
         rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
 	);
-};
+}
+
+function getElementContentWidth(element) {
+	var styles = window.getComputedStyle(element);
+	var padding = parseFloat(styles.paddingLeft) +
+		parseFloat(styles.paddingRight);
+
+	return element.clientWidth - padding;
+}
 
 $.bind = (element, o) => {
 	if (element) {
@@ -1059,7 +1059,7 @@ class BaseChart {
 				special_values_width = str_width - 40;
 			}
 		});
-		this.base_width = this.parent.offsetWidth - special_values_width;
+		this.base_width = getElementContentWidth(this.parent) - special_values_width;
 		this.width = this.base_width - this.translate_x * 2;
 	}
 
@@ -1120,10 +1120,10 @@ class BaseChart {
 		this.summary.map(d => {
 			let stats = $.create('div', {
 				className: 'stats',
-				styles: {
+				innerHTML: `<span class="indicator">
-					background: d.color
+					<i style="background:${d.color}"></i>
-				},
+					${d.title}: ${d.value}
-				innerHTML: `<span class="indicator">${d.title}: ${d.value}</span>`
+				</span>`
 			});
 			this.stats_wrapper.appendChild(stats);
 		});
@@ -1136,7 +1136,7 @@ class BaseChart {
 			this.bind_overlay();
 
 			document.addEventListener('keydown', (e) => {
-				if($.isElementInViewport(this.chart_wrapper)) {
+				if(isElementInViewport(this.chart_wrapper)) {
 					e = e || window.event;
 
 					if (e.keyCode == '37') {
@@ -1532,9 +1532,9 @@ class AxisChart extends BaseChart {
 	bind_tooltip() {
 		// TODO: could be in tooltip itself, as it is a given functionality for its parent
 		this.chart_wrapper.addEventListener('mousemove', (e) => {
-			let offset = $.offset(this.chart_wrapper);
+			let o = offset(this.chart_wrapper);
-			let relX = e.pageX - offset.left - this.translate_x;
+			let relX = e.pageX - o.left - this.translate_x;
-			let relY = e.pageY - offset.top - this.translate_y;
+			let relY = e.pageY - o.top - this.translate_y;
 
 			if(relY < this.height + this.translate_y * 2) {
 				this.map_tooltip_x_position_and_show(relX);
@@ -2320,7 +2320,7 @@ class PercentageChart extends BaseChart {
 	bind_tooltip() {
 		this.slices.map((slice, i) => {
 			slice.addEventListener('mouseenter', () => {
-				let g_off = $.offset(this.chart_wrapper), p_off = $.offset(slice);
+				let g_off = offset(this.chart_wrapper), p_off = offset(slice);
 
 				let x = p_off.left - g_off.left + slice.offsetWidth/2;
 				let y = p_off.top - g_off.top - 6;
@@ -2504,7 +2504,7 @@ class PieChart extends BaseChart {
 		if(flag){
 			transform(path,this.calTranslateByAngle(this.slicesProperties[i]));
 			path.style.fill = lightenDarkenColor(color,50);
-			let g_off = $.offset(this.svg);
+			let g_off = offset(this.svg);
 			let x = e.pageX - g_off.left + 10;
 			let y = e.pageY - g_off.top - 10;
 			let title = (this.formatted_labels && this.formatted_labels.length>0

src/js/charts/AxisChart.js

@@ -1,4 +1,4 @@
-import $ from '../utils/dom';
+import { offset } from '../utils/dom';
 import { UnitRenderer, makeXLine, makeYLine } from '../utils/draw';
 import { Animator } from '../utils/animate';
 import { runSVGAnimation } from '../utils/animation';
@@ -342,9 +342,9 @@ export default class AxisChart extends BaseChart {
 	bind_tooltip() {
 		// TODO: could be in tooltip itself, as it is a given functionality for its parent
 		this.chart_wrapper.addEventListener('mousemove', (e) => {
-			let offset = $.offset(this.chart_wrapper);
+			let o = offset(this.chart_wrapper);
-			let relX = e.pageX - offset.left - this.translate_x;
+			let relX = e.pageX - o.left - this.translate_x;
-			let relY = e.pageY - offset.top - this.translate_y;
+			let relY = e.pageY - o.top - this.translate_y;
 
 			if(relY < this.height + this.translate_y * 2) {
 				this.map_tooltip_x_position_and_show(relX);

src/js/charts/BaseChart.js

@@ -1,5 +1,5 @@
 import SvgTip from '../objects/SvgTip';
-import $ from '../utils/dom';
+import { $, isElementInViewport, getElementContentWidth } from '../utils/dom';
 import { makeSVGContainer, makeSVGDefs, makeSVGGroup } from '../utils/draw';
 import { getStringWidth } from '../utils/helpers';
 import { getColor, DEFAULT_COLORS } from '../utils/colors';
@@ -166,7 +166,7 @@ export default class BaseChart {
 				special_values_width = str_width - 40;
 			}
 		});
-		this.base_width = this.parent.offsetWidth - special_values_width;
+		this.base_width = getElementContentWidth(this.parent) - special_values_width;
 		this.width = this.base_width - this.translate_x * 2;
 	}
 
@@ -227,10 +227,10 @@ export default class BaseChart {
 		this.summary.map(d => {
 			let stats = $.create('div', {
 				className: 'stats',
-				styles: {
+				innerHTML: `<span class="indicator">
-					background: d.color
+					<i style="background:${d.color}"></i>
-				},
+					${d.title}: ${d.value}
-				innerHTML: `<span class="indicator">${d.title}: ${d.value}</span>`
+				</span>`
 			});
 			this.stats_wrapper.appendChild(stats);
 		});
@@ -243,7 +243,7 @@ export default class BaseChart {
 			this.bind_overlay();
 
 			document.addEventListener('keydown', (e) => {
-				if($.isElementInViewport(this.chart_wrapper)) {
+				if(isElementInViewport(this.chart_wrapper)) {
 					e = e || window.event;
 
 					if (e.keyCode == '37') {

src/js/charts/PercentageChart.js

@@ -1,5 +1,5 @@
 import BaseChart from './BaseChart';
-import $ from '../utils/dom';
+import { $, offset } from '../utils/dom';
 
 export default class PercentageChart extends BaseChart {
 	constructor(args) {
@@ -94,7 +94,7 @@ export default class PercentageChart extends BaseChart {
 	bind_tooltip() {
 		this.slices.map((slice, i) => {
 			slice.addEventListener('mouseenter', () => {
-				let g_off = $.offset(this.chart_wrapper), p_off = $.offset(slice);
+				let g_off = offset(this.chart_wrapper), p_off = offset(slice);
 
 				let x = p_off.left - g_off.left + slice.offsetWidth/2;
 				let y = p_off.top - g_off.top - 6;

src/js/charts/PieChart.js

@@ -1,5 +1,5 @@
 import BaseChart from './BaseChart';
-import $ from '../utils/dom';
+import { $, offset } from '../utils/dom';
 import { makePath } from '../utils/draw';
 import { lightenDarkenColor } from '../utils/colors';
 import { runSVGAnimation, transform } from '../utils/animation';
@@ -154,7 +154,7 @@ export default class PieChart extends BaseChart {
 		if(flag){
 			transform(path,this.calTranslateByAngle(this.slicesProperties[i]));
 			path.style.fill = lightenDarkenColor(color,50);
-			let g_off = $.offset(this.svg);
+			let g_off = offset(this.svg);
 			let x = e.pageX - g_off.left + 10;
 			let y = e.pageY - g_off.top - 10;
 			let title = (this.formatted_labels && this.formatted_labels.length>0

src/js/objects/SvgTip.js

@@ -1,4 +1,4 @@
-import $ from '../utils/dom';
+import { $ } from '../utils/dom';
 
 export default class SvgTip {
 	constructor({

src/js/utils/dom.js

@@ -1,8 +1,8 @@
-export default function $(expr, con) {
+export function $(expr, con) {
 	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
 }
 
-$.findNodeIndex = (node) =>
+export function findNodeIndex(node)
 {
 	var i = 0;
 	while (node.previousSibling) {
@@ -10,7 +10,7 @@ $.findNodeIndex = (node) =>
 		i++;
 	}
 	return i;
-};
+}
 
 $.create = (tag, o) => {
 	var element = document.createElement(tag);
@@ -43,7 +43,7 @@ $.create = (tag, o) => {
 	return element;
 };
 
-$.offset = (element) => {
+export function offset(element) {
 	let rect = element.getBoundingClientRect();
 	return {
 		// https://stackoverflow.com/a/7436602/6495043
@@ -52,9 +52,9 @@ $.offset = (element) => {
 		top: rect.top + (document.documentElement.scrollTop || document.body.scrollTop),
 		left: rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft)
 	};
-};
+}
 
-$.isElementInViewport = (el) => {
+export function isElementInViewport(el) {
 	// Although straightforward: https://stackoverflow.com/a/7557433/6495043
 	var rect = el.getBoundingClientRect();
 
@@ -64,7 +64,15 @@ $.isElementInViewport = (el) => {
         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
         rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
 	);
-};
+}
+
+export function getElementContentWidth(element) {
+	var styles = window.getComputedStyle(element);
+	var padding = parseFloat(styles.paddingLeft) +
+		parseFloat(styles.paddingRight);
+
+	return element.clientWidth - padding;
+}
 
 $.bind = (element, o) => {
 	if (element) {