dashboard.init.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. /******/ (function() { // webpackBootstrap
  2. var __webpack_exports__ = {};
  3. /*!**********************************************!*\
  4. !*** ./resources/js/pages/dashboard.init.js ***!
  5. \**********************************************/
  6. /*
  7. Template Name: Skote - Admin & Dashboard Template
  8. Author: Themesbrand
  9. Website: https://themesbrand.com/
  10. Contact: themesbrand@gmail.com
  11. File: Dashboard Init Js File
  12. */
  13. // get colors array from the string
  14. function getChartColorsArray(chartId) {
  15. if (document.getElementById(chartId) !== null) {
  16. var colors = document.getElementById(chartId).getAttribute("data-colors");
  17. if (colors) {
  18. colors = JSON.parse(colors);
  19. return colors.map(function (value) {
  20. var newValue = value.replace(" ", "");
  21. if (newValue.indexOf(",") === -1) {
  22. var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
  23. if (color){
  24. color = color.replace(" ", "");
  25. return color;
  26. }
  27. else return newValue;;
  28. } else {
  29. var val = value.split(',');
  30. if (val.length == 2) {
  31. var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
  32. rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
  33. return rgbaColor;
  34. } else {
  35. return newValue;
  36. }
  37. }
  38. });
  39. }
  40. }
  41. } // subscribe modal
  42. //setTimeout(function () {
  43. // $('#subscribeModal').modal('show');
  44. //}, 2000); // stacked column chart
  45. var linechartBasicColors = getChartColorsArray("stacked-column-chart");
  46. if (linechartBasicColors) {
  47. console.log(linechartBasicColors)
  48. var options = {
  49. chart: {
  50. height: 360,
  51. type: 'bar',
  52. stacked: true,
  53. toolbar: {
  54. show: false
  55. },
  56. zoom: {
  57. enabled: true
  58. }
  59. },
  60. plotOptions: {
  61. bar: {
  62. horizontal: false,
  63. columnWidth: '15%',
  64. endingShape: 'rounded'
  65. }
  66. },
  67. dataLabels: {
  68. enabled: false
  69. },
  70. series: [{
  71. name: 'Series A',
  72. data: [44, 55, 41, 67, 22, 43, 36, 52, 24, 18, 36, 48]
  73. }, {
  74. name: 'Series B',
  75. data: [13, 23, 20, 8, 13, 27, 18, 22, 10, 16, 24, 22]
  76. }, {
  77. name: 'Series C',
  78. data: [11, 17, 15, 15, 21, 14, 11, 18, 17, 12, 20, 18]
  79. }],
  80. xaxis: {
  81. categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  82. },
  83. colors: linechartBasicColors,
  84. legend: {
  85. position: 'bottom'
  86. },
  87. fill: {
  88. opacity: 1
  89. }
  90. };
  91. var chart = new ApexCharts(document.querySelector("#stacked-column-chart"), options);
  92. chart.render();
  93. } // Radial chart
  94. var radialbarColors = getChartColorsArray("radialBar-chart");
  95. if (radialbarColors) {
  96. var options = {
  97. chart: {
  98. height: 200,
  99. type: 'radialBar',
  100. offsetY: -10
  101. },
  102. plotOptions: {
  103. radialBar: {
  104. startAngle: -135,
  105. endAngle: 135,
  106. dataLabels: {
  107. name: {
  108. fontSize: '13px',
  109. color: undefined,
  110. offsetY: 60
  111. },
  112. value: {
  113. offsetY: 22,
  114. fontSize: '16px',
  115. color: undefined,
  116. formatter: function formatter(val) {
  117. return val + "%";
  118. }
  119. }
  120. }
  121. }
  122. },
  123. colors: radialbarColors,
  124. fill: {
  125. type: 'gradient',
  126. gradient: {
  127. shade: 'dark',
  128. shadeIntensity: 0.15,
  129. inverseColors: false,
  130. opacityFrom: 1,
  131. opacityTo: 1,
  132. stops: [0, 50, 65, 91]
  133. }
  134. },
  135. stroke: {
  136. dashArray: 4
  137. },
  138. series: [67],
  139. labels: ['Series A']
  140. };
  141. var chart = new ApexCharts(document.querySelector("#radialBar-chart"), options);
  142. chart.render();
  143. }
  144. /******/ })()
  145. ;