in src/visualComponent/tooltipComponent.ts [100:241]
private showTooltip(options: IEventPositionVisualComponentOptions): void {
const {
position,
data: {
x,
series,
settings: {
kpiIndicator,
tooltipLabel,
tooltipVariance,
secondTooltipVariance,
tooltipValues,
legend,
},
variances,
},
} = options;
if (!tooltipLabel.show
&& !tooltipVariance.show
&& !tooltipValues.show
&& !secondTooltipVariance.show
) {
this.clear();
return;
}
let dataItems: IVisualTooltipDataItem[] = [];
const firstVariance: IVisualTooltipDataItem = this.getVarianceTooltip(
series[0] && series[0].points[0],
series[1] && series[1].points[0],
tooltipVariance,
this.varianceDisplayName,
kpiIndicator.getCurrentKPI(
series[0]
&& series[0].points[0]
&& series[0].points[0].kpiIndex),
(variances[0] || [])[0],
legend,
series[0] && series[0].settings,
);
if (firstVariance) {
dataItems.push(firstVariance);
}
const secondVariance: IVisualTooltipDataItem = this.getVarianceTooltip(
series[0] && series[0].points[0],
series[2] && series[2].points[0],
secondTooltipVariance,
this.secondVarianceDisplayName,
undefined,
(variances[1] || [])[0],
);
if (secondVariance) {
dataItems.push(secondVariance);
}
if (dataItems.length) {
dataItems.push(
this.getTooltipSeparator(),
this.getTooltipSeparator(),
);
}
if (tooltipValues.show) {
series.forEach((dataSeries: IDataRepresentationSeries) => {
const valueFormatterInstance: valueFormatter.IValueFormatter = this.getValueFormatterByFormat(
dataSeries.format || this.numberFormat,
tooltipValues.displayUnits,
tooltipValues.precision,
);
const dataSeriesPoint: IDataRepresentationPoint = dataSeries
&& dataSeries.points
&& dataSeries.points[0];
if (dataSeriesPoint
&& dataSeriesPoint.y !== null
&& dataSeriesPoint.y !== undefined
&& !isNaN(dataSeriesPoint.y)
) {
dataItems.push({
color: dataSeries.settings.line.fillColor,
displayName: `${dataSeries.name}`,
lineColor: dataSeries.settings.line.fillColor,
lineStyle: legend.getLegendLineStyle(dataSeries.settings.line.lineStyle),
markerShape: legend.getLegendMarkerShape(),
value: valueFormatterInstance.format(dataSeriesPoint.y),
});
}
});
}
const point: IDataRepresentationPoint = series
&& series[0]
&& series[0].points
&& series[0].points[0];
if (tooltipLabel.show
&& point
&& point.x !== undefined
&& point.x !== null
) {
const formatter: valueFormatter.IValueFormatter = this.getValueFormatterByFormat(
tooltipLabel.getFormat(),
x.axisType === DataRepresentationTypeEnum.NumberType
? tooltipLabel.displayUnits
: undefined,
x.axisType === DataRepresentationTypeEnum.NumberType
? tooltipLabel.precision
: undefined);
const text: string = formatter
? formatter.format(point.x)
: point.x as string;
dataItems = [
{
color: this.transparentColor,
displayName: "",
markerShape: this.getTooltipMarkerShape(TooltipMarkerShapeEnum.circle),
value: text,
},
...dataItems,
];
}
if (dataItems.length) {
this.constructorOptions.tooltipService.show({
coordinates: this.getCoordinates(position.x, position.y),
dataItems,
identities: [],
isTouchEvent: false,
});
} else {
this.clear();
}
}