ngx-chart
Version:
Ngx-Chart provides chart solution for Angular.Currently supports Bar, Pie and Donut chart
87 lines • 10.7 kB
JavaScript
import { __decorate } from "tslib";
import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
var TooltipDirective = /** @class */ (function () {
function TooltipDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
this.placement = 'top';
this.offset = 10;
}
TooltipDirective.prototype.onMouseEnter = function () {
if (!this.tooltip) {
this.show();
}
};
TooltipDirective.prototype.onMouseLeave = function () {
if (this.tooltip) {
this.hide();
}
};
TooltipDirective.prototype.show = function () {
this.create();
this.setPosition();
this.renderer.addClass(this.tooltip, 'ngx-chart-tooltip-show');
};
TooltipDirective.prototype.hide = function () {
this.renderer.removeClass(this.tooltip, 'ngx-chart-tooltip-show');
this.renderer.removeChild(document.body, this.tooltip);
this.tooltip = null;
};
TooltipDirective.prototype.create = function () {
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);
};
TooltipDirective.prototype.setPosition = function () {
var hostPos = this.el.nativeElement.getBoundingClientRect();
var tooltipPos = this.tooltip.getBoundingClientRect();
var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var 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 = function () { return [
{ 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);
return TooltipDirective;
}());
export { TooltipDirective };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtY2hhcnQvIiwic291cmNlcyI6WyJsaWIvX2RpcmVjdGl2ZS90b29sdGlwLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFLdEY7SUFNRSwwQkFBb0IsRUFBYyxFQUFVLFFBQW1CO1FBQTNDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVSxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBSnRELGNBQVMsR0FBVyxLQUFLLENBQUM7UUFFbkMsV0FBTSxHQUFHLEVBQUUsQ0FBQztJQUV1RCxDQUFDO0lBRXhDLHVDQUFZLEdBQVo7UUFDMUIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7U0FBRTtJQUNyQyxDQUFDO0lBRTJCLHVDQUFZLEdBQVo7UUFDMUIsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQUU7SUFDcEMsQ0FBQztJQUVELCtCQUFJLEdBQUo7UUFDRSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDZCxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDbkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSx3QkFBd0IsQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFFRCwrQkFBSSxHQUFKO1FBQ0UsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSx3QkFBd0IsQ0FBQyxDQUFDO1FBQ2xFLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FB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LFVBQVU7Z0JBQW9CLFNBQVM7O0lBTDdDO1FBQWpCLEtBQUssQ0FBQyxTQUFTLENBQUM7MERBQXNCO0lBQzlCO1FBQVIsS0FBSyxFQUFFO3VEQUEyQjtJQU1QO1FBQTNCLFlBQVksQ0FBQyxZQUFZLENBQUM7d0RBRTFCO0lBRTJCO1FBQTNCLFlBQVksQ0FBQyxZQUFZLENBQUM7d0RBRTFCO0lBZFUsZ0JBQWdCO1FBSDVCLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxnQkFBZ0I7U0FDM0IsQ0FBQztPQUNXLGdCQUFnQixDQXFFNUI7SUFBRCx1QkFBQztDQUFBLEFBckVELElBcUVDO1NBckVZLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tjaGFydFRvb2x0aXBdJ1xufSlcbmV4cG9ydCBjbGFzcyBUb29sdGlwRGlyZWN0aXZlIHtcbiAgQElucHV0KCd0b29sdGlwJykgdG9vbHRpcFRpdGxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHBsYWNlbWVudDogc3RyaW5nID0gJ3RvcCc7XG4gIHRvb2x0aXA6IEhUTUxFbGVtZW50O1xuICBvZmZzZXQgPSAxMDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIpIHsgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKSBvbk1vdXNlRW50ZXIoKSB7XG4gICAgaWYgKCF0aGlzLnRvb2x0aXApIHsgdGhpcy5zaG93KCk7IH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKSBvbk1vdXNlTGVhdmUoKSB7XG4gICAgaWYgKHRoaXMudG9vbHRpcCkgeyB0aGlzLmhpZGUoKTsgfVxuICB9XG5cbiAgc2hvdygpIHtcbiAgICB0aGlzLmNyZWF0ZSgpO1xuICAgIHRoaXMuc2V0UG9zaXRpb24oKTtcbiAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMudG9vbHRpcCwgJ25neC1jaGFydC10b29sdGlwLXNob3cnKTtcbiAgfVxuXG4gIGhpZGUoKSB7XG4gICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLnRvb2x0aXAsICduZ3gtY2hhcnQtdG9vbHRpcC1zaG93Jyk7XG4gICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDaGlsZChkb2N1bWVudC5ib2R5LCB0aGlzLnRvb2x0aXApO1xuICAgIHRoaXMudG9vbHRpcCA9IG51bGw7XG5cbiAgfVxuXG4gIGNyZWF0ZSgpIHtcbiAgICB0aGlzLnRvb2x0aXAgPSB0aGlzLnJlbmRlcmVyLmNyZWF0ZUVsZW1lbnQoJ3NwYW4nKTtcblxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQoXG4gICAgICB0aGlzLnRvb2x0aXAsXG4gICAgICB0aGlzLnJlbmRlcmVyLmNyZWF0ZVRleHQodGhpcy50b29sdGlwVGl0bGUpIC8vIHRleHROb2RlXG4gICAgKTtcblxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuYm9keSwgdGhpcy50b29sdGlwKTtcbiAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMudG9vbHRpcCwgJ25neC1jaGFydC10b29sdGlwJyk7XG4gICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLnRvb2x0aXAsIGBuZ3gtY2hhcnQtdG9vbHRpcC0ke3RoaXMucGxhY2VtZW50fWApO1xuICB9XG5cbiAgc2V0UG9zaXRpb24oKSB7XG4gICAgY29uc3QgaG9zdFBvcyA9IHRoaXMuZWwubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcblxuICAgIGNvbnN0IHRvb2x0aXBQb3MgPSB0aGlzLnRvb2x0aXAuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICBjb25zdCBzY3JvbGxQb3MgPSB3aW5kb3cucGFnZVlPZmZzZXQgfHwgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnNjcm9sbFRvcCB8fCBkb2N1bWVudC5ib2R5LnNjcm9sbFRvcCB8fCAwO1xuXG4gICAgbGV0IHRvcCwgbGVmdDtcblxuICAgIGlmICh0aGlzLnBsYWNlbWVudCA9PT0gJ2JvdHRvbScpIHtcbiAgICAgIHRvcCA9IGhvc3RQb3MuYm90dG9tICsgdGhpcy5vZmZzZXQ7XG4gICAgICBsZWZ0ID0gaG9zdFBvcy5sZWZ0ICsgKGhvc3RQb3Mud2lkdGggLSB0b29sdGlwUG9zLndpZHRoKSAvIDI7XG4gICAgfSBlbHNlIGlmICh0aGlzLnBsYWNlbWVudCA9PT0gJ2xlZnQnKSB7XG4gICAgICB0b3AgPSBob3N0UG9zLnRvcCArIChob3N0UG9zLmhlaWdodCAtIHRvb2x0aXBQb3MuaGVpZ2h0KSAvIDI7XG4gICAgICBsZWZ0ID0gaG9zdFBvcy5sZWZ0IC0gdG9vbHRpcFBvcy53aWR0aCAtIHRoaXMub2Zmc2V0O1xuICAgIH0gZWxzZSBpZiAodGhpcy5wbGFjZW1lbnQgPT09ICdyaWdodCcpIHtcbiAgICAgIHRvcCA9IGhvc3RQb3MudG9wICsgKGhvc3RQb3MuaGVpZ2h0IC0gdG9vbHRpcFBvcy5oZWlnaHQpIC8gMjtcbiAgICAgIGxlZnQgPSBob3N0UG9zLnJpZ2h0ICsgdGhpcy5vZmZzZXQ7XG4gICAgfSBlbHNlIHtcbiAgICAgIC8vIHRvcFxuICAgICAgdG9wID0gaG9zdFBvcy50b3AgLSB0b29sdGlwUG9zLmhlaWdodCAtIHRoaXMub2Zmc2V0O1xuICAgICAgbGVmdCA9IGhvc3RQb3MubGVmdCArIChob3N0UG9zLndpZHRoIC0gdG9vbHRpcFBvcy53aWR0aCkgLyAyO1xuICAgIH1cblxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy50b29sdGlwLCAndG9wJywgYCR7dG9wICsgc2Nyb2xsUG9zfXB4YCk7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLnRvb2x0aXAsICdsZWZ0JywgYCR7bGVmdH1weGApO1xuICB9XG59XG4iXX0=