in src/visualComponent/kpi/captionKPIComponent.ts [140:201]
protected renderElement(
element: Selection<any, ICaptionKPIComponentOptionsValueSettings[], any, any>,
captions: ICaptionKPIComponentOptionsValueSettings[][],
containerSelector: CssConstants.ClassAndSelector,
selector: CssConstants.ClassAndSelector,
): void {
const containerSelection: Selection<any, ICaptionKPIComponentOptionsValueSettings[], any, any> = element
.selectAll(containerSelector.selectorName)
.data(captions);
const elementSelection: Selection<any, ICaptionKPIComponentOptionsValueSettings, any, any> = containerSelection
.enter()
.append("div")
.classed(containerSelector.className, true)
.merge(containerSelection)
.selectAll(selector.selectorName)
.data((captionItems: ICaptionKPIComponentOptionsValueSettings[]) => {
return (captionItems || []).filter((options: ICaptionKPIComponentOptionsValueSettings) => {
return options
&& options.settings
&& options.settings.show;
});
});
elementSelection
.enter()
.append("div")
.classed(selector.className, true)
.merge(elementSelection)
.attr("title", (options: ICaptionKPIComponentOptionsValueSettings) => options.title || null)
.attr("class", (options: ICaptionKPIComponentOptionsValueSettings) => {
let className: string = selector.className;
if (options.settings.isBold) {
className += " boldStyle";
}
if (options.settings.isItalic) {
className += " italicStyle";
}
if (options.className) {
className += ` ${options.className}`;
}
return className;
})
.style("color", (options: ICaptionKPIComponentOptionsValueSettings) => options.settings.fontColor)
.style("font-size", (options: ICaptionKPIComponentOptionsValueSettings) => {
return pixelConverter.toString(pixelConverter.fromPointToPixel(options.settings.fontSize));
})
.style("font-family", (options: ICaptionKPIComponentOptionsValueSettings) => options.settings.fontFamily)
.text((options: ICaptionKPIComponentOptionsValueSettings) => options.value);
elementSelection
.exit()
.remove();
containerSelection
.exit()
.remove();
}