@carbon/charts
Version:
Carbon charting components
222 lines • 10.5 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { Component } from '../component';
import { Tools } from '../../tools';
import { DOMUtils } from '../../services';
import { Events, TruncationTypes } from '../../interfaces';
import * as Configuration from '../../configuration';
// Carbon position service
import Position, { PLACEMENTS } from '@carbon/utils-position';
// import the settings for the css prefix
import settings from 'carbon-components/es/globals/js/settings';
// D3 Imports
import { select, mouse } from 'd3-selection';
import { format } from 'date-fns';
var Tooltip = /** @class */ (function (_super) {
__extends(Tooltip, _super);
function Tooltip(model, services, configs) {
var _this = _super.call(this, model, services, configs) || this;
_this.type = 'tooltip';
// flag for checking whether tooltip event listener is added or not
_this.isEventListenerAdded = false;
_this.positionService = new Position();
_this.handleShowTooltip = function (e) {
var data = e.detail.data || e.detail.items;
var defaultHTML = _this.getTooltipHTML(e);
var tooltipTextContainer = DOMUtils.appendOrSelect(_this.tooltip, 'div.content-box');
// if there is a provided tooltip HTML function call it
if (Tools.getProperty(_this.getOptions(), 'tooltip', 'customHTML')) {
if (e.detail.content) {
var labelHTML = "<div class=\"title-tooltip\"><p>" + e.detail.content + "</p></div>";
tooltipTextContainer.html(labelHTML);
}
else {
tooltipTextContainer.html(_this.model
.getOptions()
.tooltip.customHTML(data, defaultHTML));
}
}
else {
// Use default tooltip
tooltipTextContainer.html(defaultHTML);
}
// Position the tooltip
_this.positionTooltip(e);
// Fade in
_this.tooltip.classed('hidden', false).attr('aria-hidden', false);
};
_this.handleHideTooltip = function () {
_this.tooltip.classed('hidden', true).attr('aria-hidden', true);
};
_this.init();
return _this;
}
Tooltip.prototype.addTooltipEventListener = function () {
var _this = this;
// listen to move-tooltip Custom Events to move the tooltip
this.services.events.addEventListener(Events.Tooltip.MOVE, function (e) {
_this.positionTooltip(e);
});
// listen to show-tooltip Custom Events to render the tooltip
this.services.events.addEventListener(Events.Tooltip.SHOW, this.handleShowTooltip);
// listen to hide-tooltip Custom Events to hide the tooltip
this.services.events.addEventListener(Events.Tooltip.HIDE, this.handleHideTooltip);
// listen to chart-mouseout event to hide the tooltip
this.services.events.addEventListener(Events.Chart.MOUSEOUT, this.handleHideTooltip);
};
Tooltip.prototype.removeTooltipEventListener = function () {
// remove move-tooltip Custom Events
this.services.events.removeEventListener(Events.Tooltip.MOVE, null);
// remove show-tooltip Custom Events
this.services.events.removeEventListener(Events.Tooltip.SHOW, this.handleShowTooltip);
// remove hide-tooltip Custom Events
this.services.events.removeEventListener(Events.Tooltip.HIDE, this.handleHideTooltip);
// remove the listener on chart-mouseout
this.services.events.removeEventListener(Events.Chart.MOUSEOUT, this.handleHideTooltip);
};
Tooltip.prototype.getItems = function (e) {
if (e.detail.items) {
return e.detail.items;
}
return [];
};
Tooltip.prototype.formatItems = function (items) {
var _this = this;
var options = this.getOptions();
// get user provided custom values for truncation
var truncationType = Tools.getProperty(options, 'tooltip', 'truncation', 'type');
var truncationThreshold = Tools.getProperty(options, 'tooltip', 'truncation', 'threshold');
var truncationNumCharacter = Tools.getProperty(options, 'tooltip', 'truncation', 'numCharacter');
// truncate the label if it's too long
// only applies to discrete type
if (truncationType !== TruncationTypes.NONE) {
return items.map(function (item) {
item.value = item.value
? _this.valueFormatter(item.value, item.label)
: item.value;
if (item.label && item.label.length > truncationThreshold) {
item.label = Tools.truncateLabel(item.label, truncationType, truncationNumCharacter);
}
if (item.value && item.value.length > truncationThreshold) {
item.value = Tools.truncateLabel(item.value, truncationType, truncationNumCharacter);
}
return item;
});
}
return items;
};
Tooltip.prototype.getTooltipHTML = function (e) {
var defaultHTML;
if (e.detail.content) {
defaultHTML = "<div class=\"title-tooltip\"><p>" + e.detail.content + "</p></div>";
}
else {
var items = this.getItems(e);
var formattedItems = this.formatItems(items);
defaultHTML =
"<ul class='multi-tooltip'>" +
formattedItems
.map(function (item) {
return "<li>\n\t\t\t\t\t\t\t<div class=\"datapoint-tooltip " + (item.bold ? 'bold' : '') + "\">\n\t\t\t\t\t\t\t\t" + (item.class ? "<a class=\"tooltip-color " + item.class + "\"></a>" : '') + "\n\t\t\t\t\t\t\t\t" + (item.color
? '<a style="background-color: ' +
item.color +
'" class="tooltip-color"></a>'
: '') + "\n\t\t\t\t\t\t\t\t<p class=\"label\">" + (item.label || '') + "</p>\n\t\t\t\t\t\t\t\t<p class=\"value\">" + (item.value || '') + "</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</li>";
})
.join('') +
"</ul>";
}
return defaultHTML;
};
Tooltip.prototype.valueFormatter = function (value, label) {
var options = this.getOptions();
var valueFormatter = Tools.getProperty(options, 'tooltip', 'valueFormatter');
if (valueFormatter) {
return valueFormatter(value, label);
}
if (typeof value.getTime === "function") {
return format(value, 'MMM d, yyyy');
}
return value.toLocaleString();
};
Tooltip.prototype.render = function () {
var options = this.getOptions();
var isTooltipEnabled = Tools.getProperty(options, 'tooltip', 'enabled');
if (isTooltipEnabled) {
// Grab the tooltip element
var holder = select(this.services.domUtils.getHolder());
var chartprefix = Tools.getProperty(options, 'style', 'prefix');
this.tooltip = DOMUtils.appendOrSelect(holder, "div." + settings.prefix + "--" + chartprefix + "--tooltip");
this.tooltip.style('max-width', null);
if (!this.isEventListenerAdded) {
this.addTooltipEventListener();
this.isEventListenerAdded = true;
}
this.tooltip.classed('hidden', true);
}
else if (!isTooltipEnabled && this.isEventListenerAdded) {
// remove tooltip eventListener
this.removeTooltipEventListener();
this.isEventListenerAdded = false;
}
};
Tooltip.prototype.positionTooltip = function (e) {
var holder = this.services.domUtils.getHolder();
var target = this.tooltip.node();
var options = this.getOptions();
var isTopZoomBarEnabled = Tools.getProperty(options, 'zoomBar', 'top', 'enabled');
var mouseRelativePos = Tools.getProperty(e, 'detail', 'mousePosition');
if (!mouseRelativePos) {
mouseRelativePos = mouse(holder);
}
else {
var zoombarType = Tools.getProperty(options, 'zoomBar', 'top', 'type');
var zoombarHeight = Configuration.zoomBar.height[zoombarType];
// if the mouse position is from event (ruler)
// we need add zoom bar height
if (isTopZoomBarEnabled) {
mouseRelativePos[1] +=
zoombarHeight + Configuration.zoomBar.spacerHeight;
// TODO - we need to add toolbar height when toolbar is available
}
}
var pos;
// Find out whether tooltip should be shown on the left or right side
var bestPlacementOption = this.positionService.findBestPlacementAt({
left: mouseRelativePos[0],
top: mouseRelativePos[1],
}, target, [
PLACEMENTS.RIGHT,
PLACEMENTS.LEFT,
PLACEMENTS.TOP,
PLACEMENTS.BOTTOM,
], function () { return ({
width: holder.offsetWidth,
height: holder.offsetHeight,
}); });
var horizontalOffset = Configuration.tooltips.horizontalOffset;
if (bestPlacementOption === PLACEMENTS.LEFT) {
horizontalOffset *= -1;
}
// Get coordinates to where tooltip should be positioned
pos = this.positionService.findPositionAt({
left: mouseRelativePos[0] + horizontalOffset,
top: mouseRelativePos[1],
}, target, bestPlacementOption);
this.positionService.setElement(target, pos);
};
return Tooltip;
}(Component));
export { Tooltip };
//# sourceMappingURL=../../../src/components/essentials/tooltip.js.map