public render()

in src/visualComponent/kpi/varianceComponentWithIndicator.ts [60:207]


    public render(options: IVisualComponentRenderOptions): void {
        const {
            series,
            settings: {
                dateLabelKPI,
                dateValueKPI,
                actualValueKPI,
                actualLabelKPI,
                secondKPIIndicatorValue,
                secondKPIIndicatorLabel,
                kpiIndicatorValue,
                kpiIndicatorLabel,
                kpiIndicator,
            },
            variance,
        } = options.data;

        const { current } = series && series.length > 0 && series[0];
        let kpiIndex: number = NaN;

        if (current) {
            kpiIndex = current.kpiIndex;
        }

        const kpiIndicatorSettings: IKPIIndicatorSettings = kpiIndicator.getCurrentKPI(kpiIndex);

        const varianceSettings: KPIIndicatorValueDescriptor = { ...kpiIndicatorValue } as unknown as KPIIndicatorValueDescriptor;
        const kpiLabelSettings: KPIIndicatorValueDescriptor = { ...kpiIndicatorLabel } as unknown as KPIIndicatorValueDescriptor;

        kpiLabelSettings.show = kpiIndicatorLabel.isShown();

        varianceSettings.fontColor = kpiIndicatorValue.matchKPIColor
            && kpiIndicatorSettings
            && kpiIndicatorSettings.color
            ? kpiIndicatorSettings.color
            : kpiIndicatorValue.fontColor;

        if (isNaN(variance[0])) {
            varianceSettings.show = false;
        }

        const indicatorSettings: KPIIndicatorValueDescriptor = new KPIIndicatorValueDescriptor();

        indicatorSettings.fontColor = kpiIndicatorSettings.color;
        indicatorSettings.show = kpiIndicator.show;
        indicatorSettings.isBold = false; // This options doesn't make any sense for symbol
        indicatorSettings.fontSize = kpiIndicator.fontSize;
        indicatorSettings.fontFamily = null;

        if (isNaN(kpiIndex)) {
            indicatorSettings.show = false;
        }

        if (isNaN(variance[0]) && isNaN(kpiIndex)) {
            kpiLabelSettings.show = false;
        }

        let currentAlign: AlignEnum = AlignEnum.alignRight;

        if (!dateLabelKPI.show
            && !dateValueKPI.show
            && !actualLabelKPI.show
            && (!actualValueKPI.show || series[0] && series[0].current && isNaN(series[0] && series[0].current.y))
            && (!secondKPIIndicatorValue.show && !secondKPIIndicatorLabel.isShown() || isNaN(variance[1]))) {
            currentAlign = AlignEnum.alignLeft;
        } else if (!varianceSettings.show && !kpiLabelSettings.show) {
            currentAlign = AlignEnum.alignCenter;
        }

        const className: string = kpiIndicatorSettings.shape
            ? `${this.indicatorClassName} ${this.glyphClassName} ${kpiIndicatorSettings.shape}`
            : undefined;

        const title: string = kpiIndicatorLabel.label || `${variance[0]}`;

        const indicatorCaption: ICaptionKPIComponentOptionsValueSettings = {
            className,
            settings: indicatorSettings,
            title,
            value: "",
        };

        const fakedIndicatorSettings: KPIIndicatorValueDescriptor = new KPIIndicatorValueDescriptor();

        // We should implement a copy method for settings
        fakedIndicatorSettings.fontColor = indicatorSettings.fontColor;
        fakedIndicatorSettings.show = indicatorSettings.show;
        fakedIndicatorSettings.isBold = indicatorSettings.isBold;
        fakedIndicatorSettings.fontSize = indicatorSettings.fontSize;

        fakedIndicatorSettings.show = fakedIndicatorSettings.show
            && varianceSettings.show
            && kpiLabelSettings.show
            && !!kpiIndicatorLabel.label;

        const fakedIndicatorCaption: ICaptionKPIComponentOptionsValueSettings = {
            className: className
                ? `${className} ${this.hiddenElementClassName} ${this.fakedKPIIndicatorClassName}`
                : `${this.hiddenElementClassName} ${this.fakedKPIIndicatorClassName}`,
            settings: fakedIndicatorSettings,
            title,
            value: "",
        };

        const formatter: valueFormatter.IValueFormatter = this.getValueFormatter(
            varianceSettings.displayUnits,
            varianceSettings.precision,
            kpiIndicatorValue.getFormat(),
        );

        const valueCaption: ICaptionKPIComponentOptionsValueSettings = {
            settings: varianceSettings,
            title,
            value: formatter.format(variance[0]),
        };

        const labelCaption: ICaptionKPIComponentOptionsValueSettings = {
            className: this.indicatorValueClassName,
            settings: kpiLabelSettings,
            value: kpiIndicatorLabel.label,
        };

        const captions: ICaptionKPIComponentOptionsValueSettings[][] = [];

        switch (HorizontalLayoutEnum[kpiIndicator.position]) {
            case HorizontalLayoutEnum.Right: {
                captions.push(
                    [valueCaption, indicatorCaption],
                    [labelCaption, fakedIndicatorCaption]);

                break;
            }
            case HorizontalLayoutEnum.Left:
            default: {
                captions.push(
                    [indicatorCaption, valueCaption],
                    [fakedIndicatorCaption, labelCaption]);

                break;
            }
        }

        super.render({
            align: currentAlign,
            captions,
            data: options.data,
        });
    }