1 | import { a as __extends } from './tslib.es6-863e3717.js';
|
2 | import { select } from 'd3';
|
3 | import { C as Component } from './Component-5b66527b.js';
|
4 |
|
5 | var Tooltip = (function (_super) {
|
6 | __extends(Tooltip, _super);
|
7 | function Tooltip(renderTarget) {
|
8 | return _super.call(this, renderTarget) || this;
|
9 | }
|
10 | Tooltip.prototype.hide = function () {
|
11 | if (this.tooltipDiv) {
|
12 | this.tooltipDiv.style("display", "none");
|
13 | }
|
14 | };
|
15 | Tooltip.prototype.getSVGWidth = function () {
|
16 | return !this.renderTarget.select('.tsi-chartSVG').empty() ? this.renderTarget.select('.tsi-chartSVG').node().getBoundingClientRect().width : 0;
|
17 | };
|
18 | Tooltip.prototype.getSVGHeight = function () {
|
19 | return !this.renderTarget.select('.tsi-chartSVG').empty() ? this.renderTarget.select('.tsi-chartSVG').node().getBoundingClientRect().height : 0;
|
20 | };
|
21 | Tooltip.prototype.getLeftOffset = function (chartMargins) {
|
22 |
|
23 | var renderTargetWidth = this.renderTarget.node().getBoundingClientRect().width;
|
24 | return (renderTargetWidth - this.getSVGWidth() + chartMargins.left);
|
25 | };
|
26 | Tooltip.prototype.getTopOffset = function (chartMargins) {
|
27 |
|
28 | var renderTargetHeight = this.renderTarget.node().getBoundingClientRect().height;
|
29 | return (renderTargetHeight - this.getSVGHeight() + chartMargins.top);
|
30 | };
|
31 | Tooltip.prototype.isRightOffset = function (tooltipWidth, xPos, chartMarginLeft) {
|
32 |
|
33 | var renderTargetWidth = this.renderTarget.node().getBoundingClientRect().width;
|
34 | return this.getSVGWidth() > (xPos + tooltipWidth + 20 + chartMarginLeft);
|
35 | };
|
36 | Tooltip.prototype.isTopOffset = function (tooltipHeight, yPos, chartMargins) {
|
37 |
|
38 | var renderTargetHeight = this.renderTarget.node().getBoundingClientRect().height;
|
39 | var tooltipYPos = yPos + tooltipHeight + 20 + chartMargins.bottom + this.getTopOffset(chartMargins);
|
40 | return renderTargetHeight > tooltipYPos;
|
41 | };
|
42 | Tooltip.prototype.render = function (theme) {
|
43 | var _this = this;
|
44 | var self = this;
|
45 | var tooltip = this.renderTarget.selectAll('.tsi-tooltip').filter(function () {
|
46 | return (this.parentNode === self.renderTarget.node());
|
47 | }).data([theme]);
|
48 | this.tooltipDiv = tooltip.enter().append('div')
|
49 | .attr('class', 'tsi-tooltip')
|
50 | .merge(tooltip)
|
51 | .each(function (d) {
|
52 | select(this).selectAll("*").remove();
|
53 | self.tooltipDivInner = select(this).append('div')
|
54 | .attr('class', 'tsi-tooltipInner');
|
55 | });
|
56 | tooltip.exit().remove();
|
57 | _super.prototype.themify.call(this, this.tooltipDiv, theme);
|
58 |
|
59 |
|
60 | this.draw = function (d, chartComponentData, xPos, yPos, chartMargins, addText, elementWidth, xOffset, yOffset, borderColor, isFromMarker) {
|
61 | if (elementWidth === void 0) { elementWidth = null; }
|
62 | if (xOffset === void 0) { xOffset = 20; }
|
63 | if (yOffset === void 0) { yOffset = 20; }
|
64 | if (borderColor === void 0) { borderColor = null; }
|
65 | if (isFromMarker === void 0) { isFromMarker = false; }
|
66 | _this.tooltipDiv.style("display", "block");
|
67 | _this.tooltipDivInner.text(null);
|
68 | _this.borderColor = borderColor;
|
69 | var leftOffset = isFromMarker ? 0 : _this.getLeftOffset(chartMargins);
|
70 | var topOffset = _this.getTopOffset(chartMargins);
|
71 | addText(_this.tooltipDivInner);
|
72 | _this.tooltipDiv.style("left", Math.round(xPos + leftOffset) + "px")
|
73 | .style("top", Math.round(yPos) + topOffset + "px");
|
74 | var tooltipWidth = _this.tooltipDiv.node().getBoundingClientRect().width;
|
75 | var tooltipHeight = _this.tooltipDiv.node().getBoundingClientRect().height;
|
76 | var translateX = _this.isRightOffset(tooltipWidth, xPos, chartMargins.left) ? xOffset :
|
77 | (-Math.round(tooltipWidth) - xOffset - (elementWidth !== null ? elementWidth : 0));
|
78 | translateX = Math.max(0 - xPos, translateX);
|
79 | var translateY = 0;
|
80 | if (_this.isTopOffset(tooltipHeight, yPos, chartMargins)) {
|
81 | translateY = yOffset;
|
82 | }
|
83 | else {
|
84 | if (!isFromMarker && Math.round(yPos) - yOffset + topOffset - Math.round(tooltipHeight) <= 0) {
|
85 | translateY = -(Math.round(yPos) + topOffset);
|
86 | }
|
87 | else {
|
88 | translateY = (-Math.round(tooltipHeight) - yOffset);
|
89 | }
|
90 | }
|
91 | _this.tooltipDiv.style("transform", "translate(" + translateX + "px," + translateY + "px)");
|
92 | if (_this.borderColor) {
|
93 | _this.tooltipDivInner.style('border-left-color', _this.borderColor)
|
94 | .style('border-left-width', '5px');
|
95 | }
|
96 | else {
|
97 | _this.tooltipDivInner.style('border-left-width', '0');
|
98 | }
|
99 | };
|
100 | };
|
101 | return Tooltip;
|
102 | }(Component));
|
103 |
|
104 | export { Tooltip as T };
|