Subversion Repositories SmartDukaan

Rev

Rev 32771 | Rev 33501 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
32771 raveendra. 1 
<h3 style="margin-top:-2px;margin-bottom:24px"><strong>#springMessage("dashboard.myperformance")</strong></h3>
31020 tejbeer 2 
 
31001 amit.gupta 3 
<div class="col-lg-5">
32779 shampa 4 
    <h4 style="margin-top:-2px;margin-bottom:6px"><strong>#springMessage("dashboard.myperformance")</strong></h4>
31001 amit.gupta 5 
    <table class="table table-condensed indianflag">
6 
        <tbody>
7 
        <tr class="current">
32771 raveendra. 8 
            <td>#springMessage("dashboard.currentmonth")</td>
31001 amit.gupta 9 
            <td>
10 
                <div class="stars-outer">
11 
                    <div class="stars-inner"></div>
12 
                </div>
13 
            </td>
14 
            <td>$currentMonthRating/5</td>
15 
        </tr>
16 
        <tr class="last">
17 
            <td>Last Month</td>
18 
            <td>
19 
                <div class="stars-outer">
20 
                    <div class="stars-inner"></div>
21 
                </div>
22 
            </td>
23 
            <td>$lastMonthRating/5</td>
24 
        </tr>
25 
        <tr class="tilldate">
32771 raveendra. 26 
            <td>#springMessage("dashboard.tilldate")</td>
31001 amit.gupta 27 
            <td>
28 
                <div class="stars-outer">
29 
                    <div class="stars-inner"></div>
30 
                </div>
31 
            </td>
32 
            <td>$ratingTillDate/5</td>
33 
        </tr>
34 
        </tbody>
35 
    </table>
36 
</div>
37 
 
38 
 
39 
<div class="col-lg-7">
40 
 
41 
    <div class="row" style="width:50%">
42 
 
43 
        <select class="form-control input-sm" id="performance-months" name="months" placeholder="months"
44 
                style="width:50%; margin:auto;">
45 
            <option value="" disabled selected>month</option>
46 
            #foreach($mVM in $monthValueMap.entrySet())
47 
                #if($mVM.getKey()== $month )
48 
                    <option value="$mVM.getKey()" selected>$mVM.getValue()</option>
49 
                #else
50 
                    <option value="$mVM.getKey()">$mVM.getValue()</option>
51 
                #end
52 
            #end
53 
        </select>
54 
    </div>
55 
 
56 
    <div class="row">
57 
        <div class="col-lg-6">
58 
            <canvas data-type="radial-gauge" id="hygeine"
59 
                    data-width="200" ,
60 
                    data-height="200"
61 
                    data-title="Hygeine"
62 
                    data-units="${hygienePercentage}%"
63 
                    data-min-value="0"
64 
                    data-max-value="100"
65 
                    data-value="${hygienePercentage}"
66 
                    data-major-ticks="0,20,40,60,80,100"
67 
                    data-minor-ticks="2"
68 
                    data-stroke-ticks="true"
69 
                    data-highlights='[
25654 amit.gupta 70 
					{"from": 0, "to": 80, "color": "red"},
71 
					{"from": 80, "to": 90, "color": "yellow"},
72 
					{"from": 90, "to": 100, "color": "green"}
31001 amit.gupta 73 
				    ]' ,
74 
                    data-value-box="false"
75 
                    data-color-plate="#fff"
76 
                    data-border-shadow-width="0"
77 
                    data-borders="false"
78 
                    data-needle-type="arrow"
79 
                    data-needle-width="2"
80 
                    data-needle-circle-size="7"
81 
                    data-font-value-size="42"
82 
                    data-font-title-size="42"
83 
                    data-font-units-size="42"
84 
                    data-needle-circle-outer="true"
85 
                    data-needle-circle-inner="false"
86 
                    data-animation-duration="1500"
87 
                    data-animation-rule="linear"
88 
            ></canvas>
89 
 
90 
        </div>
91 
 
92 
 
93 
        <div class="col-lg-6">
94 
            <canvas data-type="radial-gauge" id="investment"
95 
                    data-width="200"
96 
                    data-height="200"
97 
                    data-title="Investments"
98 
                    data-units="${investments.get('okDays')}/${dayOfMonth}"
99 
                    data-value="${investments.get('okDays')}"
100 
                    data-min-value="0"
101 
                    data-major-ticks=[]
102 
                    data-max-value="${monthDays}"
103 
                    data-highlights='[
25654 amit.gupta 104 
					{"from": 0, "to": 7, "color": "red"},
105 
					{"from": 7, "to": 12, "color": "yellow"},
106 
					{"from": 12, "to": ${monthDays}, "color": "green"}
107 
				    ]'
31001 amit.gupta 108 
                    data-value-box="false"
109 
                    data-color-plate="#fff"
110 
                    data-border-shadow-width="0"
111 
                    data-borders="false"
112 
                    data-needle-type="arrow"
113 
                    data-needle-width="2"
114 
                    data-needle-circle-size="7"
115 
                    data-font-value-size="42"
116 
                    data-font-title-size="42"
117 
                    data-font-units-size="42"
118 
 
119 
                    data-needle-circle-outer="true"
120 
                    data-needle-circle-inner="false"
121 
                    data-animation-duration="1500"
122 
                    data-animation-rule="linear"
123 
            ></canvas>
124 
        </div>
125 
    </div>
126 
 
127 
</div>
128 
<script>
129 
    starTotal = 5;
130 
    ratings = {
131 
        current: $currentMonthRating,
132 
        last: $lastMonthRating,
133 
        tilldate: $ratingTillDate
134 
    };
135 
    for (const rating in ratings) {
136 
        // 2
137 
        const starPercentage = (ratings[rating] / starTotal) * 100;
138 
        // 3
139 
        const starPercentageRounded = `${starPercentage}%`;
140 
        // 4
141 
        document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded;
142 
    }
143 
</script>
31004 amit.gupta 144 
<script type="text/javascript" src="resources/js/gauge.min.js"></script>