1(function (jQuery) { 2 "use strict"; 3 4//chart-1 5if(document.querySelectorAll('#chart-1').length){ 6 const options = { 7 chart: { 8 height: 80, 9 type: 'area', 10 sparkline: { 11 enabled: true 12 }, 13 group: 'sparklines', 14 15 }, 16 dataLabels: { 17 enabled: false 18 }, 19 stroke: { 20 width: 3, 21 curve: 'smooth' 22 }, 23 fill: { 24 type: 'gradient', 25 gradient: { 26 shadeIntensity: 1, 27 opacityFrom: 0.5, 28 opacityTo: 0, 29 } 30 }, 31 32 series: [{ 33 name: 'series1', 34 data: [60, 15, 50, 30, 70] 35 }, ], 36 colors: ['#344ed1'], 37 38 xaxis: { 39 type: 'datetime', 40 categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"], 41 }, 42 tooltip: { 43 x: { 44 format: 'dd/MM/yy HH:mm' 45 }, 46 } 47 }; 48 const chart = new ApexCharts( 49 document.querySelector("#chart-1"), 50 options 51 ); 52 chart.render(); 53 document.addEventListener('ColorChange', (e) => { 54 const newOpt = { 55 colors: [e.detail.detail1], 56 fill: { 57 type: 'gradient', 58 gradient: { 59 type: "vertical", 60 inverseColors: true, 61 gradientToColors: [e.detail.detail1], 62 opacityFrom: 0.5, 63 opacityTo: 0, 64 stops: [0, 50, 60], 65 colors: [e.detail.detail1], 66 } 67 },} 68 chart.updateOptions(newOpt) 69 }) 70} 71 72//chart-2 73if(document.querySelectorAll('#chart-2').length){ 74 const options = { 75 chart: { 76 height: 80, 77 type: 'area', 78 sparkline: { 79 enabled: true 80 }, 81 group: 'sparklines', 82 83 }, 84 dataLabels: { 85 enabled: false 86 }, 87 stroke: { 88 width: 3, 89 curve: 'smooth' 90 }, 91 fill: { 92 type: 'gradient', 93 gradient: { 94 shadeIntensity: 1, 95 opacityFrom: 0.5, 96 opacityTo: 0, 97 } 98 }, 99 series: [{ 100 name: 'series1', 101 data: [70, 40, 60, 30, 60] 102 }, ], 103 colors: ['#d48918'], 104 105 xaxis: { 106 type: 'datetime', 107 categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"], 108 }, 109 tooltip: { 110 x: { 111 format: 'dd/MM/yy HH:mm' 112 }, 113 } 114 }; 115 const chart = new ApexCharts( 116 document.querySelector("#chart-2"), 117 options 118 ); 119 120 chart.render(); 121} 122 123/*--------------Widget Chart 3----------------*/ 124if(document.querySelectorAll('#chart-3').length){ 125 const options = { 126 chart: { 127 height: 80, 128 type: 'area', 129 sparkline: { 130 enabled: true 131 }, 132 group: 'sparklines', 133 134 }, 135 dataLabels: { 136 enabled: false 137 }, 138 stroke: { 139 width: 3, 140 curve: 'smooth' 141 }, 142 fill: { 143 type: 'gradient', 144 gradient: { 145 shadeIntensity: 1, 146 opacityFrom: 0.5, 147 opacityTo: 0, 148 } 149 }, 150 series: [{ 151 name: 'series1', 152 data: [60, 40, 60, 40, 70] 153 }, ], 154 colors: ['#07750b'], 155 156 xaxis: { 157 type: 'datetime', 158 categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"], 159 }, 160 tooltip: { 161 x: { 162 format: 'dd/MM/yy HH:mm' 163 }, 164 } 165 }; 166 const chart = new ApexCharts( 167 document.querySelector("#chart-3"), 168 options 169 ); 170 chart.render(); 171} 172 173/*--------------Widget Chart 4----------------*/ 174if(document.querySelectorAll('#chart-4').length){ 175 const options = { 176 chart: { 177 height: 80, 178 type: 'area', 179 sparkline: { 180 enabled: true 181 }, 182 group: 'sparklines', 183 184 }, 185 dataLabels: { 186 enabled: false 187 }, 188 stroke: { 189 width: 3, 190 curve: 'smooth' 191 }, 192 fill: { 193 type: 'gradient', 194 gradient: { 195 shadeIntensity: 1, 196 opacityFrom: 0.5, 197 opacityTo: 0, 198 } 199 }, 200 series: [{ 201 name: 'series1', 202 data: [75, 30, 60, 35, 60] 203 }, ], 204 colors: ['#b91d12'], 205 206 xaxis: { 207 type: 'datetime', 208 categories: ["2018-08-19T00:00:00", "2018-09-19T01:30:00", "2018-10-19T02:30:00", "2018-11-19T01:30:00", "2018-12-19T01:30:00"], 209 }, 210 tooltip: { 211 x: { 212 format: 'dd/MM/yy HH:mm' 213 }, 214 } 215 }; 216 const chart = new ApexCharts(
217 document.querySelector("#chart-4"), 218 options 219 ); 220 chart.render(); 221} 222 223/*--------------Widget Box----------------*/ 224 225if(document.querySelectorAll('#iq-chart-box1').length){ 226 var options = { 227 series: [{ 228 name: "Desktops", 229 data: [10, 10, 35, 10] 230 }], 231 chart: { 232 height: 60, 233 width: 100, 234 type: 'line', 235 zoom: { 236 enabled: false 237 }, 238 sparkline: { 239 enabled: true, 240 } 241 }, 242 dataLabels: { 243 enabled: false 244 }, 245 stroke: { 246 curve: 'straight' 247 }, 248 xaxis: { 249 categories: ['Jan', 'Feb', 'Mar', 'Apr'], 250 } 251 }; 252 const chart = new ApexCharts(document.querySelector("#iq-chart-box1"), options); 253 chart.render(); 254} 255//box-chart-2 256if(jQuery('#iq-chart-box2').length){ 257 var options = { 258 series: [{ 259 name: "Desktops", 260 data: [10, 10, 35, 10] 261 }], 262 chart: { 263 height: 60, 264 width: 100, 265 type: 'line', 266 zoom: { 267 enabled: false 268 }, 269 sparkline: { 270 enabled: true, 271 } 272 }, 273 colors:['#ad2d1e'], 274 dataLabels: { 275 enabled: false 276 }, 277 stroke: { 278 curve: 'straight' 279 }, 280 xaxis: { 281 categories: ['Jan', 'Feb', 'Mar', 'Apr'], 282 } 283 }; 284 285 var chart = new ApexCharts(document.querySelector("#iq-chart-box2"), options); 286 chart.render(); 287const body = document.querySelector('body') 288if (body.classList.contains('dark')) { 289 apexChartUpdate(chart, { 290 dark: true 291 }) 292} 293 294document.addEventListener('ChangeColorMode', function (e) { 295 apexChartUpdate(chart, e.detail) 296}) 297} 298//box-chart-3 299if(document.querySelectorAll('#iq-chart-box3').length){ 300 var options = { 301 series: [{ 302 name: "Desktops", 303 data: [10, 10, 35, 10] 304 }], 305 chart: { 306 height: 60, 307 width: 100, 308 type: 'line', 309 zoom: { 310 enabled: false 311 }, 312 sparkline: { 313 enabled: true, 314 } 315 }, 316 colors:['#17904b'], 317 dataLabels: { 318 enabled: false 319 }, 320 stroke: { 321 curve: 'straight' 322 }, 323 xaxis: { 324 categories: ['Jan', 'Feb', 'Mar', 'Apr'], 325 } 326 }; 327 328 const chart = new ApexCharts(document.querySelector("#iq-chart-box3"), options); 329 chart.render(); 330} 331//box-chart-4 332if(document.querySelectorAll('#iq-chart-box4').length){ 333 var options = { 334 series: [{ 335 name: "Desktops", 336 data: [10, 10, 35, 10] 337 }], 338 chart: { 339 height: 60, 340 width: 100, 341 type: 'line', 342 zoom: { 343 enabled: false 344 }, 345 sparkline: { 346 enabled: true, 347 } 348 }, 349 colors:['#d95f18'], 350 dataLabels: { 351 enabled: false 352 }, 353 stroke: { 354 curve: 'straight' 355 }, 356 xaxis: { 357 categories: ['Jan', 'Feb', 'Mar', 'Apr'], 358 } 359 }; 360 361 const chart = new ApexCharts(document.querySelector("#iq-chart-box4"), options); 362 chart.render(); 363 364} 365 366 367//extra-widget 368 369if($('#chart').length) { 370 const options = { 371 series: [{ 372 name: 'Net Profit', 373 data: [44, 55, 57, 56, 61, 58,35,50,56] 374 }, { 375 name: 'Revenue', 376 data: [76, 85, 101, 98, 87, 105,98,100,90] 377 }, ], 378 chart: { 379 type: 'bar', 380 height: 270, 381 width:700, 382 sparkline:{ 383 enabled:true 384 } 385 }, 386 plotOptions: { 387 bar: { 388 horizontal: false, 389 columnWidth: '55%', 390 endingShape: 'rounded', 391 borderRadius: 10, 392 393 }, 394 }, 395 dataLabels: { 396 enabled: false 397 }, 398 stroke: { 399 show: true, 400 curve: 'smooth', 401 width: 2, 402 colors: ['transparent'] 403 404 }, 405 xaxis: { 406 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], 407 }, 408 yaxis: { 409 title: { 410 text: '$ (thousands)' 411 } 412 }, 413 fill: { 414 opacity: 1, 415 colors: ['#fce3d2', '#d48918',] 416 }, 417 tooltip: { 418 y: { 419 formatter: function (val) { 420 return "$ " + val + " thousands" 421 } 422 } 423 }, 424 responsive: [ 425 { 426 breakpoint: 1000, 427 options: { 428 chart: { 429 width:250, 430 }, 431 } 432 } 433 ] 434 }; 435 const chart = new ApexCharts(document.querySelector("#chart"), options); 436 chart.render(); 437} 438//chart 2 439if($('#extrachart').length) { 440 const options = { 441 series: [{ 442 name: 'Net Profit', 443 data: [44, 55, 57, 56, 61, 58] 444 }, { 445 name: 'Revenue', 446 data: [76, 85, 101, 98, 87, 105] 447 }, { 448 name: 'Free Cash Flow', 449 data: [35, 41, 36, 26, 45, 48] 450 }], 451 chart: { 452 type: 'bar', 453 height: 250, 454 sparkline:{ 455 enabled:true 456 } 457 }, 458 plotOptions: { 459 bar: { 460 horizontal: false, 461 columnWidth: '55%', 462 borderRadius: 5, 463 }, 464 }, 465 dataLabels: { 466 enabled: false 467 }, 468 stroke: { 469 show: true, 470 width: 2, 471 curve: 'smooth', 472 colors: ['transparent'] 473 }, 474 xaxis: { 475 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], 476 }, 477 yaxis: { 478 title: { 479 text: '$ (thousands)' 480 } 481 }, 482 fill: { 483 opacity: 1, 484 colors:['#344ed1', '#b91d12', '#d48918'] 485 }, 486 tooltip: { 487 y: { 488 formatter: function (val) { 489 return "$ " + val + " thousands" 490 } 491 } 492 } 493 }; 494 const chart = new ApexCharts(document.querySelector("#extrachart"), options); 495 chart.render(); 496} 497/*-------------- Service Chart ----------------*/ 498if (document.querySelectorAll("#service-chart-01").length) { 499 const options = { 500 series: [{ 501 name: 'series1', 502 data: [25, 30, 22, 29] 503 }], 504 colors: ["#344ed1"], 505 chart: { 506 height: 65, 507 width: 140, 508 type: 'area', 509 sparkline: { 510 enabled: true, 511 } 512 }, 513 dataLabels: { 514 enabled: false 515 }, 516 stroke: { 517 curve: 'smooth' 518 }, 519 xaxis: { 520 type: 'datetime', 521 categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z"] 522 }, 523 tooltip: { 524 enabled: false, 525 }, 526 }; 527 528 const chart = new ApexCharts(document.querySelector("#service-chart-01"), options); 529 chart.render(); 530 document.addEventListener('ColorChange', (e) => { 531 const newOpt = { 532 colors: [e.detail.detail1], 533 fill: { 534 type: 'gradient', 535 gradient: { 536 type: "vertical", 537 inverseColors: true, 538 colors: [e.detail.detail1], 539 } 540 },} 541 chart.updateOptions(newOpt) 542 }); 543const body = document.querySelector('body') 544if (body.classList.contains('dark')) { 545 apexChartUpdate(chart, { 546 dark: true 547 }) 548} 549 550document.addEventListener('ChangeColorMode', function (e) { 551 apexChartUpdate(chart, e.detail) 552}) 553} 554if (document.querySelectorAll("#service-chart-02").length) { 555 const options = { 556 series: [{ 557 name: 'series1', 558 data: [25, 23, 28, 26] 559 }], 560 colors: ["#b91d12"], 561 chart: { 562 height: 65, 563 width: 140, 564 type: 'area', 565 sparkline: { 566 enabled: true, 567 } 568 }, 569 dataLabels: { 570 enabled: false 571 }, 572 stroke: { 573 curve: 'smooth' 574 }, 575 xaxis: { 576 type: 'datetime', 577 categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z"] 578 }, 579 tooltip: { 580 enabled: false, 581 }, 582 }; 583 584 const chart = new ApexCharts(document.querySelector("#service-chart-02"), options); 585 chart.render(); 586const body = document.querySelector('body') 587if (body.classList.contains('dark')) { 588 apexChartUpdate(chart, { 589 dark: true 590 }) 591} 592 593document.addEventListener('ChangeColorMode', function (e) { 594 apexChartUpdate(chart, e.detail) 595}) 596} 597if (document.querySelectorAll("#service-chart-03").length) { 598 const options = { 599 series: [{ 600 name: 'series1', 601 data: [25, 23, 28, 23] 602 }], 603 colors: ["#d48918"], 604 chart: { 605 height: 65, 606 width: 140, 607 type: 'area', 608 sparkline: { 609 enabled: true, 610 } 611 }, 612 dataLabels: { 613 enabled: false 614 }, 615 stroke: { 616 curve: 'smooth' 617 }, 618 xaxis: { 619 type: 'datetime', 620 categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z"] 621 }, 622 tooltip: { 623 enabled: false, 624 }, 625 }; 626 627 const chart = new ApexCharts(document.querySelector("#service-chart-03"), options); 628 chart.render(); 629const body = document.querySelector('body') 630if (body.classList.contains('dark')) { 631 apexChartUpdate(chart, { 632 dark: true 633 }) 634} 635 636document.addEventListener('ChangeColorMode', function (e) { 637 apexChartUpdate(chart, e.detail) 638}) 639} 640if (document.querySelectorAll("#service-chart-04").length) { 641 const options = { 642 series: [{ 643 name: 'series1', 644 data: [25, 27, 24, 26] 645 }], 646 colors: ["#07750b"], 647 chart: { 648 height: 65, 649 width: 140, 650 type: 'area', 651 sparkline: { 652 enabled: true, 653 } 654 }, 655 dataLabels: { 656 enabled: false 657 }, 658 stroke: { 659 curve: 'smooth' 660 }, 661 xaxis: { 662 type: 'datetime', 663 categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z"] 664 }, 665 tooltip: { 666 enabled: false, 667 }, 668 }; 669 670 const chart = new ApexCharts(document.querySelector("#service-chart-04"), options); 671 chart.render(); 672const body = document.querySelector('body') 673if (body.classList.contains('dark')) { 674 apexChartUpdate(chart, { 675 dark: true 676 }) 677} 678 679document.addEventListener('ChangeColorMode', function (e) { 680 apexChartUpdate(chart, e.detail) 681}) 682} 683 684/*-------------- Ethernet Chart ----------------*/ 685if (document.querySelectorAll("#ethernet-chart-01").length) { 686 const options = { 687 series: [{ 688 name: "Desktops", 689 data: [5, 30, 6, 20, 5, 18, 10] 690 }], 691 colors: ["#3a57e8"],
692 chart: { 693 height: 60, 694 sparkline: { 695 enabled: true 696 }, 697 type: 'line', 698 zoom: { 699 enabled: false 700 }, 701 toolbar: { 702 show: false 703 }, 704 }, 705 dataLabels: { 706 enabled: false 707 }, 708 stroke: { 709 curve: 'smooth', 710 width: 3 711 }, 712 legend: { 713 show: false 714 }, 715 grid: { 716 show:false, 717 }, 718 xaxis: { 719 labels: { 720 show: false, 721 }, 722 723 }, 724 yaxis: { 725 labels: { 726 show: false, 727 }, 728 } 729 }; 730 var chart = new ApexCharts(document.querySelector("#ethernet-chart-01"), options); 731 chart.render(); 732 document.addEventListener('ColorChange', (e) => { 733 const newOpt = { 734 colors: [e.detail.detail1], 735 } 736 chart.updateOptions(newOpt) 737 }) 738} 739if (document.querySelectorAll("#ethernet-chart-02").length) { 740 const options = { 741 series: [{ 742 name: "Desktops", 743 data: [5, 30, 6, 20, 5, 18, 10] 744 }], 745 colors: ["#17904b"], 746 chart: { 747 height: 60, 748 sparkline: { 749 enabled: true 750 }, 751 type: 'line', 752 zoom: { 753 enabled: false 754 }, 755 toolbar: { 756 show: false 757 }, 758 }, 759 dataLabels: { 760 enabled: false 761 }, 762 stroke: { 763 curve: 'smooth', 764 width: 3 765 }, 766 legend: { 767 show: false 768 }, 769 grid: { 770 show:false, 771 }, 772 xaxis: { 773 labels: { 774 show: false, 775 }, 776 777 }, 778 yaxis: { 779 labels: { 780 show: false, 781 }, 782 } 783 }; 784 var chart = new ApexCharts(document.querySelector("#ethernet-chart-02"), options); 785 chart.render(); 786 document.addEventListener('ColorChange', (e) => { 787 const newOpt = { 788 colors: [e.detail.detail2], 789 } 790 chart.updateOptions(newOpt) 791 }) 792} 793if (document.querySelectorAll("#ethernet-chart-03").length) { 794 const options = { 795 series: [{ 796 name: "Desktops", 797 data: [5, 30, 6, 20, 5, 18, 10] 798 }], 799 colors: ["#ad2d1e"], 800 chart: { 801 height: 60, 802 sparkline: { 803 enabled: true 804 }, 805 type: 'line', 806 zoom: { 807 enabled: false 808 }, 809 toolbar: { 810 show: false 811 }, 812 }, 813 dataLabels: { 814 enabled: false 815 }, 816 stroke: { 817 curve: 'smooth', 818 width: 3 819 }, 820 legend: { 821 show: false 822 }, 823 grid: { 824 show:false, 825 }, 826 xaxis: { 827 labels: { 828 show: false, 829 }, 830 831 }, 832 yaxis: { 833 labels: { 834 show: false, 835 }, 836 } 837 }; 838 var chart = new ApexCharts(document.querySelector("#ethernet-chart-03"), options); 839 chart.render(); 840 document.addEventListener('ColorChange', (e) => { 841 const newOpt = { 842 colors: [e.detail.detail1], 843 } 844 chart.updateOptions(newOpt) 845 }) 846} 847if (document.querySelectorAll("#ethernet-chart-04").length) { 848 const options = { 849 series: [{ 850 name: "Desktops", 851 data: [5, 30, 6, 20, 5, 18, 10] 852 }], 853 colors: ["#d95f18"], 854 chart: { 855 height: 60, 856 sparkline: { 857 enabled: true 858 }, 859 type: 'line', 860 zoom: { 861 enabled: false 862 }, 863 toolbar: { 864 show: false 865 }, 866 }, 867 dataLabels: { 868 enabled: false 869 }, 870 stroke: { 871 curve: 'smooth', 872 width: 3 873 }, 874 legend: { 875 show: false 876 }, 877 grid: { 878 show:false, 879 }, 880 xaxis: { 881 labels: { 882 show: false, 883 }, 884 885 }, 886 yaxis: { 887 labels: { 888 show: false, 889 }, 890 } 891 }; 892 var chart = new ApexCharts(document.querySelector("#ethernet-chart-04"), options); 893 chart.render(); 894 document.addEventListener('ColorChange', (e) => { 895 const newOpt = { 896 colors: [e.detail.detail1], 897 } 898 chart.updateOptions(newOpt) 899 }) 900} 901/*-------------- Ethernet Chart End ----------------*/ 902if (document.querySelectorAll("#chart-9").length) { 903 const options = { 904 series: [{ 905 name: 'series1', 906 data: [25, 27, 24, 26] 907 }], 908 colors: ["#07750b"], 909 chart: { 910 height: 65, 911 width: 140, 912 type: 'area', 913 sparkline: { 914 enabled: true, 915 } 916 }, 917 dataLabels: { 918 enabled: false 919 }, 920 stroke: { 921 curve: 'smooth' 922 }, 923 xaxis: { 924 type: 'datetime', 925 categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z"] 926 }, 927 tooltip: { 928 enabled: false, 929 }, 930 }; 931 932 const chart = new ApexCharts(document.querySelector("#chart-9"), options); 933 chart.render(); 934const body = document.querySelector('body') 935if (body.classList.contains('dark')) { 936 apexChartUpdate(chart, { 937 dark: true 938 }) 939} 940 941document.addEventListener('ChangeColorMode', function (e) { 942 apexChartUpdate(chart, e.detail) 943}) 944} 945 946})(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.