phcthemes_admin_panel_pack 4.0.1 → 4.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/phcthemes_admin_panel_pack_metronic.js +3 -1
  3. data/app/assets/javascripts/themes/metronic/theme/{vendors.bundle.js → plugins.bundle.js} +59618 -66982
  4. data/app/assets/javascripts/themes/metronic/theme/prismjs.bundle.js +1922 -0
  5. data/app/assets/javascripts/themes/metronic/theme/scripts.bundle.js +6391 -5272
  6. data/app/assets/javascripts/themes/metronic/theme/widgets.js +4706 -0
  7. data/app/assets/stylesheets/phcthemes_admin_panel_pack_metronic.scss +1 -1
  8. data/lib/phcthemes_admin_panel_pack/version.rb +1 -1
  9. metadata +5 -3
data/app/assets/javascripts/themes/metronic/theme/widgets.js ADDED
@@ -0,0 +1,4706 @@
1
+ "use strict";
2
+
3
+ // Class definition
4
+ var KTWidgets = function () {
5
+ // Private properties
6
+
7
+ // General Controls
8
+ var _initDaterangepicker = function () {
9
+ if ($('#kt_dashboard_daterangepicker').length == 0) {
10
+ return;
11
+ }
12
+
13
+ var picker = $('#kt_dashboard_daterangepicker');
14
+ var start = moment();
15
+ var end = moment();
16
+
17
+ function cb(start, end, label) {
18
+ var title = '';
19
+ var range = '';
20
+
21
+ if ((end - start) < 100 || label == 'Today') {
22
+ title = 'Today:';
23
+ range = start.format('MMM D');
24
+ } else if (label == 'Yesterday') {
25
+ title = 'Yesterday:';
26
+ range = start.format('MMM D');
27
+ } else {
28
+ range = start.format('MMM D') + ' - ' + end.format('MMM D');
29
+ }
30
+
31
+ $('#kt_dashboard_daterangepicker_date').html(range);
32
+ $('#kt_dashboard_daterangepicker_title').html(title);
33
+ }
34
+
35
+ picker.daterangepicker({
36
+ direction: KTUtil.isRTL(),
37
+ startDate: start,
38
+ endDate: end,
39
+ opens: 'left',
40
+ applyClass: 'btn-primary',
41
+ cancelClass: 'btn-light-primary',
42
+ ranges: {
43
+ 'Today': [moment(), moment()],
44
+ 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
45
+ 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
46
+ 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
47
+ 'This Month': [moment().startOf('month'), moment().endOf('month')],
48
+ 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
49
+ }
50
+ }, cb);
51
+
52
+ cb(start, end, '');
53
+ }
54
+
55
+ // Stats widgets
56
+ var _initStatsWidget7 = function () {
57
+ var element = document.getElementById("kt_stats_widget_7_chart");
58
+
59
+ if (!element) {
60
+ return;
61
+ }
62
+
63
+ var options = {
64
+ series: [{
65
+ name: 'Net Profit',
66
+ data: [30, 45, 32, 70, 40]
67
+ }],
68
+ chart: {
69
+ type: 'area',
70
+ height: 150,
71
+ toolbar: {
72
+ show: false
73
+ },
74
+ zoom: {
75
+ enabled: false
76
+ },
77
+ sparkline: {
78
+ enabled: true
79
+ }
80
+ },
81
+ plotOptions: {},
82
+ legend: {
83
+ show: false
84
+ },
85
+ dataLabels: {
86
+ enabled: false
87
+ },
88
+ fill: {
89
+ type: 'solid',
90
+ opacity: 1
91
+ },
92
+ stroke: {
93
+ curve: 'smooth',
94
+ show: true,
95
+ width: 3,
96
+ colors: [KTApp.getSettings()['colors']['theme']['base']['success']]
97
+ },
98
+ xaxis: {
99
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
100
+ axisBorder: {
101
+ show: false,
102
+ },
103
+ axisTicks: {
104
+ show: false
105
+ },
106
+ labels: {
107
+ show: false,
108
+ style: {
109
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
110
+ fontSize: '12px',
111
+ fontFamily: KTApp.getSettings()['font-family']
112
+ }
113
+ },
114
+ crosshairs: {
115
+ show: false,
116
+ position: 'front',
117
+ stroke: {
118
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
119
+ width: 1,
120
+ dashArray: 3
121
+ }
122
+ },
123
+ tooltip: {
124
+ enabled: true,
125
+ formatter: undefined,
126
+ offsetY: 0,
127
+ style: {
128
+ fontSize: '12px',
129
+ fontFamily: KTApp.getSettings()['font-family']
130
+ }
131
+ }
132
+ },
133
+ yaxis: {
134
+ labels: {
135
+ show: false,
136
+ style: {
137
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
138
+ fontSize: '12px',
139
+ fontFamily: KTApp.getSettings()['font-family']
140
+ }
141
+ }
142
+ },
143
+ states: {
144
+ normal: {
145
+ filter: {
146
+ type: 'none',
147
+ value: 0
148
+ }
149
+ },
150
+ hover: {
151
+ filter: {
152
+ type: 'none',
153
+ value: 0
154
+ }
155
+ },
156
+ active: {
157
+ allowMultipleDataPointsSelection: false,
158
+ filter: {
159
+ type: 'none',
160
+ value: 0
161
+ }
162
+ }
163
+ },
164
+ tooltip: {
165
+ style: {
166
+ fontSize: '12px',
167
+ fontFamily: KTApp.getSettings()['font-family']
168
+ },
169
+ y: {
170
+ formatter: function (val) {
171
+ return "$" + val + " thousands"
172
+ }
173
+ }
174
+ },
175
+ colors: [KTApp.getSettings()['colors']['theme']['light']['success']],
176
+ markers: {
177
+ colors: [KTApp.getSettings()['colors']['theme']['light']['success']],
178
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base']['success']],
179
+ strokeWidth: 3
180
+ }
181
+ };
182
+
183
+ var chart = new ApexCharts(element, options);
184
+ chart.render();
185
+ }
186
+
187
+ var _initStatsWidget8 = function () {
188
+ var element = document.getElementById("kt_stats_widget_8_chart");
189
+
190
+ if (!element) {
191
+ return;
192
+ }
193
+
194
+ var options = {
195
+ series: [{
196
+ name: 'Net Profit',
197
+ data: [30, 45, 32, 70, 40]
198
+ }],
199
+ chart: {
200
+ type: 'area',
201
+ height: 150,
202
+ toolbar: {
203
+ show: false
204
+ },
205
+ zoom: {
206
+ enabled: false
207
+ },
208
+ sparkline: {
209
+ enabled: true
210
+ }
211
+ },
212
+ plotOptions: {},
213
+ legend: {
214
+ show: false
215
+ },
216
+ dataLabels: {
217
+ enabled: false
218
+ },
219
+ fill: {
220
+ type: 'solid',
221
+ opacity: 1
222
+ },
223
+ stroke: {
224
+ curve: 'smooth',
225
+ show: true,
226
+ width: 3,
227
+ colors: [KTApp.getSettings()['colors']['theme']['base']['danger']]
228
+ },
229
+ xaxis: {
230
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun'],
231
+ axisBorder: {
232
+ show: false,
233
+ },
234
+ axisTicks: {
235
+ show: false
236
+ },
237
+ labels: {
238
+ show: false,
239
+ style: {
240
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
241
+ fontSize: '12px',
242
+ fontFamily: KTApp.getSettings()['font-family']
243
+ }
244
+ },
245
+ crosshairs: {
246
+ show: false,
247
+ position: 'front',
248
+ stroke: {
249
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
250
+ width: 1,
251
+ dashArray: 3
252
+ }
253
+ },
254
+ tooltip: {
255
+ enabled: true,
256
+ formatter: undefined,
257
+ offsetY: 0,
258
+ style: {
259
+ fontSize: '12px',
260
+ fontFamily: KTApp.getSettings()['font-family']
261
+ }
262
+ }
263
+ },
264
+ yaxis: {
265
+ labels: {
266
+ show: false,
267
+ style: {
268
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
269
+ fontSize: '12px',
270
+ fontFamily: KTApp.getSettings()['font-family']
271
+ }
272
+ }
273
+ },
274
+ states: {
275
+ normal: {
276
+ filter: {
277
+ type: 'none',
278
+ value: 0
279
+ }
280
+ },
281
+ hover: {
282
+ filter: {
283
+ type: 'none',
284
+ value: 0
285
+ }
286
+ },
287
+ active: {
288
+ allowMultipleDataPointsSelection: false,
289
+ filter: {
290
+ type: 'none',
291
+ value: 0
292
+ }
293
+ }
294
+ },
295
+ tooltip: {
296
+ style: {
297
+ fontSize: '12px',
298
+ fontFamily: KTApp.getSettings()['font-family']
299
+ },
300
+ y: {
301
+ formatter: function (val) {
302
+ return "$" + val + " thousands"
303
+ }
304
+ }
305
+ },
306
+ colors: [KTApp.getSettings()['colors']['theme']['light']['danger']],
307
+ markers: {
308
+ colors: [KTApp.getSettings()['colors']['theme']['light']['danger']],
309
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base']['danger']],
310
+ strokeWidth: 3
311
+ }
312
+ };
313
+
314
+ var chart = new ApexCharts(element, options);
315
+ chart.render();
316
+ }
317
+
318
+ var _initStatsWidget9 = function () {
319
+ var element = document.getElementById("kt_stats_widget_9_chart");
320
+
321
+ if (!element) {
322
+ return;
323
+ }
324
+
325
+ var options = {
326
+ series: [{
327
+ name: 'Net Profit',
328
+ data: [30, 45, 32, 70, 40]
329
+ }],
330
+ chart: {
331
+ type: 'area',
332
+ height: 150,
333
+ toolbar: {
334
+ show: false
335
+ },
336
+ zoom: {
337
+ enabled: false
338
+ },
339
+ sparkline: {
340
+ enabled: true
341
+ }
342
+ },
343
+ plotOptions: {},
344
+ legend: {
345
+ show: false
346
+ },
347
+ dataLabels: {
348
+ enabled: false
349
+ },
350
+ fill: {
351
+ type: 'solid',
352
+ opacity: 1
353
+ },
354
+ stroke: {
355
+ curve: 'smooth',
356
+ show: true,
357
+ width: 3,
358
+ colors: [KTApp.getSettings()['colors']['theme']['base']['primary']]
359
+ },
360
+ xaxis: {
361
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun'],
362
+ axisBorder: {
363
+ show: false,
364
+ },
365
+ axisTicks: {
366
+ show: false
367
+ },
368
+ labels: {
369
+ show: false,
370
+ style: {
371
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
372
+ fontSize: '12px',
373
+ fontFamily: KTApp.getSettings()['font-family']
374
+ }
375
+ },
376
+ crosshairs: {
377
+ show: false,
378
+ position: 'front',
379
+ stroke: {
380
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
381
+ width: 1,
382
+ dashArray: 3
383
+ }
384
+ },
385
+ tooltip: {
386
+ enabled: true,
387
+ formatter: undefined,
388
+ offsetY: 0,
389
+ style: {
390
+ fontSize: '12px',
391
+ fontFamily: KTApp.getSettings()['font-family']
392
+ }
393
+ }
394
+ },
395
+ yaxis: {
396
+ labels: {
397
+ show: false,
398
+ style: {
399
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
400
+ fontSize: '12px',
401
+ fontFamily: KTApp.getSettings()['font-family']
402
+ }
403
+ }
404
+ },
405
+ states: {
406
+ normal: {
407
+ filter: {
408
+ type: 'none',
409
+ value: 0
410
+ }
411
+ },
412
+ hover: {
413
+ filter: {
414
+ type: 'none',
415
+ value: 0
416
+ }
417
+ },
418
+ active: {
419
+ allowMultipleDataPointsSelection: false,
420
+ filter: {
421
+ type: 'none',
422
+ value: 0
423
+ }
424
+ }
425
+ },
426
+ tooltip: {
427
+ style: {
428
+ fontSize: '12px',
429
+ fontFamily: KTApp.getSettings()['font-family']
430
+ },
431
+ y: {
432
+ formatter: function (val) {
433
+ return "$" + val + " thousands"
434
+ }
435
+ }
436
+ },
437
+ colors: [KTApp.getSettings()['colors']['theme']['light']['primary']],
438
+ markers: {
439
+ colors: [KTApp.getSettings()['colors']['theme']['light']['primary']],
440
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base']['primary']],
441
+ strokeWidth: 3
442
+ }
443
+ };
444
+
445
+ var chart = new ApexCharts(element, options);
446
+ chart.render();
447
+ }
448
+
449
+ var _initStatsWidget10 = function () {
450
+ var element = document.getElementById("kt_stats_widget_10_chart");
451
+ var height = parseInt(KTUtil.css(element, 'height'));
452
+ var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'info';
453
+
454
+ if (!element) {
455
+ return;
456
+ }
457
+
458
+ var options = {
459
+ series: [{
460
+ name: 'Net Profit',
461
+ data: [40, 40, 30, 30, 35, 35, 50]
462
+ }],
463
+ chart: {
464
+ type: 'area',
465
+ height: height,
466
+ toolbar: {
467
+ show: false
468
+ },
469
+ zoom: {
470
+ enabled: false
471
+ },
472
+ sparkline: {
473
+ enabled: true
474
+ }
475
+ },
476
+ plotOptions: {},
477
+ legend: {
478
+ show: false
479
+ },
480
+ dataLabels: {
481
+ enabled: false
482
+ },
483
+ fill: {
484
+ type: 'solid',
485
+ opacity: 1
486
+ },
487
+ stroke: {
488
+ curve: 'smooth',
489
+ show: true,
490
+ width: 3,
491
+ colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
492
+ },
493
+ xaxis: {
494
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
495
+ axisBorder: {
496
+ show: false,
497
+ },
498
+ axisTicks: {
499
+ show: false
500
+ },
501
+ labels: {
502
+ show: false,
503
+ style: {
504
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
505
+ fontSize: '12px',
506
+ fontFamily: KTApp.getSettings()['font-family']
507
+ }
508
+ },
509
+ crosshairs: {
510
+ show: false,
511
+ position: 'front',
512
+ stroke: {
513
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
514
+ width: 1,
515
+ dashArray: 3
516
+ }
517
+ },
518
+ tooltip: {
519
+ enabled: true,
520
+ formatter: undefined,
521
+ offsetY: 0,
522
+ style: {
523
+ fontSize: '12px',
524
+ fontFamily: KTApp.getSettings()['font-family']
525
+ }
526
+ }
527
+ },
528
+ yaxis: {
529
+ min: 0,
530
+ max: 55,
531
+ labels: {
532
+ show: false,
533
+ style: {
534
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
535
+ fontSize: '12px',
536
+ fontFamily: KTApp.getSettings()['font-family']
537
+ }
538
+ }
539
+ },
540
+ states: {
541
+ normal: {
542
+ filter: {
543
+ type: 'none',
544
+ value: 0
545
+ }
546
+ },
547
+ hover: {
548
+ filter: {
549
+ type: 'none',
550
+ value: 0
551
+ }
552
+ },
553
+ active: {
554
+ allowMultipleDataPointsSelection: false,
555
+ filter: {
556
+ type: 'none',
557
+ value: 0
558
+ }
559
+ }
560
+ },
561
+ tooltip: {
562
+ style: {
563
+ fontSize: '12px',
564
+ fontFamily: KTApp.getSettings()['font-family']
565
+ },
566
+ y: {
567
+ formatter: function (val) {
568
+ return "$" + val + " thousands"
569
+ }
570
+ }
571
+ },
572
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
573
+ markers: {
574
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
575
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
576
+ strokeWidth: 3
577
+ }
578
+ };
579
+
580
+ var chart = new ApexCharts(element, options);
581
+ chart.render();
582
+ }
583
+
584
+ var _initStatsWidget11 = function () {
585
+ var element = document.getElementById("kt_stats_widget_11_chart");
586
+
587
+ var height = parseInt(KTUtil.css(element, 'height'));
588
+ var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'success';
589
+
590
+ if (!element) {
591
+ return;
592
+ }
593
+
594
+ var options = {
595
+ series: [{
596
+ name: 'Net Profit',
597
+ data: [40, 40, 30, 30, 35, 35, 50]
598
+ }],
599
+ chart: {
600
+ type: 'area',
601
+ height: 150,
602
+ toolbar: {
603
+ show: false
604
+ },
605
+ zoom: {
606
+ enabled: false
607
+ },
608
+ sparkline: {
609
+ enabled: true
610
+ }
611
+ },
612
+ plotOptions: {},
613
+ legend: {
614
+ show: false
615
+ },
616
+ dataLabels: {
617
+ enabled: false
618
+ },
619
+ fill: {
620
+ type: 'solid',
621
+ opacity: 1
622
+ },
623
+ stroke: {
624
+ curve: 'smooth',
625
+ show: true,
626
+ width: 3,
627
+ colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
628
+ },
629
+ xaxis: {
630
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Aug', 'Sep'],
631
+ axisBorder: {
632
+ show: false,
633
+ },
634
+ axisTicks: {
635
+ show: false
636
+ },
637
+ labels: {
638
+ show: false,
639
+ style: {
640
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
641
+ fontSize: '12px',
642
+ fontFamily: KTApp.getSettings()['font-family']
643
+ }
644
+ },
645
+ crosshairs: {
646
+ show: false,
647
+ position: 'front',
648
+ stroke: {
649
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
650
+ width: 1,
651
+ dashArray: 3
652
+ }
653
+ },
654
+ tooltip: {
655
+ enabled: true,
656
+ formatter: undefined,
657
+ offsetY: 0,
658
+ style: {
659
+ fontSize: '12px',
660
+ fontFamily: KTApp.getSettings()['font-family']
661
+ }
662
+ }
663
+ },
664
+ yaxis: {
665
+ min: 0,
666
+ max: 55,
667
+ labels: {
668
+ show: false,
669
+ style: {
670
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
671
+ fontSize: '12px',
672
+ fontFamily: KTApp.getSettings()['font-family']
673
+ }
674
+ }
675
+ },
676
+ states: {
677
+ normal: {
678
+ filter: {
679
+ type: 'none',
680
+ value: 0
681
+ }
682
+ },
683
+ hover: {
684
+ filter: {
685
+ type: 'none',
686
+ value: 0
687
+ }
688
+ },
689
+ active: {
690
+ allowMultipleDataPointsSelection: false,
691
+ filter: {
692
+ type: 'none',
693
+ value: 0
694
+ }
695
+ }
696
+ },
697
+ tooltip: {
698
+ style: {
699
+ fontSize: '12px',
700
+ fontFamily: KTApp.getSettings()['font-family']
701
+ },
702
+ y: {
703
+ formatter: function (val) {
704
+ return "$" + val + " thousands"
705
+ }
706
+ }
707
+ },
708
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
709
+ markers: {
710
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
711
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
712
+ strokeWidth: 3
713
+ }
714
+ };
715
+
716
+ var chart = new ApexCharts(element, options);
717
+ chart.render();
718
+ }
719
+
720
+ var _initStatsWidget12 = function () {
721
+ var element = document.getElementById("kt_stats_widget_12_chart");
722
+
723
+ var height = parseInt(KTUtil.css(element, 'height'));
724
+ var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'primary';
725
+
726
+ if (!element) {
727
+ return;
728
+ }
729
+
730
+ var options = {
731
+ series: [{
732
+ name: 'Net Profit',
733
+ data: [40, 40, 30, 30, 35, 35, 50]
734
+ }],
735
+ chart: {
736
+ type: 'area',
737
+ height: height,
738
+ toolbar: {
739
+ show: false
740
+ },
741
+ zoom: {
742
+ enabled: false
743
+ },
744
+ sparkline: {
745
+ enabled: true
746
+ }
747
+ },
748
+ plotOptions: {},
749
+ legend: {
750
+ show: false
751
+ },
752
+ dataLabels: {
753
+ enabled: false
754
+ },
755
+ fill: {
756
+ type: 'solid',
757
+ opacity: 1
758
+ },
759
+ stroke: {
760
+ curve: 'smooth',
761
+ show: true,
762
+ width: 3,
763
+ colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
764
+ },
765
+ xaxis: {
766
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Aug', 'Sep'],
767
+ axisBorder: {
768
+ show: false,
769
+ },
770
+ axisTicks: {
771
+ show: false
772
+ },
773
+ labels: {
774
+ show: false,
775
+ style: {
776
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
777
+ fontSize: '12px',
778
+ fontFamily: KTApp.getSettings()['font-family']
779
+ }
780
+ },
781
+ crosshairs: {
782
+ show: false,
783
+ position: 'front',
784
+ stroke: {
785
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
786
+ width: 1,
787
+ dashArray: 3
788
+ }
789
+ },
790
+ tooltip: {
791
+ enabled: true,
792
+ formatter: undefined,
793
+ offsetY: 0,
794
+ style: {
795
+ fontSize: '12px',
796
+ fontFamily: KTApp.getSettings()['font-family']
797
+ }
798
+ }
799
+ },
800
+ yaxis: {
801
+ min: 0,
802
+ max: 55,
803
+ labels: {
804
+ show: false,
805
+ style: {
806
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
807
+ fontSize: '12px',
808
+ fontFamily: KTApp.getSettings()['font-family']
809
+ }
810
+ }
811
+ },
812
+ states: {
813
+ normal: {
814
+ filter: {
815
+ type: 'none',
816
+ value: 0
817
+ }
818
+ },
819
+ hover: {
820
+ filter: {
821
+ type: 'none',
822
+ value: 0
823
+ }
824
+ },
825
+ active: {
826
+ allowMultipleDataPointsSelection: false,
827
+ filter: {
828
+ type: 'none',
829
+ value: 0
830
+ }
831
+ }
832
+ },
833
+ tooltip: {
834
+ style: {
835
+ fontSize: '12px',
836
+ fontFamily: KTApp.getSettings()['font-family']
837
+ },
838
+ y: {
839
+ formatter: function (val) {
840
+ return "$" + val + " thousands"
841
+ }
842
+ }
843
+ },
844
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
845
+ markers: {
846
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
847
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
848
+ strokeWidth: 3
849
+ }
850
+ };
851
+
852
+ var chart = new ApexCharts(element, options);
853
+ chart.render();
854
+ }
855
+
856
+ // Charts widgets
857
+ var _initChartsWidget1 = function () {
858
+ var element = document.getElementById("kt_charts_widget_1_chart");
859
+
860
+ if (!element) {
861
+ return;
862
+ }
863
+
864
+ var options = {
865
+ series: [{
866
+ name: 'Net Profit',
867
+ data: [44, 55, 57, 56, 61, 58]
868
+ }, {
869
+ name: 'Revenue',
870
+ data: [76, 85, 101, 98, 87, 105]
871
+ }],
872
+ chart: {
873
+ type: 'bar',
874
+ height: 350,
875
+ toolbar: {
876
+ show: false
877
+ }
878
+ },
879
+ plotOptions: {
880
+ bar: {
881
+ horizontal: false,
882
+ columnWidth: ['30%'],
883
+ endingShape: 'rounded'
884
+ },
885
+ },
886
+ legend: {
887
+ show: false
888
+ },
889
+ dataLabels: {
890
+ enabled: false
891
+ },
892
+ stroke: {
893
+ show: true,
894
+ width: 2,
895
+ colors: ['transparent']
896
+ },
897
+ xaxis: {
898
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
899
+ axisBorder: {
900
+ show: false,
901
+ },
902
+ axisTicks: {
903
+ show: false
904
+ },
905
+ labels: {
906
+ style: {
907
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
908
+ fontSize: '12px',
909
+ fontFamily: KTApp.getSettings()['font-family']
910
+ }
911
+ }
912
+ },
913
+ yaxis: {
914
+ labels: {
915
+ style: {
916
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
917
+ fontSize: '12px',
918
+ fontFamily: KTApp.getSettings()['font-family']
919
+ }
920
+ }
921
+ },
922
+ fill: {
923
+ opacity: 1
924
+ },
925
+ states: {
926
+ normal: {
927
+ filter: {
928
+ type: 'none',
929
+ value: 0
930
+ }
931
+ },
932
+ hover: {
933
+ filter: {
934
+ type: 'none',
935
+ value: 0
936
+ }
937
+ },
938
+ active: {
939
+ allowMultipleDataPointsSelection: false,
940
+ filter: {
941
+ type: 'none',
942
+ value: 0
943
+ }
944
+ }
945
+ },
946
+ tooltip: {
947
+ style: {
948
+ fontSize: '12px',
949
+ fontFamily: KTApp.getSettings()['font-family']
950
+ },
951
+ y: {
952
+ formatter: function (val) {
953
+ return "$" + val + " thousands"
954
+ }
955
+ }
956
+ },
957
+ colors: [KTApp.getSettings()['colors']['theme']['base']['success'], KTApp.getSettings()['colors']['gray']['gray-300']],
958
+ grid: {
959
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
960
+ strokeDashArray: 4,
961
+ yaxis: {
962
+ lines: {
963
+ show: true
964
+ }
965
+ }
966
+ }
967
+ };
968
+
969
+ var chart = new ApexCharts(element, options);
970
+ chart.render();
971
+ }
972
+
973
+ var _initChartsWidget2 = function () {
974
+ var element = document.getElementById("kt_charts_widget_2_chart");
975
+
976
+ if (!element) {
977
+ return;
978
+ }
979
+
980
+ var options = {
981
+ series: [{
982
+ name: 'Net Profit',
983
+ data: [44, 55, 57, 56, 61, 58]
984
+ }, {
985
+ name: 'Revenue',
986
+ data: [76, 85, 101, 98, 87, 105]
987
+ }],
988
+ chart: {
989
+ type: 'bar',
990
+ height: 350,
991
+ toolbar: {
992
+ show: false
993
+ }
994
+ },
995
+ plotOptions: {
996
+ bar: {
997
+ horizontal: false,
998
+ columnWidth: ['30%'],
999
+ endingShape: 'rounded'
1000
+ },
1001
+ },
1002
+ legend: {
1003
+ show: false
1004
+ },
1005
+ dataLabels: {
1006
+ enabled: false
1007
+ },
1008
+ stroke: {
1009
+ show: true,
1010
+ width: 2,
1011
+ colors: ['transparent']
1012
+ },
1013
+ xaxis: {
1014
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
1015
+ axisBorder: {
1016
+ show: false,
1017
+ },
1018
+ axisTicks: {
1019
+ show: false
1020
+ },
1021
+ labels: {
1022
+ style: {
1023
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1024
+ fontSize: '12px',
1025
+ fontFamily: KTApp.getSettings()['font-family']
1026
+ }
1027
+ }
1028
+ },
1029
+ yaxis: {
1030
+ labels: {
1031
+ style: {
1032
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1033
+ fontSize: '12px',
1034
+ fontFamily: KTApp.getSettings()['font-family']
1035
+ }
1036
+ }
1037
+ },
1038
+ fill: {
1039
+ opacity: 1
1040
+ },
1041
+ states: {
1042
+ normal: {
1043
+ filter: {
1044
+ type: 'none',
1045
+ value: 0
1046
+ }
1047
+ },
1048
+ hover: {
1049
+ filter: {
1050
+ type: 'none',
1051
+ value: 0
1052
+ }
1053
+ },
1054
+ active: {
1055
+ allowMultipleDataPointsSelection: false,
1056
+ filter: {
1057
+ type: 'none',
1058
+ value: 0
1059
+ }
1060
+ }
1061
+ },
1062
+ tooltip: {
1063
+ style: {
1064
+ fontSize: '12px',
1065
+ fontFamily: KTApp.getSettings()['font-family']
1066
+ },
1067
+ y: {
1068
+ formatter: function (val) {
1069
+ return "$" + val + " thousands"
1070
+ }
1071
+ }
1072
+ },
1073
+ colors: [KTApp.getSettings()['colors']['theme']['base']['warning'], KTApp.getSettings()['colors']['gray']['gray-300']],
1074
+ grid: {
1075
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
1076
+ strokeDashArray: 4,
1077
+ yaxis: {
1078
+ lines: {
1079
+ show: true
1080
+ }
1081
+ }
1082
+ }
1083
+ };
1084
+
1085
+ var chart = new ApexCharts(element, options);
1086
+ chart.render();
1087
+ }
1088
+
1089
+ var _initChartsWidget3 = function () {
1090
+ var element = document.getElementById("kt_charts_widget_3_chart");
1091
+
1092
+ if (!element) {
1093
+ return;
1094
+ }
1095
+
1096
+ var options = {
1097
+ series: [{
1098
+ name: 'Net Profit',
1099
+ data: [30, 40, 40, 90, 90, 70, 70]
1100
+ }],
1101
+ chart: {
1102
+ type: 'area',
1103
+ height: 350,
1104
+ toolbar: {
1105
+ show: false
1106
+ }
1107
+ },
1108
+ plotOptions: {
1109
+
1110
+ },
1111
+ legend: {
1112
+ show: false
1113
+ },
1114
+ dataLabels: {
1115
+ enabled: false
1116
+ },
1117
+ fill: {
1118
+ type: 'solid',
1119
+ opacity: 1
1120
+ },
1121
+ stroke: {
1122
+ curve: 'smooth',
1123
+ show: true,
1124
+ width: 3,
1125
+ colors: [KTApp.getSettings()['colors']['theme']['base']['info']]
1126
+ },
1127
+ xaxis: {
1128
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
1129
+ axisBorder: {
1130
+ show: false,
1131
+ },
1132
+ axisTicks: {
1133
+ show: false
1134
+ },
1135
+ labels: {
1136
+ style: {
1137
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1138
+ fontSize: '12px',
1139
+ fontFamily: KTApp.getSettings()['font-family']
1140
+ }
1141
+ },
1142
+ crosshairs: {
1143
+ position: 'front',
1144
+ stroke: {
1145
+ color: KTApp.getSettings()['colors']['theme']['base']['info'],
1146
+ width: 1,
1147
+ dashArray: 3
1148
+ }
1149
+ },
1150
+ tooltip: {
1151
+ enabled: true,
1152
+ formatter: undefined,
1153
+ offsetY: 0,
1154
+ style: {
1155
+ fontSize: '12px',
1156
+ fontFamily: KTApp.getSettings()['font-family']
1157
+ }
1158
+ }
1159
+ },
1160
+ yaxis: {
1161
+ labels: {
1162
+ style: {
1163
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1164
+ fontSize: '12px',
1165
+ fontFamily: KTApp.getSettings()['font-family']
1166
+ }
1167
+ }
1168
+ },
1169
+ states: {
1170
+ normal: {
1171
+ filter: {
1172
+ type: 'none',
1173
+ value: 0
1174
+ }
1175
+ },
1176
+ hover: {
1177
+ filter: {
1178
+ type: 'none',
1179
+ value: 0
1180
+ }
1181
+ },
1182
+ active: {
1183
+ allowMultipleDataPointsSelection: false,
1184
+ filter: {
1185
+ type: 'none',
1186
+ value: 0
1187
+ }
1188
+ }
1189
+ },
1190
+ tooltip: {
1191
+ style: {
1192
+ fontSize: '12px',
1193
+ fontFamily: KTApp.getSettings()['font-family']
1194
+ },
1195
+ y: {
1196
+ formatter: function (val) {
1197
+ return "$" + val + " thousands"
1198
+ }
1199
+ }
1200
+ },
1201
+ colors: [KTApp.getSettings()['colors']['theme']['light']['info']],
1202
+ grid: {
1203
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
1204
+ strokeDashArray: 4,
1205
+ yaxis: {
1206
+ lines: {
1207
+ show: true
1208
+ }
1209
+ }
1210
+ },
1211
+ markers: {
1212
+ //size: 5,
1213
+ //colors: [KTApp.getSettings()['colors']['theme']['light']['danger']],
1214
+ strokeColor: KTApp.getSettings()['colors']['theme']['base']['info'],
1215
+ strokeWidth: 3
1216
+ }
1217
+ };
1218
+
1219
+ var chart = new ApexCharts(element, options);
1220
+ chart.render();
1221
+ }
1222
+
1223
+ var _initChartsWidget4 = function () {
1224
+ var element = document.getElementById("kt_charts_widget_4_chart");
1225
+
1226
+ if (!element) {
1227
+ return;
1228
+ }
1229
+
1230
+ var options = {
1231
+ series: [{
1232
+ name: 'Net Profit',
1233
+ data: [60, 50, 80, 40, 100, 60]
1234
+ }, {
1235
+ name: 'Revenue',
1236
+ data: [70, 60, 110, 40, 50, 70]
1237
+ }],
1238
+ chart: {
1239
+ type: 'area',
1240
+ height: 350,
1241
+ toolbar: {
1242
+ show: false
1243
+ }
1244
+ },
1245
+ plotOptions: {},
1246
+ legend: {
1247
+ show: false
1248
+ },
1249
+ dataLabels: {
1250
+ enabled: false
1251
+ },
1252
+ fill: {
1253
+ type: 'solid',
1254
+ opacity: 1
1255
+ },
1256
+ stroke: {
1257
+ curve: 'smooth'
1258
+ },
1259
+ xaxis: {
1260
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
1261
+ axisBorder: {
1262
+ show: false,
1263
+ },
1264
+ axisTicks: {
1265
+ show: false
1266
+ },
1267
+ labels: {
1268
+ style: {
1269
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1270
+ fontSize: '12px',
1271
+ fontFamily: KTApp.getSettings()['font-family']
1272
+ }
1273
+ },
1274
+ crosshairs: {
1275
+ position: 'front',
1276
+ stroke: {
1277
+ color: KTApp.getSettings()['colors']['theme']['light']['success'],
1278
+ width: 1,
1279
+ dashArray: 3
1280
+ }
1281
+ },
1282
+ tooltip: {
1283
+ enabled: true,
1284
+ formatter: undefined,
1285
+ offsetY: 0,
1286
+ style: {
1287
+ fontSize: '12px',
1288
+ fontFamily: KTApp.getSettings()['font-family']
1289
+ }
1290
+ }
1291
+ },
1292
+ yaxis: {
1293
+ labels: {
1294
+ style: {
1295
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1296
+ fontSize: '12px',
1297
+ fontFamily: KTApp.getSettings()['font-family']
1298
+ }
1299
+ }
1300
+ },
1301
+ states: {
1302
+ normal: {
1303
+ filter: {
1304
+ type: 'none',
1305
+ value: 0
1306
+ }
1307
+ },
1308
+ hover: {
1309
+ filter: {
1310
+ type: 'none',
1311
+ value: 0
1312
+ }
1313
+ },
1314
+ active: {
1315
+ allowMultipleDataPointsSelection: false,
1316
+ filter: {
1317
+ type: 'none',
1318
+ value: 0
1319
+ }
1320
+ }
1321
+ },
1322
+ tooltip: {
1323
+ style: {
1324
+ fontSize: '12px',
1325
+ fontFamily: KTApp.getSettings()['font-family']
1326
+ },
1327
+ y: {
1328
+ formatter: function (val) {
1329
+ return "$" + val + " thousands"
1330
+ }
1331
+ }
1332
+ },
1333
+ colors: [KTApp.getSettings()['colors']['theme']['base']['success'], KTApp.getSettings()['colors']['theme']['base']['warning']],
1334
+ grid: {
1335
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
1336
+ strokeDashArray: 4,
1337
+ yaxis: {
1338
+ lines: {
1339
+ show: true
1340
+ }
1341
+ }
1342
+ },
1343
+ markers: {
1344
+ colors: [KTApp.getSettings()['colors']['theme']['light']['success'], KTApp.getSettings()['colors']['theme']['light']['warning']],
1345
+ strokeColor: [KTApp.getSettings()['colors']['theme']['light']['success'], KTApp.getSettings()['colors']['theme']['light']['warning']],
1346
+ strokeWidth: 3
1347
+ }
1348
+ };
1349
+
1350
+ var chart = new ApexCharts(element, options);
1351
+ chart.render();
1352
+ }
1353
+
1354
+ var _initChartsWidget5 = function () {
1355
+ var element = document.getElementById("kt_charts_widget_5_chart");
1356
+
1357
+ if (!element) {
1358
+ return;
1359
+ }
1360
+
1361
+ var options = {
1362
+ series: [{
1363
+ name: 'Net Profit',
1364
+ data: [40, 50, 65, 70, 50, 30]
1365
+ }, {
1366
+ name: 'Revenue',
1367
+ data: [-30, -40, -55, -60, -40, -20]
1368
+ }],
1369
+ chart: {
1370
+ type: 'bar',
1371
+ stacked: true,
1372
+ height: 350,
1373
+ toolbar: {
1374
+ show: false
1375
+ }
1376
+ },
1377
+ plotOptions: {
1378
+ bar: {
1379
+ horizontal: false,
1380
+ columnWidth: ['12%'],
1381
+ endingShape: 'rounded'
1382
+ },
1383
+ },
1384
+ legend: {
1385
+ show: false
1386
+ },
1387
+ dataLabels: {
1388
+ enabled: false
1389
+ },
1390
+ stroke: {
1391
+ show: true,
1392
+ width: 2,
1393
+ colors: ['transparent']
1394
+ },
1395
+ xaxis: {
1396
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
1397
+ axisBorder: {
1398
+ show: false,
1399
+ },
1400
+ axisTicks: {
1401
+ show: false
1402
+ },
1403
+ labels: {
1404
+ style: {
1405
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1406
+ fontSize: '12px',
1407
+ fontFamily: KTApp.getSettings()['font-family']
1408
+ }
1409
+ }
1410
+ },
1411
+ yaxis: {
1412
+ min: -80,
1413
+ max: 80,
1414
+ labels: {
1415
+ style: {
1416
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1417
+ fontSize: '12px',
1418
+ fontFamily: KTApp.getSettings()['font-family']
1419
+ }
1420
+ }
1421
+ },
1422
+ fill: {
1423
+ opacity: 1
1424
+ },
1425
+ states: {
1426
+ normal: {
1427
+ filter: {
1428
+ type: 'none',
1429
+ value: 0
1430
+ }
1431
+ },
1432
+ hover: {
1433
+ filter: {
1434
+ type: 'none',
1435
+ value: 0
1436
+ }
1437
+ },
1438
+ active: {
1439
+ allowMultipleDataPointsSelection: false,
1440
+ filter: {
1441
+ type: 'none',
1442
+ value: 0
1443
+ }
1444
+ }
1445
+ },
1446
+ tooltip: {
1447
+ style: {
1448
+ fontSize: '12px',
1449
+ fontFamily: KTApp.getSettings()['font-family']
1450
+ },
1451
+ y: {
1452
+ formatter: function (val) {
1453
+ return "$" + val + " thousands"
1454
+ }
1455
+ }
1456
+ },
1457
+ colors: [KTApp.getSettings()['colors']['theme']['base']['info'], KTApp.getSettings()['colors']['theme']['base']['primary']],
1458
+ grid: {
1459
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
1460
+ strokeDashArray: 4,
1461
+ yaxis: {
1462
+ lines: {
1463
+ show: true
1464
+ }
1465
+ }
1466
+ }
1467
+ };
1468
+
1469
+ var chart = new ApexCharts(element, options);
1470
+ chart.render();
1471
+ }
1472
+
1473
+ var _initChartsWidget6 = function () {
1474
+ var element = document.getElementById("kt_charts_widget_6_chart");
1475
+
1476
+ if (!element) {
1477
+ return;
1478
+ }
1479
+
1480
+ var options = {
1481
+ series: [{
1482
+ name: 'Net Profit',
1483
+ type: 'bar',
1484
+ stacked: true,
1485
+ data: [40, 50, 65, 70, 50, 30]
1486
+ }, {
1487
+ name: 'Revenue',
1488
+ type: 'bar',
1489
+ stacked: true,
1490
+ data: [20, 20, 25, 30, 30, 20]
1491
+ }, {
1492
+ name: 'Expenses',
1493
+ type: 'area',
1494
+ data: [50, 80, 60, 90, 50, 70]
1495
+ }],
1496
+ chart: {
1497
+ stacked: true,
1498
+ height: 350,
1499
+ toolbar: {
1500
+ show: false
1501
+ }
1502
+ },
1503
+ plotOptions: {
1504
+ bar: {
1505
+ stacked: true,
1506
+ horizontal: false,
1507
+ endingShape: 'rounded',
1508
+ columnWidth: ['12%']
1509
+ },
1510
+ },
1511
+ legend: {
1512
+ show: false
1513
+ },
1514
+ dataLabels: {
1515
+ enabled: false
1516
+ },
1517
+ stroke: {
1518
+ curve: 'smooth',
1519
+ show: true,
1520
+ width: 2,
1521
+ colors: ['transparent']
1522
+ },
1523
+ xaxis: {
1524
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
1525
+ axisBorder: {
1526
+ show: false,
1527
+ },
1528
+ axisTicks: {
1529
+ show: false
1530
+ },
1531
+ labels: {
1532
+ style: {
1533
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1534
+ fontSize: '12px',
1535
+ fontFamily: KTApp.getSettings()['font-family']
1536
+ }
1537
+ }
1538
+ },
1539
+ yaxis: {
1540
+ max: 120,
1541
+ labels: {
1542
+ style: {
1543
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1544
+ fontSize: '12px',
1545
+ fontFamily: KTApp.getSettings()['font-family']
1546
+ }
1547
+ }
1548
+ },
1549
+ fill: {
1550
+ opacity: 1
1551
+ },
1552
+ states: {
1553
+ normal: {
1554
+ filter: {
1555
+ type: 'none',
1556
+ value: 0
1557
+ }
1558
+ },
1559
+ hover: {
1560
+ filter: {
1561
+ type: 'none',
1562
+ value: 0
1563
+ }
1564
+ },
1565
+ active: {
1566
+ allowMultipleDataPointsSelection: false,
1567
+ filter: {
1568
+ type: 'none',
1569
+ value: 0
1570
+ }
1571
+ }
1572
+ },
1573
+ tooltip: {
1574
+ style: {
1575
+ fontSize: '12px',
1576
+ fontFamily: KTApp.getSettings()['font-family']
1577
+ },
1578
+ y: {
1579
+ formatter: function (val) {
1580
+ return "$" + val + " thousands"
1581
+ }
1582
+ }
1583
+ },
1584
+ colors: [KTApp.getSettings()['colors']['theme']['base']['info'], KTApp.getSettings()['colors']['theme']['base']['primary'], KTApp.getSettings()['colors']['theme']['light']['primary']],
1585
+ grid: {
1586
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
1587
+ strokeDashArray: 4,
1588
+ yaxis: {
1589
+ lines: {
1590
+ show: true
1591
+ }
1592
+ },
1593
+ padding: {
1594
+ top: 0,
1595
+ right: 0,
1596
+ bottom: 0,
1597
+ left: 0
1598
+ }
1599
+ }
1600
+ };
1601
+
1602
+ var chart = new ApexCharts(element, options);
1603
+ chart.render();
1604
+ }
1605
+
1606
+ var _initChartsWidget7 = function () {
1607
+ var element = document.getElementById("kt_charts_widget_7_chart");
1608
+
1609
+ if (!element) {
1610
+ return;
1611
+ }
1612
+
1613
+ var options = {
1614
+ series: [{
1615
+ name: 'Net Profit',
1616
+ data: [30, 30, 50, 50, 35, 35]
1617
+ }, {
1618
+ name: 'Revenue',
1619
+ data: [55, 20, 20, 20, 70, 70]
1620
+ }, {
1621
+ name: 'Expenses',
1622
+ data: [60, 60, 40, 40, 30, 30]
1623
+ }],
1624
+ chart: {
1625
+ type: 'area',
1626
+ height: 300,
1627
+ toolbar: {
1628
+ show: false
1629
+ },
1630
+ zoom: {
1631
+ enabled: false
1632
+ },
1633
+ sparkline: {
1634
+ enabled: true
1635
+ }
1636
+ },
1637
+ plotOptions: {},
1638
+ legend: {
1639
+ show: false
1640
+ },
1641
+ dataLabels: {
1642
+ enabled: false
1643
+ },
1644
+ fill: {
1645
+ type: 'solid',
1646
+ opacity: 1
1647
+ },
1648
+ stroke: {
1649
+ curve: 'smooth',
1650
+ show: true,
1651
+ width: 2,
1652
+ colors: [KTApp.getSettings()['colors']['theme']['base']['warning'], 'transparent', 'transparent']
1653
+ },
1654
+ xaxis: {
1655
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
1656
+ axisBorder: {
1657
+ show: false,
1658
+ },
1659
+ axisTicks: {
1660
+ show: false
1661
+ },
1662
+ labels: {
1663
+ show: false,
1664
+ style: {
1665
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1666
+ fontSize: '12px',
1667
+ fontFamily: KTApp.getSettings()['font-family']
1668
+ }
1669
+ },
1670
+ crosshairs: {
1671
+ show: false,
1672
+ position: 'front',
1673
+ stroke: {
1674
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
1675
+ width: 1,
1676
+ dashArray: 3
1677
+ }
1678
+ },
1679
+ tooltip: {
1680
+ enabled: true,
1681
+ formatter: undefined,
1682
+ offsetY: 0,
1683
+ style: {
1684
+ fontSize: '12px',
1685
+ fontFamily: KTApp.getSettings()['font-family']
1686
+ }
1687
+ }
1688
+ },
1689
+ yaxis: {
1690
+ labels: {
1691
+ show: false,
1692
+ style: {
1693
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1694
+ fontSize: '12px',
1695
+ fontFamily: KTApp.getSettings()['font-family']
1696
+ }
1697
+ }
1698
+ },
1699
+ states: {
1700
+ normal: {
1701
+ filter: {
1702
+ type: 'none',
1703
+ value: 0
1704
+ }
1705
+ },
1706
+ hover: {
1707
+ filter: {
1708
+ type: 'none',
1709
+ value: 0
1710
+ }
1711
+ },
1712
+ active: {
1713
+ allowMultipleDataPointsSelection: false,
1714
+ filter: {
1715
+ type: 'none',
1716
+ value: 0
1717
+ }
1718
+ }
1719
+ },
1720
+ tooltip: {
1721
+ style: {
1722
+ fontSize: '12px',
1723
+ fontFamily: KTApp.getSettings()['font-family']
1724
+ },
1725
+ y: {
1726
+ formatter: function (val) {
1727
+ return "$" + val + " thousands"
1728
+ }
1729
+ }
1730
+ },
1731
+ colors: [KTApp.getSettings()['colors']['theme']['light']['warning'], KTApp.getSettings()['colors']['theme']['light']['info'], KTApp.getSettings()['colors']['gray']['gray-100']],
1732
+ grid: {
1733
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
1734
+ strokeDashArray: 4,
1735
+ yaxis: {
1736
+ lines: {
1737
+ show: true
1738
+ }
1739
+ }
1740
+ },
1741
+ markers: {
1742
+ colors: [KTApp.getSettings()['colors']['theme']['light']['warning'], KTApp.getSettings()['colors']['theme']['light']['info'], KTApp.getSettings()['colors']['gray']['gray-100']],
1743
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base']['warning'], KTApp.getSettings()['colors']['theme']['base']['info'], KTApp.getSettings()['colors']['gray']['gray-500']],
1744
+ strokeWidth: 3
1745
+ }
1746
+ };
1747
+
1748
+ var chart = new ApexCharts(element, options);
1749
+ chart.render();
1750
+ }
1751
+
1752
+ var _initChartsWidget8 = function () {
1753
+ var element = document.getElementById("kt_charts_widget_8_chart");
1754
+
1755
+ if (!element) {
1756
+ return;
1757
+ }
1758
+
1759
+ var options = {
1760
+ series: [{
1761
+ name: 'Net Profit',
1762
+ data: [30, 30, 50, 50, 35, 35]
1763
+ }, {
1764
+ name: 'Revenue',
1765
+ data: [55, 20, 20, 20, 70, 70]
1766
+ }, {
1767
+ name: 'Expenses',
1768
+ data: [60, 60, 40, 40, 30, 30]
1769
+ },],
1770
+ chart: {
1771
+ type: 'area',
1772
+ height: 300,
1773
+ toolbar: {
1774
+ show: false
1775
+ },
1776
+ zoom: {
1777
+ enabled: false
1778
+ },
1779
+ sparkline: {
1780
+ enabled: true
1781
+ }
1782
+ },
1783
+ plotOptions: {},
1784
+ legend: {
1785
+ show: false
1786
+ },
1787
+ dataLabels: {
1788
+ enabled: false
1789
+ },
1790
+ fill: {
1791
+ type: 'solid',
1792
+ opacity: 1
1793
+ },
1794
+ stroke: {
1795
+ curve: 'smooth',
1796
+ show: true,
1797
+ width: 2,
1798
+ colors: ['transparent', 'transparent', 'transparent']
1799
+ },
1800
+ xaxis: {
1801
+ x: 0,
1802
+ offsetX: 0,
1803
+ offsetY: 0,
1804
+ padding: {
1805
+ left: 0,
1806
+ right: 0,
1807
+ top: 0,
1808
+ },
1809
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
1810
+ axisBorder: {
1811
+ show: false,
1812
+ },
1813
+ axisTicks: {
1814
+ show: false
1815
+ },
1816
+ labels: {
1817
+ show: false,
1818
+ style: {
1819
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1820
+ fontSize: '12px',
1821
+ fontFamily: KTApp.getSettings()['font-family']
1822
+ }
1823
+ },
1824
+ crosshairs: {
1825
+ show: false,
1826
+ position: 'front',
1827
+ stroke: {
1828
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
1829
+ width: 1,
1830
+ dashArray: 3
1831
+ }
1832
+ },
1833
+ tooltip: {
1834
+ enabled: true,
1835
+ formatter: undefined,
1836
+ offsetY: 0,
1837
+ style: {
1838
+ fontSize: '12px',
1839
+ fontFamily: KTApp.getSettings()['font-family']
1840
+ }
1841
+ }
1842
+ },
1843
+ yaxis: {
1844
+ y: 0,
1845
+ offsetX: 0,
1846
+ offsetY: 0,
1847
+ padding: {
1848
+ left: 0,
1849
+ right: 0
1850
+ },
1851
+ labels: {
1852
+ show: false,
1853
+ style: {
1854
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1855
+ fontSize: '12px',
1856
+ fontFamily: KTApp.getSettings()['font-family']
1857
+ }
1858
+ }
1859
+ },
1860
+ states: {
1861
+ normal: {
1862
+ filter: {
1863
+ type: 'none',
1864
+ value: 0
1865
+ }
1866
+ },
1867
+ hover: {
1868
+ filter: {
1869
+ type: 'none',
1870
+ value: 0
1871
+ }
1872
+ },
1873
+ active: {
1874
+ allowMultipleDataPointsSelection: false,
1875
+ filter: {
1876
+ type: 'none',
1877
+ value: 0
1878
+ }
1879
+ }
1880
+ },
1881
+ tooltip: {
1882
+ style: {
1883
+ fontSize: '12px',
1884
+ fontFamily: KTApp.getSettings()['font-family']
1885
+ },
1886
+ y: {
1887
+ formatter: function (val) {
1888
+ return "$" + val + " thousands"
1889
+ }
1890
+ }
1891
+ },
1892
+ colors: [KTApp.getSettings()['colors']['theme']['light']['success'], KTApp.getSettings()['colors']['theme']['light']['danger'], KTApp.getSettings()['colors']['theme']['light']['info']],
1893
+ grid: {
1894
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
1895
+ strokeDashArray: 4,
1896
+ padding: {
1897
+ top: 0,
1898
+ bottom: 0,
1899
+ left: 0,
1900
+ right: 0
1901
+ }
1902
+ },
1903
+ markers: {
1904
+ colors: [KTApp.getSettings()['colors']['theme']['light']['success'], KTApp.getSettings()['colors']['theme']['light']['danger'], KTApp.getSettings()['colors']['theme']['light']['info']],
1905
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base']['success'], KTApp.getSettings()['colors']['theme']['base']['danger'], KTApp.getSettings()['colors']['theme']['base']['info']],
1906
+ strokeWidth: 3
1907
+ }
1908
+ };
1909
+
1910
+ var chart = new ApexCharts(element, options);
1911
+ chart.render();
1912
+ }
1913
+
1914
+ var _initChartsWidget9 = function () {
1915
+ var element = document.getElementById("kt_charts_widget_9_chart");
1916
+
1917
+ if (!element) {
1918
+ return;
1919
+ }
1920
+
1921
+ var options = {
1922
+ series: [{
1923
+ name: 'Net Profit',
1924
+ data: [20, 30, 45, 35, 25]
1925
+ }, {
1926
+ name: 'Revenue',
1927
+ data: [-20, -30, -45, -35, -25]
1928
+ }],
1929
+ chart: {
1930
+ type: 'bar',
1931
+ stacked: true,
1932
+ height: 350,
1933
+ toolbar: {
1934
+ show: false
1935
+ }
1936
+ },
1937
+ plotOptions: {
1938
+ bar: {
1939
+ horizontal: false,
1940
+ columnWidth: ['17%'],
1941
+ endingShape: 'rounded'
1942
+ },
1943
+ },
1944
+ legend: {
1945
+ show: false
1946
+ },
1947
+ dataLabels: {
1948
+ enabled: false
1949
+ },
1950
+ stroke: {
1951
+ width: 0,
1952
+ colors: ['transparent']
1953
+ },
1954
+ xaxis: {
1955
+ lines: {
1956
+ show: false,
1957
+ },
1958
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun'],
1959
+ axisBorder: {
1960
+ show: false,
1961
+ },
1962
+ axisTicks: {
1963
+ show: false
1964
+ },
1965
+ labels: {
1966
+ style: {
1967
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1968
+ fontSize: '12px',
1969
+ fontFamily: KTApp.getSettings()['font-family']
1970
+ }
1971
+ }
1972
+ },
1973
+ yaxis: {
1974
+ lines: {
1975
+ show: false,
1976
+ },
1977
+ min: -50,
1978
+ max: 50,
1979
+ labels: {
1980
+ style: {
1981
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
1982
+ fontSize: '12px',
1983
+ fontFamily: KTApp.getSettings()['font-family']
1984
+ }
1985
+ }
1986
+ },
1987
+ fill: {
1988
+ opacity: 1
1989
+ },
1990
+ states: {
1991
+ normal: {
1992
+ filter: {
1993
+ type: 'none',
1994
+ value: 0
1995
+ }
1996
+ },
1997
+ hover: {
1998
+ filter: {
1999
+ type: 'none',
2000
+ value: 0
2001
+ }
2002
+ },
2003
+ active: {
2004
+ allowMultipleDataPointsSelection: false,
2005
+ filter: {
2006
+ type: 'none',
2007
+ value: 0
2008
+ }
2009
+ }
2010
+ },
2011
+ tooltip: {
2012
+ style: {
2013
+ fontSize: '12px',
2014
+ fontFamily: KTApp.getSettings()['font-family']
2015
+ },
2016
+ y: {
2017
+ formatter: function (val) {
2018
+ return "$" + val + " thousands"
2019
+ }
2020
+ }
2021
+ },
2022
+ colors: [KTApp.getSettings()['colors']['theme']['base']['info'], KTApp.getSettings()['colors']['theme']['base']['primary']],
2023
+ grid: {
2024
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
2025
+ strokeDashArray: 4,
2026
+ yaxis: {
2027
+ lines: {
2028
+ show: true
2029
+ }
2030
+ }
2031
+ }
2032
+ };
2033
+
2034
+ var chart = new ApexCharts(element, options);
2035
+ chart.render();
2036
+ }
2037
+
2038
+ // Mixed widgets
2039
+ var _initMixedWidget1 = function () {
2040
+ var element = document.getElementById("kt_mixed_widget_1_chart");
2041
+ var height = parseInt(KTUtil.css(element, 'height'));
2042
+
2043
+ if (!element) {
2044
+ return;
2045
+ }
2046
+
2047
+ var strokeColor = '#D13647';
2048
+
2049
+ var options = {
2050
+ series: [{
2051
+ name: 'Net Profit',
2052
+ data: [30, 45, 32, 70, 40, 40, 40]
2053
+ }],
2054
+ chart: {
2055
+ type: 'area',
2056
+ height: height,
2057
+ toolbar: {
2058
+ show: false
2059
+ },
2060
+ zoom: {
2061
+ enabled: false
2062
+ },
2063
+ sparkline: {
2064
+ enabled: true
2065
+ },
2066
+ dropShadow: {
2067
+ enabled: true,
2068
+ enabledOnSeries: undefined,
2069
+ top: 5,
2070
+ left: 0,
2071
+ blur: 3,
2072
+ color: strokeColor,
2073
+ opacity: 0.5
2074
+ }
2075
+ },
2076
+ plotOptions: {},
2077
+ legend: {
2078
+ show: false
2079
+ },
2080
+ dataLabels: {
2081
+ enabled: false
2082
+ },
2083
+ fill: {
2084
+ type: 'solid',
2085
+ opacity: 0
2086
+ },
2087
+ stroke: {
2088
+ curve: 'smooth',
2089
+ show: true,
2090
+ width: 3,
2091
+ colors: [strokeColor]
2092
+ },
2093
+ xaxis: {
2094
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
2095
+ axisBorder: {
2096
+ show: false,
2097
+ },
2098
+ axisTicks: {
2099
+ show: false
2100
+ },
2101
+ labels: {
2102
+ show: false,
2103
+ style: {
2104
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2105
+ fontSize: '12px',
2106
+ fontFamily: KTApp.getSettings()['font-family']
2107
+ }
2108
+ },
2109
+ crosshairs: {
2110
+ show: false,
2111
+ position: 'front',
2112
+ stroke: {
2113
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
2114
+ width: 1,
2115
+ dashArray: 3
2116
+ }
2117
+ }
2118
+ },
2119
+ yaxis: {
2120
+ min: 0,
2121
+ max: 80,
2122
+ labels: {
2123
+ show: false,
2124
+ style: {
2125
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2126
+ fontSize: '12px',
2127
+ fontFamily: KTApp.getSettings()['font-family']
2128
+ }
2129
+ }
2130
+ },
2131
+ states: {
2132
+ normal: {
2133
+ filter: {
2134
+ type: 'none',
2135
+ value: 0
2136
+ }
2137
+ },
2138
+ hover: {
2139
+ filter: {
2140
+ type: 'none',
2141
+ value: 0
2142
+ }
2143
+ },
2144
+ active: {
2145
+ allowMultipleDataPointsSelection: false,
2146
+ filter: {
2147
+ type: 'none',
2148
+ value: 0
2149
+ }
2150
+ }
2151
+ },
2152
+ tooltip: {
2153
+ style: {
2154
+ fontSize: '12px',
2155
+ fontFamily: KTApp.getSettings()['font-family']
2156
+ },
2157
+ y: {
2158
+ formatter: function (val) {
2159
+ return "$" + val + " thousands"
2160
+ }
2161
+ },
2162
+ marker: {
2163
+ show: false
2164
+ }
2165
+ },
2166
+ colors: ['transparent'],
2167
+ markers: {
2168
+ colors: [KTApp.getSettings()['colors']['theme']['light']['danger']],
2169
+ strokeColor: [strokeColor],
2170
+ strokeWidth: 3
2171
+ }
2172
+ };
2173
+
2174
+ var chart = new ApexCharts(element, options);
2175
+ chart.render();
2176
+ }
2177
+
2178
+ var _initMixedWidget2 = function () {
2179
+ var element = document.getElementById("kt_mixed_widget_2_chart");
2180
+ var height = parseInt(KTUtil.css(element, 'height'));
2181
+
2182
+ if (!element) {
2183
+ return;
2184
+ }
2185
+
2186
+ var strokeColor = '#287ED7';
2187
+
2188
+ var options = {
2189
+ series: [{
2190
+ name: 'Net Profit',
2191
+ data: [30, 45, 32, 70, 40, 40, 40]
2192
+ }],
2193
+ chart: {
2194
+ type: 'area',
2195
+ height: height,
2196
+ toolbar: {
2197
+ show: false
2198
+ },
2199
+ zoom: {
2200
+ enabled: false
2201
+ },
2202
+ sparkline: {
2203
+ enabled: true
2204
+ },
2205
+ dropShadow: {
2206
+ enabled: true,
2207
+ enabledOnSeries: undefined,
2208
+ top: 5,
2209
+ left: 0,
2210
+ blur: 3,
2211
+ color: strokeColor,
2212
+ opacity: 0.5
2213
+ }
2214
+ },
2215
+ plotOptions: {},
2216
+ legend: {
2217
+ show: false
2218
+ },
2219
+ dataLabels: {
2220
+ enabled: false
2221
+ },
2222
+ fill: {
2223
+ type: 'solid',
2224
+ opacity: 0
2225
+ },
2226
+ stroke: {
2227
+ curve: 'smooth',
2228
+ show: true,
2229
+ width: 3,
2230
+ colors: [strokeColor]
2231
+ },
2232
+ xaxis: {
2233
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
2234
+ axisBorder: {
2235
+ show: false,
2236
+ },
2237
+ axisTicks: {
2238
+ show: false
2239
+ },
2240
+ labels: {
2241
+ show: false,
2242
+ style: {
2243
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2244
+ fontSize: '12px',
2245
+ fontFamily: KTApp.getSettings()['font-family']
2246
+ }
2247
+ },
2248
+ crosshairs: {
2249
+ show: false,
2250
+ position: 'front',
2251
+ stroke: {
2252
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
2253
+ width: 1,
2254
+ dashArray: 3
2255
+ }
2256
+ },
2257
+ tooltip: {
2258
+ enabled: true,
2259
+ formatter: undefined,
2260
+ offsetY: 0,
2261
+ style: {
2262
+ fontSize: '12px',
2263
+ fontFamily: KTApp.getSettings()['font-family']
2264
+ }
2265
+ }
2266
+ },
2267
+ yaxis: {
2268
+ min: 0,
2269
+ max: 80,
2270
+ labels: {
2271
+ show: false,
2272
+ style: {
2273
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2274
+ fontSize: '12px',
2275
+ fontFamily: KTApp.getSettings()['font-family']
2276
+ }
2277
+ }
2278
+ },
2279
+ states: {
2280
+ normal: {
2281
+ filter: {
2282
+ type: 'none',
2283
+ value: 0
2284
+ }
2285
+ },
2286
+ hover: {
2287
+ filter: {
2288
+ type: 'none',
2289
+ value: 0
2290
+ }
2291
+ },
2292
+ active: {
2293
+ allowMultipleDataPointsSelection: false,
2294
+ filter: {
2295
+ type: 'none',
2296
+ value: 0
2297
+ }
2298
+ }
2299
+ },
2300
+ tooltip: {
2301
+ style: {
2302
+ fontSize: '12px',
2303
+ fontFamily: KTApp.getSettings()['font-family']
2304
+ },
2305
+ y: {
2306
+ formatter: function (val) {
2307
+ return "$" + val + " thousands"
2308
+ }
2309
+ },
2310
+ marker: {
2311
+ show: false
2312
+ }
2313
+ },
2314
+ colors: ['transparent'],
2315
+ markers: {
2316
+ colors: [KTApp.getSettings()['colors']['theme']['light']['info']],
2317
+ strokeColor: [strokeColor],
2318
+ strokeWidth: 3
2319
+ }
2320
+ };
2321
+
2322
+ var chart = new ApexCharts(element, options);
2323
+ chart.render();
2324
+ }
2325
+
2326
+ var _initMixedWidget3 = function () {
2327
+ var element = document.getElementById("kt_mixed_widget_3_chart");
2328
+ var height = parseInt(KTUtil.css(element, 'height'));
2329
+
2330
+ if (!element) {
2331
+ return;
2332
+ }
2333
+
2334
+ var strokeColor = KTApp.getSettings()['colors']['theme']['base']['white'];
2335
+
2336
+ var options = {
2337
+ series: [{
2338
+ name: 'Net Profit',
2339
+ data: [30, 45, 32, 70, 40, 40, 40]
2340
+ }],
2341
+ chart: {
2342
+ type: 'area',
2343
+ height: height,
2344
+ toolbar: {
2345
+ show: false
2346
+ },
2347
+ zoom: {
2348
+ enabled: false
2349
+ },
2350
+ sparkline: {
2351
+ enabled: true
2352
+ },
2353
+ dropShadow: {
2354
+ enabled: true,
2355
+ enabledOnSeries: undefined,
2356
+ top: 5,
2357
+ left: 0,
2358
+ blur: 3,
2359
+ color: strokeColor,
2360
+ opacity: 0.3
2361
+ }
2362
+ },
2363
+ plotOptions: {},
2364
+ legend: {
2365
+ show: false
2366
+ },
2367
+ dataLabels: {
2368
+ enabled: false
2369
+ },
2370
+ fill: {
2371
+ type: 'solid',
2372
+ opacity: 0
2373
+ },
2374
+ stroke: {
2375
+ curve: 'smooth',
2376
+ show: true,
2377
+ width: 3,
2378
+ colors: [strokeColor]
2379
+ },
2380
+ xaxis: {
2381
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
2382
+ axisBorder: {
2383
+ show: false,
2384
+ },
2385
+ axisTicks: {
2386
+ show: false
2387
+ },
2388
+ labels: {
2389
+ show: false,
2390
+ style: {
2391
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2392
+ fontSize: '12px',
2393
+ fontFamily: KTApp.getSettings()['font-family']
2394
+ }
2395
+ },
2396
+ crosshairs: {
2397
+ show: false,
2398
+ position: 'front',
2399
+ stroke: {
2400
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
2401
+ width: 1,
2402
+ dashArray: 3
2403
+ }
2404
+ },
2405
+ tooltip: {
2406
+ enabled: true,
2407
+ formatter: undefined,
2408
+ offsetY: 0,
2409
+ style: {
2410
+ fontSize: '12px',
2411
+ fontFamily: KTApp.getSettings()['font-family']
2412
+ }
2413
+ }
2414
+ },
2415
+ yaxis: {
2416
+ min: 0,
2417
+ max: 80,
2418
+ labels: {
2419
+ show: false,
2420
+ style: {
2421
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2422
+ fontSize: '12px',
2423
+ fontFamily: KTApp.getSettings()['font-family']
2424
+ }
2425
+ }
2426
+ },
2427
+ states: {
2428
+ normal: {
2429
+ filter: {
2430
+ type: 'none',
2431
+ value: 0
2432
+ }
2433
+ },
2434
+ hover: {
2435
+ filter: {
2436
+ type: 'none',
2437
+ value: 0
2438
+ }
2439
+ },
2440
+ active: {
2441
+ allowMultipleDataPointsSelection: false,
2442
+ filter: {
2443
+ type: 'none',
2444
+ value: 0
2445
+ }
2446
+ }
2447
+ },
2448
+ tooltip: {
2449
+ style: {
2450
+ fontSize: '12px',
2451
+ fontFamily: KTApp.getSettings()['font-family']
2452
+ },
2453
+ y: {
2454
+ formatter: function (val) {
2455
+ return "$" + val + " thousands"
2456
+ }
2457
+ },
2458
+ marker: {
2459
+ show: false
2460
+ }
2461
+ },
2462
+ colors: ['transparent'],
2463
+ markers: {
2464
+ colors: [KTApp.getSettings()['colors']['theme']['light']['dark']],
2465
+ strokeColor: [strokeColor],
2466
+ strokeWidth: 3
2467
+ }
2468
+ };
2469
+
2470
+ var chart = new ApexCharts(element, options);
2471
+ chart.render();
2472
+ }
2473
+
2474
+ var _initMixedWidget4 = function () {
2475
+ var element = document.getElementById("kt_mixed_widget_4_chart");
2476
+ var height = parseInt(KTUtil.css(element, 'height'));
2477
+
2478
+ if (!element) {
2479
+ return;
2480
+ }
2481
+
2482
+ var options = {
2483
+ series: [{
2484
+ name: 'Net Profit',
2485
+ data: [35, 65, 75, 55, 45, 60, 55]
2486
+ }, {
2487
+ name: 'Revenue',
2488
+ data: [40, 70, 80, 60, 50, 65, 60]
2489
+ }],
2490
+ chart: {
2491
+ type: 'bar',
2492
+ height: height,
2493
+ toolbar: {
2494
+ show: false
2495
+ },
2496
+ sparkline: {
2497
+ enabled: true
2498
+ },
2499
+ },
2500
+ plotOptions: {
2501
+ bar: {
2502
+ horizontal: false,
2503
+ columnWidth: ['30%'],
2504
+ endingShape: 'rounded'
2505
+ },
2506
+ },
2507
+ legend: {
2508
+ show: false
2509
+ },
2510
+ dataLabels: {
2511
+ enabled: false
2512
+ },
2513
+ stroke: {
2514
+ show: true,
2515
+ width: 1,
2516
+ colors: ['transparent']
2517
+ },
2518
+ xaxis: {
2519
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
2520
+ axisBorder: {
2521
+ show: false,
2522
+ },
2523
+ axisTicks: {
2524
+ show: false
2525
+ },
2526
+ labels: {
2527
+ style: {
2528
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2529
+ fontSize: '12px',
2530
+ fontFamily: KTApp.getSettings()['font-family']
2531
+ }
2532
+ }
2533
+ },
2534
+ yaxis: {
2535
+ min: 0,
2536
+ max: 100,
2537
+ labels: {
2538
+ style: {
2539
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2540
+ fontSize: '12px',
2541
+ fontFamily: KTApp.getSettings()['font-family']
2542
+ }
2543
+ }
2544
+ },
2545
+ fill: {
2546
+ type: ['solid', 'solid'],
2547
+ opacity: [0.25, 1]
2548
+ },
2549
+ states: {
2550
+ normal: {
2551
+ filter: {
2552
+ type: 'none',
2553
+ value: 0
2554
+ }
2555
+ },
2556
+ hover: {
2557
+ filter: {
2558
+ type: 'none',
2559
+ value: 0
2560
+ }
2561
+ },
2562
+ active: {
2563
+ allowMultipleDataPointsSelection: false,
2564
+ filter: {
2565
+ type: 'none',
2566
+ value: 0
2567
+ }
2568
+ }
2569
+ },
2570
+ tooltip: {
2571
+ style: {
2572
+ fontSize: '12px',
2573
+ fontFamily: KTApp.getSettings()['font-family']
2574
+ },
2575
+ y: {
2576
+ formatter: function (val) {
2577
+ return "$" + val + " thousands"
2578
+ }
2579
+ },
2580
+ marker: {
2581
+ show: false
2582
+ }
2583
+ },
2584
+ colors: ['#ffffff', '#ffffff'],
2585
+ grid: {
2586
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
2587
+ strokeDashArray: 4,
2588
+ yaxis: {
2589
+ lines: {
2590
+ show: true
2591
+ }
2592
+ },
2593
+ padding: {
2594
+ left: 20,
2595
+ right: 20
2596
+ }
2597
+ }
2598
+ };
2599
+
2600
+ var chart = new ApexCharts(element, options);
2601
+ chart.render();
2602
+ }
2603
+
2604
+ var _initMixedWidget5 = function () {
2605
+ var element = document.getElementById("kt_mixed_widget_5_chart");
2606
+ var height = parseInt(KTUtil.css(element, 'height'));
2607
+
2608
+ if (!element) {
2609
+ return;
2610
+ }
2611
+
2612
+ var options = {
2613
+ series: [{
2614
+ name: 'Net Profit',
2615
+ data: [35, 65, 75, 55, 45, 60, 55]
2616
+ }, {
2617
+ name: 'Revenue',
2618
+ data: [40, 70, 80, 60, 50, 65, 60]
2619
+ }],
2620
+ chart: {
2621
+ type: 'bar',
2622
+ height: height,
2623
+ toolbar: {
2624
+ show: false
2625
+ },
2626
+ sparkline: {
2627
+ enabled: true
2628
+ },
2629
+ },
2630
+ plotOptions: {
2631
+ bar: {
2632
+ horizontal: false,
2633
+ columnWidth: ['30%'],
2634
+ endingShape: 'rounded'
2635
+ },
2636
+ },
2637
+ legend: {
2638
+ show: false
2639
+ },
2640
+ dataLabels: {
2641
+ enabled: false
2642
+ },
2643
+ stroke: {
2644
+ show: true,
2645
+ width: 1,
2646
+ colors: ['transparent']
2647
+ },
2648
+ xaxis: {
2649
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
2650
+ axisBorder: {
2651
+ show: false,
2652
+ },
2653
+ axisTicks: {
2654
+ show: false
2655
+ },
2656
+ labels: {
2657
+ style: {
2658
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2659
+ fontSize: '12px',
2660
+ fontFamily: KTApp.getSettings()['font-family']
2661
+ }
2662
+ }
2663
+ },
2664
+ yaxis: {
2665
+ min: 0,
2666
+ max: 100,
2667
+ labels: {
2668
+ style: {
2669
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2670
+ fontSize: '12px',
2671
+ fontFamily: KTApp.getSettings()['font-family']
2672
+ }
2673
+ }
2674
+ },
2675
+ fill: {
2676
+ type: ['solid', 'solid'],
2677
+ opacity: [0.25, 1]
2678
+ },
2679
+ states: {
2680
+ normal: {
2681
+ filter: {
2682
+ type: 'none',
2683
+ value: 0
2684
+ }
2685
+ },
2686
+ hover: {
2687
+ filter: {
2688
+ type: 'none',
2689
+ value: 0
2690
+ }
2691
+ },
2692
+ active: {
2693
+ allowMultipleDataPointsSelection: false,
2694
+ filter: {
2695
+ type: 'none',
2696
+ value: 0
2697
+ }
2698
+ }
2699
+ },
2700
+ tooltip: {
2701
+ style: {
2702
+ fontSize: '12px',
2703
+ fontFamily: KTApp.getSettings()['font-family']
2704
+ },
2705
+ y: {
2706
+ formatter: function (val) {
2707
+ return "$" + val + " thousands"
2708
+ }
2709
+ },
2710
+ marker: {
2711
+ show: false
2712
+ }
2713
+ },
2714
+ colors: ['#ffffff', '#ffffff'],
2715
+ grid: {
2716
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
2717
+ strokeDashArray: 4,
2718
+ yaxis: {
2719
+ lines: {
2720
+ show: true
2721
+ }
2722
+ },
2723
+ padding: {
2724
+ left: 20,
2725
+ right: 20
2726
+ }
2727
+ }
2728
+ };
2729
+
2730
+ var chart = new ApexCharts(element, options);
2731
+ chart.render();
2732
+ }
2733
+
2734
+ var _initMixedWidget6 = function () {
2735
+ var element = document.getElementById("kt_mixed_widget_6_chart");
2736
+ var height = parseInt(KTUtil.css(element, 'height'));
2737
+
2738
+ if (!element) {
2739
+ return;
2740
+ }
2741
+
2742
+ var options = {
2743
+ series: [{
2744
+ name: 'Net Profit',
2745
+ data: [35, 65, 75, 55, 45, 60, 55]
2746
+ }, {
2747
+ name: 'Revenue',
2748
+ data: [40, 70, 80, 60, 50, 65, 60]
2749
+ }],
2750
+ chart: {
2751
+ type: 'bar',
2752
+ height: height,
2753
+ toolbar: {
2754
+ show: false
2755
+ },
2756
+ sparkline: {
2757
+ enabled: true
2758
+ },
2759
+ },
2760
+ plotOptions: {
2761
+ bar: {
2762
+ horizontal: false,
2763
+ columnWidth: ['30%'],
2764
+ endingShape: 'rounded'
2765
+ },
2766
+ },
2767
+ legend: {
2768
+ show: false
2769
+ },
2770
+ dataLabels: {
2771
+ enabled: false
2772
+ },
2773
+ stroke: {
2774
+ show: true,
2775
+ width: 1,
2776
+ colors: ['transparent']
2777
+ },
2778
+ xaxis: {
2779
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
2780
+ axisBorder: {
2781
+ show: false,
2782
+ },
2783
+ axisTicks: {
2784
+ show: false
2785
+ },
2786
+ labels: {
2787
+ style: {
2788
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2789
+ fontSize: '12px',
2790
+ fontFamily: KTApp.getSettings()['font-family']
2791
+ }
2792
+ }
2793
+ },
2794
+ yaxis: {
2795
+ min: 0,
2796
+ max: 100,
2797
+ labels: {
2798
+ style: {
2799
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2800
+ fontSize: '12px',
2801
+ fontFamily: KTApp.getSettings()['font-family']
2802
+ }
2803
+ }
2804
+ },
2805
+ fill: {
2806
+ type: ['solid', 'solid'],
2807
+ opacity: [0.25, 1]
2808
+ },
2809
+ states: {
2810
+ normal: {
2811
+ filter: {
2812
+ type: 'none',
2813
+ value: 0
2814
+ }
2815
+ },
2816
+ hover: {
2817
+ filter: {
2818
+ type: 'none',
2819
+ value: 0
2820
+ }
2821
+ },
2822
+ active: {
2823
+ allowMultipleDataPointsSelection: false,
2824
+ filter: {
2825
+ type: 'none',
2826
+ value: 0
2827
+ }
2828
+ }
2829
+ },
2830
+ tooltip: {
2831
+ style: {
2832
+ fontSize: '12px',
2833
+ fontFamily: KTApp.getSettings()['font-family']
2834
+ },
2835
+ y: {
2836
+ formatter: function (val) {
2837
+ return "$" + val + " thousands"
2838
+ }
2839
+ },
2840
+ marker: {
2841
+ show: false
2842
+ }
2843
+ },
2844
+ colors: ['#ffffff', '#ffffff'],
2845
+ grid: {
2846
+ borderColor: KTApp.getSettings()['colors']['gray']['gray-200'],
2847
+ strokeDashArray: 4,
2848
+ yaxis: {
2849
+ lines: {
2850
+ show: true
2851
+ }
2852
+ },
2853
+ padding: {
2854
+ left: 20,
2855
+ right: 20
2856
+ }
2857
+ }
2858
+ };
2859
+
2860
+ var chart = new ApexCharts(element, options);
2861
+ chart.render();
2862
+ }
2863
+
2864
+ var _initMixedWidget13 = function () {
2865
+ var element = document.getElementById("kt_mixed_widget_13_chart");
2866
+ var height = parseInt(KTUtil.css(element, 'height'));
2867
+
2868
+ if (!element) {
2869
+ return;
2870
+ }
2871
+
2872
+ var options = {
2873
+ series: [{
2874
+ name: 'Net Profit',
2875
+ data: [30, 25, 45, 30, 55, 55]
2876
+ }],
2877
+ chart: {
2878
+ type: 'area',
2879
+ height: height,
2880
+ toolbar: {
2881
+ show: false
2882
+ },
2883
+ zoom: {
2884
+ enabled: false
2885
+ },
2886
+ sparkline: {
2887
+ enabled: true
2888
+ }
2889
+ },
2890
+ plotOptions: {},
2891
+ legend: {
2892
+ show: false
2893
+ },
2894
+ dataLabels: {
2895
+ enabled: false
2896
+ },
2897
+ fill: {
2898
+ type: 'solid',
2899
+ opacity: 1
2900
+ },
2901
+ stroke: {
2902
+ curve: 'smooth',
2903
+ show: true,
2904
+ width: 3,
2905
+ colors: [KTApp.getSettings()['colors']['theme']['base']['info']]
2906
+ },
2907
+ xaxis: {
2908
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
2909
+ axisBorder: {
2910
+ show: false,
2911
+ },
2912
+ axisTicks: {
2913
+ show: false
2914
+ },
2915
+ labels: {
2916
+ show: false,
2917
+ style: {
2918
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2919
+ fontSize: '12px',
2920
+ fontFamily: KTApp.getSettings()['font-family']
2921
+ }
2922
+ },
2923
+ crosshairs: {
2924
+ show: false,
2925
+ position: 'front',
2926
+ stroke: {
2927
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
2928
+ width: 1,
2929
+ dashArray: 3
2930
+ }
2931
+ },
2932
+ tooltip: {
2933
+ enabled: true,
2934
+ formatter: undefined,
2935
+ offsetY: 0,
2936
+ style: {
2937
+ fontSize: '12px',
2938
+ fontFamily: KTApp.getSettings()['font-family']
2939
+ }
2940
+ }
2941
+ },
2942
+ yaxis: {
2943
+ min: 0,
2944
+ max: 60,
2945
+ labels: {
2946
+ show: false,
2947
+ style: {
2948
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
2949
+ fontSize: '12px',
2950
+ fontFamily: KTApp.getSettings()['font-family']
2951
+ }
2952
+ }
2953
+ },
2954
+ states: {
2955
+ normal: {
2956
+ filter: {
2957
+ type: 'none',
2958
+ value: 0
2959
+ }
2960
+ },
2961
+ hover: {
2962
+ filter: {
2963
+ type: 'none',
2964
+ value: 0
2965
+ }
2966
+ },
2967
+ active: {
2968
+ allowMultipleDataPointsSelection: false,
2969
+ filter: {
2970
+ type: 'none',
2971
+ value: 0
2972
+ }
2973
+ }
2974
+ },
2975
+ tooltip: {
2976
+ style: {
2977
+ fontSize: '12px',
2978
+ fontFamily: KTApp.getSettings()['font-family']
2979
+ },
2980
+ y: {
2981
+ formatter: function (val) {
2982
+ return "$" + val + " thousands"
2983
+ }
2984
+ }
2985
+ },
2986
+ colors: [KTApp.getSettings()['colors']['theme']['light']['info']],
2987
+ markers: {
2988
+ colors: [KTApp.getSettings()['colors']['theme']['light']['info']],
2989
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base']['info']],
2990
+ strokeWidth: 3
2991
+ }
2992
+ };
2993
+
2994
+ var chart = new ApexCharts(element, options);
2995
+ chart.render();
2996
+ }
2997
+
2998
+ var _initMixedWidget14 = function () {
2999
+ var element = document.getElementById("kt_mixed_widget_14_chart");
3000
+ var height = parseInt(KTUtil.css(element, 'height'));
3001
+
3002
+ if (!element) {
3003
+ return;
3004
+ }
3005
+
3006
+ var options = {
3007
+ series: [74],
3008
+ chart: {
3009
+ height: height,
3010
+ type: 'radialBar',
3011
+ },
3012
+ plotOptions: {
3013
+ radialBar: {
3014
+ hollow: {
3015
+ margin: 0,
3016
+ size: "65%"
3017
+ },
3018
+ dataLabels: {
3019
+ showOn: "always",
3020
+ name: {
3021
+ show: false,
3022
+ fontWeight: '700'
3023
+ },
3024
+ value: {
3025
+ color: KTApp.getSettings()['colors']['gray']['gray-700'],
3026
+ fontSize: "30px",
3027
+ fontWeight: '700',
3028
+ offsetY: 12,
3029
+ show: true,
3030
+ formatter: function (val) {
3031
+ return val + '%';
3032
+ }
3033
+ }
3034
+ },
3035
+ track: {
3036
+ background: KTApp.getSettings()['colors']['theme']['light']['success'],
3037
+ strokeWidth: '100%'
3038
+ }
3039
+ }
3040
+ },
3041
+ colors: [KTApp.getSettings()['colors']['theme']['base']['success']],
3042
+ stroke: {
3043
+ lineCap: "round",
3044
+ },
3045
+ labels: ["Progress"]
3046
+ };
3047
+
3048
+ var chart = new ApexCharts(element, options);
3049
+ chart.render();
3050
+ }
3051
+
3052
+ var _initMixedWidget15 = function () {
3053
+ var element = document.getElementById("kt_mixed_widget_15_chart");
3054
+ var height = parseInt(KTUtil.css(element, 'height'));
3055
+
3056
+ if (!element) {
3057
+ return;
3058
+ }
3059
+
3060
+ var options = {
3061
+ series: [{
3062
+ name: 'Net Profit',
3063
+ data: [30, 30, 60, 25, 25, 40]
3064
+ }],
3065
+ chart: {
3066
+ type: 'area',
3067
+ height: height,
3068
+ toolbar: {
3069
+ show: false
3070
+ },
3071
+ zoom: {
3072
+ enabled: false
3073
+ },
3074
+ sparkline: {
3075
+ enabled: true
3076
+ }
3077
+ },
3078
+ plotOptions: {},
3079
+ legend: {
3080
+ show: false
3081
+ },
3082
+ dataLabels: {
3083
+ enabled: false
3084
+ },
3085
+ fill: {
3086
+ type: 'gradient',
3087
+ opacity: 1,
3088
+ gradient: {
3089
+
3090
+ type: "vertical",
3091
+ shadeIntensity: 0.5,
3092
+ gradientToColors: undefined,
3093
+ inverseColors: true,
3094
+ opacityFrom: 1,
3095
+ opacityTo: 0.375,
3096
+ stops: [25, 50, 100],
3097
+ colorStops: []
3098
+ }
3099
+ },
3100
+ stroke: {
3101
+ curve: 'smooth',
3102
+ show: true,
3103
+ width: 3,
3104
+ colors: [KTApp.getSettings()['colors']['theme']['base']['danger']]
3105
+ },
3106
+ xaxis: {
3107
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
3108
+ axisBorder: {
3109
+ show: false,
3110
+ },
3111
+ axisTicks: {
3112
+ show: false
3113
+ },
3114
+ labels: {
3115
+ show: false,
3116
+ style: {
3117
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3118
+ fontSize: '12px',
3119
+ fontFamily: KTApp.getSettings()['font-family']
3120
+ }
3121
+ },
3122
+ crosshairs: {
3123
+ show: false,
3124
+ position: 'front',
3125
+ stroke: {
3126
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
3127
+ width: 1,
3128
+ dashArray: 3
3129
+ }
3130
+ },
3131
+ tooltip: {
3132
+ enabled: true,
3133
+ formatter: undefined,
3134
+ offsetY: 0,
3135
+ style: {
3136
+ fontSize: '12px',
3137
+ fontFamily: KTApp.getSettings()['font-family']
3138
+ }
3139
+ }
3140
+ },
3141
+ yaxis: {
3142
+ min: 0,
3143
+ max: 65,
3144
+ labels: {
3145
+ show: false,
3146
+ style: {
3147
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3148
+ fontSize: '12px',
3149
+ fontFamily: KTApp.getSettings()['font-family']
3150
+ }
3151
+ }
3152
+ },
3153
+ states: {
3154
+ normal: {
3155
+ filter: {
3156
+ type: 'none',
3157
+ value: 0
3158
+ }
3159
+ },
3160
+ hover: {
3161
+ filter: {
3162
+ type: 'none',
3163
+ value: 0
3164
+ }
3165
+ },
3166
+ active: {
3167
+ allowMultipleDataPointsSelection: false,
3168
+ filter: {
3169
+ type: 'none',
3170
+ value: 0
3171
+ }
3172
+ }
3173
+ },
3174
+ tooltip: {
3175
+ style: {
3176
+ fontSize: '12px',
3177
+ fontFamily: KTApp.getSettings()['font-family']
3178
+ },
3179
+ y: {
3180
+ formatter: function (val) {
3181
+ return "$" + val + " thousands"
3182
+ }
3183
+ }
3184
+ },
3185
+ colors: [KTApp.getSettings()['colors']['theme']['light']['danger']],
3186
+ markers: {
3187
+ colors: [KTApp.getSettings()['colors']['theme']['light']['danger']],
3188
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base']['danger']],
3189
+ strokeWidth: 3
3190
+ }
3191
+ };
3192
+
3193
+ var chart = new ApexCharts(element, options);
3194
+ chart.render();
3195
+ }
3196
+
3197
+ var _initMixedWidget16 = function () {
3198
+ var element = document.getElementById("kt_mixed_widget_16_chart");
3199
+ var height = parseInt(KTUtil.css(element, 'height'));
3200
+
3201
+ if (!element) {
3202
+ return;
3203
+ }
3204
+
3205
+ var options = {
3206
+ series: [60, 50, 75, 80],
3207
+ chart: {
3208
+ height: height,
3209
+ type: 'radialBar',
3210
+ },
3211
+ plotOptions: {
3212
+ radialBar: {
3213
+ hollow: {
3214
+ margin: 0,
3215
+ size: "30%"
3216
+ },
3217
+ dataLabels: {
3218
+ showOn: "always",
3219
+ name: {
3220
+ show: false,
3221
+ fontWeight: "700",
3222
+ },
3223
+ value: {
3224
+ color: KTApp.getSettings()['colors']['gray']['gray-700'],
3225
+ fontSize: "18px",
3226
+ fontWeight: "700",
3227
+ offsetY: 10,
3228
+ show: true
3229
+ },
3230
+ total: {
3231
+ show: true,
3232
+ label: 'Total',
3233
+ fontWeight: "bold",
3234
+ formatter: function (w) {
3235
+ // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
3236
+ return '60%';
3237
+ }
3238
+ }
3239
+ },
3240
+ track: {
3241
+ background: KTApp.getSettings()['colors']['gray']['gray-100'],
3242
+ strokeWidth: '100%'
3243
+ }
3244
+ }
3245
+ },
3246
+ colors: [
3247
+ KTApp.getSettings()['colors']['theme']['base']['info'],
3248
+ KTApp.getSettings()['colors']['theme']['base']['danger'],
3249
+ KTApp.getSettings()['colors']['theme']['base']['success'],
3250
+ KTApp.getSettings()['colors']['theme']['base']['primary']
3251
+ ],
3252
+ stroke: {
3253
+ lineCap: "round",
3254
+ },
3255
+ labels: ["Progress"]
3256
+ };
3257
+
3258
+ var chart = new ApexCharts(element, options);
3259
+ chart.render();
3260
+ }
3261
+
3262
+ var _initMixedWidget17 = function () {
3263
+ var element = document.getElementById("kt_mixed_widget_17_chart");
3264
+ var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'warning';
3265
+ var height = parseInt(KTUtil.css(element, 'height'));
3266
+
3267
+ if (!element) {
3268
+ return;
3269
+ }
3270
+
3271
+ var options = {
3272
+ series: [{
3273
+ name: 'Net Profit',
3274
+ data: [30, 25, 45, 30, 55, 55]
3275
+ }],
3276
+ chart: {
3277
+ type: 'area',
3278
+ height: height,
3279
+ toolbar: {
3280
+ show: false
3281
+ },
3282
+ zoom: {
3283
+ enabled: false
3284
+ },
3285
+ sparkline: {
3286
+ enabled: true
3287
+ }
3288
+ },
3289
+ plotOptions: {},
3290
+ legend: {
3291
+ show: false
3292
+ },
3293
+ dataLabels: {
3294
+ enabled: false
3295
+ },
3296
+ fill: {
3297
+ type: 'solid',
3298
+ opacity: 1
3299
+ },
3300
+ stroke: {
3301
+ curve: 'smooth',
3302
+ show: true,
3303
+ width: 3,
3304
+ colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
3305
+ },
3306
+ xaxis: {
3307
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
3308
+ axisBorder: {
3309
+ show: false,
3310
+ },
3311
+ axisTicks: {
3312
+ show: false
3313
+ },
3314
+ labels: {
3315
+ show: false,
3316
+ style: {
3317
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3318
+ fontSize: '12px',
3319
+ fontFamily: KTApp.getSettings()['font-family']
3320
+ }
3321
+ },
3322
+ crosshairs: {
3323
+ show: false,
3324
+ position: 'front',
3325
+ stroke: {
3326
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
3327
+ width: 1,
3328
+ dashArray: 3
3329
+ }
3330
+ },
3331
+ tooltip: {
3332
+ enabled: true,
3333
+ formatter: undefined,
3334
+ offsetY: 0,
3335
+ style: {
3336
+ fontSize: '12px',
3337
+ fontFamily: KTApp.getSettings()['font-family']
3338
+ }
3339
+ }
3340
+ },
3341
+ yaxis: {
3342
+ min: 0,
3343
+ max: 60,
3344
+ labels: {
3345
+ show: false,
3346
+ style: {
3347
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3348
+ fontSize: '12px',
3349
+ fontFamily: KTApp.getSettings()['font-family']
3350
+ }
3351
+ }
3352
+ },
3353
+ states: {
3354
+ normal: {
3355
+ filter: {
3356
+ type: 'none',
3357
+ value: 0
3358
+ }
3359
+ },
3360
+ hover: {
3361
+ filter: {
3362
+ type: 'none',
3363
+ value: 0
3364
+ }
3365
+ },
3366
+ active: {
3367
+ allowMultipleDataPointsSelection: false,
3368
+ filter: {
3369
+ type: 'none',
3370
+ value: 0
3371
+ }
3372
+ }
3373
+ },
3374
+ tooltip: {
3375
+ style: {
3376
+ fontSize: '12px',
3377
+ fontFamily: KTApp.getSettings()['font-family']
3378
+ },
3379
+ y: {
3380
+ formatter: function (val) {
3381
+ return "$" + val + " thousands"
3382
+ }
3383
+ }
3384
+ },
3385
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
3386
+ markers: {
3387
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
3388
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
3389
+ strokeWidth: 3
3390
+ }
3391
+ };
3392
+
3393
+ var chart = new ApexCharts(element, options);
3394
+ chart.render();
3395
+ }
3396
+
3397
+ var _initMixedWidget18 = function () {
3398
+ var element = document.getElementById("kt_mixed_widget_18_chart");
3399
+ var height = parseInt(KTUtil.css(element, 'height'));
3400
+
3401
+ if (!element) {
3402
+ return;
3403
+ }
3404
+
3405
+ var options = {
3406
+ series: [74],
3407
+ chart: {
3408
+ height: height,
3409
+ type: 'radialBar',
3410
+ offsetY: 0
3411
+ },
3412
+ plotOptions: {
3413
+ radialBar: {
3414
+ startAngle: -90,
3415
+ endAngle: 90,
3416
+
3417
+ hollow: {
3418
+ margin: 0,
3419
+ size: "70%"
3420
+ },
3421
+ dataLabels: {
3422
+ showOn: "always",
3423
+ name: {
3424
+ show: true,
3425
+ fontSize: "13px",
3426
+ fontWeight: "700",
3427
+ offsetY: -5,
3428
+ color: KTApp.getSettings()['colors']['gray']['gray-500']
3429
+ },
3430
+ value: {
3431
+ color: KTApp.getSettings()['colors']['gray']['gray-700'],
3432
+ fontSize: "30px",
3433
+ fontWeight: "700",
3434
+ offsetY: -40,
3435
+ show: true
3436
+ }
3437
+ },
3438
+ track: {
3439
+ background: KTApp.getSettings()['colors']['theme']['light']['primary'],
3440
+ strokeWidth: '100%'
3441
+ }
3442
+ }
3443
+ },
3444
+ colors: [KTApp.getSettings()['colors']['theme']['base']['primary']],
3445
+ stroke: {
3446
+ lineCap: "round",
3447
+ },
3448
+ labels: ["Progress"]
3449
+ };
3450
+
3451
+ var chart = new ApexCharts(element, options);
3452
+ chart.render();
3453
+ }
3454
+
3455
+ // Tiles
3456
+ var _initTilesWidget1 = function () {
3457
+ var element = document.getElementById("kt_tiles_widget_1_chart");
3458
+ var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'primary';
3459
+ var height = parseInt(KTUtil.css(element, 'height'));
3460
+
3461
+ if (!element) {
3462
+ return;
3463
+ }
3464
+
3465
+ var options = {
3466
+ series: [{
3467
+ name: 'Net Profit',
3468
+ data: [20, 22, 30, 28, 25, 26, 30, 28, 22, 24, 25, 35]
3469
+ }],
3470
+ chart: {
3471
+ type: 'area',
3472
+ height: height,
3473
+ toolbar: {
3474
+ show: false
3475
+ },
3476
+ zoom: {
3477
+ enabled: false
3478
+ },
3479
+ sparkline: {
3480
+ enabled: true
3481
+ }
3482
+ },
3483
+ plotOptions: {},
3484
+ legend: {
3485
+ show: false
3486
+ },
3487
+ dataLabels: {
3488
+ enabled: false
3489
+ },
3490
+ fill: {
3491
+ type: 'gradient',
3492
+ opacity: 1,
3493
+ gradient: {
3494
+
3495
+ type: "vertical",
3496
+ shadeIntensity: 0.55,
3497
+ gradientToColors: undefined,
3498
+ inverseColors: true,
3499
+ opacityFrom: 1,
3500
+ opacityTo: 0.2,
3501
+ stops: [25, 50, 100],
3502
+ colorStops: []
3503
+ }
3504
+ },
3505
+ stroke: {
3506
+ curve: 'smooth',
3507
+ show: true,
3508
+ width: 3,
3509
+ colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
3510
+ },
3511
+ xaxis: {
3512
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
3513
+ axisBorder: {
3514
+ show: false,
3515
+ },
3516
+ axisTicks: {
3517
+ show: false
3518
+ },
3519
+ labels: {
3520
+ show: false,
3521
+ style: {
3522
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3523
+ fontSize: '12px',
3524
+ fontFamily: KTApp.getSettings()['font-family']
3525
+ }
3526
+ },
3527
+ crosshairs: {
3528
+ show: false,
3529
+ position: 'front',
3530
+ stroke: {
3531
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
3532
+ width: 1,
3533
+ dashArray: 3
3534
+ }
3535
+ },
3536
+ tooltip: {
3537
+ enabled: true,
3538
+ formatter: undefined,
3539
+ offsetY: 0,
3540
+ style: {
3541
+ fontSize: '12px',
3542
+ fontFamily: KTApp.getSettings()['font-family']
3543
+ }
3544
+ }
3545
+ },
3546
+ yaxis: {
3547
+ min: 0,
3548
+ max: 37,
3549
+ labels: {
3550
+ show: false,
3551
+ style: {
3552
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3553
+ fontSize: '12px',
3554
+ fontFamily: KTApp.getSettings()['font-family']
3555
+ }
3556
+ }
3557
+ },
3558
+ states: {
3559
+ normal: {
3560
+ filter: {
3561
+ type: 'none',
3562
+ value: 0
3563
+ }
3564
+ },
3565
+ hover: {
3566
+ filter: {
3567
+ type: 'none',
3568
+ value: 0
3569
+ }
3570
+ },
3571
+ active: {
3572
+ allowMultipleDataPointsSelection: false,
3573
+ filter: {
3574
+ type: 'none',
3575
+ value: 0
3576
+ }
3577
+ }
3578
+ },
3579
+ tooltip: {
3580
+ style: {
3581
+ fontSize: '12px',
3582
+ fontFamily: KTApp.getSettings()['font-family']
3583
+ },
3584
+ y: {
3585
+ formatter: function (val) {
3586
+ return "$" + val + " thousands"
3587
+ }
3588
+ }
3589
+ },
3590
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
3591
+ markers: {
3592
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
3593
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
3594
+ strokeWidth: 3
3595
+ },
3596
+ padding: {
3597
+ top: 0,
3598
+ bottom: 0
3599
+ }
3600
+ };
3601
+
3602
+ var chart = new ApexCharts(element, options);
3603
+ chart.render();
3604
+ }
3605
+
3606
+ var _initTilesWidget2 = function () {
3607
+ var element = document.getElementById("kt_tiles_widget_2_chart");
3608
+ var height = parseInt(KTUtil.css(element, 'height'));
3609
+
3610
+ if (!element) {
3611
+ return;
3612
+ }
3613
+
3614
+ var strokeColor = KTUtil.changeColor(KTApp.getSettings()['colors']['theme']['base']['danger']);
3615
+ var fillColor = KTUtil.changeColor(KTApp.getSettings()['colors']['theme']['base']['danger']);
3616
+
3617
+ var options = {
3618
+ series: [{
3619
+ name: 'Net Profit',
3620
+ data: [10, 10, 20, 20, 12, 12]
3621
+ }],
3622
+ chart: {
3623
+ type: 'area',
3624
+ height: height,
3625
+ zoom: {
3626
+ enabled: false
3627
+ },
3628
+ sparkline: {
3629
+ enabled: true
3630
+ },
3631
+ padding: {
3632
+ top: 0,
3633
+ bottom: 0
3634
+ }
3635
+ },
3636
+ dataLabels: {
3637
+ enabled: false
3638
+ },
3639
+ fill: {
3640
+ type: 'solid',
3641
+ opacity: 1
3642
+ },
3643
+ stroke: {
3644
+ curve: 'smooth',
3645
+ show: true,
3646
+ width: 3,
3647
+ colors: [strokeColor]
3648
+ },
3649
+ xaxis: {
3650
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
3651
+ axisBorder: {
3652
+ show: false,
3653
+ },
3654
+ axisTicks: {
3655
+ show: false
3656
+ },
3657
+ labels: {
3658
+ show: false,
3659
+ style: {
3660
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3661
+ fontSize: '12px',
3662
+ fontFamily: KTApp.getSettings()['font-family']
3663
+ }
3664
+ },
3665
+ crosshairs: {
3666
+ show: false,
3667
+ position: 'front',
3668
+ stroke: {
3669
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
3670
+ width: 1,
3671
+ dashArray: 3
3672
+ }
3673
+ }
3674
+ },
3675
+ yaxis: {
3676
+ min: 0,
3677
+ max: 22,
3678
+ labels: {
3679
+ show: false,
3680
+ style: {
3681
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3682
+ fontSize: '12px',
3683
+ fontFamily: KTApp.getSettings()['font-family']
3684
+ }
3685
+ }
3686
+ },
3687
+ states: {
3688
+ normal: {
3689
+ filter: {
3690
+ type: 'none',
3691
+ value: 0
3692
+ }
3693
+ },
3694
+ hover: {
3695
+ filter: {
3696
+ type: 'none',
3697
+ value: 0
3698
+ }
3699
+ },
3700
+ active: {
3701
+ allowMultipleDataPointsSelection: false,
3702
+ filter: {
3703
+ type: 'none',
3704
+ value: 0
3705
+ }
3706
+ }
3707
+ },
3708
+ tooltip: {
3709
+ style: {
3710
+ fontSize: '12px',
3711
+ fontFamily: KTApp.getSettings()['font-family']
3712
+ },
3713
+ fixed: {
3714
+ enabled: false
3715
+ },
3716
+ x: {
3717
+ show: false
3718
+ },
3719
+ y: {
3720
+ title: {
3721
+ formatter: function (val) {
3722
+ return val + "";
3723
+ }
3724
+ }
3725
+ }
3726
+ },
3727
+ colors: [fillColor],
3728
+ markers: {
3729
+ colors: [KTApp.getSettings()['colors']['theme']['light']['danger']],
3730
+ strokeColor: [strokeColor],
3731
+ strokeWidth: 3
3732
+ }
3733
+ };
3734
+
3735
+ var chart = new ApexCharts(element, options);
3736
+ chart.render();
3737
+ }
3738
+
3739
+ var _initTilesWidget5 = function () {
3740
+ var element = document.getElementById("kt_tiles_widget_5_chart");
3741
+ var height = parseInt(KTUtil.css(element, 'height'));
3742
+
3743
+ if (!element) {
3744
+ return;
3745
+ }
3746
+
3747
+ var options = {
3748
+ series: [{
3749
+ name: 'Net Profit',
3750
+ data: [10, 15, 18, 14]
3751
+ }, {
3752
+ name: 'Revenue',
3753
+ data: [8, 13, 16, 12]
3754
+ }],
3755
+ chart: {
3756
+ type: 'bar',
3757
+ height: height,
3758
+ zoom: {
3759
+ enabled: false
3760
+ },
3761
+ sparkline: {
3762
+ enabled: true
3763
+ },
3764
+ padding: {
3765
+ left: 20,
3766
+ right: 20
3767
+ }
3768
+ },
3769
+ plotOptions: {
3770
+ bar: {
3771
+ horizontal: false,
3772
+ columnWidth: ['25%'],
3773
+ endingShape: 'rounded'
3774
+ },
3775
+ },
3776
+ dataLabels: {
3777
+ enabled: false
3778
+ },
3779
+ fill: {
3780
+ type: ['solid', 'gradient'],
3781
+ opacity: 0.25
3782
+ },
3783
+ xaxis: {
3784
+ categories: ['Feb', 'Mar', 'Apr', 'May']
3785
+ },
3786
+ yaxis: {
3787
+ min: 0,
3788
+ max: 20
3789
+ },
3790
+ states: {
3791
+ normal: {
3792
+ filter: {
3793
+ type: 'none',
3794
+ value: 0
3795
+ }
3796
+ },
3797
+ hover: {
3798
+ filter: {
3799
+ type: 'none',
3800
+ value: 0
3801
+ }
3802
+ },
3803
+ active: {
3804
+ allowMultipleDataPointsSelection: false,
3805
+ filter: {
3806
+ type: 'none',
3807
+ value: 0
3808
+ }
3809
+ }
3810
+ },
3811
+ tooltip: {
3812
+ style: {
3813
+ fontSize: '12px',
3814
+ fontFamily: KTApp.getSettings()['font-family']
3815
+ },
3816
+ fixed: {
3817
+ enabled: false
3818
+ },
3819
+ x: {
3820
+ show: false
3821
+ },
3822
+ y: {
3823
+ title: {
3824
+ formatter: function (val) {
3825
+ return val + "";
3826
+ }
3827
+ }
3828
+ },
3829
+ marker: {
3830
+ show: false
3831
+ }
3832
+ },
3833
+ colors: ['#ffffff', '#ffffff']
3834
+ };
3835
+
3836
+ var chart = new ApexCharts(element, options);
3837
+ chart.render();
3838
+ }
3839
+
3840
+ var _initTilesWidget8 = function () {
3841
+ var element = document.getElementById("kt_tiles_widget_8_chart");
3842
+ var height = parseInt(KTUtil.css(element, 'height'));
3843
+ var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'danger';
3844
+
3845
+ if (!element) {
3846
+ return;
3847
+ }
3848
+
3849
+ var options = {
3850
+ series: [{
3851
+ name: 'Net Profit',
3852
+ data: [20, 20, 30, 15, 40, 30]
3853
+ }],
3854
+ chart: {
3855
+ type: 'area',
3856
+ height: 150,
3857
+ toolbar: {
3858
+ show: false
3859
+ },
3860
+ zoom: {
3861
+ enabled: false
3862
+ },
3863
+ sparkline: {
3864
+ enabled: true
3865
+ }
3866
+ },
3867
+ plotOptions: {},
3868
+ legend: {
3869
+ show: false
3870
+ },
3871
+ dataLabels: {
3872
+ enabled: false
3873
+ },
3874
+ fill: {
3875
+ type: 'solid'
3876
+ },
3877
+ stroke: {
3878
+ curve: 'smooth',
3879
+ show: true,
3880
+ width: 3,
3881
+ colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
3882
+ },
3883
+ xaxis: {
3884
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
3885
+ axisBorder: {
3886
+ show: false,
3887
+ },
3888
+ axisTicks: {
3889
+ show: false
3890
+ },
3891
+ labels: {
3892
+ show: false,
3893
+ style: {
3894
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3895
+ fontSize: '12px',
3896
+ fontFamily: KTApp.getSettings()['font-family']
3897
+ }
3898
+ },
3899
+ crosshairs: {
3900
+ show: false,
3901
+ position: 'front',
3902
+ stroke: {
3903
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
3904
+ width: 1,
3905
+ dashArray: 3
3906
+ }
3907
+ },
3908
+ tooltip: {
3909
+ enabled: true,
3910
+ formatter: undefined,
3911
+ offsetY: 0,
3912
+ style: {
3913
+ fontSize: '12px',
3914
+ fontFamily: KTApp.getSettings()['font-family']
3915
+ }
3916
+ }
3917
+ },
3918
+ yaxis: {
3919
+ min: 0,
3920
+ max: 45,
3921
+ labels: {
3922
+ show: false,
3923
+ style: {
3924
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
3925
+ fontSize: '12px',
3926
+ fontFamily: KTApp.getSettings()['font-family']
3927
+ }
3928
+ }
3929
+ },
3930
+ states: {
3931
+ normal: {
3932
+ filter: {
3933
+ type: 'none',
3934
+ value: 0
3935
+ }
3936
+ },
3937
+ hover: {
3938
+ filter: {
3939
+ type: 'none',
3940
+ value: 0
3941
+ }
3942
+ },
3943
+ active: {
3944
+ allowMultipleDataPointsSelection: false,
3945
+ filter: {
3946
+ type: 'none',
3947
+ value: 0
3948
+ }
3949
+ }
3950
+ },
3951
+ tooltip: {
3952
+ style: {
3953
+ fontSize: '12px',
3954
+ fontFamily: KTApp.getSettings()['font-family']
3955
+ },
3956
+ y: {
3957
+ formatter: function (val) {
3958
+ return "$" + val + " thousands"
3959
+ }
3960
+ }
3961
+ },
3962
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
3963
+ markers: {
3964
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
3965
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
3966
+ strokeWidth: 3
3967
+ },
3968
+ padding: {
3969
+ top: 0,
3970
+ bottom: 0
3971
+ }
3972
+ };
3973
+
3974
+ var chart = new ApexCharts(element, options);
3975
+ chart.render();
3976
+ }
3977
+
3978
+ var _initTilesWidget17 = function () {
3979
+ var element = document.getElementById("kt_tiles_widget_17_chart");
3980
+
3981
+ if (!element) {
3982
+ return;
3983
+ }
3984
+
3985
+ var options = {
3986
+ series: [{
3987
+ name: 'Net Profit',
3988
+ data: [10, 20, 20, 8]
3989
+ }],
3990
+ chart: {
3991
+ type: 'area',
3992
+ height: 150,
3993
+ zoom: {
3994
+ enabled: false
3995
+ },
3996
+ sparkline: {
3997
+ enabled: true
3998
+ },
3999
+ padding: {
4000
+ top: 0,
4001
+ bottom: 0
4002
+ }
4003
+ },
4004
+ dataLabels: {
4005
+ enabled: false
4006
+ },
4007
+ fill: {
4008
+ type: 'solid',
4009
+ opacity: 1
4010
+ },
4011
+ stroke: {
4012
+ curve: 'smooth',
4013
+ show: true,
4014
+ width: 3,
4015
+ colors: [KTApp.getSettings()['colors']['theme']['base']['success']]
4016
+ },
4017
+ xaxis: {
4018
+ categories: ['Feb', 'Mar', 'Apr', 'May'],
4019
+ axisBorder: {
4020
+ show: false,
4021
+ },
4022
+ axisTicks: {
4023
+ show: false
4024
+ },
4025
+ labels: {
4026
+ show: false,
4027
+ style: {
4028
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
4029
+ fontSize: '12px',
4030
+ fontFamily: KTApp.getSettings()['font-family']
4031
+ }
4032
+ },
4033
+ crosshairs: {
4034
+ show: false,
4035
+ position: 'front',
4036
+ stroke: {
4037
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
4038
+ width: 1,
4039
+ dashArray: 3
4040
+ }
4041
+ }
4042
+ },
4043
+ yaxis: {
4044
+ min: 0,
4045
+ max: 22,
4046
+ labels: {
4047
+ show: false,
4048
+ style: {
4049
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
4050
+ fontSize: '12px',
4051
+ fontFamily: KTApp.getSettings()['font-family']
4052
+ }
4053
+ }
4054
+ },
4055
+ states: {
4056
+ normal: {
4057
+ filter: {
4058
+ type: 'none',
4059
+ value: 0
4060
+ }
4061
+ },
4062
+ hover: {
4063
+ filter: {
4064
+ type: 'none',
4065
+ value: 0
4066
+ }
4067
+ },
4068
+ active: {
4069
+ allowMultipleDataPointsSelection: false,
4070
+ filter: {
4071
+ type: 'none',
4072
+ value: 0
4073
+ }
4074
+ }
4075
+ },
4076
+ tooltip: {
4077
+ style: {
4078
+ fontSize: '12px',
4079
+ fontFamily: KTApp.getSettings()['font-family']
4080
+ },
4081
+ fixed: {
4082
+ enabled: false
4083
+ },
4084
+ x: {
4085
+ show: false
4086
+ },
4087
+ y: {
4088
+ title: {
4089
+ formatter: function (val) {
4090
+ return val + "";
4091
+ }
4092
+ }
4093
+ }
4094
+ },
4095
+ colors: [KTApp.getSettings()['colors']['theme']['light']['success']],
4096
+ markers: {
4097
+ colors: [KTApp.getSettings()['colors']['theme']['light']['success']],
4098
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base']['success']],
4099
+ strokeWidth: 3
4100
+ }
4101
+ };
4102
+
4103
+ var chart = new ApexCharts(element, options);
4104
+ chart.render();
4105
+ }
4106
+
4107
+ var _initTilesWidget20 = function () {
4108
+ var element = document.getElementById("kt_tiles_widget_20_chart");
4109
+
4110
+ if (!element) {
4111
+ return;
4112
+ }
4113
+
4114
+ var options = {
4115
+ series: [74],
4116
+ chart: {
4117
+ height: 250,
4118
+ type: 'radialBar',
4119
+ offsetY: 0
4120
+ },
4121
+ plotOptions: {
4122
+ radialBar: {
4123
+ startAngle: -90,
4124
+ endAngle: 90,
4125
+
4126
+ hollow: {
4127
+ margin: 0,
4128
+ size: "70%"
4129
+ },
4130
+ dataLabels: {
4131
+ showOn: "always",
4132
+ name: {
4133
+ show: true,
4134
+ fontSize: "13px",
4135
+ fontWeight: "400",
4136
+ offsetY: -5,
4137
+ color: KTApp.getSettings()['colors']['gray']['gray-300']
4138
+ },
4139
+ value: {
4140
+ color: KTApp.getSettings()['colors']['theme']['inverse']['primary'],
4141
+ fontSize: "22px",
4142
+ fontWeight: "bold",
4143
+ offsetY: -40,
4144
+ show: true
4145
+ }
4146
+ },
4147
+ track: {
4148
+ background: KTUtil.changeColor(KTApp.getSettings()['colors']['theme']['base']['primary'], -7),
4149
+ strokeWidth: '100%'
4150
+ }
4151
+ }
4152
+ },
4153
+ colors: [KTApp.getSettings()['colors']['theme']['inverse']['primary']],
4154
+ stroke: {
4155
+ lineCap: "round",
4156
+ },
4157
+ labels: ["Progress"]
4158
+ };
4159
+
4160
+ var chart = new ApexCharts(element, options);
4161
+ chart.render();
4162
+ }
4163
+
4164
+ var _initMixedWidget21 = function () {
4165
+ var element = document.getElementById("kt_tiles_widget_21_chart");
4166
+ var height = parseInt(KTUtil.css(element, 'height'));
4167
+ var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'info';
4168
+
4169
+ if (!element) {
4170
+ return;
4171
+ }
4172
+
4173
+ var options = {
4174
+ series: [{
4175
+ name: 'Net Profit',
4176
+ data: [20, 20, 30, 15, 30, 30]
4177
+ }],
4178
+ chart: {
4179
+ type: 'area',
4180
+ height: height,
4181
+ toolbar: {
4182
+ show: false
4183
+ },
4184
+ zoom: {
4185
+ enabled: false
4186
+ },
4187
+ sparkline: {
4188
+ enabled: true
4189
+ }
4190
+ },
4191
+ plotOptions: {},
4192
+ legend: {
4193
+ show: false
4194
+ },
4195
+ dataLabels: {
4196
+ enabled: false
4197
+ },
4198
+ fill: {
4199
+ type: 'solid',
4200
+ opacity: 1
4201
+ },
4202
+ stroke: {
4203
+ curve: 'smooth',
4204
+ show: true,
4205
+ width: 3,
4206
+ colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
4207
+ },
4208
+ xaxis: {
4209
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
4210
+ axisBorder: {
4211
+ show: false,
4212
+ },
4213
+ axisTicks: {
4214
+ show: false
4215
+ },
4216
+ labels: {
4217
+ show: false,
4218
+ style: {
4219
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
4220
+ fontSize: '12px',
4221
+ fontFamily: KTApp.getSettings()['font-family']
4222
+ }
4223
+ },
4224
+ crosshairs: {
4225
+ show: false,
4226
+ position: 'front',
4227
+ stroke: {
4228
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
4229
+ width: 1,
4230
+ dashArray: 3
4231
+ }
4232
+ },
4233
+ tooltip: {
4234
+ enabled: true,
4235
+ formatter: undefined,
4236
+ offsetY: 0,
4237
+ style: {
4238
+ fontSize: '12px',
4239
+ fontFamily: KTApp.getSettings()['font-family']
4240
+ }
4241
+ }
4242
+ },
4243
+ yaxis: {
4244
+ min: 0,
4245
+ max: 32,
4246
+ labels: {
4247
+ show: false,
4248
+ style: {
4249
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
4250
+ fontSize: '12px',
4251
+ fontFamily: KTApp.getSettings()['font-family']
4252
+ }
4253
+ }
4254
+ },
4255
+ states: {
4256
+ normal: {
4257
+ filter: {
4258
+ type: 'none',
4259
+ value: 0
4260
+ }
4261
+ },
4262
+ hover: {
4263
+ filter: {
4264
+ type: 'none',
4265
+ value: 0
4266
+ }
4267
+ },
4268
+ active: {
4269
+ allowMultipleDataPointsSelection: false,
4270
+ filter: {
4271
+ type: 'none',
4272
+ value: 0
4273
+ }
4274
+ }
4275
+ },
4276
+ tooltip: {
4277
+ style: {
4278
+ fontSize: '12px',
4279
+ fontFamily: KTApp.getSettings()['font-family']
4280
+ },
4281
+ y: {
4282
+ formatter: function (val) {
4283
+ return "$" + val + " thousands"
4284
+ }
4285
+ }
4286
+ },
4287
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
4288
+ markers: {
4289
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
4290
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
4291
+ strokeWidth: 3
4292
+ }
4293
+ };
4294
+
4295
+ var chart = new ApexCharts(element, options);
4296
+ chart.render();
4297
+ }
4298
+
4299
+ var _initMixedWidget23 = function () {
4300
+ var element = document.getElementById("kt_tiles_widget_23_chart");
4301
+ var height = parseInt(KTUtil.css(element, 'height'));
4302
+ var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'primary';
4303
+
4304
+ if (!element) {
4305
+ return;
4306
+ }
4307
+
4308
+ var options = {
4309
+ series: [{
4310
+ name: 'Net Profit',
4311
+ data: [15, 25, 15, 40, 20, 50]
4312
+ }],
4313
+ chart: {
4314
+ type: 'area',
4315
+ height: 125,
4316
+ toolbar: {
4317
+ show: false
4318
+ },
4319
+ zoom: {
4320
+ enabled: false
4321
+ },
4322
+ sparkline: {
4323
+ enabled: true
4324
+ }
4325
+ },
4326
+ plotOptions: {},
4327
+ legend: {
4328
+ show: false
4329
+ },
4330
+ dataLabels: {
4331
+ enabled: false
4332
+ },
4333
+ fill: {
4334
+ type: 'solid',
4335
+ opacity: 1
4336
+ },
4337
+ stroke: {
4338
+ curve: 'smooth',
4339
+ show: true,
4340
+ width: 3,
4341
+ colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
4342
+ },
4343
+ xaxis: {
4344
+ categories: ['Jan, 2020', 'Feb, 2020', 'Mar, 2020', 'Apr, 2020', 'May, 2020', 'Jun, 2020'],
4345
+ axisBorder: {
4346
+ show: false,
4347
+ },
4348
+ axisTicks: {
4349
+ show: false
4350
+ },
4351
+ labels: {
4352
+ show: false,
4353
+ style: {
4354
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
4355
+ fontSize: '12px',
4356
+ fontFamily: KTApp.getSettings()['font-family']
4357
+ }
4358
+ },
4359
+ crosshairs: {
4360
+ show: false,
4361
+ position: 'front',
4362
+ stroke: {
4363
+ color: KTApp.getSettings()['colors']['gray']['gray-300'],
4364
+ width: 1,
4365
+ dashArray: 3
4366
+ }
4367
+ },
4368
+ tooltip: {
4369
+ enabled: true,
4370
+ formatter: undefined,
4371
+ offsetY: 0,
4372
+ style: {
4373
+ fontSize: '12px',
4374
+ fontFamily: KTApp.getSettings()['font-family']
4375
+ }
4376
+ }
4377
+ },
4378
+ yaxis: {
4379
+ min: 0,
4380
+ max: 55,
4381
+ labels: {
4382
+ show: false,
4383
+ style: {
4384
+ colors: KTApp.getSettings()['colors']['gray']['gray-500'],
4385
+ fontSize: '12px',
4386
+ fontFamily: KTApp.getSettings()['font-family']
4387
+ }
4388
+ }
4389
+ },
4390
+ states: {
4391
+ normal: {
4392
+ filter: {
4393
+ type: 'none',
4394
+ value: 0
4395
+ }
4396
+ },
4397
+ hover: {
4398
+ filter: {
4399
+ type: 'none',
4400
+ value: 0
4401
+ }
4402
+ },
4403
+ active: {
4404
+ allowMultipleDataPointsSelection: false,
4405
+ filter: {
4406
+ type: 'none',
4407
+ value: 0
4408
+ }
4409
+ }
4410
+ },
4411
+ tooltip: {
4412
+ style: {
4413
+ fontSize: '12px',
4414
+ fontFamily: KTApp.getSettings()['font-family']
4415
+ },
4416
+ y: {
4417
+ formatter: function (val) {
4418
+ return "$" + val + " thousands"
4419
+ }
4420
+ }
4421
+ },
4422
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
4423
+ markers: {
4424
+ colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
4425
+ strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
4426
+ strokeWidth: 3
4427
+ }
4428
+ };
4429
+
4430
+ var chart = new ApexCharts(element, options);
4431
+ chart.render();
4432
+ }
4433
+
4434
+ // Forms
4435
+ var _initFormsWidget1 = function() {
4436
+ var inputEl = KTUtil.getById("kt_forms_widget_1_input");
4437
+
4438
+ if (inputEl) {
4439
+ autosize(inputEl);
4440
+ }
4441
+ }
4442
+
4443
+ var _initFormsWidget2 = function() {
4444
+ var formEl = KTUtil.getById("kt_forms_widget_2_form");
4445
+ var editorId = 'kt_forms_widget_2_editor';
4446
+
4447
+ // init editor
4448
+ var options = {
4449
+ modules: {
4450
+ toolbar: {
4451
+ container: "#kt_forms_widget_2_editor_toolbar"
4452
+ }
4453
+ },
4454
+ placeholder: 'Type message...',
4455
+ theme: 'snow'
4456
+ };
4457
+
4458
+ if (!formEl) {
4459
+ return;
4460
+ }
4461
+
4462
+ // Init editor
4463
+ var editorObj = new Quill('#' + editorId, options);
4464
+ }
4465
+
4466
+ var _initFormsWidget3 = function() {
4467
+ var inputEl = KTUtil.getById("kt_forms_widget_3_input");
4468
+
4469
+ if (inputEl) {
4470
+ autosize(inputEl);
4471
+ }
4472
+ }
4473
+
4474
+ var _initFormsWidget4 = function() {
4475
+ var inputEl = KTUtil.getById("kt_forms_widget_4_input");
4476
+
4477
+ if (inputEl) {
4478
+ autosize(inputEl);
4479
+ }
4480
+ }
4481
+
4482
+ var _initFormsWidget5 = function() {
4483
+ var inputEl = KTUtil.getById("kt_forms_widget_5_input");
4484
+
4485
+ if (inputEl) {
4486
+ autosize(inputEl);
4487
+ }
4488
+ }
4489
+
4490
+ var _initFormsWidget6 = function() {
4491
+ var inputEl = KTUtil.getById("kt_forms_widget_6_input");
4492
+
4493
+ if (inputEl) {
4494
+ autosize(inputEl);
4495
+ }
4496
+ }
4497
+
4498
+ var _initFormsWidget7 = function() {
4499
+ var inputEl = KTUtil.getById("kt_forms_widget_7_input");
4500
+
4501
+ if (inputEl) {
4502
+ autosize(inputEl);
4503
+ }
4504
+ }
4505
+
4506
+ var _initFormsWidget8 = function() {
4507
+ var inputEl = KTUtil.getById("kt_forms_widget_8_input");
4508
+
4509
+ if (inputEl) {
4510
+ autosize(inputEl);
4511
+ }
4512
+ }
4513
+
4514
+ var _initFormsWidget9 = function() {
4515
+ var inputEl = KTUtil.getById("kt_forms_widget_9_input");
4516
+
4517
+ if (inputEl) {
4518
+ autosize(inputEl);
4519
+ }
4520
+ }
4521
+
4522
+ var _initFormsWidget10 = function() {
4523
+ var inputEl = KTUtil.getById("kt_forms_widget_10_input");
4524
+
4525
+ if (inputEl) {
4526
+ autosize(inputEl);
4527
+ }
4528
+ }
4529
+
4530
+ var _initFormsWidget11 = function() {
4531
+ var inputEl = KTUtil.getById("kt_forms_widget_11_input");
4532
+
4533
+ if (inputEl) {
4534
+ autosize(inputEl);
4535
+ }
4536
+ }
4537
+
4538
+ var _initFormsWidget12 = function() {
4539
+ var inputEl = KTUtil.getById("kt_forms_widget_12_input");
4540
+
4541
+ if (inputEl) {
4542
+ autosize(inputEl);
4543
+ }
4544
+ }
4545
+
4546
+ // Advance Tables
4547
+ var _initAdvancedTableGroupSelection = function(element) {
4548
+ var table = KTUtil.getById(element);
4549
+
4550
+ if (!table) {
4551
+ return;
4552
+ }
4553
+
4554
+ KTUtil.on(table, 'thead th .checkbox > input', 'change', function (e) {
4555
+ var checkboxes = KTUtil.findAll(table, 'tbody td .checkbox > input');
4556
+
4557
+ for (var i = 0, len = checkboxes.length; i < len; i++) {
4558
+ checkboxes[i].checked = this.checked;
4559
+ }
4560
+ });
4561
+ }
4562
+
4563
+ var _initPriceSlider = function (element) {
4564
+ // init slider
4565
+ var slider = document.getElementById(element);
4566
+ if (typeof slider === 'undefined') {
4567
+ return;
4568
+ }
4569
+
4570
+ if (!slider) {
4571
+ return;
4572
+ }
4573
+
4574
+ noUiSlider.create(slider, {
4575
+ start: [20, 60],
4576
+ connect: true,
4577
+ range: {
4578
+ 'min': 0,
4579
+ 'max': 100
4580
+ }
4581
+ });
4582
+ }
4583
+
4584
+ // Education Show More Demo
4585
+ var _initEducationShowMoreBtn = function() {
4586
+ var el = KTUtil.getById('kt_app_education_more_feeds_btn');
4587
+
4588
+ if (!el) {
4589
+ return;
4590
+ }
4591
+
4592
+ KTUtil.addEvent(el, 'click', function(e) {
4593
+ var elements = document.getElementsByClassName('education-more-feeds');
4594
+
4595
+ if (!elements || elements.length <= 0) {
4596
+ return;
4597
+ }
4598
+
4599
+ KTUtil.btnWait(el, 'spinner spinner-right spinner-white pr-15', 'Please wait...', true);
4600
+
4601
+ setTimeout(function() {
4602
+ KTUtil.btnRelease(el);
4603
+ KTUtil.addClass(el, 'd-none');
4604
+
4605
+ var item;
4606
+
4607
+ for (var i = 0, len = elements.length; i < len; i++) {
4608
+ item = elements[0];
4609
+ KTUtil.removeClass(elements[i], 'd-none');
4610
+
4611
+ var textarea = KTUtil.find(item, 'textarea');
4612
+ if (textarea) {
4613
+ autosize(textarea);
4614
+ }
4615
+ }
4616
+
4617
+ KTUtil.scrollTo(item);
4618
+ }, 1000);
4619
+ });
4620
+ }
4621
+
4622
+ // Public methods
4623
+ return {
4624
+ init: function () {
4625
+ // General Controls
4626
+ _initDaterangepicker();
4627
+
4628
+ // Stats Widgets
4629
+ _initStatsWidget7();
4630
+ _initStatsWidget8();
4631
+ _initStatsWidget9();
4632
+ _initStatsWidget10();
4633
+ _initStatsWidget11();
4634
+ _initStatsWidget12();
4635
+
4636
+ // Charts Widgets
4637
+ _initChartsWidget1();
4638
+ _initChartsWidget2();
4639
+ _initChartsWidget3();
4640
+ _initChartsWidget4();
4641
+ _initChartsWidget5();
4642
+ _initChartsWidget6();
4643
+ _initChartsWidget7();
4644
+ _initChartsWidget8();
4645
+ _initChartsWidget9();
4646
+
4647
+ // Mixed Widgets
4648
+ _initMixedWidget1();
4649
+ _initMixedWidget2();
4650
+ _initMixedWidget3();
4651
+ _initMixedWidget4();
4652
+ _initMixedWidget5();
4653
+ _initMixedWidget6();
4654
+ _initMixedWidget13();
4655
+ _initMixedWidget14();
4656
+ _initMixedWidget15();
4657
+ _initMixedWidget16();
4658
+ _initMixedWidget17();
4659
+ _initMixedWidget18();
4660
+
4661
+ // Tiles Widgets
4662
+ _initTilesWidget1();
4663
+ _initTilesWidget2();
4664
+ _initTilesWidget5();
4665
+ _initTilesWidget8();
4666
+ _initTilesWidget17();
4667
+ _initTilesWidget20();
4668
+ _initMixedWidget21();
4669
+ _initMixedWidget23();
4670
+
4671
+ // Table Widgets
4672
+ _initAdvancedTableGroupSelection('kt_advance_table_widget_1');
4673
+ _initAdvancedTableGroupSelection('kt_advance_table_widget_2');
4674
+ _initAdvancedTableGroupSelection('kt_advance_table_widget_3');
4675
+ _initAdvancedTableGroupSelection('kt_advance_table_widget_4');
4676
+
4677
+ // Form Widgets
4678
+ _initPriceSlider('kt_price_slider');
4679
+
4680
+ // Forms widgets
4681
+ _initFormsWidget1();
4682
+ _initFormsWidget2();
4683
+ _initFormsWidget3();
4684
+ _initFormsWidget4();
4685
+ _initFormsWidget5();
4686
+ _initFormsWidget6();
4687
+ _initFormsWidget7();
4688
+ _initFormsWidget8();
4689
+ _initFormsWidget9();
4690
+ _initFormsWidget10();
4691
+ _initFormsWidget11();
4692
+
4693
+ // Education App
4694
+ _initEducationShowMoreBtn();
4695
+ }
4696
+ }
4697
+ }();
4698
+
4699
+ // Webpack support
4700
+ if (typeof module !== 'undefined') {
4701
+ module.exports = KTWidgets;
4702
+ }
4703
+
4704
+ jQuery(document).ready(function () {
4705
+ KTWidgets.init();
4706
+ });