Highlight over threshold - picker - Shared with Office Add-in Playground

Highlight over threshold - picker (Office Add-in Playground).json

{
    "name": "Highlight over threshold - picker",
    "playgroundVersion": 1
}

app.js

// This is a compiled version of the TypeScript/JavaScript code ("app.ts").
// In case the original code was already JavaScript, this is likely identical to "app.js".

$("#picker").spectrum({
    color: "#cf0",
    showInput: true,
    preferredFormat: "hex",
    showPalette: true,
    hideAfterPaletteSelect: false,
    palette: [
        ["black", "gray", "silver"],
        ["white", "maroon", "red"],
        ["olive", "yellow", "green"],
        ["lime", "teal", "aqua"],
        ["navy", "blue", "purple"],
        ["fuchsia"]
    ]
});
$('#set-random-values').click(setRandomValues);
$('#highlight').click(highlightSelection);
function setRandomValues() {
    Excel.run(function (context) {
        var selection = context.workbook.getSelectedRange();
        selection.format.fill.clear();
        selection.load("rowCount, columnCount");
        return context.sync()
            .then(function () {
            var valuesArray = [];
            for (var r = 0; r < selection.rowCount; r++) {
                var rowValues = [];
                for (var c = 0; c < selection.columnCount; c++) {
                    rowValues.push(Math.floor(Math.random() * 100));
                }
                valuesArray.push(rowValues);
            }
            selection.values = valuesArray;
        })
            .then(context.sync);
    })
        .catch(console.log);
}
function highlightSelection() {
    var threshold = 90;
    var highlightColor = $('#picker').spectrum("get").toHexString();
    Excel.run(function (context) {
        var selection = context.workbook.getSelectedRange();
        selection.load("rowCount, columnCount, values");
        return context.sync()
            .then(function () {
            for (var r = 0; r < selection.rowCount; r++) {
                for (var c = 0; c < selection.columnCount; c++) {
                    if (selection.values[r][c] >= threshold) {
                        selection.getCell(r, c).format.fill.color = highlightColor;
                    }
                }
            }
        });
    })
        .catch(console.log);
}

app.ts

interface JQuery {
    spectrum(options?: any): any;
}

$("#picker").spectrum({
    color: "#cf0",
    showInput: true,
    preferredFormat: "hex",
    showPalette: true,
    hideAfterPaletteSelect: false,
    palette: [
        ["black", "gray", "silver"],
        ["white", "maroon", "red"],
        ["olive", "yellow", "green"],
        ["lime", "teal", "aqua"],
        ["navy", "blue", "purple"],
        ["fuchsia"]
    ]
});

$('#set-random-values').click(setRandomValues);
$('#highlight').click(highlightSelection);

function setRandomValues() {
    Excel.run((context) => {
        var selection = context.workbook.getSelectedRange();
        selection.format.fill.clear();
        selection.load("rowCount, columnCount");
        return context.sync()
            .then(() => {
                var valuesArray = [];
                for (var r = 0; r < selection.rowCount; r++) {
                    var rowValues = [];
                    for (var c = 0; c < selection.columnCount; c++) {
                        rowValues.push(Math.floor(Math.random() * 100));
                    }
                    valuesArray.push(rowValues);
                }
                selection.values = valuesArray;
            })
            .then(context.sync);
    })
    .catch(console.log)
}

function highlightSelection() {
    var threshold = 90;
    var highlightColor = $('#picker').spectrum("get").toHexString();

    Excel.run((context) => {
        var selection = context.workbook.getSelectedRange();
        selection.load("rowCount, columnCount, values");
        return context.sync()
            .then(function() {
                for (var r = 0; r < selection.rowCount; r++) {
                    for (var c = 0; c < selection.columnCount; c++) {
                        if (selection.values[r][c] >= threshold) {
                            selection.getCell(r, c).format.fill.color = highlightColor;
                        }
                    }
                }
            })
    })
    .catch(console.log);
}

index.html

<h1 class="ms-font-l">
    Basic range operations
</h1>

<p>
  <button id="set-random-values" class="ms-Button">
    <span class="ms-Button-label">Set random values</span>
  </button>
</p>

<p> 
  <button id="highlight" class="ms-Button">
    <span class="ms-Button-label">
        Highlight values above threshold
    </span>
  </button>
  <input type="text" id="picker"/>
</p>

libraries.txt

# Office.js CDN reference
//appsforoffice.microsoft.com/lib/beta/hosted/Office.js

# NPM CDN references
jquery
office-ui-fabric/dist/js/jquery.fabric.min.js
office-ui-fabric/dist/css/fabric.min.css
office-ui-fabric/dist/css/fabric.components.min.css

# IntelliSense definitions
dt~office-js
dt~jquery

# An external library
https://bgrins.github.io/spectrum/spectrum.css
https://bgrins.github.io/spectrum/spectrum.js