public render()

in src/visualComponent/mainChart/hoverLabelComponent.ts [65:164]


    public render(options: IHoverLabelComponentRenderOptions) {
        const {
            series,
            dataPoint,
            kpiOnHoverSettings,
            dateSettings,
            varianceSettings,
        } = options;

        this.updateFormatting(this.element, kpiOnHoverSettings);

        if (!series || !series.points || !dataPoint || !series.points.length) {
            this.hide();
            return;
        } else {
            this.show();
        }

        const latestDataPoint: IDataRepresentationPoint = series.current;
        const variance: number = createVarianceConverterByType(varianceSettings.shouldCalculateDifference)
            .convert({
                firstDataPoint: dataPoint,
                secondDataPoint: latestDataPoint,
            });

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

        );

        const isVarianceValid: boolean = isValueValid(variance);
        const tooltipText: string = series && series.formattedTooltip || null;
        let tooltipDataItems: VisualTooltipDataItem[];

        if (tooltipText) {
            tooltipDataItems = [{
                displayName: null,
                value: tooltipText,
            }];
        }

        this.renderGroup(
            this.bodySelector,
            [
                {
                    color: kpiOnHoverSettings.valueColor,
                    data: getFormattedValueWithFallback((latestDataPoint ? latestDataPoint.y : NaN), series.settings.values),
                    fontSizeInPt: kpiOnHoverSettings.valueFontSize,
                    isShown: kpiOnHoverSettings.isValueShown,
                    tooltipDataItems,
                },
                {
                    color: isVarianceValid
                        ? kpiOnHoverSettings.varianceColor
                        : kpiOnHoverSettings.varianceNotAvailableColor,
                    data: `(${getFormattedValueWithFallback(variance, varianceSettings)})`,
                    fontSizeInPt: isVarianceValid
                        ? kpiOnHoverSettings.varianceFontSize
                        : kpiOnHoverSettings.varianceNotAvailableFontSize,
                    isShown: kpiOnHoverSettings.isVarianceShown,
                    selector: isVarianceValid || !kpiOnHoverSettings.autoAdjustFontSize
                        ? undefined
                        : this.varianceNotAvailableSelector,
                    tooltipDataItems,
                },
            ],
        );

        const dateGroup: IRenderGroup[] = [
            {
                color: kpiOnHoverSettings.currentValueColor,
                data: getFormattedValueWithFallback(dataPoint.y, series.settings.values),
                fontSizeInPt: kpiOnHoverSettings.currentValueFontSize,
                isShown: kpiOnHoverSettings.isCurrentValueShown,
            },
            {
                color: kpiOnHoverSettings.dateColor,
                data: getFormattedDate(dataPoint.x, dateSettings.getFormat()),
                fontSizeInPt: kpiOnHoverSettings.dateFontSize,
                isShown: kpiOnHoverSettings.isDateShown,
            },
        ];

        const dateGroupToRender: IRenderGroup[] = kpiOnHoverSettings.isCurrentValueLeftAligned
            ? dateGroup
            : [...dateGroup].reverse(); // Makes dateGroupBase array immutable

        this.renderGroup(
            this.footerSelector,
            dateGroupToRender,
        );
    }