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">
        var gauge1 = new RadialGauge({
            renderTo: 'hygeine'
        }).draw();
        var gauge2 = new RadialGauge({
            renderTo: 'investment'
        }).draw();
</script>