1/** 2 * Charts Apex 3 */ 4 5"use strict"; 6 7(function () { 8 let cardColor, headingColor, axisColor, borderColor, radialTrackColor; 9 10 if (isDarkStyle) { 11 cardColor = config.colors_dark.cardColor; 12 headingColor = config.colors_dark.headingColor; 13 axisColor = config.colors_dark.axisColor; 14 borderColor = config.colors_dark.borderColor; 15 radialTrackColor = "#36435C"; 16 } else { 17 cardColor = config.colors.white; 18 headingColor = config.colors.headingColor; 19 axisColor = config.colors.axisColor; 20 borderColor = config.colors.borderColor; 21 radialTrackColor = config.colors_label.secondary; 22 } 23 24 // Color constant 25 const chartColors = { 26 column: { 27 series1: "#826af9", 28 series2: "#d2b0ff", 29 bg: "#f8d3ff", 30 }, 31 donut: { 32 series1: "#65AB88", 33 series2: "#01753B", 34 series3: "#8F8F8F", 35 series4: "#BF0E23", 36 }, 37 area: { 38 series1: "#29dac7", 39 series2: "#60f2ca", 40 series3: "#a5f8cd", 41 }, 42 }; 43 44 // Heat chart data generator 45 function generateDataHeat(count, yrange) { 46 let i = 0; 47 let series = []; 48 while (i < count) { 49 let x = "w" + (i + 1).toString(); 50 let y = 51 Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min; 52 53 series.push({ 54 x: x, 55 y: y, 56 }); 57 i++; 58 } 59 return series; 60 } 61 62 // Line Area Chart 63 // -------------------------------------------------------------------- 64 const areaChartEl = document.querySelector("#lineAreaChart"), 65 areaChartConfig = { 66 chart: { 67 height: 400, 68 fontFamily: "Cairo-Regular", 69 type: "area", 70 parentHeightOffset: 0, 71 toolbar: { 72 show: false, 73 }, 74 }, 75 dataLabels: { 76 enabled: false, 77 }, 78 stroke: { 79 show: false, 80 curve: "straight", 81 }, 82 legend: { 83 show: true, 84 position: "top", 85 horizontalAlign: "start", 86 labels: { 87 colors: axisColor, 88 useSeriesColors: false, 89 }, 90 }, 91 grid: { 92 borderColor: borderColor, 93 xaxis: { 94 lines: { 95 show: true, 96 }, 97 }, 98 }, 99 colors: [ 100 chartColors.area.series3, 101 chartColors.area.series2, 102 chartColors.area.series1, 103 ], 104 series: [ 105 { 106 name: "Visits", 107 data: [ 108 100, 120, 90, 170, 130, 160, 140, 240, 220, 180, 270, 280, 375, 109 ], 110 }, 111 { 112 name: "Clicks", 113 data: [60, 80, 70, 110, 80, 100, 90, 180, 160, 140, 200, 220, 275], 114 }, 115 { 116 name: "Sales", 117 data: [20, 40, 30, 70, 40, 60, 50, 140, 120, 100, 140, 180, 220], 118 }, 119 ], 120 xaxis: { 121 categories: [ 122 "7/12", 123 "8/12", 124 "9/12", 125 "10/12", 126 "11/12", 127 "12/12", 128 "13/12", 129 "14/12", 130 "15/12", 131 "16/12", 132 "17/12", 133 "18/12", 134 "19/12", 135 "20/12", 136 ], 137 axisBorder: { 138 show: false, 139 }, 140 axisTicks: { 141 show: false, 142 }, 143 labels: { 144 style: { 145 colors: axisColor, 146 fontSize: "13px", 147 }, 148 }, 149 }, 150 yaxis: { 151 labels: { 152 style: { 153 colors: axisColor, 154 fontSize: "13px", 155 }, 156 }, 157 }, 158 fill: { 159 opacity: 1, 160 type: "solid", 161 }, 162 tooltip: { 163 shared: false, 164 }, 165 }; 166 if (typeof areaChartEl !== undefined && areaChartEl !== null) { 167 const areaChart = new ApexCharts(areaChartEl, areaChartConfig); 168 areaChart.render(); 169 } 170 171 // Bar Chart 172 // -------------------------------------------------------------------- 173 const barChartEl = document.querySelector("#barChart"), 174 barChartConfig = { 175 chart: { 176 height: 400, 177 fontFamily: "Cairo-Regular", 178 type: "bar", 179 stacked: true, 180 parentHeightOffset: 0, 181 toolbar: { 182 show: false, 183 }, 184 }, 185 plotOptions: { 186 bar: { 187 columnWidth: "15%", 188 colors: { 189 backgroundBarColors: [ 190 chartColors.column.bg, 191 chartColors.column.bg, 192 chartColors.column.bg, 193 chartColors.column.bg, 194 chartColors.column.bg, 195 ], 196 backgroundBarRadius: 10, 197 }, 198 }, 199 }, 200 dataLabels: { 201 enabled: false, 202 }, 203 legend: { 204 show: true, 205 position: "top", 206 horizontalAlign: "start", 207 labels: { 208 colors: axisColor, 209 useSeriesColors: false, 210 }, 211 }, 212 colors: [chartColors.column.series1, chartColors.column.series2], 213 stroke: { 214 show: true, 215 colors: ["transparent"], 216 }, 217 grid: { 218 borderColor: borderColor, 219 xaxis: { 220 lines: { 221 show: true, 222 }, 223 }, 224 }, 225 series: [ 226 { 227 name: "Apple", 228 data: [90, 120, 55, 100, 80, 125, 175, 70, 88, 180], 229 }, 230 { 231 name: "Samsung", 232 data: [85, 100, 30, 40, 95, 90, 30, 110, 62, 20], 233 }, 234 ], 235 xaxis: { 236 categories: [ 237 "7/12", 238 "8/12", 239 "9/12", 240 "10/12", 241 "11/12", 242 "12/12", 243 "13/12", 244 "14/12", 245 "15/12", 246 "16/12", 247 ], 248 axisBorder: { 249 show: false, 250 }, 251 axisTicks: { 252 show: false, 253 }, 254 labels: { 255 style: { 256 colors: axisColor, 257 fontSize: "13px", 258 }, 259 }, 260 }, 261 yaxis: { 262 labels: { 263 style: { 264 colors: axisColor, 265 fontSize: "13px", 266 }, 267 }, 268 }, 269 fill: { 270 opacity: 1, 271 }, 272 }; 273 if (typeof barChartEl !== undefined && barChartEl !== null) { 274 const barChart = new ApexCharts(barChartEl, barChartConfig); 275 barChart.render(); 276 } 277 278 // Scatter Chart 279 // -------------------------------------------------------------------- 280 const scatterChartEl = document.querySelector("#scatterChart"), 281 scatterChartConfig = { 282 chart: { 283 height: 400, 284 fontFamily: "Cairo-Regular", 285 type: "scatter", 286 zoom: { 287 enabled: true, 288 type: "xy", 289 }, 290 parentHeightOffset: 0, 291 toolbar: { 292 show: false, 293 }, 294 }, 295 grid: { 296 borderColor: borderColor, 297 xaxis: { 298 lines: { 299 show: true, 300 }, 301 }, 302 }, 303 legend: { 304 show: true, 305 position: "top", 306 horizontalAlign: "start", 307 labels: { 308 colors: axisColor, 309 useSeriesColors: false, 310 }, 311 }, 312 colors: [ 313 config.colors.warning, 314 config.colors.primary, 315 config.colors.success, 316 ], 317 series: [ 318 { 319 name: "Angular", 320 data: [ 321 [5.4, 170], 322 [5.4, 100], 323 [5.7, 110], 324 [5.9, 150],
325 [6.0, 200], 326 [6.3, 170], 327 [5.7, 140], 328 [5.9, 130], 329 [7.0, 150], 330 [8.0, 120], 331 [9.0, 170], 332 [10.0, 190], 333 [11.0, 220], 334 [12.0, 170], 335 [13.0, 230], 336 ], 337 }, 338 { 339 name: "Vue", 340 data: [ 341 [14.0, 220], 342 [15.0, 280], 343 [16.0, 230], 344 [18.0, 320], 345 [17.5, 280], 346 [19.0, 250], 347 [20.0, 350], 348 [20.5, 320], 349 [20.0, 320], 350 [19.0, 280], 351 [17.0, 280], 352 [22.0, 300], 353 [18.0, 120], 354 ], 355 }, 356 { 357 name: "React", 358 data: [ 359 [14.0, 290], 360 [13.0, 190], 361 [20.0, 220], 362 [21.0, 350], 363 [21.5, 290], 364 [22.0, 220], 365 [23.0, 140], 366 [19.0, 400], 367 [20.0, 200], 368 [22.0, 90], 369 [20.0, 120], 370 ], 371 }, 372 ], 373 xaxis: { 374 tickAmount: 10, 375 axisBorder: { 376 show: false, 377 }, 378 axisTicks: { 379 show: false, 380 }, 381 labels: { 382 formatter: function (val) { 383 return parseFloat(val).toFixed(1); 384 }, 385 style: { 386 colors: axisColor, 387 fontSize: "13px", 388 }, 389 }, 390 }, 391 yaxis: { 392 labels: { 393 style: { 394 colors: axisColor, 395 fontSize: "13px", 396 }, 397 }, 398 }, 399 }; 400 if (typeof scatterChartEl !== undefined && scatterChartEl !== null) { 401 const scatterChart = new ApexCharts(scatterChartEl, scatterChartConfig); 402 scatterChart.render(); 403 } 404 405 // Line Chart 406 // -------------------------------------------------------------------- 407 const lineChartEl = document.querySelector("#lineChart"), 408 lineChartConfig = { 409 chart: { 410 height: 400, 411 fontFamily: "Cairo-Regular", 412 type: "line", 413 parentHeightOffset: 0, 414 zoom: { 415 enabled: false, 416 }, 417 toolbar: { 418 show: false, 419 }, 420 }, 421 series: [ 422 { 423 data: [ 424 280, 200, 220, 180, 270, 250, 70, 90, 200, 150, 160, 100, 150, 100, 425 50, 426 ], 427 }, 428 ], 429 markers: { 430 strokeWidth: 7, 431 strokeOpacity: 1, 432 strokeColors: [config.colors.white], 433 colors: [config.colors.warning], 434 }, 435 dataLabels: { 436 enabled: false, 437 }, 438 stroke: { 439 curve: "straight", 440 }, 441 colors: [config.colors.warning], 442 grid: { 443 borderColor: borderColor, 444 xaxis: { 445 lines: { 446 show: true, 447 }, 448 }, 449 padding: { 450 top: -20, 451 }, 452 }, 453 tooltip: { 454 custom: function ({ series, seriesIndex, dataPointIndex, w }) { 455 return ( 456 '<div class="px-3 py-2">' + 457 "<span>" + 458 series[seriesIndex][dataPointIndex] + 459 "%</span>" + 460 "</div>" 461 ); 462 }, 463 }, 464 xaxis: { 465 categories: [ 466 "7/12", 467 "8/12", 468 "9/12", 469 "10/12", 470 "11/12", 471 "12/12", 472 "13/12", 473 "14/12", 474 "15/12", 475 "16/12", 476 "17/12", 477 "18/12", 478 "19/12", 479 "20/12", 480 "21/12", 481 ], 482 axisBorder: { 483 show: false, 484 }, 485 axisTicks: { 486 show: false, 487 }, 488 labels: { 489 style: { 490 colors: axisColor, 491 fontSize: "13px", 492 }, 493 }, 494 }, 495 yaxis: { 496 labels: { 497 style: { 498 colors: axisColor, 499 fontSize: "13px", 500 }, 501 }, 502 }, 503 }; 504 if (typeof lineChartEl !== undefined && lineChartEl !== null) { 505 const lineChart = new ApexCharts(lineChartEl, lineChartConfig); 506 lineChart.render(); 507 } 508 509 // Horizontal Bar Chart 510 // -------------------------------------------------------------------- 511 const horizontalBarChartEl = document.querySelector("#horizontalBarChart"), 512 horizontalBarChartConfig = { 513 chart: { 514 height: 400, 515 fontFamily: "Cairo-Regular", 516 type: "bar", 517 toolbar: { 518 show: false, 519 }, 520 }, 521 plotOptions: { 522 bar: { 523 horizontal: true, 524 barHeight: "30%", 525 startingShape: "rounded", 526 borderRadius: 0, 527 }, 528 }, 529 grid: { 530 borderColor: borderColor, 531 xaxis: { 532 lines: { 533 show: false, 534 }, 535 }, 536 padding: { 537 top: -20, 538 bottom: -12, 539 }, 540 }, 541 colors: config.colors.info, 542 dataLabels: { 543 enabled: false, 544 }, 545 series: [ 546 { 547 data: [700, 350, 480, 600, 210, 550, 150], 548 }, 549 ], 550 xaxis: { 551 categories: [ 552 "MON, 11", 553 "THU, 14", 554 "FRI, 15", 555 "MON, 18", 556 "WED, 20", 557 "FRI, 21", 558 "MON, 23", 559 ], 560 axisBorder: { 561 show: false, 562 }, 563 axisTicks: { 564 show: false, 565 }, 566 labels: { 567 style: { 568 colors: axisColor, 569 fontSize: "13px", 570 }, 571 }, 572 }, 573 yaxis: { 574 labels: { 575 style: { 576 colors: axisColor, 577 fontSize: "13px", 578 }, 579 }, 580 }, 581 }; 582 if ( 583 typeof horizontalBarChartEl !== undefined && 584 horizontalBarChartEl !== null 585 ) { 586 const horizontalBarChart = new ApexCharts( 587 horizontalBarChartEl, 588 horizontalBarChartConfig 589 ); 590 horizontalBarChart.render(); 591 } 592 593 // Candlestick Chart 594 // -------------------------------------------------------------------- 595 const candlestickEl = document.querySelector("#candleStickChart"), 596 candlestickChartConfig = { 597 chart: { 598 height: 410, 599 fontFamily: "Cairo-Regular", 600 type: "candlestick", 601 parentHeightOffset: 0, 602 toolbar: { 603 show: false, 604 }, 605 }, 606 series: [ 607 { 608 data: [ 609 { 610 x: new Date(1538778600000), 611 y: [150, 170, 50, 100], 612 }, 613 { 614 x: new Date(1538780400000), 615 y: [200, 400, 170, 330], 616 }, 617 { 618 x: new Date(1538782200000), 619 y: [330, 340, 250, 280], 620 }, 621 { 622 x: new Date(1538784000000), 623 y: [300, 330, 200, 320], 624 }, 625 { 626 x: new Date(1538785800000), 627 y: [320, 450, 280, 350], 628 }, 629 { 630 x: new Date(1538787600000), 631 y: [300, 350, 80, 250], 632 }, 633 { 634 x: new Date(1538789400000), 635 y: [200, 330, 170, 300], 636 }, 637 { 638 x: new Date(1538791200000), 639 y: [200, 220, 70, 130], 640 }, 641 { 642 x: new Date(1538793000000), 643 y: [220, 270, 180, 250], 644 }, 645 { 646 x: new Date(1538794800000), 647 y: [200, 250, 80, 100], 648 }, 649 { 650 x: new Date(1538796600000), 651 y: [150, 170, 50, 120], 652 }, 653 { 654 x: new Date(1538798400000), 655 y: [110, 450, 10, 420], 656 }, 657 { 658 x: new Date(1538800200000), 659 y: [400, 480, 300, 320], 660 }, 661 { 662 x: new Date(1538802000000), 663 y: [380, 480, 350, 450], 664 }, 665 ], 666 }, 667 ], 668 xaxis: { 669 type: "datetime",
670 axisBorder: { 671 show: false, 672 }, 673 axisTicks: { 674 show: false, 675 }, 676 labels: { 677 style: { 678 colors: axisColor, 679 fontSize: "13px", 680 }, 681 }, 682 }, 683 yaxis: { 684 tooltip: { 685 enabled: true, 686 }, 687 labels: { 688 style: { 689 colors: axisColor, 690 fontSize: "13px", 691 }, 692 }, 693 }, 694 grid: { 695 borderColor: borderColor, 696 xaxis: { 697 lines: { 698 show: true, 699 }, 700 }, 701 padding: { 702 top: -20, 703 }, 704 }, 705 plotOptions: { 706 candlestick: { 707 colors: { 708 upward: config.colors.success, 709 downward: config.colors.danger, 710 }, 711 }, 712 bar: { 713 columnWidth: "40%", 714 }, 715 }, 716 }; 717 if (typeof candlestickEl !== undefined && candlestickEl !== null) { 718 const candlestickChart = new ApexCharts( 719 candlestickEl, 720 candlestickChartConfig 721 ); 722 candlestickChart.render(); 723 } 724 725 // Heat map chart 726 // -------------------------------------------------------------------- 727 const heatMapEl = document.querySelector("#heatMapChart"), 728 heatMapChartConfig = { 729 chart: { 730 height: 350, 731 fontFamily: "Cairo-Regular", 732 type: "heatmap", 733 parentHeightOffset: 0, 734 toolbar: { 735 show: false, 736 }, 737 }, 738 plotOptions: { 739 heatmap: { 740 enableShades: false, 741 742 colorScale: { 743 ranges: [ 744 { 745 from: 0, 746 to: 10, 747 name: "0-10", 748 color: "#90B3F3", 749 }, 750 { 751 from: 11, 752 to: 20, 753 name: "10-20", 754 color: "#7EA6F1", 755 }, 756 { 757 from: 21, 758 to: 30, 759 name: "20-30", 760 color: "#6B9AEF", 761 }, 762 { 763 from: 31, 764 to: 40, 765 name: "30-40", 766 color: "#598DEE", 767 }, 768 { 769 from: 41, 770 to: 50, 771 name: "40-50", 772 color: "#4680EC", 773 }, 774 { 775 from: 51, 776 to: 60, 777 name: "50-60", 778 color: "#3474EA", 779 }, 780 ], 781 }, 782 }, 783 }, 784 dataLabels: { 785 enabled: false, 786 }, 787 grid: { 788 show: false, 789 }, 790 legend: { 791 show: true, 792 position: "top", 793 horizontalAlign: "start", 794 labels: { 795 colors: axisColor, 796 useSeriesColors: false, 797 }, 798 }, 799 stroke: { 800 curve: "smooth", 801 width: 4, 802 lineCap: "round", 803 colors: [cardColor], 804 }, 805 series: [ 806 { 807 name: "SUN", 808 data: generateDataHeat(24, { 809 min: 0, 810 max: 60, 811 }), 812 }, 813 { 814 name: "MON", 815 data: generateDataHeat(24, { 816 min: 0, 817 max: 60, 818 }), 819 }, 820 { 821 name: "TUE", 822 data: generateDataHeat(24, { 823 min: 0, 824 max: 60, 825 }), 826 }, 827 { 828 name: "WED", 829 data: generateDataHeat(24, { 830 min: 0, 831 max: 60, 832 }), 833 }, 834 { 835 name: "THU", 836 data: generateDataHeat(24, { 837 min: 0, 838 max: 60, 839 }), 840 }, 841 { 842 name: "FRI", 843 data: generateDataHeat(24, { 844 min: 0, 845 max: 60, 846 }), 847 }, 848 { 849 name: "SAT", 850 data: generateDataHeat(24, { 851 min: 0, 852 max: 60, 853 }), 854 }, 855 ], 856 xaxis: { 857 labels: { 858 show: false, 859 style: { 860 colors: axisColor, 861 fontSize: "13px", 862 }, 863 }, 864 axisBorder: { 865 show: false, 866 }, 867 axisTicks: { 868 show: false, 869 }, 870 }, 871 yaxis: { 872 labels: { 873 style: { 874 colors: axisColor, 875 fontSize: "13px", 876 }, 877 }, 878 }, 879 }; 880 if (typeof heatMapEl !== undefined && heatMapEl !== null) { 881 const heatMapChart = new ApexCharts(heatMapEl, heatMapChartConfig); 882 heatMapChart.render(); 883 } 884 885 // Radial Bar Chart 886 // -------------------------------------------------------------------- 887 const radialBarChartEl = document.querySelector("#radialBarChart"), 888 radialBarChartConfig = { 889 chart: { 890 height: 380, 891 fontFamily: "Cairo-Regular", 892 type: "radialBar", 893 }, 894 colors: [ 895 chartColors.donut.series1, 896 chartColors.donut.series2, 897 chartColors.donut.series4, 898 ], 899 plotOptions: { 900 radialBar: { 901 size: 185, 902 hollow: { 903 size: "40%", 904 }, 905 track: { 906 margin: 10, 907 background: radialTrackColor, 908 }, 909 dataLabels: { 910 name: { 911 fontSize: "2rem", 912 fontFamily: "Cairo-Regular", 913 }, 914 value: { 915 fontSize: "1.2rem", 916 color: headingColor, 917 fontFamily: "Cairo-Regular", 918 }, 919 total: { 920 show: true, 921 fontSize: "1.3rem", 922 color: chartColors.donut.series1, 923 label: "Comments", 924 formatter: function (w) { 925 return "80%"; 926 }, 927 }, 928 }, 929 }, 930 }, 931 grid: { 932 borderColor: borderColor, 933 padding: { 934 top: -25, 935 bottom: -20, 936 }, 937 }, 938 legend: { 939 show: true, 940 position: "bottom", 941 labels: { 942 colors: axisColor, 943 useSeriesColors: false, 944 }, 945 }, 946 stroke: { 947 lineCap: "round", 948 }, 949 series: [80, 50, 35], 950 labels: ["Comments", "Replies", "Shares"], 951 }; 952 if (typeof radialBarChartEl !== undefined && radialBarChartEl !== null) { 953 const radialChart = new ApexCharts(radialBarChartEl, radialBarChartConfig); 954 radialChart.render(); 955 } 956 957 // Radar Chart 958 // -------------------------------------------------------------------- 959 const radarChartEl = document.querySelector("#radarChart"), 960 radarChartConfig = { 961 chart: { 962 height: 350, 963 fontFamily: "Cairo-Regular", 964 type: "radar", 965 toolbar: { 966 show: false, 967 }, 968 dropShadow: { 969 enabled: false, 970 blur: 8, 971 left: 1, 972 top: 1, 973 opacity: 0.2, 974 }, 975 }, 976 legend: { 977 show: true, 978 position: "bottom", 979 labels: { 980 colors: axisColor, 981 useSeriesColors: false, 982 }, 983 }, 984 plotOptions: { 985 radar: { 986 polygons: { 987 strokeColors: borderColor, 988 connectorColors: borderColor, 989 }, 990 }, 991 }, 992 yaxis: { 993 show: false, 994 }, 995 series: [ 996 { 997 name: "iPhone 12", 998 data: [41, 64, 81, 60, 42, 42, 33, 23], 999 }, 1000 { 1001 name: "Samsung s20", 1002 data: [65, 46, 42, 25, 58, 63, 76, 43], 1003 }, 1004 ], 1005 colors: [chartColors.donut.series1, chartColors.donut.series3], 1006 xaxis: { 1007 categories: [ 1008 "Battery", 1009 "Brand", 1010 "Camera", 1011 "Memory", 1012 "Storage", 1013 "Display", 1014 "OS", 1015 "Price", 1016 ], 1017 labels: { 1018 show: true, 1019 style: { 1020 colors: [ 1021 axisColor, 1022 axisColor, 1023 axisColor, 1024 axisColor, 1025 axisColor, 1026 axisColor, 1027 axisColor, 1028 axisColor, 1029 ], 1030 fontSize: "13px", 1031 fontFamily: "Cairo-Regular", 1032 }, 1033 }, 1034 }, 1035 fill: { 1036 opacity: [1, 0.8], 1037 }, 1038 stroke: { 1039 show: false, 1040 width: 0, 1041 }, 1042 markers: { 1043 size: 0, 1044 }, 1045 grid: { 1046 show: false, 1047 padding: { 1048 top: -20, 1049 bottom: -20, 1050 }, 1051 }, 1052 }; 1053 if (typeof radarChartEl !== undefined && radarChartEl !== null) { 1054 const radarChart = new ApexCharts(radarChartEl, radarChartConfig); 1055 radarChart.render(); 1056 } 1057 1058 // Donut Chart 1059 // -------------------------------------------------------------------- 1060 const donutChartEl = document.querySelector("#donutChart"), 1061 donutChartConfig = { 1062 chart: { 1063 height: 380, 1064 fontFamily: "Cairo-Regular", 1065 type: "donut", 1066 }, 1067 labels: [ 1068 "Ministry Of Energy And Mineral Resources", 1069 "Jordan Securities Commission", 1070 "Distinguished Real Estate Services ", 1071 "Amman City", 1072 ], 1073 series: [85, 15, 50, 50], 1074 colors: [ 1075 chartColors.donut.series1, 1076 chartColors.donut.series4, 1077 chartColors.donut.series3, 1078 chartColors.donut.series2, 1079 ], 1080 stroke: { 1081 show: false, 1082 curve: "straight", 1083 }, 1084 dataLabels: { 1085 enabled: true, 1086 formatter: function (val, opt) { 1087 return parseInt(val) + "%"; 1088 }, 1089 }, 1090 legend: { 1091 show: true, 1092 position: "bottom", 1093 labels: { 1094 colors: axisColor, 1095 useSeriesColors: false, 1096 }, 1097 }, 1098 plotOptions: { 1099 pie: { 1100 donut: { 1101 labels: { 1102 show: false, 1103 name: { 1104 fontSize: "15px", 1105 color: axisColor, 1106 }, 1107 value: { 1108 fontSize: "15px", 1109 color: axisColor, 1110 fontFamily: "Cairo-Regular", 1111 formatter: function (val) { 1112 return parseInt(val) + "%"; 1113 }, 1114 }, 1115 total: { 1116 show: false, 1117 fontSize: "15px", 1118 color: headingColor, 1119 label: "Amman City", 1120 formatter: function (w) { 1121 return "31%"; 1122 }, 1123 }, 1124 }, 1125 }, 1126 }, 1127 }, 1128 responsive: [ 1129 { 1130 breakpoint: 992, 1131 options: { 1132 chart: { 1133 height: 380, 1134 }, 1135 legend: { 1136 position: "bottom", 1137 labels: { 1138 colors: axisColor, 1139 useSeriesColors: false, 1140 }, 1141 }, 1142 }, 1143 }, 1144 { 1145 breakpoint: 576, 1146 options: { 1147 chart: { 1148 height: 320, 1149 }, 1150 plotOptions: { 1151 pie: { 1152 donut: { 1153 labels: { 1154 show: true, 1155 name: { 1156 fontSize: "1.5rem", 1157 }, 1158 value: { 1159 fontSize: "1rem", 1160 }, 1161 total: { 1162 fontSize: "1.5rem", 1163 }, 1164 }, 1165 }, 1166 }, 1167 }, 1168 legend: { 1169 position: "bottom", 1170 labels: { 1171 colors: axisColor, 1172 useSeriesColors: false, 1173 }, 1174 }, 1175 }, 1176 }, 1177 { 1178 breakpoint: 420, 1179 options: { 1180 chart: { 1181 height: 280, 1182 }, 1183 legend: { 1184 show: false, 1185 }, 1186 }, 1187 }, 1188 { 1189 breakpoint: 360, 1190 options: { 1191 chart: { 1192 height: 250, 1193 }, 1194 legend: { 1195 show: false, 1196 }, 1197 }, 1198 }, 1199 ], 1200 }; 1201 if (typeof donutChartEl !== undefined && donutChartEl !== null) { 1202 const donutChart = new ApexCharts(donutChartEl, donutChartConfig); 1203 donutChart.render(); 1204 } 1205 1206 // Donut Organization Chart 1207 // -------------------------------------------------------------------- 1208 const donutChartOrgEl = document.querySelector("#donutChartOrganization"); 1209 let donutChartOrgConfig = { ...donutChartConfig }; 1210 1211 // Detect language from URL 1212 const lang = window.location.pathname.split('/')[1] || 'en'; 1213 1214 // API call with language as a query parameter 1215 fetch(`/api/3/action/top_orgs_by_dataset_count?lang=${lang}`) 1216 .then((response) => response.json()) 1217 .then((data) => { 1218 if (data.success) { 1219 donutChartOrgConfig = { 1220 ...donutChartOrgConfig, 1221 labels: data['result'].labels, 1222 series: data['result'].dataset_counts, 1223 }; 1224 if (typeof donutChartOrgEl !== undefined && donutChartOrgEl !== null) { 1225 const donutChartOrg = new ApexCharts( 1226 donutChartOrgEl, 1227 donutChartOrgConfig 1228 ); 1229 donutChartOrg.render(); 1230 } 1231 } 1232 });
1233 1234 1235// Donut QA Chart 1236// -------------------------------------------------------------------- 1237 function renderDonutQAChart() { 1238 const donutChartQAEl = document.querySelector("#donutChartQA"); 1239 if (!donutChartQAEl) { 1240 return; 1241 } 1242 1243 let donutChartQAConfig = { ...donutChartConfig }; 1244 1245 fetch(`/api/3/action/qa_datasets_statistics?lang=${lang}`) 1246 .then((response) => response.json()) 1247 .then((data) => { 1248 donutChartQAConfig = { 1249 ...donutChartQAConfig, 1250 labels: data["result"].labels, 1251 series: [ 1252 data["result"].evaluated, 1253 data["result"].total - data["result"].evaluated, 1254 ], 1255 colors: [chartColors.donut.series2, chartColors.donut.series4], 1256 dataLabels: { 1257 ...donutChartQAConfig.dataLabels, 1258 formatter: function (val) { 1259 return parseFloat(val).toFixed(1) + "%"; 1260 }, 1261 }, 1262 }; 1263 1264 donutChartQAConfig.plotOptions.pie.donut.labels.value = { 1265 ...donutChartQAConfig.plotOptions.pie.donut.labels.value, 1266 formatter: function (val) { 1267 return parseFloat(val).toFixed(1) + "%"; 1268 }, 1269 }; 1270 1271 donutChartQAEl.innerHTML = ""; 1272 1273 const donutChartQA = new ApexCharts( 1274 donutChartQAEl, 1275 donutChartQAConfig 1276 ); 1277 donutChartQA.render(); 1278 }); 1279 } 1280 1281 renderDonutQAChart(); 1282 1283 window.addEventListener("ogddashboard:section-loaded", function (event) { 1284 if ( 1285 event && 1286 event.detail && 1287 event.detail.action === "ogddashboard_employee_dashboard_admin_counters" 1288 ) { 1289 renderDonutQAChart(); 1290 } 1291 }); 1292 1293})();
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.