HTML
====

<div id="tf_sum" title="View Traffic Light Streaming" style="display:table;margin: auto;height:100%">
<div class="sum_card" style="display:table-cell;vertical-align:middle;width:120px" align="center">
    <div style="font-size:40px;font-weight:600;color:{{outputColor}}" >
        {{outputValue}}
    </div>
    <div style="color:{{outputColor}}; font-size:20px">
        Humidity
    </div>
</div>
</div>

JS
===

self.onInit = function() {
}

self.onDataUpdated = function() {

    var main_data = self.ctx.data;
    var data_arr = [];
    for(x=0;x<main_data.length;x++){
        keyname = main_data[x].dataKey.name;
        if(typeof(main_data[x]['data'][0]) !== "undefined"){
            if(keyname.startsWith("humidity")){ //sign
                if(typeof(main_data[x]['data'][0][1]) !== "undefined"){
                    data_arr.push(main_data[x]['data'][0][1]);
                }
            }
        }
    }

    var output = data_arr[0];
    var color = "#01ab1e"; //green
    if(Number.isInteger(output)){ //check if number
        if(output > 30 && output <= 50){
            color = "#c3b400"; //orange
        }else if(output > 50){
            color = "red"; //red
        }
    }
    self.ctx.$scope.outputColor = color;
    self.ctx.$scope.outputValue = output;
    self.ctx.$container.resize();
}

self.onResize = function() {
}

self.onDestroy = function() {
}


CSS
====

.sum_card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /*background-color: #272a3d;*/
    background: #0e1c2d;
    border-radius:5px;
    padding:10px;
}