public render()

in src/UXClient/Components/Slider/Slider.ts [55:130]
67 lines of code
6 McCabe index (conditional complexity)

	public render(data: Array<any>, options: any, width: number, selectedLabel: string = null){
        this.chartOptions.setOptions(options);
        this.data = data;
        this.isAscendingTimePeriods = this.determineIfAscendingTimePeriods();
        this.width = width;
        var marginsTotal = this.margins.left + this.margins.right
        this.sliderWidth = width - marginsTotal;
		var targetElement = d3.select(this.renderTarget);		
		if(targetElement.style("position") == "static")
            targetElement.style("position", "relative");
        if (selectedLabel)
            this.selectedLabel = selectedLabel;

        this.xScale = d3.scalePoint()
            .domain(data.map((d) => d.label))
            .range([0, this.sliderWidth]);

        width = Math.max(width, marginsTotal);
        var self = this;
        
        if (this.sliderSVG == null) {
            this.sliderSVG = targetElement.append("svg")
                .attr("class", "tsi-sliderComponent");
            var slider = this.sliderSVG.append("g")
                .attr("class", "slider tsi-sliderG")
            slider.append("line")
                .attr("class", "slider-track tsi-sliderTrack")
                .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
                .attr("class", "track-overlay tsi-sliderTrackOverlay")
                .call(d3.drag()
                    .on("start.interrupt", function() { slider.interrupt(); })
                    .on("start drag", (d) => { 
                        self.onDrag(d3.event.x); 
                    })
                    .on("end", (d) => {
                        self.onDragEnd(d3.event.x);
                    })
                );

            slider.insert("circle", ".track-overlay")
                .attr("class", "handle tsi-sliderHandle")
                .attr("r", 6);

            this.sliderTextDiv = targetElement.append("div")
                .attr("class", "tsi-sliderLabel")
                .attr("tabindex", 0)
                .attr("aria-label", selectedLabel)
                .on("keydown", () => {
                    if (d3.event.keyCode == 37) {
                        this.moveLeft();
                    }
                    if (d3.event.keyCode == 39) {
                        this.moveRight();
                    }
                });
        }
        this.themify(this.sliderSVG, this.chartOptions.theme);

        this.sliderSVG.attr("width", width + "px");

        var slider = this.sliderSVG.select(".tsi-sliderG")
                                   .attr("transform", "translate(" + this.margins.left + "," + (this.height / 2) + ")");

        slider.select(".tsi-sliderTrack")
            .attr("x1", 0)
            .attr("x2", this.sliderWidth)
            .attr("y1", 0)
            .attr("y2", 0);
        slider.select(".tsi-sliderTrackOverlay")
            .attr("x1", -20)
            .attr("x2", this.sliderWidth + 20)
            .attr("y1", 0)
            .attr("y2", 0);

        this.setStateFromLabel();
    }