private renderChart()

in src/visual.ts [2233:2541]
260 lines of code
43 McCabe index (conditional complexity)

    private renderChart(
        mainAxisScale: any,
        axes: MekkoChartAxisProperties,
        width: number,
        tickLabelMargins: any,
        chartHasAxisLabels: boolean,
        axisLabels: MekkoChartAxesLabels,
        viewport: IViewport,
        suppressAnimations: boolean,
        scrollScale?: any,
        extent?: number[]) {

        const bottomMarginLimit: number = this.bottomMarginLimit,
            leftRightMarginLimit: number = this.leftRightMarginLimit,
            layers: IColumnChart[] = this.layers,
            duration: number = MekkoChart.AnimationDuration,
            chartViewport: IViewport = MekkoChart.getChartViewport(viewport, this.margin);

        let xLabelColor: Fill,
            yLabelColor: Fill,
            y2LabelColor: Fill,
            xFontSize: any,
            yFontSize: any;

        if (this.shouldRenderAxis(axes.x)) {
            if (axes.x.isCategoryAxis) {
                xLabelColor = this.categoryAxisProperties
                    && this.categoryAxisProperties["labelColor"]
                    ? <Fill>this.categoryAxisProperties["labelColor"]
                    : MekkoChart.DefaultSettings.categoryAxis.labelColor;

                xFontSize = this.categoryAxisProperties
                    && this.categoryAxisProperties["fontSize"] != null
                    ? <Fill>this.categoryAxisProperties["fontSize"]
                    : MekkoChart.DefaultLabelFontSizeInPt;
            } else {
                xLabelColor = this.valueAxisProperties
                    && this.valueAxisProperties["labelColor"]
                    ? <Fill>this.valueAxisProperties["labelColor"]
                    : MekkoChart.DefaultSettings.valueAxis.labelColor;

                xFontSize = this.valueAxisProperties
                    && this.valueAxisProperties["fontSize"]
                    ? this.valueAxisProperties["fontSize"]
                    : MekkoChart.DefaultLabelFontSizeInPt;
            }

            xFontSize = PixelConverter.fromPointToPixel(xFontSize);

            // axes.x.axis.orient("bottom");
            if (!axes.x.willLabelsFit) {
                axes.x.axis.tickPadding(MekkoChart.TickPaddingRotatedX);
            }

            const xAxisGraphicsElement: Selection = this.xAxisGraphicsContext;

            if (duration) {
                xAxisGraphicsElement
                    .transition()
                    .duration(duration)
                    .call(axes.x.axis);
            }
            else {
                xAxisGraphicsElement
                    .call(axes.x.axis);
            }

            xAxisGraphicsElement
                .call(MekkoChart.darkenZeroLine)
                .call(MekkoChart.setAxisLabelColor, xLabelColor)
                .call(MekkoChart.setAxisLabelFontSize, xFontSize);

            const xAxisTextNodes: Selection = xAxisGraphicsElement.selectAll("text");

            let columnWidth: number[] = [],
                borderWidth: number = 0;

            if (this.layers && this.layers.length) {
                columnWidth = this.layers[0].getColumnsWidth();
                borderWidth = this.layers[0].getBorderWidth();
            }

            xAxisGraphicsElement
                .call(
                    MekkoChart.moveBorder,
                    axes.x.scale,
                    borderWidth,
                    xFontSize / MekkoChart.XFontSizeDelimiter - MekkoChart.XFontSizeOffset);

            let xAxisLabelssettings: MekkoXAxisLabelsSettings = (<BaseColumnChart>this.layers[0]).getXAxisLabelsSettings();
            if (!xAxisLabelssettings.enableRotataion) {
                xAxisTextNodes
                    .call(
                        MekkoChart.wordBreak,
                        axes.x,
                        columnWidth,
                        bottomMarginLimit,
                        borderWidth);
            }
            else {
                xAxisTextNodes
                    .classed(MekkoChart.LabelMiddleSelector.className, true)
                    .attr("dx", MekkoChart.DefaultLabelDx)
                    .attr("dy", MekkoChart.DefaultLabelDy)
                    .attr("transform", `rotate(-${MekkoChart.CategoryTextRotataionDegree})`);

                // fix positions
                let categoryLabels = xAxisGraphicsElement.selectAll(".tick");
                categoryLabels.each(function (tick, index) {
                    let shiftX: number = (<any>this).getBBox().width / Math.tan(MekkoChart.CategoryTextRotataionDegree * Math.PI / 180) / 2.0;
                    let shiftY: number = (<any>this).getBBox().width * Math.tan(MekkoChart.CategoryTextRotataionDegree * Math.PI / 180) / 2.0;
                    let currTransform: string = (<any>this).attributes.transform.value;
                    let translate: [number, number, number] = MekkoChart.getTranslation(currTransform);
                    select(<any>this)
                        .attr("transform", (value: number, index: number) => {
                            return manipulation.translate(+translate[0] - shiftX, +translate[1] + shiftY);
                        });
                });
            }
        }
        else {
            this.xAxisGraphicsContext
                .selectAll("*")
                .remove();
        }

        if (this.shouldRenderAxis(axes.y1)) {
            if (axes.y1.isCategoryAxis) {
                yLabelColor = this.categoryAxisProperties && this.categoryAxisProperties["labelColor"]
                    ? <Fill>this.categoryAxisProperties["labelColor"]
                    : null;

                yFontSize = this.categoryAxisProperties && this.categoryAxisProperties["fontSize"] != null
                    ? this.categoryAxisProperties["fontSize"]
                    : MekkoChart.DefaultLabelFontSizeInPt;
            } else {
                yLabelColor = this.valueAxisProperties && this.valueAxisProperties["labelColor"]
                    ? <Fill>this.valueAxisProperties["labelColor"]
                    : null;

                yFontSize = this.valueAxisProperties && this.valueAxisProperties["fontSize"] != null
                    ? this.valueAxisProperties["fontSize"]
                    : MekkoChart.DefaultLabelFontSizeInPt;
            }

            yFontSize = PixelConverter.fromPointToPixel(yFontSize);

            const yAxisOrientation: string = this.yAxisOrientation,
                showY1OnRight: boolean = yAxisOrientation === axisPosition.right;

            axes.y1.axis
                .tickSize(-width)
                .tickPadding(MekkoChart.TickPaddingY);

            const y1AxisGraphicsElement: Selection = this.y1AxisGraphicsContext;

            if (duration) {
                y1AxisGraphicsElement
                    .transition()
                    .duration(duration)
                    .call(axes.y1.axis);
            }
            else {
                y1AxisGraphicsElement
                    .call(axes.y1.axis);
            }

            y1AxisGraphicsElement
                .call(MekkoChart.darkenZeroLine)
                .call(MekkoChart.setAxisLabelColor, yLabelColor)
                .call(MekkoChart.setAxisLabelFontSize, yFontSize);

            if (tickLabelMargins.yLeft >= leftRightMarginLimit) {
                y1AxisGraphicsElement
                    .selectAll("text")
                    .call(AxisHelper.LabelLayoutStrategy.clip,
                        leftRightMarginLimit - MekkoChart.LeftPadding,
                        textMeasurementService.svgEllipsis);
            }

            if (axes.y2
                && (!this.valueAxisProperties
                    || this.valueAxisProperties["secShow"] == null
                    || this.valueAxisProperties["secShow"])) {

                y2LabelColor = this.valueAxisProperties && this.valueAxisProperties["secLabelColor"]
                    ? <Fill>this.valueAxisProperties["secLabelColor"]
                    : null;

                axes.y2.axis
                    .tickPadding(MekkoChart.TickPaddingY);

                if (duration) {
                    this.y2AxisGraphicsContext
                        .transition()
                        .duration(duration)
                        .call(axes.y2.axis);
                }
                else {
                    this.y2AxisGraphicsContext
                        .call(axes.y2.axis);
                }

                this.y2AxisGraphicsContext
                    .call(MekkoChart.darkenZeroLine)
                    .call(MekkoChart.setAxisLabelColor, y2LabelColor);

                if (tickLabelMargins.yRight >= leftRightMarginLimit) {
                    this.y2AxisGraphicsContext
                        .selectAll("text")
                        .call(AxisHelper.LabelLayoutStrategy.clip,
                            leftRightMarginLimit - MekkoChart.RightPadding,
                            textMeasurementService.svgEllipsis);
                }
            }
            else {
                this.y2AxisGraphicsContext
                    .selectAll("*")
                    .remove();
            }
        }
        else {
            this.y1AxisGraphicsContext
                .selectAll("*")
                .remove();

            this.y2AxisGraphicsContext
                .selectAll("*")
                .remove();
        }

        this.translateAxes(viewport);

        // Axis labels
        if (chartHasAxisLabels) {
            const hideXAxisTitle: boolean = !this.shouldRenderAxis(
                axes.x,
                MekkoChart.ShowAxisTitlePropertyName);

            const hideYAxisTitle: boolean = !this.shouldRenderAxis(
                axes.y1,
                MekkoChart.ShowAxisTitlePropertyName);

            const hideY2AxisTitle: boolean = this.valueAxisProperties
                && this.valueAxisProperties[MekkoChart.SecondShowAxisTitlePropertyName] != null
                && this.valueAxisProperties[MekkoChart.SecondShowAxisTitlePropertyName] === false;

            const renderAxisOptions: MekkoAxisRenderingOptions = {
                axisLabels: axisLabels,
                legendMargin: this.legendMargins.height,
                viewport: viewport,
                hideXAxisTitle: hideXAxisTitle,
                hideYAxisTitle: hideYAxisTitle,
                hideY2AxisTitle: hideY2AxisTitle,
                xLabelColor: xLabelColor,
                yLabelColor: yLabelColor,
                y2LabelColor: y2LabelColor,
                margin: undefined
            };

            this.renderAxesLabels(renderAxisOptions, xFontSize);
        }
        else {
            this.axisGraphicsContext
                .selectAll(MekkoChart.XAxisLabelSelector.selectorName)
                .remove();

            this.axisGraphicsContext
                .selectAll(MekkoChart.XAxisLabelSelector.selectorName)
                .selectAll(MekkoChart.YAxisLabelSelector.selectorName)
                .remove();
        }

        let dataPoints: SelectableDataPoint[] = [],
            layerBehaviorOptions: any[] = [];

        if (this.behavior) {
            let resultsLabelDataPoints: LabelDataPoint[] = [];

            for (let layerIndex: number = 0; layerIndex < layers.length; layerIndex++) {
                const result: MekkoVisualRenderResult = layers[layerIndex].render(suppressAnimations);

                if (result) {
                    dataPoints = dataPoints.concat(result.dataPoints);
                    layerBehaviorOptions.push(result.behaviorOptions);

                    resultsLabelDataPoints = resultsLabelDataPoints.concat(result.labelDataPoints);
                }
            }

            let forceDisplay: boolean = (<MekkoChartLabelSettings>(<MekkoColumnChartData>layers[0].getData()).labelSettings).forceDisplay;
            drawDefaultLabelsForDataPointChart(
                resultsLabelDataPoints,
                this.labelGraphicsContextScrollable,
                this.getLabelLayout(forceDisplay),
                this.currentViewport, false, 0, false, !forceDisplay);

            if (this.interactivityService) {
                const behaviorOptions: CustomVisualBehaviorOptions = {
                    layerOptions: layerBehaviorOptions,
                    clearCatcher: this.clearCatcher,
                    dataPoints: dataPoints,
                    behavior: this.behavior,
                };

                this.interactivityService.bind(behaviorOptions);
            }
        }
    }