protected renderElement()

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();
    }