jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

account for parent padding for svg width

Browse Source
This commit is contained in:
pratu16x7 2017-11-22 10:14:18 +05:30
parent 4ad805ea80
commit 839741964a
11 changed files with 59 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
dist/frappe-charts.esm.js vendored
View File

@ -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: {
background: d.color
},
innerHTML: `<span class="indicator">${d.title}: ${d.value}</span>`
innerHTML: `<span class="indicator">
<i style="background:${d.color}"></i>
${d.title}: ${d.value}
</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 relX = e.pageX - offset.left - this.translate_x;
let relY = e.pageY - offset.top - this.translate_y;
let o = offset(this.chart_wrapper);
let relX = e.pageX - o.left - this.translate_x;
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

2
dist/frappe-charts.min.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/js/charts/AxisChart.js
View File

@ -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 relX = e.pageX - offset.left - this.translate_x;
let relY = e.pageY - offset.top - this.translate_y;
let o = offset(this.chart_wrapper);
let relX = e.pageX - o.left - this.translate_x;
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);

14
src/js/charts/BaseChart.js
View File

@ -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: {
background: d.color
},
innerHTML: `<span class="indicator">${d.title}: ${d.value}</span>`
innerHTML: `<span class="indicator">
<i style="background:${d.color}"></i>
${d.title}: ${d.value}
</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') {

4
src/js/charts/PercentageChart.js
View File

@ -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;

4
src/js/charts/PieChart.js
View File

@ -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

2
src/js/objects/SvgTip.js
View File

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

22
src/js/utils/dom.js
View File

@ -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) {