public redraw()

in clns-acuity-vahub/vahub/src/main/webapp/src/vahub-charts/boxplot/BoxPlot.ts [196:332]
119 lines of code
6 McCabe index (conditional complexity)

    public redraw(animate = false): void {
        if (this.noDataMessage) {
            this.showNoData();
            return;
        }
        const dotsData = this.series.filter(data => data.type === DATA_TYPES.scatter).reduce((acc, val) => acc.concat(val.data), []);
        const boxesData = this.series.filter(data => data.type === DATA_TYPES.boxplot).reduce((acc, val) => acc.concat(val.data), []);
        const that = this;
        let innerSpace, selectedZonesContainer = null;
        this.setXAxis();
        const rotatedTicksMargin = rotatedLabelsMargin(this.xAxis[0], this.xScale, this.xAxisScale);
        const chartHeight = this.height - rotatedTicksMargin;
        this.setYAxis(chartHeight);

        if (animate) {
            innerSpace = this.svg.select('g');
            innerSpace.select('.y-axis')
                .transition()
                .duration(this.animationTime)
                .call(this.yAxisScale);
            innerSpace.select('.x-axis')
                .transition()
                .duration(this.animationTime)
                .attr('transform', `translate(0,${chartHeight})`)
                .call(this.xAxisScale);
            this.resizeClipPath(chartHeight);
        } else {
            this.svg.selectAll('g').remove();

            innerSpace = this.svg.append('g')
                .attr('transform', 'translate(' + this.margins.left + ',' + this.margins.top / 2 + ')');

            this.addClipPath(innerSpace, chartHeight);

            innerSpace.append('g')
                .attr('class', 'y-axis no-axis-line')
                .call(this.yAxisScale)
                .selectAll('line')
                .attr('stroke', PLOT_COLORS.lineColor);

            innerSpace.select('.no-axis-line')
                .select('path')
                .attr('stroke-width', '0');

            innerSpace.append('g')
                .attr('class', 'x-axis')
                .attr('transform', `translate(0,${chartHeight})`)
                .call(this.xAxisScale)
                .selectAll('line')
                .attr('stroke', PLOT_COLORS.lineColor);

            this.addTooltip();

            innerSpace.append('g')      // Add the brush feature
                .attr('class', 'brush')
                .attr('id', 'brush_' + this.id)
                .call(d3.brush()
                    .extent([[0, 0], [this.width, chartHeight]])
                    .filter(() => true) //reset filter that filters out events with ctrl button by default
                    .on('end', (event) => {
                        if (!event.selection) {
                            that.removeSelection();
                            this.update();
                            return;
                        }
                        const xMin = getReversedScaledValue(this.xAxis[0], this.xScale, event.selection[0][0]);
                        const xMax = getReversedScaledValue(this.xAxis[0], this.xScale, event.selection[1][0]);
                        const yMin = getReversedScaledValue(this.yAxis[0], this.yScale, event.selection[0][1]);
                        const yMax = getReversedScaledValue(this.yAxis[0], this.yScale, event.selection[1][1]);
                        const chartX = event.selection[1][0] + that.margins.left;
                        const chartY = event.selection[1][1] + that.margins.top;

                        const selectionCords = {
                            xAxis: [
                                {
                                    min: Math.min(xMin, xMax),
                                    max: Math.max(xMin, xMax),
                                }
                            ],
                            yAxis: [
                                {
                                    min: Math.min(yMin, yMax),
                                    max: Math.max(yMin, yMax),
                                }
                            ]
                        };
                        const originalEvent = {
                            ...event,
                            offsetX: chartX,
                            offsetY: chartY,
                            ctrlKey: event.sourceEvent.ctrlKey,
                        };
                        that.selection(getSelectionRequest(event, selectionCords, chartX, chartY, originalEvent));
                        innerSpace.select('.brush').call(d3.brush().clear);
                        this.setSelectedZone({
                            xMin,
                            xMax,
                            yMin: yMax,
                            yMax: yMin
                        }, event.originalEvent.ctrlKey);
                    })
                );
            innerSpace.selectAll('path')      // repaint chart borders for export
                .attr('stroke', PLOT_COLORS.lineColor);

            const axisLabels = innerSpace.append('g');   // axis labels
            this.drawAxisLabels(axisLabels);

            selectedZonesContainer = innerSpace.append('g')
                .attr('class', 'selection-zones')
                .attr('clip-path', this.clipPathURL);

            innerSpace.append('g')
                .attr('id', 'dots')
                .attr('clip-path', this.clipPathURL);

            innerSpace.append('g')
                .attr('id', 'boxes')
                .attr('clip-path', this.clipPathURL);

            innerSpace.on('mouseout', () => {
                this.handleMouseOut();
            });

            innerSpace.append('g').attr('class', 'line-container');
        }

        innerSpace.select('.x-axis')
            .selectAll('.tick text')
            .call(wrap(rotatedTicksMargin && this.width));

        this.redrawSelectionZones(this.getSelectedZoneX, this.getY, selectedZonesContainer, animate, this.xAxisBandwidth);
        this.drawPlotLines(innerSpace.select('.line-container'), animate);

        this.drawDots(dotsData, animate);
        this.drawBoxes(boxesData, animate);
    }