瀏覽代碼

account for parent padding for svg width

tags/1.2.0
pratu16x7 7 年之前
父節點
當前提交
839741964a
共有 11 個文件被更改,包括 59 次插入51 次删除
  1. +24
    -24
      dist/frappe-charts.esm.js
  2. +1
    -1
      dist/frappe-charts.min.cjs.js
  3. +1
    -1
      dist/frappe-charts.min.esm.js
  4. +1
    -1
      dist/frappe-charts.min.iife.js
  5. +1
    -1
      docs/assets/js/frappe-charts.min.js
  6. +4
    -4
      src/js/charts/AxisChart.js
  7. +7
    -7
      src/js/charts/BaseChart.js
  8. +2
    -2
      src/js/charts/PercentageChart.js
  9. +2
    -2
      src/js/charts/PieChart.js
  10. +1
    -1
      src/js/objects/SvgTip.js
  11. +15
    -7
      src/js/utils/dom.js

+ 24
- 24
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: {
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


+ 1
- 1
dist/frappe-charts.min.cjs.js
文件差異過大導致無法顯示
查看文件


+ 1
- 1
dist/frappe-charts.min.esm.js
文件差異過大導致無法顯示
查看文件


+ 1
- 1
dist/frappe-charts.min.iife.js
文件差異過大導致無法顯示
查看文件


+ 1
- 1
docs/assets/js/frappe-charts.min.js
文件差異過大導致無法顯示
查看文件


+ 4
- 4
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 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);


+ 7
- 7
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: {
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') {


+ 2
- 2
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;


+ 2
- 2
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


+ 1
- 1
src/js/objects/SvgTip.js 查看文件

@@ -1,4 +1,4 @@
import $ from '../utils/dom';
import { $ } from '../utils/dom';

export default class SvgTip {
constructor({


+ 15
- 7
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) {


Loading…
取消
儲存