public render()

in src/visualComponent/mainChart/chartLabelComponent.ts [71:139]


    public render(options: IChartLabelComponentRenderOptions): void {
        const {
            series,
            kpiSettings,
        } = options;

        this.updateFormatting(this.element, options.kpiSettings);

        if (!series || !series.points) {
            this.hide();

            return;
        } else {
            this.show();
        }

        const value: number = series.current ? series.current.y : NaN;

        this.renderGroup(
            this.headerSelector,
            [
                {
                    color: kpiSettings.seriesNameColor,
                    data: series.name,
                    fontSizeInPt: kpiSettings.seriesNameFontSize,
                    isShown: kpiSettings.isSeriesNameShown,
                },
            ],
        );

        const isVarianceValid: boolean = isValueValid(series.variance);

        this.renderGroup(
            this.bodySelector,
            [
                {
                    color: kpiSettings.valueColor,
                    data: getFormattedValueWithFallback(value, series.settings.values),
                    fontSizeInPt: kpiSettings.valueFontSize,
                    isShown: kpiSettings.isValueShown,
                },
                {
                    color: isVarianceValid
                        ? kpiSettings.varianceColor
                        : kpiSettings.varianceNotAvailableColor,
                    data: `(${series.formattedVariance})`,
                    fontSizeInPt: isVarianceValid
                        ? kpiSettings.varianceFontSize
                        : kpiSettings.varianceNotAvailableFontSize,
                    isShown: kpiSettings.isVarianceShown,
                    selector: isVarianceValid || !kpiSettings.autoAdjustFontSize
                        ? undefined
                        : this.varianceNotAvailableSelector,
                },
            ],
        );

        this.renderGroup(
            this.footerSelector,
            [
                {
                    color: kpiSettings.dateColor,
                    data: `${series.dateDifference} days`,
                    fontSizeInPt: kpiSettings.dateFontSize,
                    isShown: kpiSettings.isDateShown,
                },
            ],
        );
    }