1"use strict"; 2 3// Class definition 4var KTWidgets = function () { 5 // Statistics widgets 6 var initStatisticsWidget3 = function() { 7 var charts = document.querySelectorAll('.statistics-widget-3-chart'); 8 9 [].slice.call(charts).map(function(element) { 10 var height = parseInt(KTUtil.css(element, 'height')); 11 12 if ( !element ) { 13 return; 14 } 15 16 var color = element.getAttribute('data-kt-chart-color'); 17 18 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); 19 var baseColor = KTUtil.getCssVariableValue('--bs-' + color); 20 var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); 21 22 var options = { 23 series: [{ 24 name: 'Net Profit', 25 data: [30, 45, 32, 70, 40] 26 }], 27 chart: { 28 fontFamily: 'inherit', 29 type: 'area', 30 height: height, 31 toolbar: { 32 show: false 33 }, 34 zoom: { 35 enabled: false 36 }, 37 sparkline: { 38 enabled: true 39 } 40 }, 41 plotOptions: {}, 42 legend: { 43 show: false 44 }, 45 dataLabels: { 46 enabled: false 47 }, 48 fill: { 49 type: 'solid', 50 opacity: 0.3 51 }, 52 stroke: { 53 curve: 'smooth', 54 show: true, 55 width: 3, 56 colors: [baseColor] 57 }, 58 xaxis: { 59 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 60 axisBorder: { 61 show: false, 62 }, 63 axisTicks: { 64 show: false 65 }, 66 labels: { 67 show: false, 68 style: { 69 colors: labelColor, 70 fontSize: '12px' 71 } 72 }, 73 crosshairs: { 74 show: false, 75 position: 'front', 76 stroke: { 77 color: '#E4E6EF', 78 width: 1, 79 dashArray: 3 80 } 81 }, 82 tooltip: { 83 enabled: true, 84 formatter: undefined, 85 offsetY: 0, 86 style: { 87 fontSize: '12px' 88 } 89 } 90 }, 91 yaxis: { 92 min: 0, 93 max: 80, 94 labels: { 95 show: false, 96 style: { 97 colors: labelColor, 98 fontSize: '12px' 99 } 100 } 101 }, 102 states: { 103 normal: { 104 filter: { 105 type: 'none', 106 value: 0 107 } 108 }, 109 hover: { 110 filter: { 111 type: 'none', 112 value: 0 113 } 114 }, 115 active: { 116 allowMultipleDataPointsSelection: false, 117 filter: { 118 type: 'none', 119 value: 0 120 } 121 } 122 }, 123 tooltip: { 124 style: { 125 fontSize: '12px' 126 }, 127 y: { 128 formatter: function(val) { 129 return "$" + val + " thousands" 130 } 131 } 132 }, 133 colors: [baseColor], 134 markers: { 135 colors: [baseColor], 136 strokeColor: [lightColor], 137 strokeWidth: 3 138 } 139 }; 140 141 var chart = new ApexCharts(element, options); 142 chart.render(); 143 }); 144 } 145 146 var initStatisticsWidget4 = function() { 147 var charts = document.querySelectorAll('.statistics-widget-4-chart'); 148 149 [].slice.call(charts).map(function(element) { 150 var height = parseInt(KTUtil.css(element, 'height')); 151 152 if ( !element ) { 153 return; 154 } 155 156 var color = element.getAttribute('data-kt-chart-color'); 157 158 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); 159 var baseColor = KTUtil.getCssVariableValue('--bs-' + color); 160 var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); 161 162 var options = { 163 series: [{ 164 name: 'Net Profit', 165 data: [40, 40, 30, 30, 35, 35, 50] 166 }], 167 chart: { 168 fontFamily: 'inherit', 169 type: 'area', 170 height: height, 171 toolbar: { 172 show: false 173 }, 174 zoom: { 175 enabled: false 176 }, 177 sparkline: { 178 enabled: true 179 } 180 }, 181 plotOptions: {}, 182 legend: { 183 show: false 184 }, 185 dataLabels: { 186 enabled: false 187 }, 188 fill: { 189 type: 'solid', 190 opacity: 0.3 191 }, 192 stroke: { 193 curve: 'smooth', 194 show: true, 195 width: 3, 196 colors: [baseColor] 197 }, 198 xaxis: { 199 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], 200 axisBorder: { 201 show: false, 202 }, 203 axisTicks: { 204 show: false 205 }, 206 labels: { 207 show: false, 208 style: { 209 colors: labelColor, 210 fontSize: '12px' 211 } 212 }, 213 crosshairs: { 214 show: false, 215 position: 'front', 216 stroke: { 217 color: '#E4E6EF', 218 width: 1, 219 dashArray: 3 220 } 221 }, 222 tooltip: { 223 enabled: true, 224 formatter: undefined, 225 offsetY: 0, 226 style: { 227 fontSize: '12px' 228 } 229 } 230 }, 231 yaxis: { 232 min: 0, 233 max: 60, 234 labels: { 235 show: false, 236 style: { 237 colors: labelColor, 238 fontSize: '12px' 239 } 240 } 241 }, 242 states: { 243 normal: { 244 filter: { 245 type: 'none', 246 value: 0 247 } 248 }, 249 hover: { 250 filter: { 251 type: 'none', 252 value: 0 253 } 254 }, 255 active: { 256 allowMultipleDataPointsSelection: false, 257 filter: { 258 type: 'none', 259 value: 0 260 } 261 } 262 }, 263 tooltip: { 264 style: { 265 fontSize: '12px' 266 }, 267 y: { 268 formatter: function(val) { 269 return "$" + val + " thousands" 270 } 271 } 272 }, 273 colors: [baseColor], 274 markers: { 275 colors: [baseColor], 276 strokeColor: [lightColor], 277 strokeWidth: 3 278 } 279 }; 280 281 var chart = new ApexCharts(element, options); 282 chart.render(); 283 }); 284 } 285 286 // Charts widgets 287 var initChartsWidget1 = function() { 288 var element = document.getElementById("kt_charts_widget_1_chart"); 289 290 var height = parseInt(KTUtil.css(element, 'height')); 291 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 292 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 293 var baseColor = KTUtil.getCssVariableValue('--bs-primary'); 294 var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300'); 295 296 if (!element) { 297 return; 298 } 299 300 var options = { 301 series: [{ 302 name: 'Net Profit', 303 data: [44, 55, 57, 56, 61, 58] 304 }, { 305 name: 'Revenue', 306 data: [76, 85, 101, 98, 87, 105] 307 }], 308 chart: { 309 fontFamily: 'inherit', 310 type: 'bar', 311 height: height, 312 toolbar: { 313 show: false 314 } 315 }, 316 plotOptions: { 317 bar: { 318 horizontal: false, 319 columnWidth: ['30%'], 320 borderRadius: 4 321 }, 322 }, 323 legend: { 324 show: false 325 }, 326 dataLabels: { 327 enabled: false 328 }, 329 stroke: { 330 show: true, 331 width: 2, 332 colors: ['transparent'] 333 }, 334 xaxis: { 335 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 336 axisBorder: { 337 show: false, 338 }, 339 axisTicks: { 340 show: false 341 }, 342 labels: { 343 style: { 344 colors: labelColor, 345 fontSize: '12px' 346 } 347 } 348 }, 349 yaxis: { 350 labels: { 351 style: { 352 colors: labelColor, 353 fontSize: '12px' 354 } 355 } 356 }, 357 fill: { 358 opacity: 1 359 }, 360 states: { 361 normal: { 362 filter: { 363 type: 'none', 364 value: 0 365 } 366 }, 367 hover: { 368 filter: { 369 type: 'none', 370 value: 0 371 } 372 }, 373 active: { 374 allowMultipleDataPointsSelection: false, 375 filter: { 376 type: 'none', 377 value: 0 378 } 379 } 380 }, 381 tooltip: { 382 style: { 383 fontSize: '12px' 384 }, 385 y: { 386 formatter: function (val) { 387 return "$" + val + " thousands" 388 } 389 } 390 }, 391 colors: [baseColor, secondaryColor], 392 grid: { 393 borderColor: borderColor, 394 strokeDashArray: 4, 395 yaxis: { 396 lines: { 397 show: true 398 } 399 } 400 } 401 }; 402 403 var chart = new ApexCharts(element, options); 404 chart.render(); 405 } 406 407 var initChartsWidget2 = function() { 408 var element = document.getElementById("kt_charts_widget_2_chart"); 409 410 var height = parseInt(KTUtil.css(element, 'height')); 411 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 412 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 413 var baseColor = KTUtil.getCssVariableValue('--bs-warning'); 414 var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300'); 415 416 if (!element) { 417 return; 418 } 419 420 var options = { 421 series: [{ 422 name: 'Net Profit', 423 data: [44, 55, 57, 56, 61, 58] 424 }, { 425 name: 'Revenue', 426 data: [76, 85, 101, 98, 87, 105] 427 }], 428 chart: { 429 fontFamily: 'inherit', 430 type: 'bar', 431 height: height, 432 toolbar: { 433 show: false 434 } 435 }, 436 plotOptions: { 437 bar: { 438 horizontal: false, 439 columnWidth: ['30%'], 440 borderRadius: 4 441 }, 442 }, 443 legend: { 444 show: false 445 }, 446 dataLabels: { 447 enabled: false 448 }, 449 stroke: { 450 show: true, 451 width: 2, 452 colors: ['transparent'] 453 }, 454 xaxis: { 455 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 456 axisBorder: { 457 show: false, 458 }, 459 axisTicks: { 460 show: false 461 }, 462 labels: { 463 style: { 464 colors: labelColor, 465 fontSize: '12px' 466 } 467 } 468 }, 469 yaxis: { 470 labels: { 471 style: { 472 colors: labelColor, 473 fontSize: '12px' 474 } 475 } 476 }, 477 fill: { 478 opacity: 1 479 }, 480 states: { 481 normal: { 482 filter: { 483 type: 'none', 484 value: 0 485 } 486 }, 487 hover: { 488 filter: { 489 type: 'none', 490 value: 0 491 } 492 }, 493 active: { 494 allowMultipleDataPointsSelection: false, 495 filter: { 496 type: 'none', 497 value: 0 498 } 499 } 500 }, 501 tooltip: { 502 style: { 503 fontSize: '12px' 504 }, 505 y: { 506 formatter: function (val) { 507 return "$" + val + " thousands" 508 } 509 } 510 }, 511 colors: [baseColor, secondaryColor], 512 grid: { 513 borderColor: borderColor, 514 strokeDashArray: 4, 515 yaxis: { 516 lines: { 517 show: true 518 } 519 } 520 } 521 }; 522 523 var chart = new ApexCharts(element, options); 524 chart.render(); 525 } 526 527 var initChartsWidget3 = function() { 528 var element = document.getElementById("kt_charts_widget_3_chart"); 529 530 var height = parseInt(KTUtil.css(element, 'height')); 531 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 532 var borderColor = KTUtil.getCssVariableVal
532ue('--bs-gray-200'); 533 var baseColor = KTUtil.getCssVariableValue('--bs-info'); 534 var lightColor = KTUtil.getCssVariableValue('--bs-light-info'); 535 536 if (!element) { 537 return; 538 } 539 540 var options = { 541 series: [{ 542 name: 'Net Profit', 543 data: [30, 40, 40, 90, 90, 70, 70] 544 }], 545 chart: { 546 fontFamily: 'inherit', 547 type: 'area', 548 height: 350, 549 toolbar: { 550 show: false 551 } 552 }, 553 plotOptions: { 554 555 }, 556 legend: { 557 show: false 558 }, 559 dataLabels: { 560 enabled: false 561 }, 562 fill: { 563 type: 'solid', 564 opacity: 1 565 }, 566 stroke: { 567 curve: 'smooth', 568 show: true, 569 width: 3, 570 colors: [baseColor] 571 }, 572 xaxis: { 573 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], 574 axisBorder: { 575 show: false, 576 }, 577 axisTicks: { 578 show: false 579 }, 580 labels: { 581 style: { 582 colors: labelColor, 583 fontSize: '12px' 584 } 585 }, 586 crosshairs: { 587 position: 'front', 588 stroke: { 589 color: baseColor, 590 width: 1, 591 dashArray: 3 592 } 593 }, 594 tooltip: { 595 enabled: true, 596 formatter: undefined, 597 offsetY: 0, 598 style: { 599 fontSize: '12px' 600 } 601 } 602 }, 603 yaxis: { 604 labels: { 605 style: { 606 colors: labelColor, 607 fontSize: '12px' 608 } 609 } 610 }, 611 states: { 612 normal: { 613 filter: { 614 type: 'none', 615 value: 0 616 } 617 }, 618 hover: { 619 filter: { 620 type: 'none', 621 value: 0 622 } 623 }, 624 active: { 625 allowMultipleDataPointsSelection: false, 626 filter: { 627 type: 'none', 628 value: 0 629 } 630 } 631 }, 632 tooltip: { 633 style: { 634 fontSize: '12px' 635 }, 636 y: { 637 formatter: function (val) { 638 return "$" + val + " thousands" 639 } 640 } 641 }, 642 colors: [lightColor], 643 grid: { 644 borderColor: borderColor, 645 strokeDashArray: 4, 646 yaxis: { 647 lines: { 648 show: true 649 } 650 } 651 }, 652 markers: { 653 strokeColor: baseColor, 654 strokeWidth: 3 655 } 656 }; 657 658 var chart = new ApexCharts(element, options); 659 chart.render(); 660 } 661 662 var initChartsWidget4 = function() { 663 var element = document.getElementById("kt_charts_widget_4_chart"); 664 665 var height = parseInt(KTUtil.css(element, 'height')); 666 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 667 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 668 669 var baseColor = KTUtil.getCssVariableValue('--bs-success'); 670 var baseLightColor = KTUtil.getCssVariableValue('--bs-light-success'); 671 var secondaryColor = KTUtil.getCssVariableValue('--bs-warning'); 672 var secondaryLightColor = KTUtil.getCssVariableValue('--bs-light-warning'); 673 674 if (!element) { 675 return; 676 } 677 678 var options = { 679 series: [{ 680 name: 'Net Profit', 681 data: [60, 50, 80, 40, 100, 60] 682 }, { 683 name: 'Revenue', 684 data: [70, 60, 110, 40, 50, 70] 685 }], 686 chart: { 687 fontFamily: 'inherit', 688 type: 'area', 689 height: 350, 690 toolbar: { 691 show: false 692 } 693 }, 694 plotOptions: {}, 695 legend: { 696 show: false 697 }, 698 dataLabels: { 699 enabled: false 700 }, 701 fill: { 702 type: 'solid', 703 opacity: 1 704 }, 705 stroke: { 706 curve: 'smooth' 707 }, 708 xaxis: { 709 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 710 axisBorder: { 711 show: false, 712 }, 713 axisTicks: { 714 show: false 715 }, 716 labels: { 717 style: { 718 colors: labelColor, 719 fontSize: '12px' 720 } 721 }, 722 crosshairs: { 723 position: 'front', 724 stroke: { 725 color: labelColor, 726 width: 1, 727 dashArray: 3 728 } 729 }, 730 tooltip: { 731 enabled: true, 732 formatter: undefined, 733 offsetY: 0, 734 style: { 735 fontSize: '12px' 736 } 737 } 738 }, 739 yaxis: { 740 labels: { 741 style: { 742 colors: labelColor, 743 fontSize: '12px' 744 } 745 } 746 }, 747 states: { 748 normal: { 749 filter: { 750 type: 'none', 751 value: 0 752 } 753 }, 754 hover: { 755 filter: { 756 type: 'none', 757 value: 0 758 } 759 }, 760 active: { 761 allowMultipleDataPointsSelection: false, 762 filter: { 763 type: 'none', 764 value: 0 765 } 766 } 767 }, 768 tooltip: { 769 style: { 770 fontSize: '12px' 771 }, 772 y: { 773 formatter: function (val) { 774 return "$" + val + " thousands" 775 } 776 } 777 }, 778 colors: [baseColor, secondaryColor], 779 grid: { 780 borderColor: borderColor, 781 strokeDashArray: 4, 782 yaxis: { 783 lines: { 784 show: true 785 } 786 } 787 }, 788 markers: { 789 colors: [baseLightColor, secondaryLightColor], 790 strokeColor: [baseLightColor, secondaryLightColor], 791 strokeWidth: 3 792 } 793 }; 794 795 var chart = new ApexCharts(element, options); 796 chart.render(); 797 } 798 799 var initChartsWidget5 = function() { 800 var element = document.getElementById("kt_charts_widget_5_chart"); 801 802 var height = parseInt(KTUtil.css(element, 'height')); 803 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 804 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 805 806 var baseColor = KTUtil.getCssVariableValue('--bs-primary'); 807 var secondaryColor = KTUtil.getCssVariableValue('--bs-info'); 808 809 if (!element) { 810 return; 811 } 812 813 var options = { 814 series: [{ 815 name: 'Net Profit', 816 data: [40, 50, 65, 70, 50, 30] 817 }, { 818 name: 'Revenue', 819 data: [-30, -40, -55, -60, -40, -20] 820 }], 821 chart: { 822 fontFamily: 'inherit', 823 type: 'bar', 824 stacked: true, 825 height: 350, 826 toolbar: { 827 show: false 828 } 829 }, 830 plotOptions: { 831 bar: { 832 horizontal: false, 833 columnWidth: ['12%'], 834 borderRadius: 4 835 }, 836 }, 837 legend: { 838 show: false 839 }, 840 dataLabels: { 841 enabled: false 842 }, 843 stroke: { 844 show: true, 845 width: 2, 846 colors: ['transparent'] 847 }, 848 xaxis: { 849 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 850 axisBorder: { 851 show: false, 852 }, 853 axisTicks: { 854 show: false 855 }, 856 labels: { 857 style: { 858 colors: labelColor, 859 fontSize: '12px' 860 } 861 } 862 }, 863 yaxis: { 864 min: -80, 865 max: 80, 866 labels: { 867 style: { 868 colors: labelColor, 869 fontSize: '12px' 870 } 871 } 872 }, 873 fill: { 874 opacity: 1 875 }, 876 states: { 877 normal: { 878 filter: { 879 type: 'none', 880 value: 0 881 } 882 }, 883 hover: { 884 filter: { 885 type: 'none', 886 value: 0 887 } 888 }, 889 active: { 890 allowMultipleDataPointsSelection: false, 891 filter: { 892 type: 'none', 893 value: 0 894 } 895 } 896 }, 897 tooltip: { 898 style: { 899 fontSize: '12px' 900 }, 901 y: { 902 formatter: function (val) { 903 return "$" + val + " thousands" 904 } 905 } 906 }, 907 colors: [baseColor, secondaryColor], 908 grid: { 909 borderColor: borderColor, 910 strokeDashArray: 4, 911 yaxis: { 912 lines: { 913 show: true 914 } 915 } 916 } 917 }; 918 919 var chart = new ApexCharts(element, options); 920 chart.render(); 921 } 922 923 var initChartsWidget6 = function() { 924 var element = document.getElementById("kt_charts_widget_6_chart"); 925 926 var height = parseInt(KTUtil.css(element, 'height')); 927 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 928 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 929 930 var baseColor = KTUtil.getCssVariableValue('--bs-primary'); 931 var baseLightColor = KTUtil.getCssVariableValue('--bs-light-primary'); 932 var secondaryColor = KTUtil.getCssVariableValue('--bs-info'); 933 934 if (!element) { 935 return; 936 } 937 938 var options = { 939 series: [{ 940 name: 'Net Profit', 941 type: 'bar', 942 stacked: true, 943 data: [40, 50, 65, 70, 50, 30] 944 }, { 945 name: 'Revenue', 946 type: 'bar', 947 stacked: true, 948 data: [20, 20, 25, 30, 30, 20] 949 }, { 950 name: 'Expenses', 951 type: 'area', 952 data: [50, 80, 60, 90, 50, 70] 953 }], 954 chart: { 955 fontFamily: 'inherit', 956 stacked: true, 957 height: 350, 958 toolbar: { 959 show: false 960 } 961 }, 962 plotOptions: { 963 bar: { 964 stacked: true, 965 horizontal: false, 966 borderRadius: 4, 967 columnWidth: ['12%'] 968 }, 969 }, 970 legend: { 971 show: false 972 }, 973 dataLabels: { 974 enabled: false 975 }, 976 stroke: { 977 curve: 'smooth', 978 show: true, 979 width: 2, 980 colors: ['transparent'] 981 }, 982 xaxis: { 983 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 984 axisBorder: { 985 show: false, 986 }, 987 axisTicks: { 988 show: false 989 }, 990 labels: { 991 style: { 992 colors: labelColor, 993 fontSize: '12px' 994 } 995 } 996 }, 997 yaxis: { 998 max: 120, 999 labels: { 1000 style: { 1001 colors: labelColor, 1002 fontSize: '12px' 1003 } 1004 } 1005 }, 1006 fill: { 1007 opacity: 1 1008 }, 1009 states: { 1010 normal: { 1011 filter: { 1012 type: 'none', 1013 value: 0 1014 } 1015 }, 1016 hover: { 1017 filter: { 1018 type: 'none', 1019 value: 0 1020 } 1021 }, 1022 active: { 1023 allowMultipleDataPointsSelection: false, 1024 filter: { 1025 type: 'none', 1026 value: 0 1027 } 1028 } 1029 }, 1030 tooltip: { 1031 style: { 1032 fontSize: '12px' 1033 }, 1034 y: { 1035 formatter: function (val) { 1036 return "$" + val + " thousands" 1037 } 1038 } 1039 }, 1040 colors: [baseColor, secondaryColor, baseLightColor], 1041 grid: { 1042 borderColor: borderColor, 1043 strokeDashArray: 4, 1044 yaxis: { 1045 lines: { 1046 show: true 1047 } 1048 }, 1049 padding: { 1050 top: 0, 1051 right: 0, 1052 bottom: 0, 1053 left: 0 1054 } 1055 } 1056 }; 1057 1058 var chart = new ApexCharts(element, options); 1059 chart.render(); 1060 } 1061 1062 var initChartsWidget7 = function() { 1063 var element = document.getElementById("kt_charts_widget_7_chart"); 1064 1065 var height = parseInt(KTUtil.css(element, 'height')); 1066 1067 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 1068 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 1069 var strokeColor = KTUtil.getCssVariableValue('--bs-gray-300'); 1070 1071 var color1 = KTUtil.getCssVariableValue('--bs-warning'); 1072 var color1Light = KTUtil.getCssVariableValue('--bs-light-warning'); 1073 1074 var color2 = KTUtil.getCssVariableValue('--bs-success'); 1075 var color2Light = KTUtil.getCssVariableValue('--bs-light-success'); 1076 1077 var color3 = KTUtil.getCssVariableValue('--bs-primary'); 1078 var color3Light = KTUtil.getCssVariableValue('--bs-light-primary'); 1079 1080 if (!element) { 1081 return; 1082 } 1083 1084 var options = { 1085 series: [{ 1086 name: 'Net Profit', 1087 data: [30, 30, 50, 50, 35, 35] 1088 }, { 1089 name: 'Revenue', 1090 data: [55, 20, 20, 20, 70, 70] 1091 }, { 1092 name: 'Expenses
1092', 1093 data: [60, 60, 40, 40, 30, 30] 1094 }], 1095 chart: { 1096 fontFamily: 'inherit', 1097 type: 'area', 1098 height: height, 1099 toolbar: { 1100 show: false 1101 }, 1102 zoom: { 1103 enabled: false 1104 }, 1105 sparkline: { 1106 enabled: true 1107 } 1108 }, 1109 plotOptions: {}, 1110 legend: { 1111 show: false 1112 }, 1113 dataLabels: { 1114 enabled: false 1115 }, 1116 fill: { 1117 type: 'solid', 1118 opacity: 1 1119 }, 1120 stroke: { 1121 curve: 'smooth', 1122 show: true, 1123 width: 2, 1124 colors: [color1, 'transparent', 'transparent'] 1125 }, 1126 xaxis: { 1127 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 1128 axisBorder: { 1129 show: false, 1130 }, 1131 axisTicks: { 1132 show: false 1133 }, 1134 labels: { 1135 show: false, 1136 style: { 1137 colors: labelColor, 1138 fontSize: '12px' 1139 } 1140 }, 1141 crosshairs: { 1142 show: false, 1143 position: 'front', 1144 stroke: { 1145 color: strokeColor, 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 } 1157 } 1158 }, 1159 yaxis: { 1160 labels: { 1161 show: false, 1162 style: { 1163 colors: labelColor, 1164 fontSize: '12px' 1165 } 1166 } 1167 }, 1168 states: { 1169 normal: { 1170 filter: { 1171 type: 'none', 1172 value: 0 1173 } 1174 }, 1175 hover: { 1176 filter: { 1177 type: 'none', 1178 value: 0 1179 } 1180 }, 1181 active: { 1182 allowMultipleDataPointsSelection: false, 1183 filter: { 1184 type: 'none', 1185 value: 0 1186 } 1187 } 1188 }, 1189 tooltip: { 1190 style: { 1191 fontSize: '12px' 1192 }, 1193 y: { 1194 formatter: function (val) { 1195 return "$" + val + " thousands" 1196 } 1197 } 1198 }, 1199 colors: [color1, color2, color3], 1200 grid: { 1201 borderColor: borderColor, 1202 strokeDashArray: 4, 1203 yaxis: { 1204 lines: { 1205 show: true 1206 } 1207 } 1208 }, 1209 markers: { 1210 colors: [color1Light, color2Light, color3Light], 1211 strokeColor: [color1, color2, color3], 1212 strokeWidth: 3 1213 } 1214 }; 1215 1216 var chart = new ApexCharts(element, options); 1217 chart.render(); 1218 } 1219 1220 var initChartsWidget8 = function() { 1221 var element = document.getElementById("kt_charts_widget_8_chart"); 1222 1223 var height = parseInt(KTUtil.css(element, 'height')); 1224 1225 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 1226 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 1227 var strokeColor = KTUtil.getCssVariableValue('--bs-gray-300'); 1228 1229 var color1 = KTUtil.getCssVariableValue('--bs-warning'); 1230 var color1Light = KTUtil.getCssVariableValue('--bs-light-warning'); 1231 1232 var color2 = KTUtil.getCssVariableValue('--bs-success'); 1233 var color2Light = KTUtil.getCssVariableValue('--bs-light-success'); 1234 1235 var color3 = KTUtil.getCssVariableValue('--bs-primary'); 1236 var color3Light = KTUtil.getCssVariableValue('--bs-light-primary'); 1237 1238 if (!element) { 1239 return; 1240 } 1241 1242 var options = { 1243 series: [{ 1244 name: 'Net Profit', 1245 data: [30, 30, 50, 50, 35, 35] 1246 }, { 1247 name: 'Revenue', 1248 data: [55, 20, 20, 20, 70, 70] 1249 }, { 1250 name: 'Expenses', 1251 data: [60, 60, 40, 40, 30, 30] 1252 },], 1253 chart: { 1254 fontFamily: 'inherit', 1255 type: 'area', 1256 height: height, 1257 toolbar: { 1258 show: false 1259 }, 1260 zoom: { 1261 enabled: false 1262 }, 1263 sparkline: { 1264 enabled: true 1265 } 1266 }, 1267 plotOptions: {}, 1268 legend: { 1269 show: false 1270 }, 1271 dataLabels: { 1272 enabled: false 1273 }, 1274 fill: { 1275 type: 'solid', 1276 opacity: 1 1277 }, 1278 stroke: { 1279 curve: 'smooth', 1280 show: true, 1281 width: 2, 1282 colors: [color1, color2, color3] 1283 }, 1284 xaxis: { 1285 x: 0, 1286 offsetX: 0, 1287 offsetY: 0, 1288 padding: { 1289 left: 0, 1290 right: 0, 1291 top: 0, 1292 }, 1293 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 1294 axisBorder: { 1295 show: false, 1296 }, 1297 axisTicks: { 1298 show: false 1299 }, 1300 labels: { 1301 show: false, 1302 style: { 1303 colors: labelColor, 1304 fontSize: '12px' 1305 } 1306 }, 1307 crosshairs: { 1308 show: false, 1309 position: 'front', 1310 stroke: { 1311 color: strokeColor, 1312 width: 1, 1313 dashArray: 3 1314 } 1315 }, 1316 tooltip: { 1317 enabled: true, 1318 formatter: undefined, 1319 offsetY: 0, 1320 style: { 1321 fontSize: '12px' 1322 } 1323 } 1324 }, 1325 yaxis: { 1326 y: 0, 1327 offsetX: 0, 1328 offsetY: 0, 1329 padding: { 1330 left: 0, 1331 right: 0 1332 }, 1333 labels: { 1334 show: false, 1335 style: { 1336 colors: labelColor, 1337 fontSize: '12px' 1338 } 1339 } 1340 }, 1341 states: { 1342 normal: { 1343 filter: { 1344 type: 'none', 1345 value: 0 1346 } 1347 }, 1348 hover: { 1349 filter: { 1350 type: 'none', 1351 value: 0 1352 } 1353 }, 1354 active: { 1355 allowMultipleDataPointsSelection: false, 1356 filter: { 1357 type: 'none', 1358 value: 0 1359 } 1360 } 1361 }, 1362 tooltip: { 1363 style: { 1364 fontSize: '12px' 1365 }, 1366 y: { 1367 formatter: function (val) { 1368 return "$" + val + " thousands" 1369 } 1370 } 1371 }, 1372 colors: [color1Light, color2Light, color3Light], 1373 grid: { 1374 borderColor: borderColor, 1375 strokeDashArray: 4, 1376 padding: { 1377 top: 0, 1378 bottom: 0, 1379 left: 0, 1380 right: 0 1381 } 1382 }, 1383 markers: { 1384 colors: [color1, color2, color3], 1385 strokeColor: [color1, color2, color3], 1386 strokeWidth: 3 1387 } 1388 }; 1389 1390 var chart = new ApexCharts(element, options); 1391 chart.render(); 1392 } 1393 1394 // Mixed widgets 1395 var initMixedWidget2 = function() { 1396 var charts = document.querySelectorAll('.mixed-widget-2-chart'); 1397 1398 var color; 1399 var strokeColor; 1400 var height; 1401 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 1402 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 1403 var options; 1404 var chart; 1405 1406 [].slice.call(charts).map(function(element) { 1407 height = parseInt(KTUtil.css(element, 'height')); 1408 color = KTUtil.getCssVariableValue('--bs-' + element.getAttribute("data-kt-color")); 1409 strokeColor = KTUtil.colorDarken(color, 15); 1410 1411 options = { 1412 series: [{ 1413 name: 'Net Profit', 1414 data: [30, 45, 32, 70, 40, 40, 40] 1415 }], 1416 chart: { 1417 fontFamily: 'inherit', 1418 type: 'area', 1419 height: height, 1420 toolbar: { 1421 show: false 1422 }, 1423 zoom: { 1424 enabled: false 1425 }, 1426 sparkline: { 1427 enabled: true 1428 }, 1429 dropShadow: { 1430 enabled: true, 1431 enabledOnSeries: undefined, 1432 top: 5,
1433 left: 0, 1434 blur: 3, 1435 color: strokeColor, 1436 opacity: 0.5 1437 } 1438 }, 1439 plotOptions: {}, 1440 legend: { 1441 show: false 1442 }, 1443 dataLabels: { 1444 enabled: false 1445 }, 1446 fill: { 1447 type: 'solid', 1448 opacity: 0 1449 }, 1450 stroke: { 1451 curve: 'smooth', 1452 show: true, 1453 width: 3, 1454 colors: [strokeColor] 1455 }, 1456 xaxis: { 1457 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], 1458 axisBorder: { 1459 show: false, 1460 }, 1461 axisTicks: { 1462 show: false 1463 }, 1464 labels: { 1465 show: false, 1466 style: { 1467 colors: labelColor, 1468 fontSize: '12px' 1469 } 1470 }, 1471 crosshairs: { 1472 show: false, 1473 position: 'front', 1474 stroke: { 1475 color: borderColor, 1476 width: 1, 1477 dashArray: 3 1478 } 1479 } 1480 }, 1481 yaxis: { 1482 min: 0, 1483 max: 80, 1484 labels: { 1485 show: false, 1486 style: { 1487 colors: labelColor, 1488 fontSize: '12px' 1489 } 1490 } 1491 }, 1492 states: { 1493 normal: { 1494 filter: { 1495 type: 'none', 1496 value: 0 1497 } 1498 }, 1499 hover: { 1500 filter: { 1501 type: 'none', 1502 value: 0 1503 } 1504 }, 1505 active: { 1506 allowMultipleDataPointsSelection: false, 1507 filter: { 1508 type: 'none', 1509 value: 0 1510 } 1511 } 1512 }, 1513 tooltip: { 1514 style: { 1515 fontSize: '12px', 1516 }, 1517 y: { 1518 formatter: function (val) { 1519 return "$" + val + " thousands" 1520 } 1521 }, 1522 marker: { 1523 show: false 1524 } 1525 }, 1526 colors: ['transparent'], 1527 markers: { 1528 colors: [color], 1529 strokeColor: [strokeColor], 1530 strokeWidth: 3 1531 } 1532 }; 1533 1534 chart = new ApexCharts(element, options); 1535 chart.render(); 1536 }); 1537 } 1538 1539 var initMixedWidget3 = function() { 1540 var charts = document.querySelectorAll('.mixed-widget-3-chart'); 1541 1542 [].slice.call(charts).map(function(element) { 1543 var height = parseInt(KTUtil.css(element, 'height')); 1544 1545 if ( !element ) { 1546 return; 1547 } 1548 1549 var color = element.getAttribute('data-kt-chart-color'); 1550 1551 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); 1552 var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); 1553 var baseColor = KTUtil.getCssVariableValue('--bs-' + color); 1554 var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); 1555 1556 var options = { 1557 series: [{ 1558 name: 'Net Profit', 1559 data: [30, 25, 45, 30, 55, 55] 1560 }], 1561 chart: { 1562 fontFamily: 'inherit', 1563 type: 'area', 1564 height: height, 1565 toolbar: { 1566 show: false 1567 }, 1568 zoom: { 1569 enabled: false 1570 }, 1571 sparkline: { 1572 enabled: true 1573 } 1574 }, 1575 plotOptions: {}, 1576 legend: { 1577 show: false 1578 }, 1579 dataLabels: { 1580 enabled: false 1581 }, 1582 fill: { 1583 type: 'solid', 1584 opacity: 1 1585 }, 1586 stroke: { 1587 curve: 'smooth', 1588 show: true, 1589 width: 3, 1590 colors: [baseColor] 1591 }, 1592 xaxis: { 1593 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 1594 axisBorder: { 1595 show: false, 1596 }, 1597 axisTicks: { 1598 show: false 1599 }, 1600 labels: { 1601 show: false, 1602 style: { 1603 colors: labelColor, 1604 fontSize: '12px' 1605 } 1606 }, 1607 crosshairs: { 1608 show: false, 1609 position: 'front', 1610 stroke: { 1611 color: strokeColor, 1612 width: 1, 1613 dashArray: 3 1614 } 1615 }, 1616 tooltip: { 1617 enabled: true, 1618 formatter: undefined, 1619 offsetY: 0, 1620 style: { 1621 fontSize: '12px' 1622 } 1623 } 1624 }, 1625 yaxis: { 1626 min: 0, 1627 max: 60, 1628 labels: { 1629 show: false, 1630 style: { 1631 colors: labelColor, 1632 fontSize: '12px' 1633 } 1634 } 1635 }, 1636 states: { 1637 normal: { 1638 filter: { 1639 type: 'none', 1640 value: 0 1641 } 1642 }, 1643 hover: { 1644 filter: { 1645 type: 'none', 1646 value: 0 1647 } 1648 }, 1649 active: { 1650 allowMultipleDataPointsSelection: false, 1651 filter: { 1652 type: 'none', 1653 value: 0 1654 } 1655 } 1656 }, 1657 tooltip: { 1658 style: { 1659 fontSize: '12px' 1660 }, 1661 y: { 1662 formatter: function (val) { 1663 return "$" + val + " thousands" 1664 } 1665 } 1666 }, 1667 colors: [lightColor], 1668 markers: { 1669 colors: [lightColor], 1670 strokeColor: [baseColor], 1671 strokeWidth: 3 1672 } 1673 }; 1674 1675 var chart = new ApexCharts(element, options); 1676 chart.render(); 1677 }); 1678 } 1679 1680 var initMixedWidget4 = function() { 1681 var charts = document.querySelectorAll('.mixed-widget-4-chart'); 1682 1683 [].slice.call(charts).map(function(element) { 1684 var height = parseInt(KTUtil.css(element, 'height')); 1685 1686 if ( !element ) { 1687 return; 1688 } 1689 1690 var color = element.getAttribute('data-kt-chart-color'); 1691 1692 var baseColor = KTUtil.getCssVariableValue('--bs-' + color); 1693 var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); 1694 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-700'); 1695 1696 var options = { 1697 series: [74], 1698 chart: { 1699 fontFamily: 'inherit', 1700 height: height, 1701 type: 'radialBar', 1702 }, 1703 plotOptions: { 1704 radialBar: { 1705 hollow: { 1706 margin: 0, 1707 size: "65%" 1708 }, 1709 dataLabels: { 1710 showOn: "always", 1711 name: { 1712 show: false, 1713 fontWeight: '700' 1714 }, 1715 value: { 1716 color: labelColor, 1717 fontSize: "30px", 1718 fontWeight: '700', 1719 offsetY: 12, 1720 show: true, 1721 formatter: function (val) { 1722 return val + '%'; 1723 } 1724 } 1725 }, 1726 track: { 1727 background: lightColor, 1728 strokeWidth: '100%' 1729 } 1730 } 1731 }, 1732 colors: [baseColor], 1733 stroke: { 1734 lineCap: "round", 1735 }, 1736 labels: ["Progress"] 1737 }; 1738 1739 var chart = new ApexCharts(element, options); 1740 chart.render(); 1741 }); 1742 } 1743 1744 var initMixedWidget5 = function() { 1745 var charts = document.querySelectorAll('.mixed-widget-5-chart'); 1746 1747 [].slice.call(charts).map(function(element) { 1748 var height = parseInt(KTUtil.css(element, 'height')); 1749 1750 if ( !element ) { 1751 return; 1752 } 1753 1754 var color = element.getAttribute('data-kt-chart-color'); 1755 1756 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); 1757 var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); 1758 var baseColor = KTUtil.getCssVariableValue('--bs-' + color); 1759 var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); 1760 1761 var options = { 1762 series: [{ 1763 name: 'Net Profit', 1764 data: [30, 30, 60, 25, 25, 40] 1765 }], 1766 chart: { 1767 fontFamily: 'inherit', 1768 type: 'area', 1769 height: height, 1770 toolbar: { 1771 show: false 1772 }, 1773 zoom: { 1774 enabled: false 1775 }, 1776 sparkline: { 1777 enabled: true 1778 } 1779 }, 1780 plotOptions: {}, 1781 legend: { 1782 show: false 1783 }, 1784 dataLabels: { 1785 enabled: false 1786 }, 1787 fill: { 1788 type: 'solid', 1789 opacity: 1 1790 },
1791 fill1: { 1792 type: 'gradient', 1793 opacity: 1, 1794 gradient: { 1795 type: "vertical", 1796 shadeIntensity: 0.5, 1797 gradientToColors: undefined, 1798 inverseColors: true, 1799 opacityFrom: 1, 1800 opacityTo: 0.375, 1801 stops: [25, 50, 100], 1802 colorStops: [] 1803 } 1804 }, 1805 stroke: { 1806 curve: 'smooth', 1807 show: true, 1808 width: 3, 1809 colors: [baseColor] 1810 }, 1811 xaxis: { 1812 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 1813 axisBorder: { 1814 show: false, 1815 }, 1816 axisTicks: { 1817 show: false 1818 }, 1819 labels: { 1820 show: false, 1821 style: { 1822 colors: labelColor, 1823 fontSize: '12px' 1824 } 1825 }, 1826 crosshairs: { 1827 show: false, 1828 position: 'front', 1829 stroke: { 1830 color: strokeColor, 1831 width: 1, 1832 dashArray: 3 1833 } 1834 }, 1835 tooltip: { 1836 enabled: true, 1837 formatter: undefined, 1838 offsetY: 0, 1839 style: { 1840 fontSize: '12px' 1841 } 1842 } 1843 }, 1844 yaxis: { 1845 min: 0, 1846 max: 65, 1847 labels: { 1848 show: false, 1849 style: { 1850 colors: labelColor, 1851 fontSize: '12px' 1852 } 1853 } 1854 }, 1855 states: { 1856 normal: { 1857 filter: { 1858 type: 'none', 1859 value: 0 1860 } 1861 }, 1862 hover: { 1863 filter: { 1864 type: 'none', 1865 value: 0 1866 } 1867 }, 1868 active: { 1869 allowMultipleDataPointsSelection: false, 1870 filter: { 1871 type: 'none', 1872 value: 0 1873 } 1874 } 1875 }, 1876 tooltip: { 1877 style: { 1878 fontSize: '12px' 1879 }, 1880 y: { 1881 formatter: function (val) { 1882 return "$" + val + " thousands" 1883 } 1884 } 1885 }, 1886 colors: [lightColor], 1887 markers: { 1888 colors: [lightColor], 1889 strokeColor: [baseColor], 1890 strokeWidth: 3 1891 } 1892 }; 1893 1894 var chart = new ApexCharts(element, options); 1895 chart.render(); 1896 }); 1897 } 1898 1899 var initMixedWidget6 = function() { 1900 var charts = document.querySelectorAll('.mixed-widget-6-chart'); 1901 1902 [].slice.call(charts).map(function(element) { 1903 var height = parseInt(KTUtil.css(element, 'height')); 1904 1905 if ( !element ) { 1906 return; 1907 } 1908 1909 var color = element.getAttribute('data-kt-chart-color'); 1910 1911 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); 1912 var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); 1913 var baseColor = KTUtil.getCssVariableValue('--bs-' + color); 1914 var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); 1915 1916 var options = { 1917 series: [{ 1918 name: 'Net Profit', 1919 data: [30, 25, 45, 30, 55, 55] 1920 }], 1921 chart: { 1922 fontFamily: 'inherit', 1923 type: 'area', 1924 height: height, 1925 toolbar: { 1926 show: false 1927 }, 1928 zoom: { 1929 enabled: false 1930 }, 1931 sparkline: { 1932 enabled: true 1933 } 1934 }, 1935 plotOptions: {}, 1936 legend: { 1937 show: false 1938 }, 1939 dataLabels: { 1940 enabled: false 1941 }, 1942 fill: { 1943 type: 'solid', 1944 opacity: 1 1945 }, 1946 stroke: { 1947 curve: 'smooth', 1948 show: true, 1949 width: 3, 1950 colors: [baseColor] 1951 }, 1952 xaxis: { 1953 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 1954 axisBorder: { 1955 show: false, 1956 }, 1957 axisTicks: { 1958 show: false 1959 }, 1960 labels: { 1961 show: false, 1962 style: { 1963 colors: labelColor, 1964 fontSize: '12px' 1965 } 1966 }, 1967 crosshairs: { 1968 show: false, 1969 position: 'front', 1970 stroke: { 1971 color: strokeColor, 1972 width: 1, 1973 dashArray: 3 1974 } 1975 }, 1976 tooltip: { 1977 enabled: true, 1978 formatter: undefined, 1979 offsetY: 0, 1980 style: { 1981 fontSize: '12px' 1982 } 1983 } 1984 }, 1985 yaxis: { 1986 min: 0, 1987 max: 60, 1988 labels: { 1989 show: false, 1990 style: { 1991 colors: labelColor, 1992 fontSize: '12px' 1993 } 1994 } 1995 }, 1996 states: { 1997 normal: { 1998 filter: { 1999 type: 'none', 2000 value: 0 2001 } 2002 }, 2003 hover: { 2004 filter: { 2005 type: 'none', 2006 value: 0 2007 } 2008 }, 2009 active: { 2010 allowMultipleDataPointsSelection: false, 2011 filter: { 2012 type: 'none', 2013 value: 0 2014 } 2015 } 2016 }, 2017 tooltip: { 2018 style: { 2019 fontSize: '12px' 2020 }, 2021 y: { 2022 formatter: function (val) { 2023 return "$" + val + " thousands" 2024 } 2025 } 2026 }, 2027 colors: [lightColor], 2028 markers: { 2029 colors: [lightColor], 2030 strokeColor: [baseColor], 2031 strokeWidth: 3 2032 } 2033 }; 2034 2035 var chart = new ApexCharts(element, options); 2036 chart.render(); 2037 }); 2038 } 2039 2040 var initMixedWidget7 = function() { 2041 var charts = document.querySelectorAll('.mixed-widget-7-chart'); 2042 2043 [].slice.call(charts).map(function(element) { 2044 var height = parseInt(KTUtil.css(element, 'height')); 2045 2046 if ( !element ) { 2047 return; 2048 } 2049 2050 var color = element.getAttribute('data-kt-chart-color'); 2051 2052 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); 2053 var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); 2054 var baseColor = KTUtil.getCssVariableValue('--bs-' + color); 2055 var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color); 2056 2057 var options = { 2058 series: [{ 2059 name: 'Net Profit', 2060 data: [15, 25, 15, 40, 20, 50] 2061 }], 2062 chart: { 2063 fontFamily: 'inherit', 2064 type: 'area', 2065 height: height, 2066 toolbar: { 2067 show: false 2068 }, 2069 zoom: { 2070 enabled: false 2071 }, 2072 sparkline: { 2073 enabled: true 2074 } 2075 }, 2076 plotOptions: {}, 2077 legend: { 2078 show: false 2079 }, 2080 dataLabels: { 2081 enabled: false 2082 }, 2083 fill: { 2084 type: 'solid', 2085 opacity: 1 2086 }, 2087 stroke: { 2088 curve: 'smooth', 2089 show: true, 2090 width: 3, 2091 colors: [baseColor] 2092 }, 2093 xaxis: { 2094 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 2095 axisBorder: { 2096 show: false, 2097 }, 2098 axisTicks: { 2099 show: false 2100 }, 2101 labels: { 2102 show: false, 2103 style: { 2104 colors: labelColor, 2105 fontSize: '12px' 2106 } 2107 }, 2108 crosshairs: { 2109 show: false, 2110 position: 'front', 2111 stroke: { 2112 color: strokeColor, 2113 width: 1, 2114 dashArray: 3 2115 } 2116 }, 2117 tooltip: { 2118 enabled: true, 2119 formatter: undefined, 2120 offsetY: 0, 2121 style: { 2122 fontSize: '12px' 2123 } 2124 } 2125 }, 2126 yaxis: { 2127 min: 0, 2128 max: 60, 2129 labels: { 2130 show: false, 2131 style: { 2132 colors: labelColor, 2133 fontSize: '12px' 2134 } 2135 } 2136 }, 2137 states: { 2138 normal: { 2139 filter: { 2140 type: 'none', 2141 value: 0 2142 } 2143 }, 2144 hover: { 2145 filter: { 2146 type: 'none', 2147 value: 0 2148 } 2149 }, 2150 active: { 2151 allowMultipleDataPointsSelection: false, 2152 filter: { 2153 type: 'none', 2154 value: 0 2155 } 2156 } 2157 }, 2158 tooltip: { 2159 style: { 2160 fontSize: '12px' 2161 }, 2162 y: { 2163 formatter: function (val) { 2164 return "$" + val + " thousands" 2165 } 2166 } 2167 }, 2168 colors: [lightColor], 2169 markers: { 2170 colors: [lightColor], 2171 strokeColor: [baseColor], 2172 strokeWidth: 3 2173 } 2174 }; 2175 2176 var chart = new ApexCharts(element, options); 2177 chart.render(); 2178 }); 2179 } 2180 2181 var initMixedWidget10 = function() { 2182 var charts = document.querySelectorAll('.mixed-widget-10-chart'); 2183 2184 var color; 2185 var height; 2186 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 2187 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 2188 var baseLightColor; 2189 var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300'); 2190 var baseColor; 2191 var options; 2192 var chart; 2193 2194 [].slice.call(charts).map(function(element) { 2195 color = element.getAttribute("data-kt-color"); 2196 height = parseInt(KTUtil.css(element, 'height')); 2197 baseColor = KTUtil.getCssVariableValue('--bs-' + color); 2198 2199 options = { 2200 series: [{ 2201 name: 'Net Profit', 2202 data: [50, 60, 70, 80, 60, 50, 70, 60] 2203 }, { 2204 name: 'Revenue', 2205 data: [50, 60, 70, 80, 60, 50, 70, 60] 2206 }], 2207 chart: { 2208 fontFamily: 'inherit', 2209 type: 'bar', 2210 height: height, 2211 toolbar: { 2212 show: false 2213 } 2214 }, 2215 plotOptions: { 2216 bar: { 2217 horizontal: false, 2218 columnWidth: ['50%'], 2219 borderRadius: 4 2220 }, 2221 }, 2222 legend: { 2223 show: false 2224 }, 2225 dataLabels: { 2226 enabled: false 2227 }, 2228 stroke: { 2229 show: true, 2230 width: 2, 2231 colors: ['transparent'] 2232 }, 2233 xaxis: { 2234 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], 2235 axisBorder: { 2236 show: false, 2237 }, 2238 axisTicks: { 2239 show: false 2240 }, 2241 labels: { 2242 style: { 2243 colors: labelColor, 2244 fontSize: '12px' 2245 } 2246 } 2247 }, 2248 yaxis: { 2249 y: 0, 2250 offsetX: 0, 2251 offsetY: 0, 2252 labels: { 2253 style: { 2254 colors: labelColor, 2255 fontSize: '12px' 2256 } 2257 } 2258 }, 2259 fill: { 2260 type: 'solid' 2261 }, 2262 states: { 2263 normal: { 2264 filter: { 2265 type: 'none', 2266 value: 0 2267 } 2268 }, 2269 hover: { 2270 filter: { 2271 type: 'none', 2272 value: 0 2273 } 2274 }, 2275 active: { 2276 allowMultipleDataPointsSelection: false, 2277 filter: { 2278 type: 'none', 2279 value: 0 2280 } 2281 } 2282 }, 2283 tooltip: { 2284 style: { 2285 fontSize: '12px' 2286 }, 2287 y: { 2288 formatter: function (val) { 2289 return
2289 "$" + val + " revenue" 2290 } 2291 } 2292 }, 2293 colors: [baseColor, secondaryColor], 2294 grid: { 2295 padding: { 2296 top: 10 2297 }, 2298 borderColor: borderColor, 2299 strokeDashArray: 4, 2300 yaxis: { 2301 lines: { 2302 show: true 2303 } 2304 } 2305 } 2306 }; 2307 2308 chart = new ApexCharts(element, options); 2309 chart.render(); 2310 }); 2311 } 2312 2313 var initMixedWidget12 = function() { 2314 var charts = document.querySelectorAll('.mixed-widget-12-chart'); 2315 2316 var color; 2317 var strokeColor; 2318 var height; 2319 var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); 2320 var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); 2321 var options; 2322 var chart; 2323 2324 [].slice.call(charts).map(function(element) { 2325 height = parseInt(KTUtil.css(element, 'height')); 2326 2327 var options = { 2328 series: [{ 2329 name: 'Net Profit', 2330 data: [35, 65, 75, 55, 45, 60, 55] 2331 }, { 2332 name: 'Revenue', 2333 data: [40, 70, 80, 60, 50, 65, 60] 2334 }], 2335 chart: { 2336 fontFamily: 'inherit', 2337 type: 'bar', 2338 height: height, 2339 toolbar: { 2340 show: false 2341 }, 2342 sparkline: { 2343 enabled: true 2344 }, 2345 }, 2346 plotOptions: { 2347 bar: { 2348 horizontal: false, 2349 columnWidth: ['30%'], 2350 borderRadius: 2 2351 } 2352 }, 2353 legend: { 2354 show: false 2355 }, 2356 dataLabels: { 2357 enabled: false 2358 }, 2359 stroke: { 2360 show: true, 2361 width: 1, 2362 colors: ['transparent'] 2363 }, 2364 xaxis: { 2365 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 2366 axisBorder: { 2367 show: false, 2368 }, 2369 axisTicks: { 2370 show: false 2371 }, 2372 labels: { 2373 style: { 2374 colors: labelColor, 2375 fontSize: '12px' 2376 } 2377 } 2378 }, 2379 yaxis: { 2380 min: 0, 2381 max: 100, 2382 labels: { 2383 style: { 2384 colors: labelColor, 2385 fontSize: '12px' 2386 } 2387 } 2388 }, 2389 fill: { 2390 type: ['solid', 'solid'], 2391 opacity: [0.25, 1] 2392 }, 2393 states: { 2394 normal: { 2395 filter: { 2396 type: 'none', 2397 value: 0 2398 } 2399 }, 2400 hover: { 2401 filter: { 2402 type: 'none', 2403 value: 0 2404 } 2405 }, 2406 active: { 2407 allowMultipleDataPointsSelection: false, 2408 filter: { 2409 type: 'none', 2410 value: 0 2411 } 2412 } 2413 }, 2414 tooltip: { 2415 style: { 2416 fontSize: '12px' 2417 }, 2418 y: { 2419 formatter: function (val) { 2420 return "$" + val + " thousands" 2421 } 2422 }, 2423 marker: { 2424 show: false 2425 } 2426 }, 2427 colors: ['#ffffff', '#ffffff'], 2428 grid: { 2429 borderColor: borderColor, 2430 strokeDashArray: 4, 2431 yaxis: { 2432 lines: { 2433 show: true 2434 } 2435 }, 2436 padding: { 2437 left: 20, 2438 right: 20 2439 } 2440 } 2441 }; 2442 2443 var chart = new ApexCharts(element, options); 2444 chart.render() 2445 }); 2446 } 2447 2448 var initMixedWidget13 = function() { 2449 var height; 2450 var charts = document.querySelectorAll('.mixed-widget-13-c
2450hart'); 2451 2452 [].slice.call(charts).map(function(element) { 2453 height = parseInt(KTUtil.css(element, 'height')); 2454 2455 if ( !element ) { 2456 return; 2457 } 2458 2459 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); 2460 var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); 2461 2462 var options = { 2463 series: [{ 2464 name: 'Net Profit', 2465 data: [15, 25, 15, 40, 20, 50] 2466 }], 2467 grid: { 2468 show: false, 2469 padding: { 2470 top: 0, 2471 bottom: 0, 2472 left: 0, 2473 right: 0 2474 } 2475 }, 2476 chart: { 2477 fontFamily: 'inherit', 2478 type: 'area', 2479 height: height, 2480 toolbar: { 2481 show: false 2482 }, 2483 zoom: { 2484 enabled: false 2485 }, 2486 sparkline: { 2487 enabled: true 2488 } 2489 }, 2490 plotOptions: {}, 2491 legend: { 2492 show: false 2493 }, 2494 dataLabels: { 2495 enabled: false 2496 }, 2497 fill: { 2498 type: 'gradient', 2499 gradient: { 2500 opacityFrom: 0.4, 2501 opacityTo: 0, 2502 stops: [20, 120, 120, 120] 2503 } 2504 }, 2505 stroke: { 2506 curve: 'smooth', 2507 show: true, 2508 width: 3, 2509 colors: ['#FFFFFF'] 2510 }, 2511 xaxis: { 2512 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 2513 axisBorder: { 2514 show: false, 2515 }, 2516 axisTicks: { 2517 show: false 2518 }, 2519 labels: { 2520 show: false, 2521 style: { 2522 colors: labelColor, 2523 fontSize: '12px' 2524 } 2525 }, 2526 crosshairs: { 2527 show: false, 2528 position: 'front', 2529 stroke: { 2530 color: strokeColor, 2531 width: 1, 2532 dashArray: 3 2533 } 2534 }, 2535 tooltip: { 2536 enabled: true, 2537 formatter: undefined, 2538 offsetY: 0, 2539 style: { 2540 fontSize: '12px' 2541 } 2542 } 2543 }, 2544 yaxis: { 2545 min: 0, 2546 max: 60, 2547 labels: { 2548 show: false, 2549 style: { 2550 colors: labelColor, 2551 fontSize: '12px' 2552 } 2553 } 2554 }, 2555 states: { 2556 normal: { 2557 filter: { 2558 type: 'none', 2559 value: 0 2560 } 2561 }, 2562 hover: { 2563 filter: { 2564 type: 'none', 2565 value: 0 2566 } 2567 }, 2568 active: { 2569 allowMultipleDataPointsSelection: false, 2570 filter: { 2571 type: 'none', 2572 value: 0 2573 } 2574 } 2575 }, 2576 tooltip: { 2577 style: { 2578 fontSize: '12px' 2579 }, 2580 y: { 2581 formatter: function (val) { 2582 return "$" + val + " thousands" 2583 } 2584 } 2585 }, 2586 colors: ['#ffffff'], 2587 markers: { 2588 colors: [labelColor], 2589 strokeColor: [strokeColor], 2590 strokeWidth: 3 2591 } 2592 }; 2593 2594 var chart = new ApexCharts(element, options); 2595 chart.render(); 2596 }); 2597 } 2598 2599 var initMixedWidget14 = function() { 2600 var charts = document.querySelectorAll('.mixed-widget-14-chart'); 2601 var options; 2602 var chart; 2603 var height; 2604 2605 [].slice.call(charts).map(function(element) { 2606 height = parseInt(KTUtil.css(element, 'height')); 2607 var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); 2608 2609 options = { 2610 series: [{ 2611 name: 'Inflation', 2612 data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1] 2613 }], 2614 chart: { 2615 fontFamily: 'inherit', 2616 height: height, 2617 type: 'bar', 2618 toolbar: { 2619 show: false 2620 } 2621 }, 2622 grid: { 2623 show: false, 2624 padding: { 2625 top: 0, 2626 bottom: 0, 2627 left: 0, 2628 right: 0 2629 } 2630 }, 2631 colors: ['#ffffff'], 2632 plotOptions: { 2633 bar: { 2634 borderRadius: 2.5, 2635 dataLabels: { 2636 position: 'top', // top, center, bottom 2637 }, 2638 columnWidth: '20%' 2639 } 2640 }, 2641 dataLabels: { 2642 enabled: false, 2643 formatter: function(val) { 2644 return val + "%"; 2645 }, 2646 offsetY: -20, 2647 style: { 2648 fontSize: '12px', 2649 colors: ["#304758"] 2650 } 2651 }, 2652 xaxis: { 2653 labels: { 2654 show: false, 2655 }, 2656 categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar"], 2657 position: 'top', 2658 axisBorder: { 2659 show: false 2660 }, 2661 axisTicks: { 2662 show: false 2663 }, 2664 crosshairs: { 2665 show: false 2666 }, 2667 tooltip: { 2668 enabled: false 2669 } 2670 }, 2671 yaxis: { 2672 show: false, 2673 axisBorder: { 2674 show: false 2675 }, 2676 axisTicks: { 2677 show: false, 2678 background: labelColor 2679 }, 2680 labels: { 2681 show: false, 2682 formatter: function(val) { 2683 return val + "%"; 2684 } 2685 } 2686 } 2687 }; 2688 2689 chart = new ApexCharts(element, options); 2690 chart.render(); 2691 }); 2692 } 2693 2694 var initMixedWidget16 = function() { 2695 var element = document.getElementById("kt_charts_mixed_widget_16_chart"); 2696 var height = parseInt(KTUtil.css(element, 'height')); 2697 2698 if (!element) { 2699 return; 2700 } 2701 2702 var options = { 2703 labels: ["Total Members"], 2704 series: [74], 2705 chart: { 2706 fontFamily: 'inherit', 2707 height: height, 2708 type: 'radialBar', 2709 offsetY: 0 2710 }, 2711 plotOptions: { 2712 radialBar: { 2713 startAngle: -90, 2714 endAngle: 90, 2715 2716 hollow: { 2717 margin: 0, 2718 size: "70%" 2719 }, 2720 dataLabels: { 2721 showOn: "always", 2722 name: { 2723 show: true, 2724 fontSize: "13px", 2725 fontWeight: "700", 2726 offsetY: -5, 2727 color: KTUtil.getCssVariableValue('--bs-gray-500') 2728 }, 2729 value: { 2730 color: KTUtil.getCssVariableValue('--bs-gray-700'), 2731 fontSize: "30px", 2732 fontWeight: "700", 2733 offsetY: -40, 2734 show: true 2735 } 2736 }, 2737 track: { 2738 background: KTUtil.getCssVariableValue('--bs-light-primary'), 2739 strokeWidth: '100%' 2740 } 2741 } 2742 }, 2743 colors: [KTUtil.getCssVariableValue('--bs-primary')], 2744 stroke: { 2745 lineCap: "round", 2746 } 2747 }; 2748 2749 var chart = new ApexCharts(element, options); 2750 chart.render(); 2751 } 2752 2753 // Feeds Widgets 2754 var initFeedWidget1 = function() { 2755 var formEl = document.querySelector("#kt_forms_widget_1_form"); 2756 var editorId = 'kt_forms_widget_1_editor'; 2757 2758 if ( !formEl ) { 2759 return; 2760 } 2761 2762 // init editor 2763 var options = { 2764 modules: { 2765 toolbar: { 2766 container: "#kt_forms_widget_1_editor_toolbar" 2767 } 2768 }, 2769 placeholder: 'What is on your mind ?', 2770 theme: 'snow' 2771 }; 2772 2773 if (!formEl) { 2774 return; 2775 } 2776 2777 // Init editor 2778 var editorObj = new Quill('#' + editorId, options); 2779 } 2780 2781 var initFeedsWidget4 = function() { 2782 var btn = document.querySelector('#kt_widget_5_load_more_btn'); 2783 var widget5 = document.querySelector('#kt_widget_5'); 2784 2785 if (btn) { 2786 btn.addEventListener('click', function(e){ 2787 e.preventDefault(); 2788 btn.setAttribute('data-kt-indicator', 'on'); 2789 2790 setTimeout(function() { 2791 btn.removeAttribute('data-kt-indicator'); 2792 widget5.classList.remove('d-none'); 2793 btn.classList.add('d-none'); 2794 2795 KTUtil.scrollTo(widget5, 200); 2796 }, 2000); 2797 }); 2798 } 2799 } 2800 2801 // Follow button 2802 var initUserFollowButton = function() { 2803 var follow = document.querySelector('#kt_user_follow_button'); 2804 2805 if (follow) { 2806 follow.addEventListener('click', function(e){ 2807 // Prevent default action 2808 e.preventDefault(); 2809 2810 // Show indicator 2811 follow.setAttribute('data-kt-indicator', 'on'); 2812 2813 // Disable button to avoid multiple click 2814 follow.disabled = true; 2815 2816 // Check button state 2817 if (follow.classList.contains("btn-success")) { 2818 setTimeout(function() { 2819 follow.removeAttribute('data-kt-indicator'); 2820 follow.classList.remove("btn-success"); 2821 follow.classList.add("btn-light"); 2822 follow.querySelector(".svg-icon").classList.add("d-none"); 2823 follow.querySelector(".indicator-label").innerHTML = 'Follow'; 2824 follow.disabled = false;
2825 }, 1500); 2826 } else { 2827 setTimeout(function() { 2828 follow.removeAttribute('data-kt-indicator'); 2829 follow.classList.add("btn-success"); 2830 follow.classList.remove("btn-light"); 2831 follow.querySelector(".svg-icon").classList.remove("d-none"); 2832 follow.querySelector(".indicator-label").innerHTML = 'Following'; 2833 follow.disabled = false; 2834 }, 1000); 2835 } 2836 }); 2837 } 2838 } 2839 2840 // Calendar 2841 var initCalendarWidget1 = function() { 2842 if (typeof FullCalendar === 'undefined' || !document.querySelector('#kt_calendar_widget_1')) { 2843 return; 2844 } 2845 2846 var todayDate = moment().startOf('day'); 2847 var YM = todayDate.format('YYYY-MM'); 2848 var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD'); 2849 var TODAY = todayDate.format('YYYY-MM-DD'); 2850 var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD'); 2851 2852 var calendarEl = document.getElementById('kt_calendar_widget_1'); 2853 var calendar = new FullCalendar.Calendar(calendarEl, { 2854 headerToolbar: { 2855 left: 'prev,next today', 2856 center: 'title', 2857 right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' 2858 }, 2859 2860 height: 800, 2861 contentHeight: 780, 2862 aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio 2863 2864 nowIndicator: true, 2865 now: TODAY + 'T09:25:00', // just for demo 2866 2867 views: { 2868 dayGridMonth: { buttonText: 'month' }, 2869 timeGridWeek: { buttonText: 'week' }, 2870 timeGridDay: { buttonText: 'day' } 2871 }, 2872 2873 initialView: 'dayGridMonth', 2874 initialDate: TODAY, 2875 2876 editable: true, 2877 dayMaxEvents: true, // allow "more" link when too many events 2878 navLinks: true, 2879 events: [ 2880 { 2881 title: 'All Day Event', 2882 start: YM + '-01', 2883 description: 'Toto lorem ipsum dolor sit incid idunt ut', 2884 className: "fc-event-danger fc-event-solid-warning" 2885 }, 2886 { 2887 title: 'Reporting', 2888 start: YM + '-14T13:30:00', 2889 description: 'Lorem ipsum dolor incid idunt ut labore', 2890 end: YM + '-14', 2891 className: "fc-event-success" 2892 }, 2893 { 2894 title: 'Company Trip', 2895 start: YM + '-02', 2896 description: 'Lorem ipsum dolor sit tempor incid', 2897 end: YM + '-03', 2898 className: "fc-event-primary" 2899 }, 2900 { 2901 title: 'ICT Expo 2017 - Product Release', 2902 start: YM + '-03', 2903 description: 'Lorem ipsum dolor sit tempor inci', 2904 end: YM + '-05', 2905 className: "fc-event-light fc-event-solid-primary" 2906 }, 2907 { 2908 title: 'Dinner', 2909 start: YM + '-12', 2910 description: 'Lorem ipsum dolor sit amet, conse ctetur', 2911 end: YM + '-10' 2912 }, 2913 { 2914 id: 999, 2915 title: 'Repeating Event', 2916 start: YM + '-09T16:00:00', 2917 description: 'Lorem ipsum dolor sit ncididunt ut labore', 2918 className: "fc-event-danger" 2919 }, 2920 { 2921 id: 1000, 2922 title: 'Repeating Event', 2923 description: 'Lorem ipsum dolor sit amet, labore', 2924 start: YM + '-16T16:00:00' 2925 }, 2926 { 2927 title: 'Conference', 2928 start: YESTERDAY, 2929 end: TOMORROW, 2930 description: 'Lorem ipsum dolor eius mod tempor labore', 2931 className: "fc-event-primary" 2932 }, 2933 { 2934 title: 'Meeting', 2935 start: TODAY + 'T10:30:00', 2936 end: TODAY + 'T12:30:00', 2937 description: 'Lorem ipsum dolor eiu idunt ut labore' 2938 }, 2939 { 2940 title: 'Lunch', 2941 start: TODAY + 'T12:00:00', 2942 className: "fc-event-info", 2943 description: 'Lorem ipsum dolor sit amet, ut labore' 2944 }, 2945 { 2946 title: 'Meeting', 2947 start: TODAY + 'T14:30:00', 2948 className: "fc-event-warning", 2949 description: 'Lorem ipsum conse ctetur adipi scing' 2950 }, 2951 { 2952 title: 'Happy Hour', 2953 start: TODAY + 'T17:30:00', 2954 className: "fc-event-info", 2955 description: 'Lorem ipsum dolor sit amet, conse ctetur' 2956 }, 2957 { 2958 title: 'Dinner', 2959 start: TOMORROW + 'T05:00:00', 2960 className: "fc-event-solid-danger fc-event-light", 2961 description: 'Lorem ipsum dolor sit ctetur adipi scing' 2962 }, 2963 { 2964 title: 'Birthday Party', 2965 start: TOMORROW + 'T07:00:00', 2966 className: "fc-event-primary", 2967 description: 'Lorem ipsum dolor sit amet, scing' 2968 }, 2969 { 2970 title: 'Click for Google', 2971 url: 'http://google.com/', 2972 start: YM + '-28', 2973 className: "fc-event-solid-info fc-event-light", 2974 description: 'Lorem ipsum dolor sit amet, labore' 2975 } 2976 ] 2977 }); 2978 2979 calendar.render(); 2980 } 2981 2982 // Daterangepicker 2983 var initDaterangepicker = function () { 2984 if (!document.querySelector('#kt_dashboard_daterangepicker')) { 2985 return; 2986 } 2987 2988 var picker = $('#kt_dashboard_daterangepicker'); 2989 var start = moment(); 2990 var end = moment(); 2991 2992 function cb(start, end, label) { 2993 var title = ''; 2994 var range = ''; 2995 2996 if ((end - start) < 100 || label == 'Today') { 2997 title = 'Today:'; 2998 range = start.format('MMM D'); 2999 } else if (label == 'Yesterday') { 3000 title = 'Yesterday:'; 3001 range = start.format('MMM D'); 3002 } else { 3003 range = start.format('MMM D') + ' - ' + end.format('MMM D'); 3004 } 3005 3006 $('#kt_dashboard_daterangepicker_date').html(range); 3007 $('#kt_dashboard_daterangepicker_title').html(title); 3008 } 3009 3010 picker.daterangepicker({ 3011 direction: KTUtil.isRTL(), 3012 startDate: start, 3013 endDate: end, 3014 opens: 'left', 3015 applyClass: 'btn-primary', 3016 cancelClass: 'btn-light-primary', 3017 ranges: { 3018 'Today': [moment(), moment()], 3019 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 3020 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 3021 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 3022 'This Month': [moment().startOf('month'), moment().endOf('month')], 3023 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 3024 } 3025 }, cb); 3026 3027 cb(start, end, ''); 3028 } 3029 3030 // Dark mode toggler 3031 var initDarkModeToggle = function() { 3032 var toggle = document.querySelector('#kt_user_menu_dark_mode_toggle'); 3033 3034 if (toggle) { 3035 toggle.addEventListener('click', function() { 3036 window.location.href = this.getAttribute('data-kt-url'); 3037 }); 3038 } 3039 } 3040 3041 // Public methods 3042 return { 3043 init: function () { 3044 // Daterangepicker 3045 initDaterangepicker(); 3046 3047 // Dark Mode 3048 initDarkModeToggle(); 3049 3050 // Statistics widgets 3051 initStatisticsWidget3(); 3052 initStatisticsWidget4(); 3053 3054 // Charts widgets 3055 initChartsWidget1(); 3056 initChartsWidget2(); 3057 initChartsWidget3(); 3058 initChartsWidget4(); 3059 initChartsWidget5(); 3060 initChartsWidget6(); 3061 initChartsWidget7(); 3062 initChartsWidget8(); 3063 3064 // Mixed widgets 3065 initMixedWidget2(); 3066 initMixedWidget3(); 3067 initMixedWidget4(); 3068 initMixedWidget5(); 3069 initMixedWidget6(); 3070 initMixedWidget7(); 3071 initMixedWidget10(); 3072 initMixedWidget12(); 3073 initMixedWidget13(); 3074 initMixedWidget14(); 3075 initMixedWidget16(); 3076 3077 // Feeds 3078 initFeedWidget1(); 3079 initFeedsWidget4(); 3080 3081 // Follow button 3082 initUserFollowButton(); 3083 3084 // Calendar 3085 initCalendarWidget1(); 3086 } 3087 } 3088}(); 3089 3090// Webpack support 3091if (typeof module !== 'undefined') { 3092 module.exports = KTWidgets; 3093} 3094 3095// On document ready 3096KTUtil.onDOMContentLoaded(function() { 3097 KTWidgets.init(); 3098});
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.