private renderScale()

in src/UXClient/Components/HeatmapCanvas/HeatmapCanvas.ts [35:128]
78 lines of code
22 McCabe index (conditional complexity)

    private renderScale () {
        this.colorLegend.selectAll("*").remove();
        if (this.colorScale.domain() === null || isNaN(this.colorScale.domain()[0]) || isNaN(this.colorScale.domain()[1])) {
            return;
        }
        let gradientGuid = Utils.guid();
        var gradient = this.colorLegend.append("defs")
            .append("linearGradient")
              .attr("id", "gradient" + this.aggI + gradientGuid)
              .attr("x1", "0%")
              .attr("y1", "100%")
              .attr("x2", "0%")
              .attr("y2", "0%");

        let interpolatedColors = [];

        var percentileCalc = (i) => i * (this.colorScale.domain()[1] - this.colorScale.domain()[0]) + this.colorScale.domain()[0]; 
        for (let i = 0; i <= 20; i++) {
            let interpolatedColor = this.colorScale(percentileCalc(i / 20));
            gradient.append("stop")
                .attr("offset", (i * 5) + "%")
                .attr("stop-color", interpolatedColor)
                .attr("stop-opacity", 1);
        }

        var gradientRect = this.colorLegend.append("rect")
            .attr("x", this.legendWidth - this.gradientWidth)
            .attr("y", 6)
            .attr("width", this.gradientWidth)
            .attr("height", Math.max(0, this.height - 12))
            .style("fill", "url(#gradient" + String(this.aggI) + gradientGuid + ")");

        var highlightedValueY = null;
        var range: number = this.colorScale.domain()[1] - this.colorScale.domain()[0];

        var highlightedText = this.colorLegend.append("text").attr("class", "highlightedValueText");
        var highlightedLine = this.colorLegend.append("line").attr("class", "highlightedValueLine");
        var minText = this.colorLegend.append("text");
        var maxText = this.colorLegend.append("text");

        var setHighlightedValueLineAndText = (line, text) => {
            var percentile;
            if (range == 0) {
                percentile = .5;
            } else {
                percentile = (this.highlightedValue != null) ? (this.highlightedValue - this.colorScale.domain()[0]) / range : 0;
            }

            highlightedValueY = (this.height - 6) + (12 - this.height) * percentile;

            text.attr("x", this.legendWidth - this.gradientWidth - 10)
                .attr("y", highlightedValueY)
                .style("stroke-width", 2)
                .text(Utils.formatYAxisNumber(this.highlightedValue));
            line.attr("x1", this.legendWidth - this.gradientWidth - 5)
                .attr("x2", this.legendWidth)
                .attr("y1", highlightedValueY)
                .attr("y2", highlightedValueY)
                .style("stroke-width", 2);

            minText.attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY < this.height - 18) ? 1 : 0);
            maxText.attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY > 18) ? 1 : 0);
        }

        minText.attr("x", this.legendWidth - this.gradientWidth - 5)
            .attr("y", this.height - 6)
            .text(Utils.formatYAxisNumber(this.colorScale.domain()[0]))
            .attr("fill-width", ((highlightedValueY == null) || highlightedValueY < this.height - 18) ? 1 : 0);
        maxText.attr("x", this.legendWidth - this.gradientWidth - 5)
            .attr("y", 6)
            .text(Utils.formatYAxisNumber(this.colorScale.domain()[1]))
            .attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY > 18) ? 1 : 0);

        //render highlightedValue text and line IF there is a highlighted time and split by, OR IF there is an 
        //  artificially produced value from hovering over the color gradient
        if (this.highlightedTime && this.highlightedSplitBy != null && this.highlightedValue != null) {
            setHighlightedValueLineAndText(highlightedLine, highlightedText);
            minText.attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY < this.height - 18) ? 1 : 0);
            maxText.attr("fill-opacity", ((highlightedValueY == null) || highlightedValueY > 18) ? 1 : 0);
        }

        var self = this;

        gradientRect.on("mousemove", function() {
            var yPos = d3.mouse(this)[1];
            var percentile = 1 - ((yPos - 6) / (self.height - 12));

            self.highlightedValue = self.colorScale.domain()[0] + (range * percentile);
            setHighlightedValueLineAndText(highlightedLine, highlightedText);
        })
        .on("mouseleave", () => {
            this.render(this.data, this.chartOptions, this.aggKey, null, null, this.onCellFocus, null, this.isOnlyAgg);
        })
    }