Subversion Repositories SmartDukaan

Rev

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

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