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