116 lines
2.6 KiB
JavaScript
116 lines
2.6 KiB
JavaScript
import $ from '../helpers/dom';
|
|
|
|
export default class SvgTip {
|
|
constructor({
|
|
parent = null
|
|
}) {
|
|
this.parent = parent;
|
|
this.title_name = '';
|
|
this.title_value = '';
|
|
this.list_values = [];
|
|
this.title_value_first = 0;
|
|
|
|
this.x = 0;
|
|
this.y = 0;
|
|
|
|
this.top = 0;
|
|
this.left = 0;
|
|
|
|
this.setup();
|
|
}
|
|
|
|
setup() {
|
|
this.make_tooltip();
|
|
}
|
|
|
|
refresh() {
|
|
this.fill();
|
|
this.calc_position();
|
|
// this.show_tip();
|
|
}
|
|
|
|
make_tooltip() {
|
|
this.container = $.create('div', {
|
|
inside: this.parent,
|
|
className: 'graph-svg-tip comparison',
|
|
innerHTML: `<span class="title"></span>
|
|
<ul class="data-point-list"></ul>
|
|
<div class="svg-pointer"></div>`
|
|
});
|
|
this.hide_tip();
|
|
|
|
this.title = this.container.querySelector('.title');
|
|
this.data_point_list = this.container.querySelector('.data-point-list');
|
|
|
|
this.parent.addEventListener('mouseleave', () => {
|
|
this.hide_tip();
|
|
});
|
|
}
|
|
|
|
fill() {
|
|
let title;
|
|
if(this.title_value_first) {
|
|
title = `<strong>${this.title_value}</strong>${this.title_name}`;
|
|
} else {
|
|
title = `${this.title_name}<strong>${this.title_value}</strong>`;
|
|
}
|
|
this.title.innerHTML = title;
|
|
this.data_point_list.innerHTML = '';
|
|
|
|
this.list_values.map((set) => {
|
|
let li = $.create('li', {
|
|
className: `border-top ${set.color || 'black'}`,
|
|
innerHTML: `<strong style="display: block;">${ isNaN(set.value) ? '' : set.value }</strong>
|
|
${set.title ? set.title : '' }`
|
|
});
|
|
|
|
this.data_point_list.appendChild(li);
|
|
});
|
|
}
|
|
|
|
calc_position() {
|
|
let width = this.container.offsetWidth;
|
|
|
|
this.top = this.y - this.container.offsetHeight;
|
|
this.left = this.x - width/2;
|
|
let max_left = this.parent.offsetWidth - width;
|
|
|
|
let pointer = this.container.querySelector('.svg-pointer');
|
|
|
|
if(this.left < 0) {
|
|
pointer.style.left = `calc(50% - ${-1 * this.left}px)`;
|
|
this.left = 0;
|
|
} else if(this.left > max_left) {
|
|
let delta = this.left - max_left;
|
|
let pointer_offset = `calc(50% + ${delta}px)`;
|
|
pointer.style.left = pointer_offset;
|
|
|
|
this.left = max_left;
|
|
} else {
|
|
pointer.style.left = `50%`;
|
|
}
|
|
}
|
|
|
|
set_values(x, y, title_name = '', title_value = '', list_values = [], title_value_first = 0) {
|
|
this.title_name = title_name;
|
|
this.title_value = title_value;
|
|
this.list_values = list_values;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.title_value_first = title_value_first;
|
|
this.refresh();
|
|
}
|
|
|
|
hide_tip() {
|
|
this.container.style.top = '0px';
|
|
this.container.style.left = '0px';
|
|
this.container.style.opacity = '0';
|
|
}
|
|
|
|
show_tip() {
|
|
this.container.style.top = this.top + 'px';
|
|
this.container.style.left = this.left + 'px';
|
|
this.container.style.opacity = '1';
|
|
}
|
|
}
|