protected init()

in clns-acuity-vahub/vahub/src/main/webapp/src/vahub-charts/Chart.ts [161:255]
90 lines of code
15 McCabe index (conditional complexity)

    protected init(
        userOptions: UserOptions,
    ): void {
        const svg = d3.select(userOptions.chart.renderTo);
        this.series = [];
        this.container = userOptions.chart.renderTo;
        if (userOptions.chart.events) {
            this.click = userOptions.chart.events.click;
            this.selection = userOptions.chart.events.selection;
            this.removeSelection = userOptions.chart.events.removeSelection;
            this.displayMarkingDialogue = userOptions.chart.events.displayMarkingDialogue;
        }
        this.animationTime = userOptions.chart.animationTime || 0;
        this.title = userOptions.title.text;
        this.chartType = userOptions.chart.type;
        this.tooltip = userOptions.tooltip;
        this.calculateSize(userOptions.chart.height, svg.node().offsetWidth);
        this.id = `svg_${userOptions.chart.id || global_id}`;
        this.setAxis();
        if (userOptions.xAxis) {
            this.setAxisProperties(userOptions.xAxis, this.xAxis);
        }
        if (userOptions.yAxis) {
            this.setAxisProperties(userOptions.yAxis, this.yAxis);
        }
        if (userOptions.chart.margins) {
            this.margins = {...this.margins, ...userOptions.chart.margins};
        }
        this.plotLines = userOptions.plotLines || [];
        this.isInverted = userOptions.chart.isInverted || false;
        global_id++;
        if (!userOptions.chart.disableExport) {
            const buttons = userOptions.exporting.buttons;
            svg.html('<div style="display: flex">' +
                '<div class="custom-export"></div>' +
                '<div class="chart-title">' + this.title + '</div>' +
                '</div>')
                .select('.custom-export')
                .html(
                    '<button class="chart-dropdown-toggle" type="button">\n' +
                    '<svg height="24" width="26" style="pointer-events: none">' +
                    '<path fill="#666666" d="M 6 6.5 L 20 6.5 M 6 11.5 L 20 11.5 M 6 16.5 L 20 16.5" ' +
                    'stroke="#666666" stroke-linecap="round" stroke-width="3" style="pointer-events: none">' +
                    '</path></svg></button>')
                .append('ul')
                .attr('id', 'export-list')
                .attr('class', 'chart-dropdown-list')
                .selectAll('li')
                .data(buttons)
                .enter()
                .append('li')
                .text((d) => (d.text))
                .on('click', (e, d) => {
                        const handleClick = d.onclick.bind(this);
                        handleClick();
                    }
                );

            svg.select('.custom-export')
                .style({'margin-left': this.margins.left});

            svg.select('.chart-dropdown-toggle')
                .on('click', () => {
                    if (svg.select('#export-list').style('display') === 'none') {
                        svg.select('#export-list')
                            .style('display', 'block');
                        // handle click outside
                        window.addEventListener('click', function handler(e) {
                            if (typeof (e.target as HTMLTextAreaElement).className !== 'string' ||
                                !(e.target as HTMLTextAreaElement).className.includes('chart-dropdown-toggle')) {
                                svg.select('#export-list')
                                    .style('display', 'none');
                                window.removeEventListener('click', handler);
                            }
                        });
                    } else {
                        svg.select('#export-list')
                            .style('display', 'none');
                    }
                });
        }
        svg.append('svg')
            .attr('id', this.id)
            .attr('width', '100%')
            .attr('height', this.height + this.margins.bottom + this.margins.top);

        this.svg = d3.select(this.container).select(`#${this.id}`);

        window.addEventListener('resize', () => this.handleResize());
        this.svg.on('mousedown', (e) => {
            if (e.target.tagName !== 'text' && e.target.tagName !== 'tspan') {
                e.preventDefault();
            }
        });
    }