source: public/assets/js/examples/charts/justgage.js@ 1701ba0

develop
Last change on this file since 1701ba0 was 194a359, checked in by beratkjufliju <kufliju@…>, 3 years ago

added departments, edited users and added user settings
  • Property mode set to 100644
File size: 7.3 KB
Line 
1'use strict';
2$(document).ready(function () {
3
4 var colors = {
5 primary: $('.colors .bg-primary').css('background-color'),
6 primaryLight: $('.colors .bg-primary-bright').css('background-color'),
7 secondary: $('.colors .bg-secondary').css('background-color'),
8 secondaryLight: $('.colors .bg-secondary-bright').css('background-color'),
9 info: $('.colors .bg-info').css('background-color'),
10 infoLight: $('.colors .bg-info-bright').css('background-color'),
11 success: $('.colors .bg-success').css('background-color'),
12 successLight: $('.colors .bg-success-bright').css('background-color'),
13 danger: $('.colors .bg-danger').css('background-color'),
14 dangerLight: $('.colors .bg-danger-bright').css('background-color'),
15 warning: $('.colors .bg-warning').css('background-color'),
16 warningLight: $('.colors .bg-warning-bright').css('background-color'),
17 };
18
19 var valueFontColor = "black";
20
21 if($('body').hasClass('dark')){
22 valueFontColor = "white";
23 }
24
25 function init() {
26 new JustGage({
27 id: "justgage_one",
28 value: 90,
29 min: 0,
30 max: 100,
31 counter: true,
32 donut: true,
33 gaugeWidthScale: 0.3,
34 valueFontColor: valueFontColor,
35 levelColors: [colors.primary],
36 label: "Users",
37 });
38
39 // Delete the extra added element when the page is resized.
40 $('#justgage_one > svg + svg').remove();
41
42 new JustGage({
43 id: "justgage_two",
44 value: 46,
45 min: 0,
46 max: 100,
47 counter: true,
48 donut: true,
49 gaugeWidthScale: 0.3,
50 valueFontColor: valueFontColor,
51 levelColors: [colors.success],
52 label: "Customers",
53 });
54
55 // Delete the extra added element when the page is resized.
56 $('#justgage_two > svg + svg').remove();
57
58 new JustGage({
59 id: "justgage_three",
60 value: 10,
61 min: 0,
62 max: 100,
63 counter: true,
64 donut: true,
65 gaugeWidthScale: 0.3,
66 valueFontColor: valueFontColor,
67 levelColors: [colors.info],
68 label: "Visitor",
69 });
70
71 // Delete the extra added element when the page is resized.
72 $('#justgage_three > svg + svg').remove();
73
74 new JustGage({
75 id: 'justgage_four',
76 value: 155,
77 min: 0,
78 max: 250,
79 symbol: 'mph',
80 pointer: true,
81 gaugeWidthScale: 0.3,
82 pointerOptions: {
83 color: colors.primary,
84 stroke: colors.primary
85 },
86 counter: true,
87 relativeGaugeSize: true,
88 valueFontColor: valueFontColor,
89 levelColors: [colors.warning],
90 donut: true
91 });
92
93 // Delete the extra added element when the page is resized.
94 $('#justgage_four > svg + svg').remove();
95
96 new JustGage({
97 id: 'justgage_five',
98 value: 25,
99 min: 0,
100 max: 100,
101 symbol: '%',
102 pointer: true,
103 pointerOptions: {
104 toplength: -15,
105 bottomlength: 10,
106 bottomwidth: 12,
107 color: colors.primary,
108 stroke: colors.primary,
109 stroke_width: 3,
110 stroke_linecap: 'round'
111 },
112 gaugeWidthScale: 0.3,
113 counter: true,
114 relativeGaugeSize: true,
115 valueFontColor: valueFontColor,
116 levelColors: [colors.danger],
117 donut: true,
118 });
119
120 // Delete the extra added element when the page is resized.
121 $('#justgage_five > svg + svg').remove();
122
123 new JustGage({
124 id: 'justgage_six',
125 value: 86,
126 min: 0,
127 max: 100,
128 symbol: 'kWh',
129 pointer: true,
130 gaugeWidthScale: 0.3,
131 pointerOptions: {
132 toplength: 10,
133 bottomlength: 10,
134 bottomwidth: 8,
135 color: colors.primary
136 },
137 counter: true,
138 relativeGaugeSize: true,
139 valueFontColor: valueFontColor,
140 levelColors: [colors.secondary],
141 donut: true
142 });
143
144 // Delete the extra added element when the page is resized.
145 $('#justgage_six > svg + svg').remove();
146
147 var justgage_seven = new JustGage({
148 id: "justgage_seven",
149 value: 275,
150 min: 0,
151 max: 500,
152 label: "Visitors On Site",
153 valueFontColor: valueFontColor,
154 levelColors: [colors.info],
155 });
156
157 // Delete the extra added element when the page is resized.
158 $('#justgage_seven > svg + svg').remove();
159
160 var justgage_eight = new JustGage({
161 id: "justgage_eight",
162 value: 120,
163 min: 0,
164 max: 500,
165 label: "Memory Usage",
166 pointer: true,
167 pointerOptions: {
168 toplength: -15,
169 bottomlength: 10,
170 bottomwidth: 12,
171 color: colors.primary,
172 stroke: colors.primary,
173 stroke_width: 3,
174 stroke_linecap: 'round'
175 },
176 valueFontColor: valueFontColor
177 });
178
179 // Delete the extra added element when the page is resized.
180 $('#justgage_eight > svg + svg').remove();
181
182 var justgage_nine = new JustGage({
183 id: 'justgage_nine',
184 value: 25,
185 min: 0,
186 max: 100,
187 symbol: '%',
188 pointer: true,
189 pointerOptions: {
190 toplength: -15,
191 bottomlength: 10,
192 bottomwidth: 12,
193 color: colors.primary,
194 stroke: colors.primary,
195 stroke_width: 3,
196 stroke_linecap: 'round'
197 },
198 gaugeWidthScale: 0.3,
199 counter: true,
200 relativeGaugeSize: true,
201 valueFontColor: valueFontColor
202 });
203
204 // Delete the extra added element when the page is resized.
205 $('#justgage_nine > svg + svg').remove();
206
207 var justgage_ten = new JustGage({
208 id: 'justgage_ten',
209 value: 70,
210 min: 0,
211 max: 100,
212 symbol: 'Kg',
213 pointerOptions: {
214 toplength: 8,
215 bottomlength: -20,
216 bottomwidth: 6,
217 color: '#8e8e93'
218 },
219 gaugeWidthScale: 0.3,
220 counter: true,
221 relativeGaugeSize: true,
222 valueFontColor: valueFontColor,
223 levelColors: [colors.success],
224 });
225
226 // Delete the extra added element when the page is resized.
227 $('#justgage_ten > svg + svg').remove();
228
229 setInterval(function () {
230 justgage_seven.refresh(getRandomInt(0, 500));
231 justgage_eight.refresh(getRandomInt(0, 500));
232 justgage_nine.refresh(getRandomInt(0, 100));
233 justgage_ten.refresh(getRandomInt(0, 100));
234 }, 2000);
235 }
236
237 init();
238
239 $(window).on('resize', function () {
240 init();
241 });
242
243});
Note: See TracBrowser for help on using the repository browser.