private drawWarmRange()

in src/UXClient/Components/AvailabilityChart/AvailabilityChart.ts [376:409]
31 lines of code
11 McCabe index (conditional complexity)

    private drawWarmRange () {

        var svgGroup = this.targetElement.select('.tsi-timePickerContainer').select(".tsi-lineChartSVG").select(".svgGroup");
        if (svgGroup.select('.tsi-warmRect').empty()) {
            svgGroup.append("rect")
                .classed("tsi-warmRect", true);
            svgGroup.select('.brushElem').raise();
        }
        let warmRect = svgGroup.select(".tsi-warmRect");
 
        let outOfRange = true;
        if (this.chartOptions.warmStoreRange) {
            let warmStart = new Date(this.chartOptions.warmStoreRange[0]);
            let boundedWarmStart = new Date(Math.max(warmStart.valueOf(), this.zoomedFromMillis));
            let warmEnd = new Date(this.chartOptions.warmStoreRange.length === 2 ? this.chartOptions.warmStoreRange[1] : this.toMillis);
            let boundedWarmEnd = new Date(Math.min(warmEnd.valueOf(), this.zoomedToMillis));

            if (boundedWarmStart < boundedWarmEnd) {
                outOfRange = false;
                warmRect.attr("x", Math.max(this.timePickerLineChart.x(boundedWarmStart)))
                    .attr("y", this.chartOptions.isCompact ? 12 : -8)
                    .attr("width", this.timePickerLineChart.x(boundedWarmEnd) - this.timePickerLineChart.x(boundedWarmStart))
                    .attr("height", this.chartOptions.isCompact ? 4 : Math.max((this.targetElement.select('.tsi-timePickerContainer').select(".tsi-lineChartSVG").node().getBoundingClientRect().height - 44), 0))
                    .attr("fill-opacity", this.chartOptions.isCompact ? .8 : .08)
                    .attr('stroke-opacity', this.chartOptions.isCompact ? 0 : .5)
                    .attr("pointer-events", "none");
            } 
        }
        if (outOfRange || this.chartOptions.warmStoreRange === null) {
            warmRect.style('display', 'none');
        } else {
            warmRect.style('display', 'block');
        }
    }