source: public/assets/js/examples/dashboard.js@ 9c3c224

develop
Last change on this file since 9c3c224 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: 61.0 KB
Line 
1'use strict';
2$(document).ready(function () {
3
4 var colors = {
5 primary: $('.colors .bg-primary').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
6 primaryLight: $('.colors .bg-primary-bright').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
7 secondary: $('.colors .bg-secondary').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
8 secondaryLight: $('.colors .bg-secondary-bright').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
9 info: $('.colors .bg-info').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
10 infoLight: $('.colors .bg-info-bright').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
11 success: $('.colors .bg-success').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
12 successLight: $('.colors .bg-success-bright').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
13 danger: $('.colors .bg-danger').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
14 dangerLight: $('.colors .bg-danger-bright').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
15 warning: $('.colors .bg-warning').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
16 warningLight: $('.colors .bg-warning-bright').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(',')
17 };
18
19 var rgbToHex = function (rgb) {
20 var hex = Number(rgb).toString(16);
21 if (hex.length < 2) {
22 hex = "0" + hex;
23 }
24 return hex;
25 };
26
27 var fullColorHex = function (r, g, b) {
28 var red = rgbToHex(r);
29 var green = rgbToHex(g);
30 var blue = rgbToHex(b);
31 return red + green + blue;
32 };
33
34 colors.primary = '#' + fullColorHex(colors.primary[0], colors.primary[1], colors.primary[2]);
35 colors.secondary = '#' + fullColorHex(colors.secondary[0], colors.secondary[1], colors.secondary[2]);
36 colors.info = '#' + fullColorHex(colors.info[0], colors.info[1], colors.info[2]);
37 colors.success = '#' + fullColorHex(colors.success[0], colors.success[1], colors.success[2]);
38 colors.danger = '#' + fullColorHex(colors.danger[0], colors.danger[1], colors.danger[2]);
39 colors.warning = '#' + fullColorHex(colors.warning[0], colors.warning[1], colors.warning[2]);
40
41 /**
42 * Slick slide example
43 **/
44
45 if ($('.slick-single-item').length) {
46 $('.slick-single-item').slick({
47 autoplay: true,
48 autoplaySpeed: 3000,
49 infinite: true,
50 slidesToShow: 4,
51 slidesToScroll: 4,
52 prevArrow: '.slick-single-arrows a:eq(0)',
53 nextArrow: '.slick-single-arrows a:eq(1)',
54 responsive: [
55 {
56 breakpoint: 1300,
57 settings: {
58 slidesToShow: 3,
59 slidesToScroll: 3,
60 }
61 },
62 {
63 breakpoint: 992,
64 settings: {
65 slidesToShow: 3,
66 slidesToScroll: 3,
67 }
68 },
69 {
70 breakpoint: 768,
71 settings: {
72 slidesToShow: 2,
73 slidesToScroll: 2
74 }
75 },
76 {
77 breakpoint: 540,
78 settings: {
79 slidesToShow: 1,
80 slidesToScroll: 1
81 }
82 }
83 ]
84 });
85 }
86
87 if ($('.reportrange').length > 0) {
88 var start = moment().subtract(29, 'days');
89 var end = moment();
90
91 function cb(start, end) {
92 $('.reportrange .text').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
93 }
94
95 $('.reportrange').daterangepicker({
96 startDate: start,
97 endDate: end,
98 ranges: {
99 'Today': [moment(), moment()],
100 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
101 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
102 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
103 'This Month': [moment().startOf('month'), moment().endOf('month')],
104 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
105 }
106 }, cb);
107
108 cb(start, end);
109 }
110
111 var chartColors = {
112 primary: {
113 base: '#3f51b5',
114 light: '#c0c5e4'
115 },
116 danger: {
117 base: '#f2125e',
118 light: '#fcd0df'
119 },
120 success: {
121 base: '#0acf97',
122 light: '#cef5ea'
123 },
124 warning: {
125 base: '#ff8300',
126 light: '#ffe6cc'
127 },
128 info: {
129 base: '#00bcd4',
130 light: '#e1efff'
131 },
132 dark: '#37474f',
133 facebook: '#3b5998',
134 twitter: '#55acee',
135 linkedin: '#0077b5',
136 instagram: '#517fa4',
137 whatsapp: '#25D366',
138 dribbble: '#ea4c89',
139 google: '#DB4437',
140 borderColor: '#e8e8e8',
141 fontColor: '#999'
142 };
143
144 if ($('body').hasClass('dark')) {
145 chartColors.borderColor = 'rgba(255, 255, 255, .1)';
146 chartColors.fontColor = 'rgba(255, 255, 255, .4)';
147 }
148
149 /// Chartssssss
150
151 chart_demo_1();
152
153 chart_demo_2();
154
155 chart_demo_3();
156
157 chart_demo_4();
158
159 chart_demo_5();
160
161 chart_demo_6();
162
163 chart_demo_7();
164
165 chart_demo_8();
166
167 chart_demo_9();
168
169 chart_demo_10();
170
171 function chart_demo_1() {
172 if ($('#chart_demo_1').length) {
173 var element = document.getElementById("chart_demo_1");
174 element.height = 146;
175 new Chart(element, {
176 type: 'bar',
177 data: {
178 labels: ["2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"],
179 datasets: [
180 {
181 label: "Total Sales",
182 backgroundColor: colors.primary,
183 data: [133, 221, 783, 978, 214, 421, 211, 577]
184 }, {
185 label: "Average",
186 backgroundColor: colors.info,
187 data: [408, 947, 675, 734, 325, 672, 632, 213]
188 }
189 ]
190 },
191 options: {
192 legend: {
193 display: false
194 },
195 scales: {
196 xAxes: [{
197 ticks: {
198 fontSize: 11,
199 fontColor: chartColors.fontColor
200 },
201 gridLines: {
202 display: false,
203 }
204 }],
205 yAxes: [{
206 ticks: {
207 fontSize: 11,
208 fontColor: chartColors.fontColor
209 },
210 gridLines: {
211 color: chartColors.borderColor
212 }
213 }],
214 }
215 }
216 })
217 }
218 }
219
220 function chart_demo_2() {
221 if ($('#chart_demo_2').length) {
222 var ctx = document.getElementById('chart_demo_2').getContext('2d');
223 new Chart(ctx, {
224 type: 'line',
225 data: {
226 labels: ["Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016", "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017"],
227 datasets: [{
228 label: "Rainfall",
229 backgroundColor: chartColors.primary.light,
230 borderColor: chartColors.primary.base,
231 data: [26.4, 39.8, 66.8, 66.4, 40.6, 55.2, 77.4, 69.8, 57.8, 76, 110.8, 142.6],
232 }]
233 },
234 options: {
235 legend: {
236 display: false,
237 labels: {
238 fontColor: chartColors.fontColor
239 }
240 },
241 title: {
242 display: true,
243 text: 'Precipitation in Toronto',
244 fontColor: chartColors.fontColor,
245 },
246 scales: {
247 yAxes: [{
248 gridLines: {
249 color: chartColors.borderColor
250 },
251 ticks: {
252 fontColor: chartColors.fontColor,
253 beginAtZero: true
254 },
255 scaleLabel: {
256 display: true,
257 labelString: 'Precipitation in mm',
258 fontColor: chartColors.fontColor,
259 }
260 }],
261 xAxes: [{
262 gridLines: {
263 color: chartColors.borderColor
264 },
265 ticks: {
266 fontColor: chartColors.fontColor,
267 beginAtZero: true
268 }
269 }]
270 }
271 }
272 });
273 }
274 }
275
276 function chart_demo_3() {
277 if ($('#chart_demo_3').length) {
278 var element = document.getElementById("chart_demo_3"),
279 ctx = element.getContext("2d");
280
281
282 new Chart(ctx, {
283 type: 'line',
284 data: {
285 labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
286 datasets: [{
287 label: 'Success',
288 borderColor: colors.success,
289 data: [-10, 30, -20, 0, 25, 44, 30, 15, 20, 10, 5, -5],
290 pointRadius: 5,
291 pointHoverRadius: 7,
292 borderDash: [2, 2],
293 fill: false
294 }, {
295 label: 'Return',
296 fill: false,
297 borderDash: [2, 2],
298 borderColor: colors.danger,
299 data: [20, 0, 22, 39, -10, 19, -7, 0, 15, 0, -10, 5],
300 pointRadius: 5,
301 pointHoverRadius: 7
302 }]
303 },
304 options: {
305 responsive: true,
306 legend: {
307 display: false,
308 labels: {
309 fontColor: chartColors.fontColor
310 }
311 },
312 title: {
313 display: false,
314 fontColor: chartColors.fontColor
315 },
316 scales: {
317 xAxes: [{
318 gridLines: {
319 display: false,
320 color: chartColors.borderColor
321 },
322 ticks: {
323 fontColor: chartColors.fontColor,
324 display: false
325 }
326 }],
327 yAxes: [{
328 gridLines: {
329 color: chartColors.borderColor
330 },
331 ticks: {
332 fontColor: chartColors.fontColor,
333 min: -50,
334 max: 50
335 }
336 }],
337 }
338 }
339 });
340
341 }
342 }
343
344 function chart_demo_4() {
345 if ($('#chart_demo_4').length) {
346 var ctx = document.getElementById("chart_demo_4").getContext("2d");
347 var densityData = {
348 backgroundColor: chartColors.primary.light,
349 data: [10, 20, 40, 60, 80, 40, 60, 80, 40, 80, 20, 59]
350 };
351 new Chart(ctx, {
352 type: 'bar',
353 data: {
354 labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
355 datasets: [densityData]
356 },
357 options: {
358 scaleFontColor: "#FFFFFF",
359 legend: {
360 display: false,
361 labels: {
362 fontColor: chartColors.fontColor
363 }
364 },
365 scales: {
366 xAxes: [{
367 gridLines: {
368 color: chartColors.borderColor
369 },
370 ticks: {
371 fontColor: chartColors.fontColor
372 }
373 }],
374 yAxes: [{
375 gridLines: {
376 color: chartColors.borderColor
377 },
378 ticks: {
379 fontColor: chartColors.fontColor,
380 min: 0,
381 max: 100,
382 beginAtZero: true
383 }
384 }]
385 }
386 }
387 });
388 }
389 }
390
391 function chart_demo_5() {
392 if ($('#chart_demo_5').length) {
393 var ctx = document.getElementById('chart_demo_5').getContext('2d');
394 window.myBar = new Chart(ctx, {
395 type: 'bar',
396 data: {
397 labels: ['January', 'February', 'March', 'April', 'May'],
398 datasets: [
399 {
400 label: 'Dataset 1',
401 backgroundColor: [
402 chartColors.info.base,
403 chartColors.success.base,
404 chartColors.danger.base,
405 chartColors.dark,
406 chartColors.warning.base,
407 ],
408 yAxisID: 'y-axis-1',
409 data: [33, 56, -40, 25, 45]
410 },
411 {
412 label: 'Dataset 2',
413 backgroundColor: chartColors.info.base,
414 yAxisID: 'y-axis-2',
415 data: [23, 86, -40, 5, 45]
416 }
417 ]
418 },
419 options: {
420 legend: {
421 labels: {
422 fontColor: chartColors.fontColor
423 }
424 },
425 responsive: true,
426 title: {
427 display: true,
428 text: 'Chart.js Bar Chart - Multi Axis',
429 fontColor: chartColors.fontColor
430 },
431 tooltips: {
432 mode: 'index',
433 intersect: true
434 },
435 scales: {
436 xAxes: [{
437 gridLines: {
438 color: chartColors.borderColor
439 },
440 ticks: {
441 fontColor: chartColors.fontColor
442 }
443 }],
444 yAxes: [
445 {
446 type: 'linear',
447 display: true,
448 position: 'left',
449 id: 'y-axis-1',
450 },
451 {
452 gridLines: {
453 color: chartColors.borderColor
454 },
455 ticks: {
456 fontColor: chartColors.fontColor
457 }
458 },
459 {
460 type: 'linear',
461 display: true,
462 position: 'right',
463 id: 'y-axis-2',
464 gridLines: {
465 drawOnChartArea: false
466 },
467 ticks: {
468 fontColor: chartColors.fontColor
469 }
470 }
471 ],
472 }
473 }
474 });
475 }
476 }
477
478 function chart_demo_6() {
479 if ($('#chart_demo_6').length) {
480 var ctx = document.getElementById("chart_demo_6").getContext("2d");
481 var speedData = {
482 labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
483 datasets: [{
484 label: "Car Speed (mph)",
485 borderColor: chartColors.primary.base,
486 backgroundColor: 'rgba(0, 0, 0, 0',
487 data: [0, 59, 75, 20, 20, 55, 40]
488 }]
489 };
490 var chartOptions = {
491 legend: {
492 scaleFontColor: "#FFFFFF",
493 position: 'top',
494 labels: {
495 fontColor: chartColors.fontColor
496 }
497 },
498 scales: {
499 xAxes: [{
500 gridLines: {
501 color: chartColors.borderColor
502 },
503 ticks: {
504 fontColor: chartColors.fontColor
505 }
506 }],
507 yAxes: [{
508 gridLines: {
509 color: chartColors.borderColor
510 },
511 ticks: {
512 fontColor: chartColors.fontColor
513 }
514 }]
515 }
516 };
517 new Chart(ctx, {
518 type: 'line',
519 data: speedData,
520 options: chartOptions
521 });
522 }
523 }
524
525 function chart_demo_7() {
526 if ($('#chart_demo_7').length) {
527 var config = {
528 type: 'pie',
529 data: {
530 datasets: [{
531 borderWidth: 3,
532 borderColor: $('body').hasClass('dark') ? "#313852" : "rgba(255, 255, 255, 1)",
533 data: [
534 1242,
535 742,
536 442,
537 1742
538 ],
539 backgroundColor: [
540 colors.danger,
541 colors.info,
542 colors.warning,
543 colors.success
544 ],
545 label: 'Dataset 1'
546 }],
547 labels: [
548 'Organic Search',
549 'Email',
550 'Refferal',
551 'Social Media',
552 ]
553 },
554 options: {
555 responsive: true,
556 legend: {
557 display: false
558 }
559 }
560 };
561
562 var ctx = document.getElementById('chart_demo_7').getContext('2d');
563 new Chart(ctx, config);
564 }
565 }
566
567 function chart_demo_8() {
568 if ($('#chart_demo_8').length) {
569 new Chart(document.getElementById("chart_demo_8"), {
570 type: 'radar',
571 data: {
572 labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
573 datasets: [
574 {
575 label: "1950",
576 fill: true,
577 backgroundColor: "rgba(179,181,198,0.2)",
578 borderColor: "rgba(179,181,198,1)",
579 pointBorderColor: "#fff",
580 pointBackgroundColor: "rgba(179,181,198,1)",
581 data: [-8.77, -55.61, 21.69, 6.62, 6.82]
582 }, {
583 label: "2050",
584 fill: true,
585 backgroundColor: "rgba(255,99,132,0.2)",
586 borderColor: "rgba(255,99,132,1)",
587 pointBorderColor: "#fff",
588 pointBackgroundColor: "rgba(255,99,132,1)",
589 data: [-25.48, 54.16, 7.61, 8.06, 4.45]
590 }
591 ]
592 },
593 options: {
594 legend: {
595 labels: {
596 fontColor: chartColors.fontColor
597 }
598 },
599 scale: {
600 gridLines: {
601 color: chartColors.borderColor
602 }
603 },
604 title: {
605 display: true,
606 text: 'Distribution in % of world population',
607 fontColor: chartColors.fontColor
608 }
609 }
610 });
611 }
612 }
613
614 function chart_demo_9() {
615 if ($('#chart_demo_9').length) {
616 new Chart(document.getElementById("chart_demo_9"), {
617 type: 'horizontalBar',
618 data: {
619 labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
620 datasets: [
621 {
622 label: "Population (millions)",
623 backgroundColor: colors.primary,
624 data: [2478, 2267, 734, 1284, 1933]
625 }
626 ]
627 },
628 options: {
629 legend: {
630 display: false
631 },
632 scales: {
633 xAxes: [{
634 gridLines: {
635 color: chartColors.borderColor
636 },
637 ticks: {
638 fontColor: chartColors.fontColor,
639 display: false
640 }
641 }],
642 yAxes: [{
643 gridLines: {
644 color: chartColors.borderColor,
645 display: false
646 },
647 ticks: {
648 fontColor: chartColors.fontColor
649 },
650 barPercentage: 0.5
651 }]
652 }
653 }
654 });
655 }
656 }
657
658 function chart_demo_10() {
659 if ($('#chart_demo_10').length) {
660 var element = document.getElementById("chart_demo_10");
661 new Chart(element, {
662 type: 'bar',
663 data: {
664 labels: ["1900", "1950", "1999", "2050"],
665 datasets: [
666 {
667 label: "Europe",
668 type: "line",
669 borderColor: "#8e5ea2",
670 data: [408, 547, 675, 734],
671 fill: false
672 },
673 {
674 label: "Africa",
675 type: "line",
676 borderColor: "#3e95cd",
677 data: [133, 221, 783, 2478],
678 fill: false
679 },
680 {
681 label: "Europe",
682 type: "bar",
683 backgroundColor: chartColors.primary.base,
684 data: [408, 547, 675, 734],
685 },
686 {
687 label: "Africa",
688 type: "bar",
689 backgroundColor: chartColors.primary.light,
690 data: [133, 221, 783, 2478]
691 }
692 ]
693 },
694 options: {
695 title: {
696 display: true,
697 text: 'Population growth (millions): Europe & Africa',
698 fontColor: chartColors.fontColor
699 },
700 legend: {
701 display: true,
702 labels: {
703 fontColor: chartColors.fontColor
704 }
705 },
706 scales: {
707 xAxes: [{
708 gridLines: {
709 color: chartColors.borderColor
710 },
711 ticks: {
712 fontColor: chartColors.fontColor
713 }
714 }],
715 yAxes: [{
716 gridLines: {
717 color: chartColors.borderColor
718 },
719 ticks: {
720 fontColor: chartColors.fontColor
721 }
722 }]
723 }
724 }
725 });
726 }
727 }
728
729 if ($('#circle-1').length) {
730 $('#circle-1').circleProgress({
731 startAngle: 1.55,
732 value: 0.65,
733 size: 90,
734 thickness: 10,
735 fill: {
736 color: colors.primary
737 }
738 });
739 }
740
741 if ($('#sales-circle-graphic').length) {
742 $('#sales-circle-graphic').circleProgress({
743 startAngle: 1.55,
744 value: 0.65,
745 size: 180,
746 thickness: 30,
747 fill: {
748 color: colors.primary
749 }
750 });
751 }
752
753 if ($('#circle-2').length) {
754 $('#circle-2').circleProgress({
755 startAngle: 1.55,
756 value: 0.35,
757 size: 90,
758 thickness: 10,
759 fill: {
760 color: colors.warning
761 }
762 });
763 }
764
765 ////////////////////////////////////////////
766
767 if ($(".dashboard-pie-1").length) {
768 $(".dashboard-pie-1").peity("pie", {
769 fill: [colors.primaryLight, colors.primary],
770 radius: 30
771 });
772 }
773
774 if ($(".dashboard-pie-2").length) {
775 $(".dashboard-pie-2").peity("pie", {
776 fill: [colors.successLight, colors.success],
777 radius: 30
778 });
779 }
780
781 if ($(".dashboard-pie-3").length) {
782 $(".dashboard-pie-3").peity("pie", {
783 fill: [colors.warningLight, colors.warning],
784 radius: 30
785 });
786 }
787
788 if ($(".dashboard-pie-4").length) {
789 $(".dashboard-pie-4").peity("pie", {
790 fill: [colors.infoLight, colors.info],
791 radius: 30
792 });
793 }
794
795 ////////////////////////////////////////////
796
797 function bar_chart() {
798 if ($('#chart-ticket-status').length > 0) {
799 var dataSource = [
800 {country: "USA", hydro: 59.8, oil: 937.6, gas: 582, coal: 564.3, nuclear: 187.9},
801 {country: "China", hydro: 74.2, oil: 308.6, gas: 35.1, coal: 956.9, nuclear: 11.3},
802 {country: "Russia", hydro: 40, oil: 128.5, gas: 361.8, coal: 105, nuclear: 32.4},
803 {country: "Japan", hydro: 22.6, oil: 241.5, gas: 64.9, coal: 120.8, nuclear: 64.8},
804 {country: "India", hydro: 19, oil: 119.3, gas: 28.9, coal: 204.8, nuclear: 3.8},
805 {country: "Germany", hydro: 6.1, oil: 123.6, gas: 77.3, coal: 85.7, nuclear: 37.8}
806 ];
807
808 // Return with commas in between
809 var numberWithCommas = function (x) {
810 return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
811 };
812
813 var dataPack1 = [40, 47, 44, 38, 27, 40, 47, 44, 38, 27, 40, 27];
814 var dataPack2 = [10, 12, 7, 5, 4, 10, 12, 7, 5, 4, 10, 12];
815 var dataPack3 = [17, 11, 22, 18, 12, 17, 11, 22, 18, 12, 17, 11];
816 var dates = ["Jan", "Jan", "Jan", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
817
818 var bar_ctx = document.getElementById('chart-ticket-status');
819
820 bar_ctx.height = 115;
821
822 new Chart(bar_ctx, {
823 type: 'bar',
824 data: {
825 labels: dates,
826 datasets: [
827 {
828 label: 'New Tickets',
829 data: dataPack1,
830 backgroundColor: colors.primary,
831 hoverBorderWidth: 0
832 },
833 {
834 label: 'Solved Tickets',
835 data: dataPack2,
836 backgroundColor: colors.success,
837 hoverBorderWidth: 0
838 },
839 {
840 label: 'Pending Tickets',
841 data: dataPack3,
842 backgroundColor: colors.info,
843 hoverBorderWidth: 0
844 },
845 ]
846 },
847 options: {
848 legend: {
849 display: false
850 },
851 animation: {
852 duration: 10,
853 },
854 tooltips: {
855 mode: 'label',
856 callbacks: {
857 label: function (tooltipItem, data) {
858 return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
859 }
860 }
861 },
862 scales: {
863 xAxes: [{
864 stacked: true,
865 gridLines: {display: false},
866 ticks: {
867 fontSize: 11,
868 fontColor: chartColors.fontColor
869 }
870 }],
871 yAxes: [{
872 stacked: true,
873 ticks: {
874 callback: function (value) {
875 return numberWithCommas(value);
876 },
877 fontSize: 11,
878 fontColor: chartColors.fontColor
879 },
880 }],
881 }
882 },
883 plugins: [{
884 beforeInit: function (chart) {
885 chart.data.labels.forEach(function (value, index, array) {
886 var a = [];
887 a.push(value.slice(0, 5));
888 var i = 1;
889 while (value.length > (i * 5)) {
890 a.push(value.slice(i * 5, (i + 1) * 5));
891 i++;
892 }
893 array[index] = a;
894 })
895 }
896 }]
897 }
898 );
899 }
900 }
901
902 bar_chart();
903
904 function online_users() {
905 if ($('#online-users').length > 0) {
906 var lastDate = 0;
907 var data = []
908 var TICKINTERVAL = 86400000
909 let XAXISRANGE = 777600000
910
911 function getDayWiseTimeSeries(baseval, count, yrange) {
912 var i = 0;
913 while (i < count) {
914 var x = baseval;
915 var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
916
917 data.push({
918 x, y
919 });
920 lastDate = baseval
921 baseval += TICKINTERVAL;
922 i++;
923 }
924 }
925
926 getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
927 min: 10,
928 max: 90
929 })
930
931 function getNewSeries(baseval, yrange) {
932 var newDate = baseval + TICKINTERVAL;
933 lastDate = newDate
934
935 for (var i = 0; i < data.length - 10; i++) {
936 // IMPORTANT
937 // we reset the x and y of the data which is out of drawing area
938 // to prevent memory leaks
939 data[i].x = newDate - XAXISRANGE - TICKINTERVAL
940 data[i].y = 0
941 }
942
943 data.push({
944 x: newDate,
945 y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
946 })
947 }
948
949 function resetData() {
950 // Alternatively, you can also reset the data at certain intervals to prevent creating a huge series
951 data = data.slice(data.length - 10, data.length);
952 }
953
954 var options = {
955 series: [{
956 data: data.slice()
957 }],
958 chart: {
959 id: 'realtime',
960 height: 330,
961 type: 'line',
962 fontFamily: 'Inter',
963 toolbar: {
964 show: false
965 },
966 zoom: {
967 enabled: false
968 }
969 },
970 dataLabels: {
971 enabled: false
972 },
973 stroke: {
974 curve: 'smooth',
975 width: 3,
976 colors: ['#ffffff'],
977 },
978 xaxis: {
979 labels: {
980 show: false,
981 },
982 type: 'datetime',
983 range: XAXISRANGE,
984 axisBorder: {
985 show: false,
986 }
987 },
988 yaxis: {
989 show: false,
990 max: 100
991 },
992 grid: {
993 show: false,
994 }
995 };
996
997 var chart = new ApexCharts(document.querySelector("#online-users"), options);
998 chart.render();
999
1000 window.setInterval(function () {
1001 getNewSeries(lastDate, {
1002 min: 10,
1003 max: 90
1004 });
1005
1006 chart.updateSeries([{
1007 data: data
1008 }])
1009 }, 1000)
1010 }
1011 }
1012
1013 online_users();
1014
1015 function customerGrowth() {
1016 if ($('#customer-growth').length > 0) {
1017 var options = {
1018 chart: {
1019 height: 350,
1020 type: 'area',
1021 offsetX: -20,
1022 offsetY: -10,
1023 width: '103%',
1024 fontFamily: 'Inter',
1025 toolbar: {
1026 show: false,
1027 }
1028 },
1029 dataLabels: {
1030 enabled: false
1031 },
1032 colors: [colors.primary],
1033 stroke: {
1034 curve: 'smooth',
1035 width: 2,
1036 },
1037 series: [{
1038 name: 'Sales',
1039 data: [80, 40, 60, 90, 50, 100, 90, 80, 45, 75, 50, 100]
1040 }],
1041 fill: {
1042 type: 'gradient',
1043 gradient: {
1044 opacityFrom: 0.6,
1045 opacityTo: 0,
1046 }
1047 },
1048 xaxis: {
1049 categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
1050 }
1051 };
1052
1053 var chart = new ApexCharts(
1054 document.querySelector("#customer-growth"),
1055 options
1056 );
1057
1058 chart.render();
1059 }
1060 }
1061
1062 customerGrowth();
1063
1064 function device_session_chart() {
1065 if ($('#device_session_chart').length) {
1066
1067 var data = [
1068 {
1069 name: "Mobile",
1070 data: [90, 152, 138, 145, 120, 123, 140]
1071 },
1072 {
1073 name: "Tablet",
1074 data: [125, 90, 128, 135, 150, 123, 180]
1075 },
1076 {
1077 name: "Desktop",
1078 data: [50, 200, 138, 135, 100, 123, 90]
1079 }
1080 ];
1081
1082 var options = {
1083 chart: {
1084 type: 'area',
1085 fontFamily: 'Inter',
1086 height: 300,
1087 offsetX: -18,
1088 width: '103%',
1089 stacked: true,
1090 events: {
1091 selection: function (chart, e) {
1092 // console.log(new Date(e.xaxis.min))
1093 }
1094 },
1095 toolbar: {
1096 show: false,
1097 }
1098
1099 },
1100 colors: [colors.primary, colors.secondary, colors.success],
1101 dataLabels: {
1102 enabled: false
1103 },
1104 stroke: {
1105 curve: 'smooth',
1106 width: 1
1107 },
1108 series: data,
1109 fill: {
1110 type: 'gradient',
1111 gradient: {
1112 opacityFrom: .6,
1113 opacityTo: 0,
1114 }
1115 },
1116 legend: {
1117 show: false
1118 },
1119 xaxis: {
1120 categories: [
1121 "01 Jan",
1122 "02 Jan",
1123 "03 Jan",
1124 "04 Jan",
1125 "05 Jan",
1126 "06 Jan",
1127 "07 Jan"
1128 ]
1129 }
1130 };
1131
1132 var chart = new ApexCharts(
1133 document.querySelector("#device_session_chart"),
1134 options
1135 );
1136
1137 chart.render();
1138
1139 /*
1140 // this function will generate output in this format
1141 // data = [
1142 [timestamp, 23],
1143 [timestamp, 33],
1144 [timestamp, 12]
1145 ...
1146 ]
1147 */
1148 function generateDayWiseTimeSeries(baseval, count, yrange) {
1149 var i = 0;
1150 var series = [];
1151 while (i < count) {
1152 var x = baseval;
1153 var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
1154
1155 series.push([x, y]);
1156 baseval += 86400000;
1157 i++;
1158 }
1159 return series;
1160 }
1161 }
1162 }
1163
1164 device_session_chart();
1165
1166 function analytics_tab1() {
1167 if ($('#analytics-tab-1').length) {
1168 var options = {
1169 series: [{
1170 name: 'Users',
1171 data: [20, 25, 15, 12, 25, 20, 22]
1172 }],
1173 chart: {
1174 height: 280,
1175 type: 'line',
1176 offsetX: -20,
1177 offsetY: 20,
1178 width: '102%',
1179 fontFamily: 'Inter',
1180 toolbar: {
1181 show: false,
1182 }
1183 },
1184 stroke: {
1185 width: 3,
1186 curve: 'smooth'
1187 },
1188 xaxis: {
1189 type: 'datetime',
1190 categories: [
1191 "01 Jan",
1192 "02 Jan",
1193 "03 Jan",
1194 "04 Jan",
1195 "05 Jan",
1196 "06 Jan",
1197 "07 Jan"
1198 ]
1199 },
1200 fill: {
1201 type: 'gradient',
1202 gradient: {
1203 shade: 'dark',
1204 gradientToColors: [colors.secondary],
1205 shadeIntensity: 1,
1206 type: 'horizontal',
1207 opacityFrom: 1,
1208 opacityTo: 1,
1209 stops: [0, 100, 100, 100]
1210 },
1211 }
1212 };
1213
1214 var chart = new ApexCharts(document.querySelector("#analytics-tab-1"), options);
1215 chart.render();
1216 }
1217 }
1218
1219 analytics_tab1();
1220
1221 function analytics_tab2() {
1222 if ($('#analytics-tab-2').length) {
1223 var options = {
1224 series: [{
1225 name: 'Conversations',
1226 data: [10, 35, 10, 22, 25, 10, 30]
1227 }],
1228 chart: {
1229 height: 280,
1230 type: 'line',
1231 offsetX: -20,
1232 offsetY: 20,
1233 width: '102%',
1234 fontFamily: 'Inter',
1235 toolbar: {
1236 show: false,
1237 }
1238 },
1239 stroke: {
1240 width: 3,
1241 curve: 'smooth'
1242 },
1243 xaxis: {
1244 type: 'datetime',
1245 categories: [
1246 "01 Jan",
1247 "02 Jan",
1248 "03 Jan",
1249 "04 Jan",
1250 "05 Jan",
1251 "06 Jan",
1252 "07 Jan"
1253 ]
1254 },
1255 fill: {
1256 type: 'gradient',
1257 gradient: {
1258 shade: 'dark',
1259 gradientToColors: [colors.secondary],
1260 shadeIntensity: 1,
1261 type: 'horizontal',
1262 opacityFrom: 1,
1263 opacityTo: 1,
1264 stops: [0, 100, 100, 100]
1265 },
1266 }
1267 };
1268
1269 var chart = new ApexCharts(document.querySelector("#analytics-tab-2"), options);
1270 chart.render();
1271 }
1272 }
1273
1274 analytics_tab2();
1275
1276 function analytics_tab3() {
1277 if ($('#analytics-tab-3').length) {
1278 var options = {
1279 series: [{
1280 name: 'Bounce Rate',
1281 data: [20.5, 30.6, 25.6, 22.6, 25.1, 15.5, 18.0]
1282 }],
1283 chart: {
1284 height: 280,
1285 type: 'line',
1286 offsetX: -20,
1287 offsetY: 20,
1288 width: '102%',
1289 fontFamily: 'Inter',
1290 toolbar: {
1291 show: false,
1292 }
1293 },
1294 stroke: {
1295 width: 3,
1296 curve: 'smooth'
1297 },
1298 xaxis: {
1299 type: 'datetime',
1300 categories: [
1301 "01 Jan",
1302 "02 Jan",
1303 "03 Jan",
1304 "04 Jan",
1305 "05 Jan",
1306 "06 Jan",
1307 "07 Jan"
1308 ]
1309 },
1310 fill: {
1311 type: 'gradient',
1312 gradient: {
1313 shade: 'dark',
1314 gradientToColors: [colors.secondary],
1315 shadeIntensity: 1,
1316 type: 'horizontal',
1317 opacityFrom: 1,
1318 opacityTo: 1,
1319 stops: [0, 100, 100, 100]
1320 },
1321 },
1322 tooltip: {
1323 y: {
1324 formatter: function (val) {
1325 return "%" + val
1326 }
1327 }
1328 }
1329 };
1330
1331 var chart = new ApexCharts(document.querySelector("#analytics-tab-3"), options);
1332 chart.render();
1333 }
1334 }
1335
1336 analytics_tab3();
1337
1338 function analytics_tab4() {
1339 if ($('#analytics-tab-4').length) {
1340 var options = {
1341 series: [{
1342 name: 'Session Duration',
1343 data: [25, 30, 25, 32, 25, 30, 18]
1344 }],
1345 chart: {
1346 height: 280,
1347 type: 'line',
1348 offsetX: -20,
1349 offsetY: 20,
1350 width: '102%',
1351 fontFamily: 'Inter',
1352 toolbar: {
1353 show: false,
1354 }
1355 },
1356 stroke: {
1357 width: 3,
1358 curve: 'smooth'
1359 },
1360 xaxis: {
1361 type: 'datetime',
1362 categories: [
1363 "01 Jan 2020 18:50",
1364 "02 Jan 2020 18:50",
1365 "03 Jan 2020 18:50",
1366 "04 Jan 2020 18:50",
1367 "05 Jan 2020 18:50",
1368 "06 Jan 2020 18:50",
1369 "07 Jan 2020 18:50"
1370 ]
1371 },
1372 fill: {
1373 type: 'gradient',
1374 gradient: {
1375 shade: 'dark',
1376 gradientToColors: [colors.secondary],
1377 shadeIntensity: 1,
1378 type: 'horizontal',
1379 opacityFrom: 1,
1380 opacityTo: 1,
1381 stops: [0, 100, 100, 100]
1382 },
1383 }
1384 };
1385
1386 var chart = new ApexCharts(document.querySelector("#analytics-tab-4"), options);
1387 chart.render();
1388 }
1389 }
1390
1391 analytics_tab4();
1392
1393 function chart1() {
1394 if ($('#chart1').length) {
1395 var options = {
1396 chart: {
1397 type: 'bar',
1398 toolbar: {
1399 show: false
1400 }
1401 },
1402 plotOptions: {
1403 bar: {
1404 horizontal: false,
1405 columnWidth: '55%',
1406 backgroundBarColors: ['red']
1407 },
1408 },
1409 dataLabels: {
1410 enabled: false
1411 },
1412 stroke: {
1413 show: true,
1414 width: 1,
1415 colors: ['transparent']
1416 },
1417 colors: [colors.secondary, colors.info, colors.warning],
1418 series: [{
1419 name: 'Net Profit',
1420 data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
1421 }, {
1422 name: 'Revenue',
1423 data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
1424 }, {
1425 name: 'Free Cash Flow',
1426 data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
1427 }],
1428 xaxis: {
1429 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
1430 },
1431 legend: {
1432 position: 'bottom',
1433 offsetY: -10
1434 },
1435 tooltip: {
1436 y: {
1437 formatter: function (val) {
1438 return "$ " + val + " thousands"
1439 }
1440 }
1441 }
1442 };
1443
1444 var chart = new ApexCharts(
1445 document.querySelector("#chart1"),
1446 options
1447 );
1448
1449 chart.render();
1450 }
1451 }
1452
1453 chart1();
1454
1455 function widget_chart1() {
1456 if ($('#widget-chart1').length) {
1457 var ctx = document.getElementById("widget-chart1");
1458 ctx.height = 50;
1459 new Chart(ctx.getContext('2d'), {
1460 type: 'line',
1461 data: {
1462 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sst", "Sun"],
1463 datasets: [{
1464 label: 'data-2',
1465 data: [5, 15, 5, 20, 5, 15, 5],
1466 backgroundColor: "rgba(0,0,255,0)",
1467 borderWidth: 1,
1468 borderColor: colors.success,
1469 pointBorder: false,
1470 }]
1471 },
1472 options: {
1473 elements: {
1474 point: {
1475 radius: 0
1476 }
1477 },
1478 tooltips: {
1479 enabled: false
1480 },
1481 legend: {
1482 display: false
1483 },
1484 scales: {
1485 yAxes: [{
1486 display: false,
1487 }],
1488 xAxes: [{
1489 display: false
1490 }]
1491 },
1492 }
1493 });
1494 }
1495 }
1496
1497 widget_chart1();
1498
1499 function widget_chart2() {
1500 if ($('#widget-chart2').length) {
1501 var ctx = document.getElementById("widget-chart2");
1502 ctx.height = 50;
1503 var barChart = new Chart(ctx.getContext('2d'), {
1504 type: 'line',
1505 data: {
1506 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sst", "Sun"],
1507 datasets: [{
1508 label: 'data-2',
1509 data: [5, 10, 10, 10, 5, 15, 10],
1510 backgroundColor: "rgba(0,0,255,0)",
1511 borderColor: colors.warning,
1512 borderWidth: 1,
1513 pointBorder: false,
1514 }]
1515 },
1516 options: {
1517 elements: {
1518 point: {
1519 radius: 0
1520 }
1521 },
1522 tooltips: {
1523 enabled: false
1524 },
1525 legend: {
1526 display: false
1527 },
1528 scales: {
1529 yAxes: [{
1530 display: false
1531 }],
1532 xAxes: [{
1533 display: false
1534 }]
1535 },
1536 }
1537 });
1538 }
1539 }
1540
1541 widget_chart2();
1542
1543 function widget_chart3() {
1544 if ($('#widget-chart3').length) {
1545 var ctx = document.getElementById("widget-chart3");
1546 ctx.height = 50;
1547 var barChart = new Chart(ctx.getContext('2d'), {
1548 type: 'line',
1549 data: {
1550 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sst", "Sun"],
1551 datasets: [{
1552 label: 'data-2',
1553 data: [10, 5, 15, 5, 15, 5, 15],
1554 backgroundColor: "rgba(0,0,255,0)",
1555 borderColor: colors.danger,
1556 borderWidth: 1,
1557 pointBorder: false,
1558 }]
1559 },
1560 options: {
1561 elements: {
1562 point: {
1563 radius: 0
1564 }
1565 },
1566 tooltips: {
1567 enabled: false
1568 },
1569 legend: {
1570 display: false
1571 },
1572 scales: {
1573 yAxes: [{
1574 display: false
1575 }],
1576 xAxes: [{
1577 display: false
1578 }]
1579 },
1580 }
1581 });
1582 }
1583 }
1584
1585 widget_chart3();
1586
1587 function contactsStatuses() {
1588 if ($('#contacts-statuses').length) {
1589 var chart = new ApexCharts(
1590 document.querySelector("#contacts-statuses"), {
1591 chart: {
1592 width: "100%",
1593 type: 'donut',
1594 },
1595 dataLabels: {
1596 enabled: false
1597 },
1598 stroke: {
1599 width: 3,
1600 colors: $('body').hasClass('dark') ? "#313852" : "rgba(255, 255, 255, 1)",
1601 },
1602 series: [44, 55, 13, 33],
1603 labels: ['New Contact', 'NR1', 'NR2', 'NR3'],
1604 colors: [colors.warning, colors.info, colors.success, colors.danger],
1605 legend: {
1606 position: 'bottom',
1607 }
1608 }
1609 );
1610
1611 chart.render();
1612 }
1613 }
1614
1615 contactsStatuses();
1616
1617 function revenue() {
1618 if ($('#revenue').length) {
1619 var ts2 = 1484418600000;
1620 var dates = [];
1621 for (var i = 0; i < 120; i++) {
1622 ts2 = ts2 + 86400000;
1623 var innerArr = [ts2, dataSeries[1][i].value];
1624 dates.push(innerArr)
1625 }
1626
1627 var options = {
1628 chart: {
1629 type: 'area',
1630 fontFamily: "Inter",
1631 offsetX: -18,
1632 stacked: false,
1633 height: 390,
1634 width: '103%',
1635 toolbar: {
1636 show: false
1637 }
1638 },
1639 dataLabels: {
1640 enabled: false
1641 },
1642 series: [{
1643 name: 'Number of orders',
1644 data: dates
1645 }],
1646 stroke: {
1647 colors: [colors.primary],
1648 width: 2
1649 },
1650 fill: {
1651 type: 'gradient',
1652 gradient: {
1653 opacityFrom: 0.6,
1654 opacityTo: 0,
1655 }
1656 },
1657 yaxis: {
1658 labels: {
1659 formatter: function (val) {
1660 return (val / 1000000).toFixed(0);
1661 },
1662 }
1663 },
1664 xaxis: {
1665 type: 'datetime',
1666 },
1667
1668 tooltip: {
1669 shared: false,
1670 y: {
1671 formatter: function (val) {
1672 return (val / 1000000).toFixed(0)
1673 }
1674 }
1675 }
1676 };
1677
1678 var chart = new ApexCharts(
1679 document.querySelector("#revenue"),
1680 options
1681 );
1682
1683 chart.render();
1684 }
1685 }
1686
1687 revenue();
1688
1689 function hotProducts() {
1690 if ($('#hot-products').length) {
1691 var options = {
1692 series: [44, 55, 13, 36, 30],
1693 chart: {
1694 type: 'donut',
1695 fontFamily: "Inter",
1696 offsetY: 30,
1697 height: 250,
1698 },
1699 colors: [colors.primary, colors.secondary, colors.success, colors.warning, colors.danger],
1700 labels: ['Iphone', 'Samsung', 'Huawei', 'General Mobile', 'Xiaomi'],
1701 dataLabels: {
1702 enabled: false,
1703
1704 },
1705 stroke: {
1706 colors: $('body').hasClass('dark') ? "#313852" : "#ffffff",
1707 },
1708 legend: {
1709 show: false
1710 }
1711 };
1712
1713 var chart = new ApexCharts(document.querySelector("#hot-products"), options);
1714 chart.render();
1715 }
1716 }
1717
1718 hotProducts();
1719
1720 function activityChart() {
1721 if ($('#ecommerce-activity-chart').length) {
1722 var options = {
1723 chart: {
1724 type: 'bar',
1725 fontFamily: "Inter",
1726 offsetX: -18,
1727 height: 312,
1728 width: '103%',
1729 toolbar: {
1730 show: false
1731 }
1732 },
1733 series: [{
1734 name: 'Comments',
1735 data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
1736 }, {
1737 name: 'Product View',
1738 data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
1739 }],
1740 colors: [colors.secondary, colors.info],
1741 plotOptions: {
1742 bar: {
1743 horizontal: false,
1744 columnWidth: '50%',
1745 endingShape: 'rounded'
1746 },
1747 },
1748 dataLabels: {
1749 enabled: false
1750 },
1751 stroke: {
1752 show: true,
1753 width: 8,
1754 colors: ['transparent']
1755 },
1756 xaxis: {
1757 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
1758 },
1759 fill: {
1760 opacity: 1
1761 },
1762 legend: {
1763 position: "top",
1764 }
1765 };
1766
1767 var chart = new ApexCharts(
1768 document.querySelector("#ecommerce-activity-chart"),
1769 options
1770 );
1771
1772 chart.render();
1773 }
1774 }
1775
1776 activityChart();
1777
1778 function projectTasks() {
1779 if ($('#project-tasks').length) {
1780 var options = {
1781 colors: [colors.primary, colors.success, colors.info, colors.warning],
1782 chart: {
1783 height: 350,
1784 type: 'bar',
1785 stacked: true,
1786 offsetY: -30,
1787 fontFamily: 'Inter',
1788 toolbar: {
1789 show: false
1790 },
1791 zoom: {
1792 enabled: false
1793 }
1794 },
1795 plotOptions: {
1796 bar: {
1797 horizontal: false,
1798 },
1799 },
1800 series: [{
1801 name: 'Project A',
1802 data: [44, 55, 41, 67, 22, 43]
1803 }, {
1804 name: 'Project B',
1805 data: [13, 23, 20, 8, 13, 27]
1806 }, {
1807 name: 'Project C',
1808 data: [11, 17, 15, 15, 21, 14]
1809 }, {
1810 name: 'Project D',
1811 data: [21, 7, 25, 13, 22, 8]
1812 }],
1813 xaxis: {
1814 type: 'datetime',
1815 categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
1816 },
1817 legend: {
1818 position: 'bottom',
1819 offsetY: -10
1820 },
1821 fill: {
1822 opacity: 1
1823 },
1824 };
1825
1826 var chart = new ApexCharts(
1827 document.querySelector("#project-tasks"),
1828 options
1829 );
1830
1831 chart.render();
1832 }
1833 }
1834
1835 setInterval(function () {
1836 $('#online-users-text').text(Math.round(Math.random() * 100));
1837 }, 2000);
1838
1839 projectTasks();
1840
1841});
Note: See TracBrowser for help on using the repository browser.