Great score/KPI design

Platform
1

A great way to display a score :
image

This display works in v2.60 and v3 with a small difference.

  • First, you will need to add a custom code to your document.

  • Then, put a model on it with a value as the score. In the code, you will need to change #TO_REPLACE# by your value.

    image
    image1329×674 84.5 KB

  • Finally, add the following code :

HTML :

             In v2.60 :
<script src="/media/jui/js/jquery.min.js"></script>
<span id="score_ph" ></span>

             In v.3 :
<script src="/js/jquery-3.6.0.min.js"></script>
<span id="score_ph"></span>

JS :

function getDecimalPart(pNote){
    var int_part = Math.trunc(pNote);
    var float_part = Number((pNote - int_part).toFixed(2)) * 10;
    
    return float_part;
}
function buildIICursor(pNote){
    var points = '';
    var score = '';
    if (pNote < 0){
        for (var i = 0; i <= 12; i++) {
            points += '<span class="iiCursorSmallPoint iiCursorGrayPoint"></span>';
        }
        
        score = '<span class="iiCursorScore iiCursorGrayTxt">N/A<span>';
    } else {
        var pointSize = '';
        var pointColor = '';
        var scoreColor = '';
        
        for (var i = 0;i <= 12; i++) {
            if (i == Math.trunc (pNote)){
                pointSize = 'iiCursorBigPoint';
            } else {
                pointSize = 'iiCursorSmallPoint';
            }
            
            if (i < 5) {
                pointColor = 'iiCursorRedPoint';
            } else if (i < 9 ) {
                pointColor = 'iiCursorOrangePoint';
            } else {
                pointColor = 'iiCursorGreenPoint';
            }
            
            points += '<span class="' + pointSize + ' ' + pointColor + '"></span>';
        }
        
        if (pNote < 5) {
            scoreColor = 'iiCursorRedTxt';
        } else if (pNote < 9) {
            scoreColor = 'iiCursorOrangeTxt';
        } else {
            scoreColor = 'iiCursorGreenTxt';
        }
        
        score = '<span class="iiCursorScore ' + scoreColor + '">' + Math.trunc(pNote) + '.<span class="iiCursorScoreDecimal">' + getDecimalPart(pNote) + '</span></span>';
    }
    
    return '<span class="iiCursorPH">' + points + score + '</span>';
}
jQuery(document).ready(function() {
    if (#TO_REPLACE# != null ){
        jQuery("#score_ph").append(buildIICursor(#TO_REPLACE#));
    }
});

CSS :

.iiCursorSmallPoint{
    border-radius: 10px;
    height: 7px;
    display: inline-block;
    margin-right: 5px;
    margin-top: 15px;
    padding-left: 7px;
}
.iiCursorBigPoint{
    border-radius: 15px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    margin-top: 3px;
    padding-left: 20px;
}
.iiCursorPH{
    width: 100%;
    margin-left: 30px;
    float:right;
    text-align: center;
}
.iiCursorScore{
    font-size: 2.5em;
    margin-left: 15px;
    font-family: Roboto,Open Sans,Helvetica,Arial,sans-serif;
}
.iiCursorGrayTxt{
    color: #E9E9E9;
}
.iiCursorGreenTxt{
    color: #46CC7C;
}
.iiCursorOrangeTxt{
    color: #FFA600;
}
.iiCursorRedTxt{
    color: #FF729E;
}
.iiCursorGrayPoint{
    border: solid 2px gray;
    background-color: #E9E9E9;
}
.iiCursorGreenPoint{
    border: solid 2px #46CC7C;
    background-color: #46CC7C;
}
.iiCursorOrangePoint{
    border: solid 2px #FFA600;
    background-color: #FFA600;
}
.iiCursorRedPoint{
    border: solid 2px #FF729E;
    background-color: #FF729E;
}
.iiCursorScoreDecimal{
    font-size: 0.75em;
}
#score_ph{
    display: block;
}