Subversion Repositories SmartDukaan

<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">

    window.onload = function () {

        $(document).ready(function () {

            var gauge1 = new RadialGauge({

                renderTo: 'hygeine'

            }).draw();

            var gauge2 = new RadialGauge({

                renderTo: 'investment'

            }).draw();

        });

    };

</script>