1(function ($) { 2 "use strict"; 3 4 // LocalStorage JS 5 let html = document.documentElement; 6 let geexTheme = localStorage.theme; 7 let geexThemeLayout = localStorage.layout; 8 let geexThemeNavbar = localStorage.navbar; 9 10 let darkMode = geexTheme === "dark"; 11 let rtlLayout = geexThemeLayout === "rtl"; 12 let topMenu = geexThemeNavbar === "top"; 13 14 // Theme Mode Toggle 15 if (geexTheme) { 16 html.setAttribute("data-theme", geexTheme); 17 18 if (geexTheme === "dark") { 19 localStorage.theme === "dark" 20 $(".geex-customizer__btn--light").removeClass("active"); 21 $(".geex-customizer__btn--dark").addClass("active"); 22 23 } else { 24 localStorage.theme === "light" 25 } 26 } 27 28 // Theme Layout Toggle 29 if (geexThemeLayout) { 30 31 html.setAttribute("dir", geexThemeLayout); 32 33 if (geexThemeLayout === "rtl") { 34 localStorage.themeLayout === "rtl" 35 $(".geex-customizer__btn--ltr").removeClass("active"); 36 $(".geex-customizer__btn--rtl").addClass("active"); 37 } else { 38 localStorage.themeLayout === "ltr" 39 } 40 } 41 42 // Theme Navbar Toggle 43 if (geexThemeNavbar) { 44 45 html.setAttribute("data-nav", geexThemeNavbar); 46 47 if (geexThemeNavbar === "top") { 48 localStorage.themeNavbar === "top" 49 $(".geex-customizer__btn--side").removeClass("active"); 50 $(".geex-customizer__btn--top").addClass("active"); 51 } else { 52 localStorage.themeNavbar === "side" 53 } 54 } 55 56 // Dark Theme 57 function darkTheme(e) { 58 let geexTheme = "dark"; 59 localStorage.theme = geexTheme; 60 document.documentElement.setAttribute("data-theme", geexTheme); 61 62 darkMode = true; 63 } 64 65 // Light Theme 66 function lightTheme(e) { 67 let geexTheme = "light"; 68 localStorage.theme = geexTheme; 69 document.documentElement.setAttribute("data-theme", geexTheme); 70 71 darkMode = false; 72 } 73 74 // RTL Layout 75 function rtlTheme(e) { 76 let geexThemeLayout = "rtl"; 77 localStorage.layout = geexThemeLayout; 78 document.documentElement.setAttribute("dir", geexThemeLayout); 79 80 rtlLayout = true; 81 } 82 83 // LTR Layout 84 function ltrTheme(e) { 85 let geexThemeLayout = "ltr"; 86 localStorage.layout = geexThemeLayout; 87 document.documentElement.setAttribute("dir", geexThemeLayout); 88 89 rtlLayout = false; 90 } 91 92 // Top Navbar
93 function topTheme(e) { 94 let geexThemeNavbar = "top"; 95 localStorage.navbar = geexThemeNavbar; 96 document.documentElement.setAttribute("data-nav", geexThemeNavbar); 97 98 topMenu = true; 99 } 100 101 // Side Navbar 102 function sideTheme(e) { 103 let geexThemeNavbar = "side"; 104 localStorage.navbar = geexThemeNavbar; 105 document.documentElement.setAttribute("data-nav", geexThemeNavbar); 106 107 topMenu = false; 108 } 109 110 // Light Demo Add 111 $(".geex-customizer__btn--light").click(function() { 112 $(".geex-customizer__btn--dark").removeClass("active"); 113 $(".geex-customizer__btn--light").addClass("active"); 114 115 lightTheme(); 116 }) 117 118 // Dark Demo Add 119 $(".geex-customizer__btn--dark").click(function() { 120 $(".geex-customizer__btn--light").removeClass("active"); 121 $(".geex-customizer__btn--dark").addClass("active"); 122 123 darkTheme(); 124 }) 125 126 // LTR Layout Add 127 $(".geex-customizer__btn--ltr").click(function() { 128 $(".geex-customizer__btn--rtl").removeClass("active"); 129 $(".geex-customizer__btn--ltr").addClass("active"); 130 131 ltrTheme(); 132 133 // if($("body").hasClass("layout-rtl")) { 134 // $("body").removeClass("layout-rtl"); 135 // } 136 // $('html').attr('dir', 'ltr'); 137 // $("body").addClass("layout-ltr"); 138 }) 139 140 // RTL Layout Add 141 $(".geex-customizer__btn--rtl").click(function() { 142 $(".geex-customizer__btn--ltr").removeClass("active"); 143 $(".geex-customizer__btn--rtl").addClass("active"); 144 145 rtlTheme(); 146 }) 147 148 // Side Navbar Add 149 $(".geex-customizer__btn--side").click(function() { 150 $(".geex-customizer__btn--top").removeClass("active"); 151 $(".geex-customizer__btn--side").addClass("active"); 152 153 sideTheme(); 154 }) 155 156 // Top Navbar Add 157 $(".geex-customizer__btn--top").click(function() { 158 $(".geex-customizer__btn--side").removeClass("active"); 159 $(".geex-customizer__btn--top").addClass("active"); 160 161 topTheme(); 162 }) 163 164 // Menu Active Class 165 function addActiveClass(pagePath) { 166 let menuLinks = $('.geex-header__menu__link, .geex-sidebar__menu__link'); 167 menuLinks.removeClass('active'); 168 169 // Find the corresponding menu item and add the "active" class 170 menuLinks.each(function () { 171 let menuItemPath = $(this).attr('href'); 172 173 // Compare the full path instead of just the last segment 174 if (menuItemPath === pagePath) { 175 let menuParent = $(this).closest('.has-children').find('ul').siblings('a'); 176 $(this).addClass('active'); 177 menuParent.addClass('active'); 178 menuParent.siblings('.geex-sidebar__submenu').slideDown(); 179 } 180 }); 181 } 182 183 // Get the full path 184 let fullPath = window.location.pathname; 185 186 addActiveClass(fullPath); 187 188 $(".geex-sidebar__menu__link").click(function() { 189 let $clickedItem = $(this); 190 191 // Toggle active class and slideToggle for the clicked item's submenu 192 $clickedItem.toggleClass("active"); 193 $clickedItem.siblings('.geex-sidebar__submenu').slideToggle(); 194 195 // Remove active class and slideUp for other menu items 196 $(".geex-sidebar__menu__link").not($clickedItem).removeClass("active"); 197 $(".geex-sidebar__menu__link").not($clickedItem).siblings(".geex-sidebar__submenu").slideUp(); 198 }) 199 200 // Customizer Toggle 201 $(".geex-btn__customizer").click(function() { 202 $(".geex-customizer").toggleClass("active"); 203 $("body").addClass("overlay_active"); 204 }); 205 206 // Customizer Close 207 $(".geex-customizer-overlay, .geex-btn__customizer-close").click(function() { 208 $(".geex-customizer").removeClass("active"); 209 $("body").removeClass("overlay_active"); 210 }) 211 212 // Sidebar Toggle 213 $(".geex-btn__toggle-sidebar").click(function(e) { 214 e.preventDefault(); 215 $(".geex-sidebar").toggleClass("active"); 216 $(".geex-sidebar").animate({ 217 width: "toggle" 218 }); 219 $("body").addClass("overlay_active"); 220 }); 221 222 // Sidebar Close 223 $(".geex-sidebar__close").click(function(e) { 224 e.preventDefault(); 225 $(".geex-sidebar").removeClass("active"); 226 $(".geex-sidebar").animate({ 227 width: "toggle" 228 }); 229 $("body").removeClass("overlay_active"); 230 }); 231 232 // Datepicker Open 233 $("#geex-content__filter__label").click(function() { 234 $('#geex-content__filter__date').datepicker().datepicker('show'); 235 }); 236 237 // Content Toggle 238 $(".geex-content__toggle__btn").click(function(e) { 239 e.preventDefault(); 240 $(this).toggleClass("active"); 241 $(this).siblings(".geex-content__toggle__content").slideToggle(); 242 }); 243 244 // Task Sidebar Toggle 245 $(".geex-btn__toggle-task").click(function(e) { 246 e.preventDefault(); 247 $(this).toggleClass("active"); 248 $(".geex-content__todo__sidebar").slideToggle(); 249 }); 250 251 // Calendar Sidebar Toggle
252 $(".geex-content__calendar__toggle").click(function(e) { 253 e.preventDefault(); 254 $(this).toggleClass("active"); 255 $(".geex-content__calendar__sidebar").slideToggle(); 256 }); 257 258 // Chat Sidebar Toggle 259 $(".geex-content__chat__toggle").click(function(e) { 260 e.preventDefault(); 261 $(this).toggleClass("active"); 262 $(".geex-content__chat__sidebar").slideToggle(); 263 }); 264 265 // Chat Action Toggle 266 $(".geex-content__chat__action__toggle__btn").click(function(e) { 267 e.preventDefault(); 268 $(this).toggleClass("active"); 269 $(this).siblings(".geex-content__chat__action__toggle__content").slideToggle(); 270 }); 271 272 // Popup Toggle 273 $(".geex-content__header__quickaction__link").click(function(e) { 274 e.preventDefault(); 275 var $popup = $(this).siblings('.geex-content__header__popup'); 276 277 $popup.slideToggle(); 278 $(".geex-content__header__popup").not($popup).slideUp(0); 279 }); 280 281 282 // Add Todo 283 $(".geex-btn__add-modal").click(function() { 284 $(".geex-content__modal__form").addClass("active"); 285 $("body").addClass("overlay_active"); 286 }) 287 288 // Close Todo 289 $(".geex-content__modal__form__close").click(function() { 290 $(".geex-content__modal__form").removeClass("active"); 291 $("body").removeClass("overlay_active"); 292 }) 293 294 // Chat Mute Toggle 295 $(".geex-content__chat__header__filter__mute-btn").click(function(e) { 296 e.preventDefault(); 297 $(this).toggleClass("active"); 298 }) 299 300 // Chat Search Toggle 301 $(".geex-content__chat__header__filter__btn").click(function(e) { 302 e.preventDefault(); 303 304 var $clickedItem = $(this); 305 306 // Toggle the 'active' class on the clicked item 307 $clickedItem.toggleClass("active"); 308 309 // Slide toggle the content of the clicked item 310 $clickedItem.siblings(".geex-content__chat__header__filter__content").slideToggle(); 311 312 // Close the content of other items if they are open 313 $(".geex-content__chat__header__filter__btn").not($clickedItem).removeClass("active"); 314 $(".geex-content__chat__header__filter__btn").not($clickedItem).siblings(".geex-content__chat__header__filter__content").slideUp(); 315 }) 316 317 // Toggle Input Type Password 318 $(".toggle-password-type").click(function(e) { 319 e.preventDefault(); 320 const input = $(this).siblings("input"); 321 322 if (input.attr('type') === 'password') { 323 $(this).removeClass("uil-eye"); 324 $(this).addClass("uil-eye-slash"); 325 input.attr('type', 'text'); 326 } else { 327 $(this).addClass("uil-eye"); 328 $(this).removeClass("uil-eye-slash"); 329 input.attr('type', 'password'); 330 } 331 }); 332 333 // Invoice Chat Toggle 334 $(".geex-content__invoice__chat__toggler").click(function(e) { 335 e.preventDefault(); 336 var $invoiceChatContent = $(this).siblings('.geex-content__invoice__chat__wrapper'); 337 338 $invoiceChatContent.stop().animate({ 339 width: 'toggle', // toggles between 0% and 100% 340 opacity: 'toggle' // toggles between 0 and 1 341 }, 300); // Adjust the duration as needed 342 }); 343 344 // CountDown 345 let day = document.querySelector('.geex-countdown__days'); 346 let hour = document.querySelector('.geex-countdown__hours'); 347 let minute = document.querySelector('.geex-countdown__minutes'); 348 let second = document.querySelector('.geex-countdown__seconds'); 349 350 function setCountdown() { 351 // Only run countdown if the countdown element exists 352 if (!document.getElementById("geex-countdown")) { 353 return; 354 } 355 356 // Set countdown date 357 let countdownDate = new Date('Jan 01, 2025 16:40:25').getTime(); 358 359 // Update countdown every second 360 let updateCount = setInterval(function(){ 361 362 // Get today's date and time 363 let todayDate = new Date().getTime(); 364 365 // Get distance between now and countdown date 366 let distance = countdownDate - todayDate; 367 368 let days = Math.floor(distance / (1000 * 60 * 60 *24)); 369 370 let hours = Math.floor(distance % (1000 * 60 * 60 *24) / (1000 * 60 *60)); 371 372 let minutes = Math.floor(distance % (1000 * 60 * 60 ) / (1000 * 60)); 373 374 let seconds = Math.floor(distance % (1000 * 60) / 1000); 375 376 // Display values in html elements 377 if (day) { 378 day.textContent = days; 379 } 380 if (hour) { 381 hour.textContent = hours; 382 } 383 if (minute) { 384 minute.textContent = minutes; 385 } 386 if (second) { 387 second.textContent = seconds; 388 } 389 390 // if countdown expires 391 if(distance < 0){ 392 clearInterval(updateCount); 393 const countdownEl = document.getElementById("geex-countdown"); 394 if (countdownEl) { 395 countdownEl.innerHTML = '<h1>EXPIRED</h1>'; 396 } 397 } 398 }, 300) 399 } 400 401 setCountdown() 402 403 // Swiper Slider 404 let swiperContainer = document.querySelector('.swiper-container'); 405 let swiper = swiperContainer && new Swiper(swiperContainer, { 406 loop: true, // Enable loop mode for infinite sliding 407 freeMode: true, 408 reverseDirection: true, 409 slidesPerView: 3, 410 spaceBetween: 0, 411 rtl: true, 412 navigation: { 413 nextEl: '.swiper-btn-next', 414 prevEl: '.swiper-btn-prev', 415 }, 416 breakpoints: { 417 // when window width is >= 0px 418 0: { 419 slidesPerView: 1, 420 }, 421 // when window width is >= 1440px 422 992: { 423 slidesPerView: 2, 424 }, 425 // when window width is >= 1600px 426 1600: { 427 slidesPerView: 3, 428 } 429 } 430 }); 431 432 let testiContainer = document.querySelector('.testi-container'); 433 let testi = testiContainer && new Swiper(testiContainer, { 434 loop: true, // Enable loop mode for infinite sliding 435 freeMode: true, 436 reverseDirection: true, 437 slidesPerView: 1, 438 spaceBetween: 0, 439 navigation: { 440 nextEl: '.swiper-btn-next', 441 prevEl: '.swiper-btn-prev', 442 }, 443 }); 444 445 // Editor 446 if($('.geex-content__chat__editor').length) { 447 tinymce.init({ 448 selector: '.geex-content__chat__editor', // change this value according to your HTML 449 }); 450 } 451 452 // Calendar 453 if($("#geex-calendar").length) { 454 $('#geex-calendar').fullCalendar({ 455 themeSystem: 'jquery-ui', 456 navLinks: true, 457 height: 650, 458 header: { 459 left: 'title, prev, next', 460 right: 'month,agendaWeek,agendaDay' 461 }, 462 eventLimit: true, // allow "more" link when too many events 463 eventSources: [ 464 { 465 url: 'https://fullcalendar.io/demo-events.json' 466 } 467 ], 468 eventRender: function(event, element, view) { 469 var theDate = event.start 470 var endDate = event.dowend; 471 var startDate = event.dowstart; 472 473 if (theDate >
473= endDate) { 474 return false; 475 } 476 477 if (theDate <= startDate) { 478 return false; 479 } 480 }, 481 events: [ 482 { 483 id: 1, 484 title:"Lunch", 485 start:'12:00', 486 end: '12:30', 487 dow: [1, 2, 3, 4, 5], 488 dowstart: moment('2018-04-01', 'YYYY-MM-DD'), 489 dowend: moment('2018-05-01', 'YYYY-MM-DD'), 490 className: 'fc-event-lunch' 491 } 492 ], 493 businessHours: [{ 494 dow: [1,2,3,4,5], 495 start: '08:00', 496 end: '16:30' 497 }], 498 minTime: '06:00', 499 maxTime: '21:00' 500 }); 501 } 502 503 // Line Chart 504 let lineOptions = { 505 series: [ 506 { 507 name: "Minutes Used", 508 data: [181, 152, 198, 204, 236, 190], 509 }, 510 511 { 512 name: "Incoming Calls", 513 data: [108, 86, 131, 142, 167, 154], 514 }, 515 ], 516 517 chart: { 518 fontFamily: "Outfit, sans-serif", 519 height: 335, 520 type: "area", 521 background: "transparent", 522 toolbar: { 523 show: false, 524 }, 525 }, 526 527 xaxis: { 528 type: "category", 529 categories: [ 530 "November", 531 "December", 532 "January", 533 "February", 534 "March", 535 "April", 536 ], 537 axisBorder: { 538 show: false, 539 }, 540 axisTicks: { 541 show: false, 542 }, 543 crosshairs: { 544 show: false 545 }, 546 }, 547 yaxis: { 548 labels: { 549 offsetX: -10 550 }, 551 title: { 552 style: { 553 fontSize: "0px", 554 }, 555 }, 556 min: 0, 557 max: 250, 558 tickAmount: 3, 559 }, 560 colors: ["#7620E3", "#AB54DB"], 561 fill: { 562 colors: ['transparent', 'transparent'], 563 type: ['solid', 'solid'], 564 }, 565 566 legend: { 567 show: true, 568 position: "top", 569 horizontalAlign: "right", 570 }, 571 stroke: { 572 width: [5, 5], 573 curve: "smooth", 574 }, 575 markers: { 576 show: false, 577 }, 578 labels: { 579 show: false, 580 }, 581 dataLabels: { 582 enabled: false, 583 }, 584 585 grid: { 586 show: true, 587 xaxis: { 588 lines: { 589 show: true, 590 }, 591 }, 592 yaxis: { 593 lines: { 594 show: true, 595 }, 596 }, 597 column: { 598 opacity: 0.2 599 }, 600 }, 601 602 tooltip: { 603 enabled: true, 604 custom: function({ series, seriesIndex, dataPointIndex, w }) { 605 return '<div class="custom-tooltip">' + 606 '<span class="custom-tooltip__title">' + w.globals.series[seriesIndex][dataPointIndex] + '</span>' + 607 '<span class="custom-tooltip__subtitle"> ' + w.globals.seriesNames[seriesIndex] + '</span>' + 608 '</div>'; 609 } 610 }, 611 612 responsive: [ 613 { 614 breakpoint: 1024, 615 options: { 616 chart: { 617 height: 300, 618 }, 619 }, 620 }, 621 { 622 breakpoint: 1366, 623 options: { 624 chart: { 625 height: 350, 626 }, 627 }, 628 }, 629 ], 630 631 }; 632 633 let lineChartContainer = document.querySelector("#line-chart"); 634 let lineChart = lineChartContainer && new ApexCharts(lineChartContainer, lineOptions); 635 lineChart && lineChart.render(); 636 637 638 // Line Chart 639 let bitcoinOptions = { 640 series: [ 641 { 642 name: "Buy", 643 data: [9400, 9200, 9700, 9400, 9200, 9600], 644 }, 645 646 { 647 name: "Sell", 648 data: [9150, 9650, 9350, 9750, 9250, 9650], 649 }, 650 ], 651 652 chart: { 653 fontFamily: "Jost, sans-serif", 654 height: 335, 655 type: "area", 656 background: "transparent", 657 toolbar: { 658 show: false, 659 }, 660 }, 661 662 xaxis: { 663 type: "category", 664 categories: [ 665 "3:00 PM", 666 "4:00 PM", 667 "5:00 PM", 668 "6:00 PM", 669 "7:00 PM", 670 "8:00 PM", 671 ], 672 axisBorder: { 673 show: false, 674 }, 675 axisTicks: { 676 show: false, 677 }, 678 crosshairs: { 679 show: false 680 }, 681 }, 682 yaxis: { 683 labels: { 684 offsetX: -10 685 }, 686 title: { 687 style: { 688 fontSize: "0px", 689 }, 690 }, 691 min: 9100, 692 max: 9800, 693 tickAmount: 3, 694 opposite: true, 695 }, 696 colors: ["#00A389", "#FF5B5B"], 697 fill: { 698 colors: ['transparent', 'transparent'], 699 type: ['solid', 'solid'], 700 }, 701 702 legend: { 703 show: true, 704 position: "top", 705 horizontalAlign: "right", 706 fontSize: '16px', 707 fontWeight: 500, 708 }, 709 stroke: { 710 width: [5, 5], 711 curve: "smooth", 712 }, 713 markers: { 714 show: false, 715 }, 716 labels: { 717 show: false, 718 }, 719 dataLabels: { 720 enabled: false, 721 }, 722 723 grid: { 724 show: true, 725 xaxis: { 726 lines: { 727 show: true, 728 }, 729 }, 730 yaxis: { 731 lines: { 732 show: true, 733 }, 734 horizontalAlign: "right", 735 }, 736 column: { 737 opacity: 0.2 738 }, 739 }, 740 741 tooltip: { 742 enabled: true, 743 custom: function({ series, seriesIndex, dataPointIndex, w }) { 744 return '<div class="custom-tooltip">' + 745 '<span class="custom-tooltip__title">' + w.globals.series[seriesIndex][dataPointIndex] + ' Request</span>' + 746 '<span class="custom-tooltip__subtitle"> From ' + w.globals.seriesNames[seriesIndex] + '</span>' + 747 '</div>'; 748 } 749 }, 750 751 responsive: [ 752 { 753 breakpoint: 1024, 754 options: { 755 chart: { 756 height: 300, 757 }, 758 }, 759 }, 760 { 761 breakpoint: 1366, 762 options: { 763 chart: { 764 height: 350, 765 }, 766 }, 767 }, 768 ], 769 770 }; 771 772 // Bitcoin 773 let bitcoinChartContainer = document.querySelector("#bitcoin-chart");
774 let bitcoinChart = bitcoinChartContainer && new ApexCharts(bitcoinChartContainer, bitcoinOptions); 775 bitcoinChart && bitcoinChart.render(); 776 777 // Ethererum 778 let ethererumChartContainer = document.querySelector("#ethererum-chart"); 779 let ethererumChart = ethererumChartContainer && new ApexCharts(ethererumChartContainer, bitcoinOptions); 780 ethererumChart && ethererumChart.render(); 781 782 // Litecoin 783 let litecoinChartContainer = document.querySelector("#litecoin-chart"); 784 let litecoinChart = litecoinChartContainer && new ApexCharts(litecoinChartContainer, bitcoinOptions); 785 litecoinChart && litecoinChart.render(); 786 787 788 // Market Activity Chart 789 let activityOptions = { 790 series: [ 791 { 792 name: "Your Profits", 793 data: [23, 11, 22, 27, 13, 22, 37, 21], 794 }, 795 796 { 797 name: "Buys", 798 data: [30, 25, 36, 30, 45, 35, 64, 52], 799 }, 800 801 { 802 name: "Sells", 803 data: [70, 60, 43, 38, 40, 55, 24, 16], 804 }, 805 ], 806 807 chart: { 808 fontFamily: "Jost, sans-serif", 809 height: 335, 810 type: "area", 811 background: "transparent", 812 toolbar: { 813 show: false, 814 }, 815 }, 816 817 xaxis: { 818 type: "category", 819 categories: [ 820 "Sun", 821 "Mon", 822 "Tue", 823 "Wed", 824 "Thu", 825 "Fri", 826 "Sat", 827 ], 828 axisBorder: { 829 show: false, 830 }, 831 axisTicks: { 832 show: false, 833 }, 834 crosshairs: { 835 show: false 836 }, 837 }, 838 yaxis: { 839 labels: { 840 offsetX: -10 841 }, 842 title: { 843 style: { 844 fontSize: "0px", 845 }, 846 }, 847 min: 0, 848 max: 75, 849 tickAmount: 3, 850 }, 851 colors: ["#AB54DB", "#00A389", "#FF5B5B"], 852 fill: { 853 colors: ['transparent', 'transparent', 'transparent'], 854 type: ['solid', 'solid', 'solid'], 855 }, 856 857 legend: { 858 show: true, 859 position: "top", 860 horizontalAlign: "left", 861 }, 862 stroke: { 863 width: [5, 5, 5], 864 curve: "smooth", 865 }, 866 markers: { 867 show: false, 868 }, 869 labels: { 870 show: false, 871 }, 872 dataLabels: { 873 enabled: false, 874 }, 875 876 grid: { 877 show: true, 878 xaxis: { 879 lines: { 880 show: true, 881 }, 882 }, 883 yaxis: { 884 lines: { 885 show: true, 886 }, 887 }, 888 column: { 889 opacity: 0.2 890 }, 891 }, 892 893 tooltip: { 894 enabled: true, 895 custom: function ({ series, seriesIndex, dataPointIndex, w }) { 896 // Calculate the percentage based on the max value 897 let value = w.globals.series[seriesIndex][dataPointIndex] 898 var maxValue = Math.max(...series[0]); 899 var percentage = ((value / maxValue) * 10).toFixed(0); 900 901 return '<div class="custom-tooltip">' + 902 '<span class="custom-tooltip__title">' + percentage + '%</span>' + 903 '<span class="custom-tooltip__subtitle">' + value + ' Visitors</span>' + 904 '</div>'; 905 }, 906 }, 907 908 responsive: [ 909 { 910 breakpoint: 1024, 911 options: { 912 chart: { 913 height: 300, 914 }, 915 }, 916 }, 917 { 918 breakpoint: 1366, 919 options: { 920 chart: { 921 height: 350, 922 }, 923 }, 924 }, 925 ], 926 927 }; 928 929 let activityChartContainer = document.querySelector("#market-activity-chart"); 930 let activityChart = activityChartContainer && new ApexCharts(activityChartContainer, activityOptions); 931 activityChart && activityChart.render(); 932 933 // Bar Chart 934 let barOptions = { 935 series: [{ 936 data: [40, 31, 40, 10, 40, 36, 32] 937 }], 938 chart: { 939 height: 250, 940 type: 'bar', 941 toolbar: { 942 show: false, 943 }, 944 }, 945 colors: ["#AB54DB26"], 946 plotOptions: { 947 bar: { 948 columnWidth: 50, 949 borderRadius: 12, 950 } 951 }, 952 dataLabels: { 953 enabled: false, 954 }, 955 956 xaxis: { 957 categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 958 position: 'bottom', 959 axisBorder: { 960 show: false 961 }, 962 axisTicks: { 963 show: false 964 }, 965 crosshairs: { 966 show: false, 967 }, 968 tooltip: { 969 enabled: false, 970 } 971 }, 972 yaxis: { 973 axisBorder: { 974 show: false 975 }, 976 axisTicks: { 977 show: false, 978 }, 979 labels: { 980 show: false, 981 }, 982 }, 983 984 grid: { 985 show: false, 986 padding: { left: -20, right: -20, top: 0, bottom: 0 }, 987 }, 988 989 tooltip: { 990 enabled: true, 991 992 custom: function ({ series, seriesIndex, dataPointIndex, w }) { 993 // Calculate the percentage based on the max value 994 let value = w.globals.series[seriesIndex][dataPointIndex] 995 var maxValue = Math.max(...series[0]); 996 var percentage = ((value / maxValue) * 10).toFixed(0); 997 998 return '<div class="custom-tooltip">' + 999 '<span class="custom-tooltip__title">' + percentage + '%</span>' + 1000 '<span class="custom-tooltip__subtitle">' + value + ' Visitors</span>' + 1001 '</div>'; 1002 }, 1003 }, 1004 1005 }; 1006 1007 let barChartContainer = document.querySelector("#column-chart"); 1008 let barChart = barChartContainer && new ApexCharts(barChartContainer, barOptions); 1009 barChart && barChart.render(); 1010 1011 // Pie Chart 1012 let pieOptions = {
1013 series: [0, 0, 200], 1014 labels: ['Free Minutes Used', 'Additional Minutes', 'Remaining Free Minutes'], 1015 colors: ["#AB54DB", "#EF9A91", "#7620e3"], 1016 plotOptions: { 1017 pie: { 1018 expandOnClick: false, 1019 startAngle: 0, 1020 dataLabels: { 1021 enabled: false, 1022 }, 1023 customScale: 1, // Adjust this value to control the series border radius 1024 }, 1025 stroke: { 1026 width: 25, // Width of the stroke 1027 colors: ['transparent'], // Color of the stroke (use 'transparent' to make it invisible) 1028 }, 1029 }, 1030 chart: { 1031 height: '350px', 1032 type: 'donut', 1033 }, 1034 responsive: [{ 1035 breakpoint: 576, 1036 options: { 1037 chart: { 1038 height: '550px' 1039 } 1040 }, 1041 }], 1042 legend: { 1043 show: true, 1044 position: "bottom", 1045 horizontalAlign: 'left', 1046 fontSize: '14px', 1047 fontWeight: 500, 1048 formatter: function (seriesName, opts) { 1049 let data = opts.w.globals.seriesTotals[opts.seriesIndex]; 1050 return seriesName + ": " + data; 1051 // return `<div class="custom-legend-item">${seriesName} <span> ${data} </span></div>`; 1052 }, 1053 }, 1054 responsive: [{ 1055 breakpoint: 480, 1056 options: { 1057 chart: { 1058 width: 200 1059 }, 1060 legend: { 1061 position: 'bottom' 1062 } 1063 } 1064 }] 1065 }; 1066 1067 let pieChartContainer = document.querySelector("#pie-chart"); 1068 let pieChart = pieChartContainer && new ApexCharts(pieChartContainer, pieOptions); 1069 pieChart && pieChart.render(); 1070 1071 1072 // Summary Chart 1073 let summaryOptions = { 1074 series: [30, 34, 6, 30], 1075 labels: ['Ethereum', 'Litecoin', 'Ripple', 'Bitcoin'], 1076 colors: ["#00ADA3", "#374C98", "#23292F", "#FFBB54"], 1077 plotOptions: { 1078 pie: { 1079 expandOnClick: false, 1080 startAngle: 0, 1081 dataLabels: { 1082 enabled: false, 1083 }, 1084 customScale: 1, // Adjust this value to control the series border radius 1085 }, 1086 stroke: { 1087 width: 25, // Width of the stroke 1088 colors: ['transparent'], // Color of the stroke (use 'transparent' to make it invisible) 1089 }, 1090 }, 1091 chart: { 1092 height: '350px', 1093 type: 'donut', 1094 }, 1095 responsive: [{ 1096 breakpoint: 576, 1097 options: { 1098 chart: { 1099 height: '550px' 1100 } 1101 }, 1102 }], 1103 legend: { 1104 show: true, 1105 position: "bottom", 1106 fontSize: '14px', 1107 fontWeight: 500, 1108 formatter: function (seriesName, opts) { 1109 let data = opts.w.globals.seriesTotals[opts.seriesIndex]; 1110 return seriesName + ": " + data; 1111 // return `<div class="custom-legend-item">${seriesName} <span> ${data} </span></div>`; 1112 }, 1113 }, 1114 responsive: [{ 1115 breakpoint: 480, 1116 options: { 1117 chart: { 1118 width: 200 1119 }, 1120 legend: { 1121 position: 'bottom' 1122 } 1123 } 1124 }] 1125 }; 1126 1127 let summaryChartContainer = document.querySelector("#summary-chart"); 1128 let summaryChart = summaryChartContainer && new ApexCharts(summaryChartContainer, summaryOptions); 1129 summaryChart && summaryChart.render(); 1130 1131 // Stack Chart 1132 let stackOptions = { 1133 chart: { 1134 type: 'bar', 1135 height: 350, 1136 stacked: true, 1137 toolbar: { 1138 show: false, 1139 }, 1140 }, 1141 series: [ 1142 { 1143 name: 'PRODUCT A', 1144 data: [2, 5, 1, 7, 2, 4, 1, 4], 1145 dataLabels: false, 1146 }, 1147 { 1148 name: 'PRODUCT B', 1149 data: [1, 3, 2, 8, 3, 7, 3, 2], 1150 dataLabels: false, 1151 }, 1152 { 1153 name: 'PRODUCT C', 1154 data: [1, 7, 5, 3, 2, 4, 5, 3], 1155 dataLabels: false, 1156 } 1157 ], 1158 xaxis: { 1159 type: "category", 1160 categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 1161 axisBorder: { 1162 show: false, 1163 }, 1164 axisTicks: { 1165 show: false, 1166 }, 1167 crosshairs: { 1168 show: false 1169 }, 1170 }, 1171 yaxis: { 1172 opposite: true, 1173 labels: { 1174 show: true, 1175 formatter: function (val) { 1176 return val + " AM"; 1177 }, 1178 offsetX: -17, 1179 }, 1180 min: 0, 1181 max: 10, 1182 tickAmount: 5, 1183 }, 1184 legend: { 1185 show: false, 1186 }, 1187 grid: { 1188 show: false, 1189 padding: { 1190 left: -10, 1191 right: 0 1192 }, 1193 }, 1194 tooltip: { 1195 enabled: false, 1196 }, 1197 dataLabels: { 1198 enabled: false, 1199 }, 1200 plotOptions: { 1201 bar: { 1202 columnWidth: 18, 1203 borderRadius: 0 1204 } 1205 } 1206 }; 1207 1208 let stackChartContainer = document.querySelector("#stack-chart"); 1209 let stackChart = stackChartContainer && new ApexCharts(stackChartContainer, stackOptions); 1210 stackChart && stackChart.render(); 1211 1212 // Income Chart 1213 let incomeOptions = { 1214 series: [{ 1215 data: [40, 32, 45, 65, 23, 54, 23] 1216 }], 1217 1218 chart: { 1219 height: 350, 1220 type: 'bar', 1221 toolbar: { 1222 show: false, 1223 } 1224 }, 1225 1226 colors: ["#1BD5FE"], 1227 1228 fill: { 1229 type: "gradient", 1230 gradient: { 1231 type: "vertical", 1232 shadeIntensity: 1, 1233 opacityFrom: 1, 1234 opacityTo: 1, 1235 stops: [0, 100], 1236 gradientToColors: ["#216BDB"] 1237 } 1238 }, 1239 1240 plotOptions: { 1241 bar: { 1242 columnWidth: 50, 1243 borderRadius: 12, 1244 } 1245 }, 1246 1247 dataLabels: { 1248 enabled: false, 1249 }, 1250 1251 xaxis: { 1252 categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 1253 position: 'bottom', 1254 axisBorder: { 1255 show: false, 1256 }, 1257 axisTicks: { 1258 show: false, 1259 }, 1260 crosshairs: { 1261 show: false, 1262 }, 1263 tooltip: { 1264 enabled: false, 1265 } 1266 }, 1267 1268 yaxis: { 1269 labels: { 1270 show: true, 1271 offsetX: 0 1272 }, 1273 min: 0, // Set the min and max as actual category values. 1274 max: 70, 1275 tickAmount: 3, 1276 }, 1277 1278 grid: { 1279 show: true, 1280 padding: { left: 0, right: 0, top: 0, bottom: 0 }, 1281 }, 1282 1283 tooltip: { 1284 enabled: true, 1285 custom: function ({ series, seriesIndex, dataPointIndex, w }) { 1286 // Calculate the percentage based on the max value 1287 let value = w.globals.series[seriesIndex][dataPointIndex] 1288 var maxValue = Math.max(...series[0]); 1289 var percentage = ((value / maxValue) * 10).toFixed(0); 1290 1291 // Get the mouse position from the global variable or state 1292 var mouseX = window.mouseX || 0; 1293 var mouseY = window.mouseY || 0; 1294 1295 // Calculate the position of the tooltip above the bar 1296 var tooltipX = mouseX - 50; 1297 var tooltipY = mouseY - 30; // Adjust the offset as needed 1298 1299 return '<div class="custom-tooltip" style="left:' + tooltipX + 'px;
1299 top:' + tooltipY + 'px;">' + 1300 '<span class="custom-tooltip__title">$' + percentage + '</span>' + 1301 '<span class="custom-tooltip__subtitle">' + value + ' Visitors</span>' + 1302 '</div>'; 1303 }, 1304 }, 1305 }; 1306 1307 let incomeChartContainer = document.querySelector("#income-chart"); 1308 let incomeChart = incomeChartContainer && new ApexCharts(incomeChartContainer, incomeOptions); 1309 incomeChart && incomeChart.render(); 1310 1311 // Expense Chart 1312 let expenseOptions = { 1313 series: [{ 1314 data: [40, 32, 45, 65, 23, 54, 23] 1315 }], 1316 1317 chart: { 1318 height: 350, 1319 type: 'bar', 1320 toolbar: { 1321 show: false, 1322 }, 1323 }, 1324 1325 colors: ["#FFBB54"], 1326 1327 fill: { 1328 type: "gradient", 1329 gradient: { 1330 type: "vertical", 1331 shadeIntensity: 1, 1332 opacityFrom: 1, 1333 opacityTo: 1, 1334 stops: [0, 100], 1335 gradientToColors: ["#FF3300"] 1336 } 1337 }, 1338 1339 plotOptions: { 1340 bar: { 1341 columnWidth: 50, 1342 borderRadius: 12, 1343 } 1344 }, 1345 1346 dataLabels: { 1347 enabled: false, 1348 }, 1349 1350 xaxis: { 1351 categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 1352 position: 'bottom', 1353 axisBorder: { 1354 show: false, 1355 }, 1356 axisTicks: { 1357 show: false, 1358 }, 1359 crosshairs: { 1360 show: false, 1361 }, 1362 tooltip: { 1363 enabled: false, 1364 } 1365 }, 1366 1367 yaxis: { 1368 labels: { 1369 show: true, 1370 offsetX: 0 1371 }, 1372 min: 0, // Set the min and max as actual category values. 1373 max: 70, 1374 tickAmount: 3, 1375 }, 1376 1377 grid: { 1378 show: true, 1379 padding: { left: 0, right: 0, top: 0, bottom: 0 }, 1380 }, 1381 1382 tooltip: { 1383 enabled: true, 1384 custom: function ({ series, seriesIndex, dataPointIndex, w }) { 1385 // Calculate the percentage based on the max value 1386 let value = w.globals.series[seriesIndex][dataPointIndex] 1387 var maxValue = Math.max(...series[0]); 1388 var percentage = ((value / maxValue) * 10).toFixed(0); 1389 1390 // Get the mouse position from the global variable or state 1391 var mouseX = window.mouseX || 0; 1392 var mouseY = window.mouseY || 0; 1393 1394 // Calculate the position of the tooltip above the bar 1395 var tooltipX = mouseX - 50; 1396 var tooltipY = mouseY - 30; // Adjust the offset as needed 1397 1398 return '<div class="custom-tooltip" style="left:' + tooltipX + 'px; top:' + tooltipY + 'px;">' + 1399 '<span class="custom-tooltip__title">$' + percentage + '</span>' + 1400 '<span class="custom-tooltip__subtitle">' + value + ' Visitors</span>' + 1401 '</div>'; 1402 }, 1403 }, 1404 }; 1405 1406 let expenseChartContainer = document.querySelector("#expense-chart"); 1407 let expenseChart = expenseChartContainer && new ApexCharts(expenseChartContainer, expenseOptions); 1408 expenseChart && expenseChart.render(); 1409 1410 1411 1412 if($("#chart-5").length){ 1413 var options = { 1414 series: [80], 1415 chart: { 1416 height: 120, 1417 type: "radialBar", 1418 }, 1419 plotOptions: { 1420 show: false, 1421 radialBar: { 1422 show: false, 1423 dataLabels: { 1424 show: false, 1425 } 1426 } 1427 }, 1428 stroke: { 1429 width: 1, // Width of the stroke 1430 colors: ['transparent'], // Color of the stroke (use 'transparent' to make it invisible) 1431 }, 1432 fill: { 1433 type: 'gradient', 1434 gradient: { 1435 shade: 'dark', 1436 type: 'horizontal', 1437 shadeIntensity: 1, 1438 gradientToColors: ['#0061FF'], 1439 inverseColors: true, 1440 opacityFrom: 1, 1441 opacityTo: .5, 1442 stops: [0, 100] 1443 } 1444 }, 1445 labels: ["Median Ratio"] 1446 }; 1447 var chart = new ApexCharts(document.querySelector("#chart-5"), options); 1448 chart.render(); 1449 }; 1450 1451 1452 if($("#chart-6").length){ 1453 var optionsTwo = { 1454 series: [50], 1455 chart: { 1456 height: 120, 1457 type: "radialBar", 1458 }, 1459 plotOptions: { 1460 show: false, 1461 radialBar: { 1462 show: false, 1463 dataLabels: { 1464 show: false, 1465 } 1466 } 1467 }, 1468 stroke: { 1469 width: 1, // Width of the stroke 1470 colors: ['transparent'], // Color of the stroke (use 'transparent' to make it invisible) 1471 }, 1472 fill: { 1473 type: 'gradient', 1474 gradient: { 1475 shade: '#34A853', 1476 type: 'horizontal', 1477 shadeIntensity: 1, 1478 gradientToColors: ['#34A853'], 1479 inverseColors: true, 1480 opacityFrom: 1, 1481 opacityTo: 1, 1482 stops: [0, 100] 1483 } 1484 }, 1485 labels: ["Median Ratio"] 1486 }; 1487 var chart = new ApexCharts(document.querySelector("#chart-6"), optionsTwo); 1488 chart.render(); 1489 }; 1490
1491 if($("#chart-7").length){ 1492 var optionsThree = { 1493 series: [70], 1494 chart: { 1495 height: 120, 1496 type: "radialBar", 1497 }, 1498 plotOptions: { 1499 show: false, 1500 radialBar: { 1501 show: false, 1502 dataLabels: { 1503 show: false, 1504 } 1505 } 1506 }, 1507 stroke: { 1508 width: 1, // Width of the stroke 1509 colors: ['transparent'], // Color of the stroke (use 'transparent' to make it invisible) 1510 }, 1511 fill: { 1512 type: 'gradient', 1513 gradient: { 1514 shade: '#0364B8', 1515 type: 'horizontal', 1516 shadeIntensity: 1, 1517 gradientToColors: ['#0364B8'], 1518 inverseColors: true, 1519 opacityFrom: 1, 1520 opacityTo: 1, 1521 stops: [0, 100] 1522 } 1523 }, 1524 labels: ["Median Ratio"] 1525 }; 1526 1527 var chart = new ApexCharts(document.querySelector("#chart-7"), optionsThree); 1528 chart.render(); 1529 }; 1530 1531 if($("#chart-8").length){ 1532 var optionsFour = { 1533 series: [30], 1534 chart: { 1535 height: 120, 1536 type: "radialBar", 1537 }, 1538 plotOptions: { 1539 show: false, 1540 radialBar: { 1541 show: false, 1542 dataLabels: { 1543 show: false, 1544 } 1545 } 1546 }, 1547 stroke: { 1548 width: 1, // Width of the stroke 1549 colors: ['transparent'], // Color of the stroke (use 'transparent' to make it invisible) 1550 }, 1551 fill: { 1552 type: 'gradient', 1553 gradient: { 1554 shade: '#8AD2F7', 1555 type: 'horizontal', 1556 shadeIntensity: 1, 1557 gradientToColors: ['#8AD2F7'], 1558 inverseColors: true, 1559 opacityFrom: 1, 1560 opacityTo: .5, 1561 stops: [0, 100] 1562 } 1563 }, 1564 labels: ["Median Ratio"] 1565 }; 1566 1567 var chart = new ApexCharts(document.querySelector("#chart-8"), optionsFour); 1568 chart.render(); 1569 }; 1570 1571 1572 // Kanban Board JS 1573 $(document).ready(function(){ 1574 var drake = dragula([document.querySelector('#one'), document.querySelector('#two'), document.querySelector('#three'), document.querySelector('#four'), document.querySelector('#five'), document.querySelector('#won')]); 1575 1576 drake.on('drag', function(el){ 1577 el.classList.add('gu-transit'); 1578 }); 1579 1580 drake.on('drop', function(el){ 1581 el.classList.remove('gu-transit'); 1582 }); 1583 }); 1584 1585 1586 1587})(jQuery);
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.