in src/visualComponent/axes/xAxisComponent.ts [151:226]
public render(options: IXAxisComponentRenderOptions): void {
if (!this.areRenderOptionsValid(options)) {
this.hide();
this.axisProperties = null;
return;
}
const {
axis,
settings,
viewport,
margin,
additionalMargin,
} = options;
const width: number = Math.max(0, viewport.width - margin.left - margin.right);
this.axisProperties = this.getAxisProperties(
width,
axis.scale.getDomain(),
axis.metadata,
!axis.scale.isCategorical,
settings.density,
);
if (!this.isShown) {
return;
}
this.updateViewport({
height: this.maxElementHeight,
width,
});
this.element.style(
"margin-left",
pixelConverter.toString(margin.left + additionalMargin.left),
);
this.gElement.attr("transform", svgManipulation.translate(0, 0));
this.axisProperties.axis
.tickFormat((item: number) => {
const currentValue: any = axis.axisType === DataRepresentationTypeEnum.DateType
? new Date(item)
: item;
const formattedLabel: string = axis.axisType === DataRepresentationTypeEnum.DateType
? this.axisProperties.formatter.format(currentValue)
: this.formatter.format(currentValue);
let availableWidth: number = NaN;
if (this.maxElementWidth > width) {
availableWidth = width;
}
if (!isNaN(availableWidth)) {
return textMeasurementService.textMeasurementService.getTailoredTextOrDefault(
labelMeasurementService.getTextProperties(formattedLabel, settings.fontSizeInPx, settings.fontFamily),
availableWidth,
);
}
return formattedLabel;
});
this.gElement
.call(this.axisProperties.axis)
.attr("font-family", settings.fontFamily)
.attr("font-size", settings.fontSizeInPx)
.attr("fill", settings.fontColor)
.attr("color", settings.fontColor);
}