ngx-chart
Version:
Ngx-Chart provides chart solution for Angular.Currently supports Bar, Pie and Donut chart
86 lines • 10.3 kB
JavaScript
import { __decorate } from "tslib";
import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
let TooltipDirective = class TooltipDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.placement = 'top';
this.offset = 10;
}
onMouseEnter() {
if (!this.tooltip) {
this.show();
}
}
onMouseLeave() {
if (this.tooltip) {
this.hide();
}
}
show() {
this.create();
this.setPosition();
this.renderer.addClass(this.tooltip, 'ngx-chart-tooltip-show');
}
hide() {
this.renderer.removeClass(this.tooltip, 'ngx-chart-tooltip-show');
this.renderer.removeChild(document.body, this.tooltip);
this.tooltip = null;
}
create() {
this.tooltip = this.renderer.createElement('span');
this.renderer.appendChild(this.tooltip, this.renderer.createText(this.tooltipTitle) // textNode
);
this.renderer.appendChild(document.body, this.tooltip);
this.renderer.addClass(this.tooltip, 'ngx-chart-tooltip');
this.renderer.addClass(this.tooltip, `ngx-chart-tooltip-${this.placement}`);
}
setPosition() {
const hostPos = this.el.nativeElement.getBoundingClientRect();
const tooltipPos = this.tooltip.getBoundingClientRect();
const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
let top, left;
if (this.placement === 'bottom') {
top = hostPos.bottom + this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
else if (this.placement === 'left') {
top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
left = hostPos.left - tooltipPos.width - this.offset;
}
else if (this.placement === 'right') {
top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
left = hostPos.right + this.offset;
}
else {
// top
top = hostPos.top - tooltipPos.height - this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
}
};
TooltipDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
__decorate([
Input('tooltip')
], TooltipDirective.prototype, "tooltipTitle", void 0);
__decorate([
Input()
], TooltipDirective.prototype, "placement", void 0);
__decorate([
HostListener('mouseenter')
], TooltipDirective.prototype, "onMouseEnter", null);
__decorate([
HostListener('mouseleave')
], TooltipDirective.prototype, "onMouseLeave", null);
TooltipDirective = __decorate([
Directive({
selector: '[chartTooltip]'
})
], TooltipDirective);
export { TooltipDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtY2hhcnQvIiwic291cmNlcyI6WyJsaWIvX2RpcmVjdGl2ZS90b29sdGlwLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFLdEYsSUFBYSxnQkFBZ0IsR0FBN0IsTUFBYSxnQkFBZ0I7SUFNM0IsWUFBb0IsRUFBYyxFQUFVLFFBQW1CO1FBQTNDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVSxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBSnRELGNBQVMsR0FBVyxLQUFLLENBQUM7UUFFbkMsV0FBTSxHQUFHLEVBQUUsQ0FBQztJQUV1RCxDQUFDO0lBRXhDLFlBQVk7UUFDdEMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FBRTtJQUNyQyxDQUFDO0lBRTJCLFlBQVk7UUFDdEMsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQUU7SUFDcEMsQ0FBQztJQUVELElBQUk7UUFDRixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDZCxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSx3QkFBd0IsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSx3QkFBd0IsQ0FBQyxDQUFDO1FBQ2xFLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3ZELElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO0lBRXRCLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUVuRCxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FDdkIsSUFBSSxDQUFDLE9BQU8sRUFDWixJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsV0FBVztTQUN4RCxDQUFDO1FBRUYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDdkQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxtQkFBbUIsQ0FBQyxDQUFDO1FBQzFELElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUscUJBQXFCLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQzlFLENBQUM7SUFFRCxXQUFXO1FBQ1QsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUU5RCxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLHFCQUFxQixFQUFFLENBQUM7UUFFeEQsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFDLFdBQVcsSUFBSSxRQUFRLENBQUMsZUFBZSxDQUFDLFNBQVMsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDLENBQUM7UUFFM0csSUFBSSxHQUFHLEVBQUUsSUFBSSxDQUFDO1FBRWQsSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLFFBQVEsRUFBRTtZQUMvQixHQUFHLEdBQUcsT0FBTyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1lBQ25DLElBQUksR0FBRyxPQUFPLENBQUMsSUFBSSxHQUFHLENBQUMsT0FBTyxDQUFDLEtBQUssR0FBRyxVQUFVLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQzlEO2FBQU0sSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLE1BQU0sRUFBRTtZQUNwQyxHQUFHLEdBQUcsT0FBTyxDQUFDLEdBQUcsR0FBRyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUM3RCxJQUFJLEdBQUcsT0FBTyxDQUFDLElBQUksR0FBRyxVQUFVLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7U0FDdEQ7YUFBTSxJQUFJLElBQUksQ0FBQyxTQUFTLEtBQUssT0FBTyxFQUFFO1lBQ3JDLEdBQUcsR0FBRyxPQUFPLENBQUMsR0FBRyxHQUFHLENBQUMsT0FBTyxDQUFDLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQzdELElBQUksR0FBRyxPQUFPLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7U0FDcEM7YUFBTTtZQUNMLE1BQU07WUFDTixHQUFHLEdBQUcsT0FBTyxDQUFDLEdBQUcsR0FBRyxVQUFVLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7WUFDcEQsSUFBSSxHQUFHLE9BQU8sQ0FBQyxJQUFJLEdBQUcsQ0FBQyxPQUFPLENBQUMsS0FBSyxHQUFHLFVBQVUsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDOUQ7UUFFRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxHQUFHLEdBQUcsR0FBRyxTQUFTLElBQUksQ0FBQyxDQUFDO1FBQ3BFLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsTUFBTSxFQUFFLEdBQUcsSUFBSSxJQUFJLENBQUMsQ0FBQztJQUM1RCxDQUFDO0NBQ0YsQ0FBQTs7WUEvRHlCLFVBQVU7WUFBb0IsU0FBUzs7QUFMN0M7SUFBakIsS0FBSyxDQUFDLFNBQVMsQ0FBQztzREFBc0I7QUFDOUI7SUFBUixLQUFLLEVBQUU7bURBQTJCO0FBTVA7SUFBM0IsWUFBWSxDQUFDLFlBQVksQ0FBQztvREFFMUI7QUFFMkI7SUFBM0IsWUFBWSxDQUFDLFlBQVksQ0FBQztvREFFMUI7QUFkVSxnQkFBZ0I7SUFINUIsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLGdCQUFnQjtLQUMzQixDQUFDO0dBQ1csZ0JBQWdCLENBcUU1QjtTQXJFWSxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIElucHV0LCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbY2hhcnRUb29sdGlwXSdcbn0pXG5leHBvcnQgY2xhc3MgVG9vbHRpcERpcmVjdGl2ZSB7XG4gIEBJbnB1dCgndG9vbHRpcCcpIHRvb2x0aXBUaXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBwbGFjZW1lbnQ6IHN0cmluZyA9ICd0b3AnO1xuICB0b29sdGlwOiBIVE1MRWxlbWVudDtcbiAgb2Zmc2V0ID0gMTA7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7IH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWVudGVyJykgb25Nb3VzZUVudGVyKCkge1xuICAgIGlmICghdGhpcy50b29sdGlwKSB7IHRoaXMuc2hvdygpOyB9XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWxlYXZlJykgb25Nb3VzZUxlYXZlKCkge1xuICAgIGlmICh0aGlzLnRvb2x0aXApIHsgdGhpcy5oaWRlKCk7IH1cbiAgfVxuXG4gIHNob3coKSB7XG4gICAgdGhpcy5jcmVhdGUoKTtcbiAgICB0aGlzLnNldFBvc2l0aW9uKCk7XG4gICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLnRvb2x0aXAsICduZ3gtY2hhcnQtdG9vbHRpcC1zaG93Jyk7XG4gIH1cblxuICBoaWRlKCkge1xuICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2xhc3ModGhpcy50b29sdGlwLCAnbmd4LWNoYXJ0LXRvb2x0aXAtc2hvdycpO1xuICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2hpbGQoZG9jdW1lbnQuYm9keSwgdGhpcy50b29sdGlwKTtcbiAgICB0aGlzLnRvb2x0aXAgPSBudWxsO1xuXG4gIH1cblxuICBjcmVhdGUoKSB7XG4gICAgdGhpcy50b29sdGlwID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdzcGFuJyk7XG5cbiAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKFxuICAgICAgdGhpcy50b29sdGlwLFxuICAgICAgdGhpcy5yZW5kZXJlci5jcmVhdGVUZXh0KHRoaXMudG9vbHRpcFRpdGxlKSAvLyB0ZXh0Tm9kZVxuICAgICk7XG5cbiAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKGRvY3VtZW50LmJvZHksIHRoaXMudG9vbHRpcCk7XG4gICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLnRvb2x0aXAsICduZ3gtY2hhcnQtdG9vbHRpcCcpO1xuICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3ModGhpcy50b29sdGlwLCBgbmd4LWNoYXJ0LXRvb2x0aXAtJHt0aGlzLnBsYWNlbWVudH1gKTtcbiAgfVxuXG4gIHNldFBvc2l0aW9uKCkge1xuICAgIGNvbnN0IGhvc3RQb3MgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICBjb25zdCB0b29sdGlwUG9zID0gdGhpcy50b29sdGlwLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuXG4gICAgY29uc3Qgc2Nyb2xsUG9zID0gd2luZG93LnBhZ2VZT2Zmc2V0IHx8IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zY3JvbGxUb3AgfHwgZG9jdW1lbnQuYm9keS5zY3JvbGxUb3AgfHwgMDtcblxuICAgIGxldCB0b3AsIGxlZnQ7XG5cbiAgICBpZiAodGhpcy5wbGFjZW1lbnQgPT09ICdib3R0b20nKSB7XG4gICAgICB0b3AgPSBob3N0UG9zLmJvdHRvbSArIHRoaXMub2Zmc2V0O1xuICAgICAgbGVmdCA9IGhvc3RQb3MubGVmdCArIChob3N0UG9zLndpZHRoIC0gdG9vbHRpcFBvcy53aWR0aCkgLyAyO1xuICAgIH0gZWxzZSBpZiAodGhpcy5wbGFjZW1lbnQgPT09ICdsZWZ0Jykge1xuICAgICAgdG9wID0gaG9zdFBvcy50b3AgKyAoaG9zdFBvcy5oZWlnaHQgLSB0b29sdGlwUG9zLmhlaWdodCkgLyAyO1xuICAgICAgbGVmdCA9IGhvc3RQb3MubGVmdCAtIHRvb2x0aXBQb3Mud2lkdGggLSB0aGlzLm9mZnNldDtcbiAgICB9IGVsc2UgaWYgKHRoaXMucGxhY2VtZW50ID09PSAncmlnaHQnKSB7XG4gICAgICB0b3AgPSBob3N0UG9zLnRvcCArIChob3N0UG9zLmhlaWdodCAtIHRvb2x0aXBQb3MuaGVpZ2h0KSAvIDI7XG4gICAgICBsZWZ0ID0gaG9zdFBvcy5yaWdodCArIHRoaXMub2Zmc2V0O1xuICAgIH0gZWxzZSB7XG4gICAgICAvLyB0b3BcbiAgICAgIHRvcCA9IGhvc3RQb3MudG9wIC0gdG9vbHRpcFBvcy5oZWlnaHQgLSB0aGlzLm9mZnNldDtcbiAgICAgIGxlZnQgPSBob3N0UG9zLmxlZnQgKyAoaG9zdFBvcy53aWR0aCAtIHRvb2x0aXBQb3Mud2lkdGgpIC8gMjtcbiAgICB9XG5cbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMudG9vbHRpcCwgJ3RvcCcsIGAke3RvcCArIHNjcm9sbFBvc31weGApO1xuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy50b29sdGlwLCAnbGVmdCcsIGAke2xlZnR9cHhgKTtcbiAgfVxufVxuIl19