public render()

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