Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
init() {
// Grab the tooltip element
const holder = select(this.services.domUtils.getHolder());
const chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
this.tooltip = DOMUtils.appendOrSelect(holder, `div.${settings.prefix}--${chartprefix}--tooltip`);
// Apply html content to the tooltip
const tooltipTextContainer = DOMUtils.appendOrSelect(this.tooltip, "div.content-box");
// listen to show-tooltip Custom Events to render the tooltip
this.services.events.addEventListener("show-tooltip", e => {
// check the type of tooltip and that it is enabled
if ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(this.model.getOptions(), "tooltip", "datapoint", "enabled"))
|| (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(this.model.getOptions(), "tooltip", "gridline", "enabled")) ) {
let data = select(event.target).datum() as any;
// if there is a provided tooltip HTML function
if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(data));
} else if (e.detail.multidata) {
const renderCb = () => {
const title = select(`g.${settings.prefix}--${options.chart.style.prefix}--title`);
// Remove event listener for when chart render is finished
chartEventsService.removeEventListener("render-finished", renderCb);
expect(title.select("text").html()).toEqual(sampleTitle);
done();
};
styleHolderElement() {
const holderElement = this.getHolder() as HTMLElement;
const { width, height } = this.model.getOptions();
// Add class to chart holder
select(this.getHolder()).classed(`${settings.prefix}--chart-holder`, true);
// If width exists in options
if (width) {
// Apply formatted width attribute to chart
holderElement.style.width = Tools.formatWidthHeightValues(width);
}
// If height exists in options
if (height) {
// Apply formatted height attribute to chart
holderElement.style.height = Tools.formatWidthHeightValues(height);
}
}
// if there is a provided tooltip HTML function call it and pass the defaultTooltip
if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(hoveredElement, defaultTooltip));
} else {
// default tooltip
tooltipTextContainer.html(defaultTooltip);
}
const position = this.getTooltipPosition(hoveredElement);
// Position the tooltip relative to the bars
this.positionTooltip(e.detail.multidata ? undefined : position);
} else if (e.detail.type === TooltipTypes.TITLE) {
// use the chart size to enforce a max width on the tooltip
const chart = DOMUtils.appendOrSelect(holder, `svg.${settings.prefix}--${chartprefix}--chart-svg`);
// use the configs to determine how large the tooltip should be
const tooltipMax = DOMUtils.getSVGElementSize(chart).width * Tools.getProperty(this.model.getOptions(), "tooltip", "title", "width");
this.tooltip.style("max-width", tooltipMax);
// use tooltip.ts to get the tooltip html for titles
tooltipTextContainer.html(super.getTooltipHTML(e.detail.hoveredElement, TooltipTypes.TITLE));
// get the position based on the title positioning (static)
const position = super.getTooltipPosition(e.detail.hoveredElement.node());
this.positionTooltip(position);
}
// Fade in
this.tooltip.classed("hidden", false);
});
const renderCb = () => {
// Remove render event listener
chartEventsService.removeEventListener("render-finished", renderCb);
const numberOfLegendItems = select(`g.${settings.prefix}--${options.chart.style.prefix}--legend`).selectAll("g.legend-item").size();
expect(numberOfLegendItems).toEqual(numberOfDatasets);
done();
};
setParent(parent) {
const oldParent = this.parent;
this.parent = parent;
if (oldParent && oldParent.node() === parent.node()) {
return;
}
if (this.type) {
const chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
this.parent.classed(`${settings.prefix}--${chartprefix}--${this.type}`, true);
if (oldParent) {
oldParent.classed(`${settings.prefix}--${chartprefix}--${this.type}`, false);
}
}
}