@syncfusion/ej2-charts
Version:
Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
231 lines (230 loc) • 13.2 kB
JavaScript
import { compile as templateComplier } from '@syncfusion/ej2-base';
import { stringToNumber } from '../../common/utils/helper';
import { tooltipRender } from '../../common/model/constants';
import { BulletChartAxis } from '../renderer/bullet-axis';
/**
* `BulletTooltip` module is used to render the tooltip for bullet chart.
*/
var BulletTooltip = /** @class */ (function () {
/**
* Constructor for tooltip module.
*
* @private
* @param {BulletChart} bullet - The bullet chart control.
*/
function BulletTooltip(bullet) {
this.control = bullet;
this.elementId = bullet.element.id;
this.bulletAxis = new BulletChartAxis(this.control);
}
/**
* To create tooltip div element.
*
* @param {PointerEvent} e - The pointer event.
* @param {string} targetClass - The class name of the target element.
* @param {string} targetId - The id of the target element.
* @param {number} mouseX - The X-coordinate of the mouse.
* @returns {void}
*/
BulletTooltip.prototype._elementTooltip = function (e, targetClass, targetId, mouseX) {
var tooltipDiv = this.control.createElement('div');
tooltipDiv.id = 'tooltip';
tooltipDiv.className = 'tooltipDiv';
var target = e.target;
var pageX = mouseX + 20;
var pageY = e.clientY;
var str = '';
var font = this.control.tooltip.textStyle.fontStyle ? this.control.tooltip.textStyle.fontStyle :
this.control.themeStyle.tooltipLabelFont.fontStyle;
var fill = this.control.tooltip.fill ? this.control.tooltip.fill : this.control.themeStyle.tooltipFill;
var color = this.control.themeStyle.tooltipLabelFont.color || this.control.themeStyle.tooltipBoldLabel;
var style = 'left:' + pageX + 'px;' + 'top:' + pageY + 'px;' +
'display: block; position: absolute; "z-index": "13000",cursor: default;' +
'font-family: Segoe UI;' + 'color:' + color + '; font-size: 13px; background-color:' +
fill + '; border: 1px solid #707070;' + 'font-style:' + font + ';';
// adding css prop to the div
tooltipDiv.style.cssText = style;
if (targetClass === this.control.svgObject.id + '_Caption') {
str = target.textContent === this.control.title ? '' : this.control.title;
}
else if (targetClass === this.control.svgObject.id + '_SubTitle') {
str = target.textContent === this.control.subtitle ? '' : this.control.subtitle;
}
if (str !== '') {
tooltipDiv.innerHTML = ' ' + str + ' ';
document.body.insertAdjacentElement('afterbegin', tooltipDiv);
}
};
/**
* To display the bullet chart tooltip.
*
* @param {PointerEvent} e - The pointer event.
* @param {string} targetClass - The class name of the target element.
* @param {string} targetId - The id of the target element.
* @param {number} mouseX - The X-coordinate of the mouse.
* @param {number} mouseY - The Y-coordinate of the mouse.
* @returns {void}
*/
BulletTooltip.prototype._displayTooltip = function (e, targetClass, targetId, mouseX, mouseY) {
if (targetClass !== 'undefined' && this.control.tooltip.enable && (targetClass === this.control.svgObject.id + '_FeatureMeasure' ||
targetClass === this.control.svgObject.id + '_ComparativeMeasure')) {
var targetVal = [];
var tooltipdiv = void 0;
var format = this.bulletAxis.getFormat(this.control);
var isCustomFormat = format.match('{value}') !== null;
var measureId = targetId.substring(targetId.lastIndexOf('_') + 1);
var targetValues = [];
this.bulletAxis.format = this.bulletAxis.bulletChart.intl.getNumberFormat({
format: isCustomFormat ? '' : format, useGrouping: this.bulletAxis.bulletChart.enableGroupSeparator
});
var currentVal = this.control.dataSource[measureId][this.control.valueField];
targetVal = targetVal.concat(this.control.dataSource[measureId][this.control.targetField]);
var categoryVal = this.control.dataSource[measureId][this.control.categoryField];
var labelCurrentText = currentVal ? (currentVal).toString() : '';
var labelTargetText = targetVal ? (targetVal).toString() : '';
var labelCategoryText = categoryVal ? (categoryVal).toString() : '';
labelCurrentText = this.bulletAxis.formatValue(this.bulletAxis, isCustomFormat, format, +currentVal);
for (var i = 0; i < targetVal.length; i++) {
targetValues = targetValues.concat(this.bulletAxis.formatValue(this.bulletAxis, isCustomFormat, format, +targetVal[i]));
}
labelCategoryText = this.bulletAxis.formatValue(this.bulletAxis, isCustomFormat, format, +categoryVal);
var data = { value: labelCurrentText, target: targetValues, category: labelCategoryText };
var tooltipData = { value: labelCurrentText, target: labelTargetText, category: labelCategoryText };
var style = 'position: absolute; z-index: 13000; display: block;';
if (document.getElementsByClassName('tooltipDiv' + this.control.element.id).length === 0) {
tooltipdiv = this.control.createElement('div');
tooltipdiv.id = 'tooltipDiv' + this.control.element.id;
tooltipdiv.style.cssText = style;
document.getElementById(this.control.element.id + '_Secondary_Element').appendChild(tooltipdiv);
}
var argsData = {
value: data.value, target: data.target, name: tooltipRender
};
if (this.control.tooltip.template !== '' && this.control.tooltip.template != null) {
this.updateTemplateFn();
var elem = this.control.createElement('div', { id: this.control.element.id + 'parent_template' });
var templateElement = this.templateFn(tooltipData, this.control, 'template', elem.id + '_blazorTemplate', '', null, elem);
while (templateElement && templateElement.length > 0) {
if (templateElement.length === 1) {
elem.appendChild(templateElement[0]);
templateElement = null;
}
else {
elem.appendChild(templateElement[0]);
}
}
argsData.template = elem.innerHTML;
this.control.trigger(tooltipRender, argsData);
elem.innerHTML = argsData.template;
tooltipdiv.appendChild(elem);
}
else {
var argsText = 'Value : ' + argsData.value;
for (var i = 0; i < argsData.target.length; i++) {
argsText += '<br/> Target' + (i === 0 ? '' : '_' + i) + ' : ' + argsData.target[i];
}
argsData.text = argsText;
this.control.trigger(tooltipRender, argsData);
tooltipdiv.innerHTML = argsData.text;
tooltipdiv.style.font = this.control.tooltip.textStyle.fontStyle ? this.control.tooltip.textStyle.fontStyle :
this.control.themeStyle.tooltipLabelFont.fontStyle;
tooltipdiv.style.color = this.control.themeStyle.tooltipLabelFont.color || this.control.themeStyle.tooltipBoldLabel;
tooltipdiv.style.fontSize = this.control.themeStyle.titleFont.size;
}
var fill = this.control.tooltip.fill ? this.control.tooltip.fill : this.control.themeStyle.tooltipFill;
var borderWidth = ((this.control.theme === 'Fabric' || this.control.theme === 'Fluent' && !this.control.tooltip.border.width) ? 1 : this.control.tooltip.border.width);
var borderColor = ((this.control.theme === 'Fabric' || this.control.theme === 'Fluent' && !this.control.tooltip.border.color) ? '#D2D0CE' : this.control.tooltip.border.color);
var borderDashArray = this.control.tooltip.border.dashArray ? 'dashed ' + borderColor + '; border-dasharray: ' + this.control.tooltip.border.dashArray + ';' : 'Solid' + ' ' + borderColor + ';';
var xPos = mouseX;
var yPos = mouseY;
xPos = ((xPos + stringToNumber(tooltipdiv.getAttribute('width'), this.control.containerWidth) < window.innerWidth) ?
(xPos) : stringToNumber(tooltipdiv.getAttribute('width'), this.control.containerWidth));
yPos = ((yPos + stringToNumber(tooltipdiv.getAttribute('height'), this.control.containerHeight) < window.innerHeight) ?
(yPos) : stringToNumber(tooltipdiv.getAttribute('height'), this.control.containerHeight));
if (xPos === undefined || xPos === null) {
xPos = mouseX;
}
if ((xPos + tooltipdiv.clientWidth) > this.control.availableSize.width) {
xPos -= tooltipdiv.clientWidth + 20;
}
if (yPos === undefined || yPos === null) {
yPos = e.clientY;
}
if (yPos + tooltipdiv.clientHeight > this.control.availableSize.height) {
yPos -= tooltipdiv.clientHeight + 20;
}
if (this.control.tooltip.template !== '' && this.control.tooltip.template != null) {
tooltipdiv.style.cssText = 'position: absolute;left:' + (xPos + 20) + 'px;' + 'top:' + (yPos + 20) + 'px;';
}
else {
var fontFamily = this.control.tooltip.textStyle.fontFamily || this.control.themeStyle.tooltipLabelFont.fontFamily;
var color = this.control.tooltip.textStyle.color || this.control.themeStyle.tooltipLabelFont.color;
var divStyle = style + 'left:' + (xPos + 20) + 'px;' + 'top:' + (yPos + 20) + 'px;' +
'-webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px;-o-border-radius: 5px 5px 5px 5px;' +
'border-radius: 5px 5px 5px 5px;' + 'background-color:' + fill + ';' + 'color:' +
color + '; border:' + borderWidth + 'px ' + borderDashArray +
'padding-bottom: 7px;' + 'font-style:' + this.control.themeStyle.tooltipLabelFont.fontStyle +
'; padding-left: 10px; font-family:' + fontFamily + '; font-size:' + this.control.tooltip.textStyle.size + '; padding-right: 10px; padding-top: 7px';
tooltipdiv.style.cssText = divStyle;
if (this.control.theme.indexOf('Fluent2') > -1) {
var shadowId = this.control.element.id + '_shadow';
var shadow = "<filter id=\"" + shadowId + "\" height=\"130%\"><feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"3\"/>" +
'<feOffset dx="-1" dy="3.6" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.2"/>' +
'</feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
var defElement = this.control.renderer.createDefs();
defElement.setAttribute('id', this.control.element.id + 'SVG_tooltip_definition');
tooltipdiv.appendChild(defElement);
defElement.innerHTML = shadow;
tooltipdiv.style.filter = "url(#" + shadowId + ")";
}
if ((targetClass === this.control.svgObject.id + '_FeatureMeasure') ||
(targetClass === this.control.svgObject.id + '_ComparativeMeasure')) {
document.getElementById(targetId).setAttribute('opacity', '0.6');
}
}
if (this.control.isReact) {
this.control.renderReactTemplates();
}
}
};
/**
* To update template values in the tooltip.
*
* @returns {void}
*/
BulletTooltip.prototype.updateTemplateFn = function () {
if (this.control.tooltip.template) {
try {
if (typeof this.control.tooltip.template !== 'function' &&
document.querySelectorAll(this.control.tooltip.template).length) {
this.templateFn = templateComplier(document.querySelector(this.control.tooltip.template).innerHTML.trim());
}
else {
this.templateFn = templateComplier(this.control.tooltip.template);
}
}
catch (e) {
this.templateFn = templateComplier(this.control.tooltip.template);
}
}
};
/**
* Get module name.
*
* @returns {string} - Returns the module name.
*/
BulletTooltip.prototype.getModuleName = function () {
return 'BulletTooltip';
};
/**
* To destroy the tooltip.
*
* @returns {void}
* @private
*/
BulletTooltip.prototype.destroy = function () {
// Destroy method called here
};
return BulletTooltip;
}());
export { BulletTooltip };