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