1"use strict"; 2 3// Class definition 4var 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: undefin
520ed, 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
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
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
3943active: { 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
4467_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 4700if (typeof module !== 'undefined') { 4701 module.exports = KTWidgets; 4702} 4703 4704jQuery(document).ready(function () { 4705 KTWidgets.init(); 4706});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.