Subversion Repositories SmartDukaan

<h3 style="margin-top:-2px;margin-bottom:24px"><strong>My Performance</strong></h3>

<div class="col-lg-5">
    <h4 style="margin-top:-2px;margin-bottom:6px"><strong>Customer Rating</strong></h4>
    <table class="table table-condensed indianflag">
        <tbody>
        <tr class="current">
            <td>Current Month</td>
            <td>
                <div class="stars-outer">
                    <div class="stars-inner"></div>
                </div>
            </td>
            <td>$currentMonthRating/5</td>
        </tr>
        <tr class="last">
            <td>Last Month</td>
            <td>
                <div class="stars-outer">
                    <div class="stars-inner"></div>
                </div>
            </td>
            <td>$lastMonthRating/5</td>
        </tr>
        <tr class="tilldate">
            <td>Till Date</td>
            <td>
                <div class="stars-outer">
                    <div class="stars-inner"></div>
                </div>
            </td>
            <td>$ratingTillDate/5</td>
        </tr>
        </tbody>
    </table>
</div>


<div class="col-lg-7">

    <div class="row" style="width:50%">

        <select class="form-control input-sm" id="performance-months" name="months" placeholder="months"
                style="width:50%; margin:auto;">
            <option value="" disabled selected>month</option>
            #foreach($mVM in $monthValueMap.entrySet())
                #if($mVM.getKey()== $month )
                    <option value="$mVM.getKey()" selected>$mVM.getValue()</option>
                #else
                    <option value="$mVM.getKey()">$mVM.getValue()</option>
                #end
            #end
        </select>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <canvas data-type="radial-gauge" id="hygeine"
                    data-width="200" ,
                    data-height="200"
                    data-title="Hygeine"
                    data-units="${hygienePercentage}%"
                    data-min-value="0"
                    data-max-value="100"
                    data-value="${hygienePercentage}"
                    data-major-ticks="0,20,40,60,80,100"
                    data-minor-ticks="2"
                    data-stroke-ticks="true"
                    data-highlights='[
                                        {"from": 0, "to": 80, "color": "red"},
                                        {"from": 80, "to": 90, "color": "yellow"},
                                        {"from": 90, "to": 100, "color": "green"}
                                    ]' ,
                    data-value-box="false"
                    data-color-plate="#fff"
                    data-border-shadow-width="0"
                    data-borders="false"
                    data-needle-type="arrow"
                    data-needle-width="2"
                    data-needle-circle-size="7"
                    data-font-value-size="42"
                    data-font-title-size="42"
                    data-font-units-size="42"
                    data-needle-circle-outer="true"
                    data-needle-circle-inner="false"
                    data-animation-duration="1500"
                    data-animation-rule="linear"
            ></canvas>

        </div>


        <div class="col-lg-6">
            <canvas data-type="radial-gauge" id="investment"
                    data-width="200"
                    data-height="200"
                    data-title="Investments"
                    data-units="${investments.get('okDays')}/${dayOfMonth}"
                    data-value="${investments.get('okDays')}"
                    data-min-value="0"
                    data-major-ticks=[]
                    data-max-value="${monthDays}"
                    data-highlights='[
                                        {"from": 0, "to": 7, "color": "red"},
                                        {"from": 7, "to": 12, "color": "yellow"},
                                        {"from": 12, "to": ${monthDays}, "color": "green"}
                                    ]'
                    data-value-box="false"
                    data-color-plate="#fff"
                    data-border-shadow-width="0"
                    data-borders="false"
                    data-needle-type="arrow"
                    data-needle-width="2"
                    data-needle-circle-size="7"
                    data-font-value-size="42"
                    data-font-title-size="42"
                    data-font-units-size="42"

                    data-needle-circle-outer="true"
                    data-needle-circle-inner="false"
                    data-animation-duration="1500"
                    data-animation-rule="linear"
            ></canvas>
        </div>
    </div>

</div>
<script>
    starTotal = 5;
    ratings = {
        current: $currentMonthRating,
        last: $lastMonthRating,
        tilldate: $ratingTillDate
    };
    for (const rating in ratings) {
        // 2
        const starPercentage = (ratings[rating] / starTotal) * 100;
        // 3
        const starPercentageRounded = `${starPercentage}%`;
        // 4
        document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;
    }
</script>
<script type="text/javascript" src="resources/js/gauge.min.js"></script>