Subversion Repositories SmartDukaan

Rev

Rev 26267 | Rev 28275 | 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>
34 
		</table>
35 
	</div>
36 
	<div class="col-lg-7">
37 
			<div class="col-lg-6">
38 
				<canvas data-type="radial-gauge" id="hygeine"
39 
				    data-width="200",
40 
				    data-height="200"
41 
				    data-title="Hygeine"
42 
				    data-units="${hygienePercentage}%"
43 
				    data-min-value="0"
44 
				    data-max-value="100"
45 
					data-value="${hygienePercentage}"
46 
				    data-major-ticks="0,20,40,60,80,100"
47 
				    data-minor-ticks="2"
48 
				    data-stroke-ticks="true"
49 
				    data-highlights='[
50 
					{"from": 0, "to": 80, "color": "red"},
51 
					{"from": 80, "to": 90, "color": "yellow"},
52 
					{"from": 90, "to": 100, "color": "green"}
53 
				    ]',
54 
					data-value-box="false"
55 
				    data-color-plate="#fff"
56 
				    data-border-shadow-width="0"
57 
				    data-borders="false"
58 
				    data-needle-type="arrow"
59 
				    data-needle-width="2"
60 
				    data-needle-circle-size="7"
61 
				    data-font-value-size="42"
62 
				    data-font-title-size="42"
63 
				    data-font-units-size="42"
64 
				    data-needle-circle-outer="true"
65 
				    data-needle-circle-inner="false"
66 
				    data-animation-duration="1500"
67 
				    data-animation-rule="linear"
68 
				></canvas>
69 
 
70 
			</div>
71 
			<div class="col-lg-6">
72 
				<canvas data-type="radial-gauge" id="investment"
73 
				    data-width="200"
74 
				    data-height="200"
75 
				    data-title="Investments"
76 
					data-units="${investments.get('okDays')}/${dayOfMonth}"
77 
					data-value="${investments.get('okDays')}"
78 
				    data-min-value="0"
79 
				    data-major-ticks=[]
80 
					data-max-value="${monthDays}"
81 
				    data-highlights='[
82 
					{"from": 0, "to": 7, "color": "red"},
83 
					{"from": 7, "to": 12, "color": "yellow"},
84 
					{"from": 12, "to": ${monthDays}, "color": "green"}
85 
				    ]'
86 
				data-value-box="false"
87 
				    data-color-plate="#fff"
88 
				    data-border-shadow-width="0"
89 
				    data-borders="false"
90 
				    data-needle-type="arrow"
91 
				    data-needle-width="2"
92 
				    data-needle-circle-size="7"
93 
				    data-font-value-size="42"
94 
				    data-font-title-size="42"
95 
				    data-font-units-size="42"
96 
 
97 
				    data-needle-circle-outer="true"
98 
				    data-needle-circle-inner="false"
99 
				    data-animation-duration="1500"
100 
				    data-animation-rule="linear"
101 
				></canvas>
102 
			</div>
103 
	</div>
25659 amit.gupta 104 
 
25654 amit.gupta 105 
 
106 
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/radial/gauge.min.js"></script>
107 
<script type="text/javascript">
108 
	var gauge1 = new RadialGauge({
109 
	    renderTo: 'hygeine'
110 
	}).draw();
111 
	var gauge2 = new RadialGauge({
112 
	    renderTo: 'investment'
113 
	}).draw();
114 
</script>