|
1
|
$(function() {
|
|
2
|
// dashboard init functions
|
|
3
|
altair_dashboard.init();
|
|
4
|
});
|
|
5
|
|
|
6
|
altair_dashboard = {
|
|
7
|
init: function () {
|
|
8
|
'use strict';
|
|
9
|
|
|
10
|
// small charts
|
|
11
|
altair_dashboard.peity_charts();
|
|
12
|
// large graph
|
|
13
|
altair_dashboard.metrics_charts();
|
|
14
|
// large graph
|
|
15
|
altair_dashboard.chartist_charts();
|
|
16
|
// video player
|
|
17
|
altair_dashboard.video_player();
|
|
18
|
// calendar
|
|
19
|
altair_dashboard.clndr_calendar();
|
|
20
|
// google maps
|
|
21
|
altair_dashboard.maplace_maps();
|
|
22
|
|
|
23
|
// run animations after page is fully loaded
|
|
24
|
$window.on('load',function(){
|
|
25
|
altair_dashboard.circular_statistics();
|
|
26
|
altair_dashboard.count_animated();
|
|
27
|
});
|
|
28
|
},
|
|
29
|
// metrics-graphics
|
|
30
|
metrics_charts: function () {
|
|
31
|
var mGraph_sale = '#mGraph_sale';
|
|
32
|
|
|
33
|
if ($(mGraph_sale).length) {
|
|
34
|
|
|
35
|
var $thisEl_height = 0;
|
|
36
|
|
|
37
|
function buildGraph_sale() {
|
|
38
|
|
|
39
|
if($thisEl_height == 0) {
|
|
40
|
var $thisEl_height = $(mGraph_sale).height();
|
|
41
|
}
|
|
42
|
|
|
43
|
var $thisEl_width = $(mGraph_sale).width();
|
|
44
|
|
|
45
|
d3.json("data/mg_dashboard_chart.min.json").then(function (data) {
|
|
46
|
|
|
47
|
data = [data];
|
|
48
|
for (var i = 0; i < data.length; i++) {
|
|
49
|
data[i] = MG.convert.date(data[i], 'date');
|
|
50
|
}
|
|
51
|
var markers = [
|
|
52
|
{
|
|
53
|
'date': new Date('2016-02-26T00:00:00.000Z'),
|
|
54
|
'label': 'Winter Sale'
|
|
55
|
},
|
|
56
|
{
|
|
57
|
'date': new Date('2016-06-02T00:00:00.000Z'),
|
|
58
|
'label': 'Spring Sale'
|
|
59
|
}
|
|
60
|
];
|
|
61
|
// add a chart that has a log scale
|
|
62
|
MG.data_graphic({
|
|
63
|
data: data,
|
|
64
|
y_scale_type: 'log',
|
|
65
|
width: $thisEl_width,
|
|
66
|
height: $thisEl_height,
|
|
67
|
right: 20,
|
|
68
|
target: mGraph_sale,
|
|
69
|
markers: markers,
|
|
70
|
x_accessor: 'date',
|
|
71
|
y_accessor: 'value'
|
|
72
|
});
|
|
73
|
});
|
|
74
|
|
|
75
|
}
|
|
76
|
|
|
77
|
buildGraph_sale();
|
|
78
|
|
|
79
|
$window.on('debouncedresize', function () {
|
|
80
|
buildGraph_sale();
|
|
81
|
});
|
|
82
|
|
|
83
|
$("#mGraph_sale").on('display.uk.check', function(){
|
|
84
|
buildGraph_sale();
|
|
85
|
});
|
|
86
|
|
|
87
|
}
|
|
88
|
},
|
|
89
|
// chartist
|
|
90
|
chartist_charts: function() {
|
|
91
|
|
|
92
|
new Chartist.Bar('#ct-chart', {
|
|
93
|
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
|
|
94
|
series: [
|
|
95
|
[5, 4, 3, 7],
|
|
96
|
[3, 2, 9, 5],
|
|
97
|
[1, 5, 8, 4],
|
|
98
|
[2, 3, 4, 6],
|
|
99
|
[4, 1, 2, 1]
|
|
100
|
]
|
|
101
|
}, {
|
|
102
|
// Default mobile configuration
|
|
103
|
stackBars: true,
|
|
104
|
axisX: {
|
|
105
|
labelInterpolationFnc: function(value) {
|
|
106
|
return value.split(/\s+/).map(function(word) {
|
|
107
|
return word[0];
|
|
108
|
}).join('');
|
|
109
|
}
|
|
110
|
},
|
|
111
|
axisY: {
|
|
112
|
offset: 20
|
|
113
|
}
|
|
114
|
}, [
|
|
115
|
// Options override for media > 400px
|
|
116
|
['screen and (min-width: 400px)', {
|
|
117
|
reverseData: true,
|
|
118
|
horizontalBars: true,
|
|
119
|
axisX: {
|
|
120
|
labelInterpolationFnc: Chartist.noop
|
|
121
|
},
|
|
122
|
axisY: {
|
|
123
|
offset: 60
|
|
124
|
}
|
|
125
|
}],
|
|
126
|
// Options override for media > 800px
|
|
127
|
['screen and (min-width: 800px)', {
|
|
128
|
stackBars: false,
|
|
129
|
seriesBarDistance: 10
|
|
130
|
}],
|
|
131
|
// Options override for media > 1000px
|
|
132
|
['screen and (min-width: 1000px)', {
|
|
133
|
reverseData: false,
|
|
134
|
horizontalBars: false,
|
|
135
|
seriesBarDistance: 15
|
|
136
|
}]
|
|
137
|
]);
|
|
138
|
},
|
|
139
|
// ease pie chart
|
|
140
|
circular_statistics: function() {
|
|
141
|
$('.epc_chart').easyPieChart({
|
|
142
|
scaleColor: false,
|
|
143
|
trackColor: '#f5f5f5',
|
|
144
|
lineWidth: 5,
|
|
145
|
size: 110,
|
|
146
|
easing: bez_easing_swiftOut
|
|
147
|
});
|
|
148
|
},
|
|
149
|
// google maps
|
|
150
|
maplace_maps: function () {
|
|
151
|
if ($('#map_users').length) {
|
|
152
|
|
|
153
|
var $map_user_list = $('#map_users_list').children('li');
|
|
154
|
// add styles to map
|
|
155
|
// https://snazzymaps.com/
|
|
156
|
var map_styles = {
|
|
157
|
'Blue water': [{
|
|
158
|
"featureType": "water",
|
|
159
|
"stylers": [{"color": "#46bcec"}, {"visibility": "on"}]
|
|
160
|
}, {"featureType": "landscape", "stylers": [{"color": "#f2f2f2"}]}, {
|
|
161
|
"featureType": "road",
|
|
162
|
"stylers": [{"saturation": -100}, {"lightness": 45}]
|
|
163
|
}, {
|
|
164
|
"featureType": "road.highway",
|
|
165
|
"stylers": [{"visibility": "simplified"}]
|
|
166
|
}, {
|
|
167
|
"featureType": "road.arterial",
|
|
168
|
"elementType": "labels.icon",
|
|
169
|
"stylers": [{"visibility": "off"}]
|
|
170
|
}, {
|
|
171
|
"featureType": "administrative",
|
|
172
|
"elementType": "labels.text.fill",
|
|
173
|
"stylers": [{"color": "#444444"}]
|
|
174
|
}, {"featureType": "transit", "stylers": [{"visibility": "off"}]}, {
|
|
175
|
"featureType": "poi",
|
|
176
|
"stylers": [{"visibility": "off"}]
|
|
177
|
}]
|
|
178
|
},
|
|
179
|
marker_url = isHighDensity() ? 'assets/img/md-images/ic_location_history_black_48dp.png' : 'assets/img/md-images/ic_location_history_black_24dp.png',
|
|
180
|
marker_size = isHighDensity() ? new google.maps.Size(48, 48) : new google.maps.Size(24, 24),
|
|
181
|
marker_scaled_size = new google.maps.Size(24, 24),
|
|
182
|
marker_zoom = 14,
|
|
183
|
locations_data = [];
|
|
184
|
|
|
185
|
// get locations from data atributes
|
|
186
|
$map_user_list.each(function () {
|
|
187
|
var $this = $(this),
|
|
188
|
locations = {
|
|
189
|
lat: $this.attr('data-gmap-lat'),
|
|
190
|
lon: $this.attr('data-gmap-lon'),
|
|
191
|
title: $this.attr('data-gmap-user'),
|
|
192
|
html: '<div class="gmap-info-window">'
|
|
193
|
+ '<h3 class="uk-text-nowrap">' + $this.attr('data-gmap-user') + '</h3>'
|
|
194
|
+ '<p>' + $this.attr('data-gmap-user-company') + '</p>'
|
|
195
|
+ '</div>',
|
|
196
|
zoom: marker_zoom,
|
|
197
|
icon: {
|
|
198
|
url: marker_url,
|
|
199
|
size: marker_size,
|
|
200
|
scaledSize: marker_scaled_size
|
|
201
|
}
|
|
202
|
};
|
|
203
|
locations_data.push(locations);
|
|
204
|
});
|
|
205
|
|
|
206
|
// init map
|
|
207
|
var mapUsers = new Maplace({
|
|
208
|
map_div: '#map_users',
|
|
209
|
locations: locations_data,
|
|
210
|
controls_on_map: false,
|
|
211
|
map_options: {
|
|
212
|
set_center: [37.390267, -122.076417],
|
|
213
|
zoom: 12,
|
|
214
|
streetViewControl: false
|
|
215
|
},
|
|
216
|
styles: map_styles
|
|
217
|
}).Load();
|
|
218
|
|
|
219
|
// jump to marker
|
|
220
|
$map_user_list.on('click', function (e) {
|
|
221
|
e.preventDefault();
|
|
222
|
var $this = $(this),
|
|
223
|
$this_index = $this.index();
|
|
224
|
|
|
225
|
$this
|
|
226
|
.addClass('md-list-item-active')
|
|
227
|
.siblings()
|
|
228
|
.removeClass('md-list-item-active');
|
|
229
|
|
|
230
|
google.maps.event.trigger(mapUsers.markers[$this_index], 'click');
|
|
231
|
});
|
|
232
|
|
|
233
|
// resize map on window resize event
|
|
234
|
$(window).on('debouncedresize', function () {
|
|
235
|
var gmap_users = mapUsers.oMap;
|
|
236
|
google.maps.event.trigger(gmap_users, 'resize');
|
|
237
|
gmap_users.fitBounds(mapUsers.oBounds);
|
|
238
|
})
|
|
239
|
}
|
|
240
|
},
|
|
241
|
// small charts
|
|
242
|
peity_charts: function () {
|
|
243
|
$(".peity_orders").peity("donut", {
|
|
244
|
height: 24,
|
|
245
|
width: 24,
|
|
246
|
fill: ["#8bc34a", "#eee"]
|
|
247
|
});
|
|
248
|
$(".peity_visitors").peity("bar", {
|
|
249
|
height: 28,
|
|
250
|
width: 48,
|
|
251
|
fill: ["#d84315"],
|
|
252
|
padding: 0.2
|
|
253
|
});
|
|
254
|
$(".peity_sale").peity("line", {
|
|
255
|
height: 28,
|
|
256
|
width: 64,
|
|
257
|
fill: "#d1e4f6",
|
|
258
|
stroke: "#0288d1"
|
|
259
|
});
|
|
260
|
$(".peity_conversions_large").peity("bar", {
|
|
261
|
height: 64,
|
|
262
|
width: 96,
|
|
263
|
fill: ["#d84315"],
|
|
264
|
padding: 0.2
|
|
265
|
});
|
|
266
|
var $peity_live = $('.peity_live');
|
|
267
|
if ($peity_live.length) {
|
|
268
|
// live update
|
|
269
|
var peityLive = $peity_live.peity("line", {
|
|
270
|
height: 28,
|
|
271
|
width: 64,
|
|
272
|
fill: "#efebe9",
|
|
273
|
stroke: "#5d4037"
|
|
274
|
});
|
|
275
|
// fix for "startVal or endVal is not a number" error
|
|
276
|
$('#peity_live_text').text('0');
|
|
277
|
|
|
278
|
function getRandomVal(min, max) {
|
|
279
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
280
|
}
|
|
281
|
|
|
282
|
setInterval(function () {
|
|
283
|
var random = Math.round(Math.random() * 10);
|
|
284
|
var values = peityLive.text().split(",");
|
|
285
|
values.shift();
|
|
286
|
values.push(random);
|
|
287
|
|
|
288
|
peityLive
|
|
289
|
.text(values.join(","))
|
|
290
|
.change();
|
|
291
|
|
|
292
|
var countFrom = parseInt($('#peity_live_text').text()),
|
|
293
|
countTo = getRandomVal(20, 100);
|
|
294
|
|
|
295
|
if(countFrom == countTo) {
|
|
296
|
var countTo = getRandomVal(20, 120);
|
|
297
|
}
|
|
298
|
|
|
299
|
var numAnim = new CountUp('peity_live_text', countFrom, countTo, 0, 1.2);
|
|
300
|
numAnim.start();
|
|
301
|
|
|
302
|
}, 2000)
|
|
303
|
}
|
|
304
|
},
|
|
305
|
// animated numerical values
|
|
306
|
count_animated: function () {
|
|
307
|
$('.countUpMe').each(function () {
|
|
308
|
var target = this,
|
|
309
|
countTo = $(target).text();
|
|
310
|
theAnimation = new CountUp(target, 0, countTo, 0, 2);
|
|
311
|
theAnimation.start();
|
|
312
|
});
|
|
313
|
},
|
|
314
|
// calendar
|
|
315
|
clndr_calendar: function () {
|
|
316
|
|
|
317
|
var $clndr_events = $('#clndr_events');
|
|
318
|
|
|
319
|
if ($clndr_events.length) {
|
|
320
|
|
|
321
|
var calendar_template = $('#clndr_events_template'),
|
|
322
|
template = calendar_template.html(),
|
|
323
|
template_compiled = Handlebars.compile(template);
|
|
324
|
|
|
325
|
var daysOfTheWeek = [];
|
|
326
|
|
|
327
|
for (var i = 0; i < 7; i++) {
|
|
328
|
daysOfTheWeek.push(moment().weekday(i).format('dd'));
|
|
329
|
}
|
|
330
|
theCalendar = $clndr_events.clndr({
|
|
331
|
weekOffset: 1, // Monday
|
|
332
|
daysOfTheWeek: daysOfTheWeek,
|
|
333
|
events: clndrEvents,
|
|
334
|
render: function(data) {
|
|
335
|
return template_compiled(data);
|
|
336
|
},
|
|
337
|
clickEvents: {
|
|
338
|
click: function (target) {
|
|
339
|
if(target.events.length) {
|
|
340
|
|
|
341
|
var $clndr_events_panel = $('.clndr_events'),
|
|
342
|
thisDate = target.date._i;
|
|
343
|
|
|
344
|
$(target.element)
|
|
345
|
.siblings('.day').removeClass('day-active')
|
|
346
|
.end()
|
|
347
|
.addClass('day-active');
|
|
348
|
|
|
349
|
if($clndr_events_panel.children('[data-clndr-event=' + thisDate + ']').length) {
|
|
350
|
|
|
351
|
$clndr_events_panel
|
|
352
|
.children('.clndr_event')
|
|
353
|
.hide();
|
|
354
|
|
|
355
|
if (!$clndr_events.hasClass('events_visible')) {
|
|
356
|
// adjust events panel
|
|
357
|
dayWidthCheck();
|
|
358
|
$clndr_events.addClass('events_visible');
|
|
359
|
$clndr_events_panel
|
|
360
|
.children('[data-clndr-event=' + thisDate + ']').velocity("transition.slideUpIn", {
|
|
361
|
stagger: 100,
|
|
362
|
drag: true,
|
|
363
|
delay: 280
|
|
364
|
});
|
|
365
|
} else {
|
|
366
|
$clndr_events_panel
|
|
367
|
.children('[data-clndr-event=' + thisDate + ']').velocity("transition.slideUpIn", {
|
|
368
|
stagger: 100,
|
|
369
|
drag: true
|
|
370
|
});
|
|
371
|
}
|
|
372
|
} else if( $(target.element).hasClass('last-month') ) {
|
|
373
|
setTimeout(function() {
|
|
374
|
$clndr_events.find('.calendar-day-' + target.date._i).click()
|
|
375
|
},380);
|
|
376
|
$clndr_events.find('.clndr_previous').click();
|
|
377
|
} else if( $(target.element).hasClass('next-month') ) {
|
|
378
|
setTimeout(function() {
|
|
379
|
$clndr_events.find('.calendar-day-' + target.date._i).click()
|
|
380
|
},380);
|
|
381
|
$clndr_events.find('.clndr_next').click();
|
|
382
|
}
|
|
383
|
}
|
|
384
|
}
|
|
385
|
}
|
|
386
|
});
|
|
387
|
|
|
388
|
var animate_change = function() {
|
|
389
|
$clndr_events
|
|
390
|
.addClass('animated_change')
|
|
391
|
.removeClass('events_visible');
|
|
392
|
setTimeout(function() {
|
|
393
|
$clndr_events
|
|
394
|
.removeClass('animated_change')
|
|
395
|
;
|
|
396
|
},380);
|
|
397
|
};
|
|
398
|
|
|
399
|
// next month
|
|
400
|
$clndr_events.on('click', '.clndr_next', function(e) {
|
|
401
|
e.preventDefault();
|
|
402
|
|
|
403
|
animate_change();
|
|
404
|
setTimeout(function() {
|
|
405
|
theCalendar.forward();
|
|
406
|
},280);
|
|
407
|
});
|
|
408
|
|
|
409
|
// previous month
|
|
410
|
$clndr_events.on('click', '.clndr_previous', function(e) {
|
|
411
|
e.preventDefault();
|
|
412
|
|
|
413
|
animate_change();
|
|
414
|
setTimeout(function() {
|
|
415
|
theCalendar.back();
|
|
416
|
},280);
|
|
417
|
});
|
|
418
|
|
|
419
|
// today
|
|
420
|
$clndr_events.on('click', '.clndr_today', function(e) {
|
|
421
|
e.preventDefault();
|
|
422
|
|
|
423
|
animate_change();
|
|
424
|
setTimeout(function() {
|
|
425
|
theCalendar
|
|
426
|
.setYear(moment().format('YYYY'))
|
|
427
|
.setMonth(moment().format('M') - 1);
|
|
428
|
},280);
|
|
429
|
|
|
430
|
});
|
|
431
|
|
|
432
|
// close events
|
|
433
|
$clndr_events.on('click', '.clndr_events_close_button', function () {
|
|
434
|
$clndr_events.removeClass('events_visible events_over')
|
|
435
|
});
|
|
436
|
|
|
437
|
// add event modal
|
|
438
|
event_modal = UIkit.modal("#modal_clndr_new_event");
|
|
439
|
$clndr_events.on('click', '.clndr_add_event', function () {
|
|
440
|
if ( event_modal.isActive() ) {
|
|
441
|
event_modal.hide();
|
|
442
|
} else {
|
|
443
|
event_modal.show();
|
|
444
|
// hide events panel
|
|
445
|
$clndr_events.removeClass('events_visible');
|
|
446
|
setTimeout(function() {
|
|
447
|
$window.resize();
|
|
448
|
},280)
|
|
449
|
}
|
|
450
|
});
|
|
451
|
|
|
452
|
// add events submit
|
|
453
|
$('#clndr_new_event_submit').on('click', function() {
|
|
454
|
|
|
455
|
var e_title = '#clndr_event_title_control',
|
|
456
|
e_link = '#clndr_event_link_control',
|
|
457
|
e_date = '#clndr_event_date_control',
|
|
458
|
e_start = '#clndr_event_start_control',
|
|
459
|
e_end = '#clndr_event_end_control';
|
|
460
|
|
|
461
|
if($(e_title).val() == '') {
|
|
462
|
$(e_title).addClass('md-input-danger').focus();
|
|
463
|
altair_md.update_input($(e_title));
|
|
464
|
return false;
|
|
465
|
}
|
|
466
|
|
|
467
|
if($(e_date).val() == '') {
|
|
468
|
$(e_date).addClass('md-input-danger').focus();
|
|
469
|
altair_md.update_input($(e_date));
|
|
470
|
return false;
|
|
471
|
}
|
|
472
|
|
|
473
|
var new_event = [
|
|
474
|
{ date: $(e_date).val(), title: $(e_title).val(), url: $(e_link).val() ? $(e_link).val() : 'javascript:void(0)', timeStart: $(e_start).val(), timeEnd: $(e_end).val() }
|
|
475
|
];
|
|
476
|
|
|
477
|
theCalendar.addEvents(new_event);
|
|
478
|
theCalendar.setMonth(moment($(e_date).val()).format('M') - 1);
|
|
479
|
// hide modal
|
|
480
|
event_modal.hide();
|
|
481
|
|
|
482
|
$(e_title+','+e_link+','+e_date+','+e_start+','+e_end).removeClass('md-input-danger').val('');
|
|
483
|
altair_md.update_input($(e_title+','+e_link+','+e_date+','+e_start+','+e_end));
|
|
484
|
|
|
485
|
});
|
|
486
|
|
|
487
|
|
|
488
|
var dayWidth = $clndr_events.find('.day > span').outerWidth(),
|
|
489
|
calMinWidth = dayWidth * 7 + 240 + 32 + 14; // day + events container + padding-left/padding-right + day padding (7*2px)
|
|
490
|
|
|
491
|
function dayWidthCheck() {
|
|
492
|
($clndr_events.width() < (calMinWidth)) ? $clndr_events.addClass('events_over') : $clndr_events.removeClass('events_over');
|
|
493
|
}
|
|
494
|
|
|
495
|
dayWidthCheck();
|
|
496
|
|
|
497
|
// resize map on window resize event
|
|
498
|
$(window).on('debouncedresize', function () {
|
|
499
|
dayWidthCheck();
|
|
500
|
})
|
|
501
|
}
|
|
502
|
},
|
|
503
|
// video player
|
|
504
|
video_player: function () {
|
|
505
|
var $video_player = $('#video_player'),
|
|
506
|
$video_playlist = $('#video_player_playlist'),
|
|
507
|
active_class = 'md-list-item-active';
|
|
508
|
if ($video_player.length) {
|
|
509
|
|
|
510
|
$video_playlist.on('click', 'li' ,function(e) {
|
|
511
|
e.stopPropagation();
|
|
512
|
var $this = $(this);
|
|
513
|
if(!$this.hasClass(active_class)) {
|
|
514
|
var this_src = $this.attr('data-video-src'),
|
|
515
|
iframe_embed = 'https://www.youtube.com/embed/' + this_src + '?rel=0';
|
|
516
|
|
|
517
|
$video_playlist.children('li').removeClass(active_class);
|
|
518
|
$this.addClass(active_class);
|
|
519
|
|
|
520
|
$video_player.velocity({
|
|
521
|
translateZ: 0,
|
|
522
|
scale: 0,
|
|
523
|
opacity: 0
|
|
524
|
},
|
|
525
|
{
|
|
526
|
duration: 280,
|
|
527
|
easing: easing_swiftOut,
|
|
528
|
complete: function() {
|
|
529
|
$video_player.children('iframe').attr('src',iframe_embed);
|
|
530
|
setTimeout(function() {
|
|
531
|
$video_player.velocity('reverse');
|
|
532
|
},280)
|
|
533
|
}
|
|
534
|
}
|
|
535
|
);
|
|
536
|
|
|
537
|
}
|
|
538
|
});
|
|
539
|
|
|
540
|
// activate first video
|
|
541
|
$video_playlist.children('li:first').trigger('click');
|
|
542
|
|
|
543
|
}
|
|
544
|
}
|
|
545
|
};
|