Subversion Repositories SmartDukaan

Rev

Rev 25659 | Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
25654 amit.gupta 1 
<div class="row col-lg-12 info-box white-bg">
2 
 
3 
	<div class="col-lg-5">
4 
		<h3 style="margin-top:-2px;margin-bottom:24px"><strong>My Performance</strong></h3>
5 
		<h4 style="margin-top:-2px;margin-bottom:6px"><strong>Customer Rating</strong></h4>
6 
		<table class="table table-condensed">
7 
			  <tbody>
8 
			    <tr class="current">
9 
			      <td>Current Month</td>
10 
			      <td>
11 
			        <div class="stars-outer">
12 
			          <div class="stars-inner"></div>
13 
			        </div>
14 
			      </td>
15 
			      <td>$currentMonthRating/10</td>
16 
			    </tr>
17 
			    <tr class="last">
18 
			      <td>Last Month</td>
19 
			      <td>
20 
			        <div class="stars-outer">
21 
			          <div class="stars-inner"></div>
22 
			        </div>
23 
			      </td>
24 
			      <td>$lastMonthRating/10</td>
25 
			    </tr>
26 
			    <tr class="tilldate">
27 
			      <td>Till Date</td>
28 
			      <td>
29 
			        <div class="stars-outer">
30 
			          <div class="stars-inner"></div>
31 
			        </div>
32 
			      </td>
33 
			      <td>$ratingTillDate/10</td>
34 
			    </tr>
35 
			  </tbody>
36 
		</table>
37 
	</div>
38 
	<div class="col-lg-7">
39 
			<div class="col-lg-6">
40 
				<canvas data-type="radial-gauge" id="hygeine"
41 
				    data-width="200",
42 
				    data-height="200"
43 
				    data-title="Hygeine"
44 
				    data-units="${hygienePercentage}%"
45 
				    data-min-value="0"
46 
				    data-max-value="100"
47 
					data-value="${hygienePercentage}"
48 
				    data-major-ticks="0,20,40,60,80,100"
49 
				    data-minor-ticks="2"
50 
				    data-stroke-ticks="true"
51 
				    data-highlights='[
52 
					{"from": 0, "to": 80, "color": "red"},
53 
					{"from": 80, "to": 90, "color": "yellow"},
54 
					{"from": 90, "to": 100, "color": "green"}
55 
				    ]',
56 
					data-value-box="false"
57 
				    data-color-plate="#fff"
58 
				    data-border-shadow-width="0"
59 
				    data-borders="false"
60 
				    data-needle-type="arrow"
61 
				    data-needle-width="2"
62 
				    data-needle-circle-size="7"
63 
				    data-font-value-size="42"
64 
				    data-font-title-size="42"
65 
				    data-font-units-size="42"
66 
				    data-needle-circle-outer="true"
67 
				    data-needle-circle-inner="false"
68 
				    data-animation-duration="1500"
69 
				    data-animation-rule="linear"
70 
				></canvas>
71 
 
72 
			</div>
73 
			<div class="col-lg-6">
74 
				<canvas data-type="radial-gauge" id="investment"
75 
				    data-width="200"
76 
				    data-height="200"
77 
				    data-title="Investments"
78 
					data-units="${investments.get('okDays')}/${dayOfMonth}"
79 
					data-value="${investments.get('okDays')}"
80 
				    data-min-value="0"
81 
				    data-major-ticks=[]
82 
					data-max-value="${monthDays}"
83 
				    data-highlights='[
84 
					{"from": 0, "to": 7, "color": "red"},
85 
					{"from": 7, "to": 12, "color": "yellow"},
86 
					{"from": 12, "to": ${monthDays}, "color": "green"}
87 
				    ]'
88 
				data-value-box="false"
89 
				    data-color-plate="#fff"
90 
				    data-border-shadow-width="0"
91 
				    data-borders="false"
92 
				    data-needle-type="arrow"
93 
				    data-needle-width="2"
94 
				    data-needle-circle-size="7"
95 
				    data-font-value-size="42"
96 
				    data-font-title-size="42"
97 
				    data-font-units-size="42"
98 
 
99 
				    data-needle-circle-outer="true"
100 
				    data-needle-circle-inner="false"
101 
				    data-animation-duration="1500"
102 
				    data-animation-rule="linear"
103 
				></canvas>
104 
			</div>
105 
	</div>
106 
</div>
107 
 
108 
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/radial/gauge.min.js"></script>
109 
<script type="text/javascript">
110 
	var gauge1 = new RadialGauge({
111 
	    renderTo: 'hygeine'
112 
	}).draw();
113 
	var gauge2 = new RadialGauge({
114 
	    renderTo: 'investment'
115 
	}).draw();
116 
</script>