dashboard-analytics.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  1. /*=========================================================================================
  2. File Name: dashboard-analytics.js
  3. Description: dashboard analytics page content with Apexchart Examples
  4. ----------------------------------------------------------------------------------------
  5. Item name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  6. Author: PIXINVENT
  7. Author URL: http://www.themeforest.net/user/pixinvent
  8. ==========================================================================================*/
  9. $(window).on("load", function () {
  10. var $primary = '#7367F0';
  11. var $danger = '#EA5455';
  12. var $warning = '#FF9F43';
  13. var $info = '#0DCCE1';
  14. var $primary_light = '#8F80F9';
  15. var $warning_light = '#FFC085';
  16. var $danger_light = '#f29292';
  17. var $info_light = '#1edec5';
  18. var $strok_color = '#b9c3cd';
  19. var $label_color = '#e7eef7';
  20. var $white = '#fff';
  21. // Subscribers Gained Chart starts //
  22. // ----------------------------------
  23. var gainedChartoptions = {
  24. chart: {
  25. height: 100,
  26. type: 'area',
  27. toolbar: {
  28. show: false,
  29. },
  30. sparkline: {
  31. enabled: true
  32. },
  33. grid: {
  34. show: false,
  35. padding: {
  36. left: 0,
  37. right: 0
  38. }
  39. },
  40. },
  41. colors: [$primary],
  42. dataLabels: {
  43. enabled: false
  44. },
  45. stroke: {
  46. curve: 'smooth',
  47. width: 2.5
  48. },
  49. fill: {
  50. type: 'gradient',
  51. gradient: {
  52. shadeIntensity: 0.9,
  53. opacityFrom: 0.7,
  54. opacityTo: 0.5,
  55. stops: [0, 80, 100]
  56. }
  57. },
  58. series: [{
  59. name: 'Subscribers',
  60. data: [28, 40, 36, 52, 38, 60, 55]
  61. }],
  62. xaxis: {
  63. labels: {
  64. show: false,
  65. },
  66. axisBorder: {
  67. show: false,
  68. }
  69. },
  70. yaxis: [{
  71. y: 0,
  72. offsetX: 0,
  73. offsetY: 0,
  74. padding: { left: 0, right: 0 },
  75. }],
  76. tooltip: {
  77. x: { show: false }
  78. },
  79. }
  80. var gainedChart = new ApexCharts(
  81. document.querySelector("#subscribe-gain-chart"),
  82. gainedChartoptions
  83. );
  84. gainedChart.render();
  85. // Subscribers Gained Chart ends //
  86. // Orders Received Chart starts //
  87. // ----------------------------------
  88. var orderChartoptions = {
  89. chart: {
  90. height: 100,
  91. type: 'area',
  92. toolbar: {
  93. show: false,
  94. },
  95. sparkline: {
  96. enabled: true
  97. },
  98. grid: {
  99. show: false,
  100. padding: {
  101. left: 0,
  102. right: 0
  103. }
  104. },
  105. },
  106. colors: [$warning],
  107. dataLabels: {
  108. enabled: false
  109. },
  110. stroke: {
  111. curve: 'smooth',
  112. width: 2.5
  113. },
  114. fill: {
  115. type: 'gradient',
  116. gradient: {
  117. shadeIntensity: 0.9,
  118. opacityFrom: 0.7,
  119. opacityTo: 0.5,
  120. stops: [0, 80, 100]
  121. }
  122. },
  123. series: [{
  124. name: 'Orders',
  125. data: [10, 15, 8, 15, 7, 12, 8]
  126. }],
  127. xaxis: {
  128. labels: {
  129. show: false,
  130. },
  131. axisBorder: {
  132. show: false,
  133. }
  134. },
  135. yaxis: [{
  136. y: 0,
  137. offsetX: 0,
  138. offsetY: 0,
  139. padding: { left: 0, right: 0 },
  140. }],
  141. tooltip: {
  142. x: { show: false }
  143. },
  144. }
  145. var orderChart = new ApexCharts(
  146. document.querySelector("#orders-received-chart"),
  147. orderChartoptions
  148. );
  149. orderChart.render();
  150. // Orders Received Chart ends //
  151. // Avg Session Chart Starts
  152. // ----------------------------------
  153. var sessionChartoptions = {
  154. chart: {
  155. type: 'bar',
  156. height: 200,
  157. sparkline: { enabled: true },
  158. toolbar: { show: false },
  159. },
  160. states: {
  161. hover: {
  162. filter: 'none'
  163. }
  164. },
  165. colors: [$label_color, $label_color, $primary, $label_color, $label_color, $label_color],
  166. series: [{
  167. name: 'Sessions',
  168. data: [75, 125, 225, 175, 125, 75, 25]
  169. }],
  170. grid: {
  171. show: false,
  172. padding: {
  173. left: 0,
  174. right: 0
  175. }
  176. },
  177. plotOptions: {
  178. bar: {
  179. columnWidth: '45%',
  180. distributed: true,
  181. endingShape: 'rounded'
  182. }
  183. },
  184. tooltip: {
  185. x: { show: false }
  186. },
  187. xaxis: {
  188. type: 'numeric',
  189. }
  190. }
  191. var sessionChart = new ApexCharts(
  192. document.querySelector("#avg-session-chart"),
  193. sessionChartoptions
  194. );
  195. sessionChart.render();
  196. // Avg Session Chart ends //
  197. // Support Tracker Chart starts
  198. // -----------------------------
  199. var supportChartoptions = {
  200. chart: {
  201. height: 270,
  202. type: 'radialBar',
  203. },
  204. plotOptions: {
  205. radialBar: {
  206. size: 150,
  207. startAngle: -150,
  208. endAngle: 150,
  209. offsetY: 20,
  210. hollow: {
  211. size: '65%',
  212. },
  213. track: {
  214. background: $white,
  215. strokeWidth: '100%',
  216. },
  217. dataLabels: {
  218. value: {
  219. offsetY: 30,
  220. color: '#99a2ac',
  221. fontSize: '2rem'
  222. }
  223. }
  224. },
  225. },
  226. colors: [$danger],
  227. fill: {
  228. type: 'gradient',
  229. gradient: {
  230. // enabled: true,
  231. shade: 'dark',
  232. type: 'horizontal',
  233. shadeIntensity: 0.5,
  234. gradientToColors: [$primary],
  235. inverseColors: true,
  236. opacityFrom: 1,
  237. opacityTo: 1,
  238. stops: [0, 100]
  239. },
  240. },
  241. stroke: {
  242. dashArray: 8
  243. },
  244. series: [83],
  245. labels: ['Completed Tickets'],
  246. }
  247. var supportChart = new ApexCharts(
  248. document.querySelector("#support-tracker-chart"),
  249. supportChartoptions
  250. );
  251. supportChart.render();
  252. // Support Tracker Chart ends
  253. // Product Order Chart starts
  254. // -----------------------------
  255. var productChartoptions = {
  256. chart: {
  257. height: 325,
  258. type: 'radialBar',
  259. },
  260. colors: [$primary, $warning, $danger],
  261. fill: {
  262. type: 'gradient',
  263. gradient: {
  264. // enabled: true,
  265. shade: 'dark',
  266. type: 'vertical',
  267. shadeIntensity: 0.5,
  268. gradientToColors: [$primary_light, $warning_light, $danger_light],
  269. inverseColors: false,
  270. opacityFrom: 1,
  271. opacityTo: 1,
  272. stops: [0, 100]
  273. },
  274. },
  275. stroke: {
  276. lineCap: 'round'
  277. },
  278. plotOptions: {
  279. radialBar: {
  280. size: 165,
  281. hollow: {
  282. size: '20%'
  283. },
  284. track: {
  285. strokeWidth: '100%',
  286. margin: 15,
  287. },
  288. dataLabels: {
  289. name: {
  290. fontSize: '18px',
  291. },
  292. value: {
  293. fontSize: '16px',
  294. },
  295. total: {
  296. show: true,
  297. label: 'Total',
  298. formatter: function (w) {
  299. // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
  300. return 42459
  301. }
  302. }
  303. }
  304. }
  305. },
  306. series: [70, 52, 26],
  307. labels: ['Finished', 'Pending', 'Rejected'],
  308. }
  309. var productChart = new ApexCharts(
  310. document.querySelector("#product-order-chart"),
  311. productChartoptions
  312. );
  313. productChart.render();
  314. // Product Order Chart ends //
  315. // Sales Chart starts
  316. // -----------------------------
  317. var salesChartoptions = {
  318. chart: {
  319. height: 400,
  320. type: 'radar',
  321. dropShadow: {
  322. enabled: true,
  323. blur: 8,
  324. left: 1,
  325. top: 1,
  326. opacity: 0.2
  327. },
  328. toolbar: {
  329. show: false
  330. },
  331. },
  332. toolbar: { show: false },
  333. series: [{
  334. name: 'Sales',
  335. data: [90, 50, 86, 40, 100, 20],
  336. }, {
  337. name: 'Visit',
  338. data: [70, 75, 70, 76, 20, 85],
  339. }],
  340. stroke: {
  341. width: 0
  342. },
  343. colors: [$primary, $info],
  344. plotOptions: {
  345. radar: {
  346. polygons: {
  347. strokeColors: ['#e8e8e8', 'transparent', 'transparent', 'transparent', 'transparent', 'transparent'],
  348. connectorColors: 'transparent'
  349. }
  350. }
  351. },
  352. fill: {
  353. type: 'gradient',
  354. gradient: {
  355. shade: 'dark',
  356. gradientToColors: ['#9f8ed7', $info_light],
  357. shadeIntensity: 1,
  358. type: 'horizontal',
  359. opacityFrom: 1,
  360. opacityTo: 1,
  361. stops: [0, 100, 100, 100]
  362. },
  363. },
  364. markers: {
  365. size: 0,
  366. },
  367. legend: {
  368. show: true,
  369. position: 'top',
  370. horizontalAlign: 'left',
  371. fontSize: '16px',
  372. markers: {
  373. width: 10,
  374. height: 10,
  375. }
  376. },
  377. labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  378. dataLabels: {
  379. style: {
  380. colors: [$strok_color, $strok_color, $strok_color, $strok_color, $strok_color, $strok_color]
  381. }
  382. },
  383. yaxis: {
  384. show: false,
  385. },
  386. grid: {
  387. show: false,
  388. },
  389. }
  390. var salesChart = new ApexCharts(
  391. document.querySelector("#sales-chart"),
  392. salesChartoptions
  393. );
  394. salesChart.render();
  395. // Sales Chart ends //
  396. /***** TOUR ******/
  397. var tour = new Shepherd.Tour({
  398. classes: 'shadow-md bg-purple-dark',
  399. scrollTo: true
  400. })
  401. // tour steps
  402. tour.addStep('step-1', {
  403. text: 'Toggle Collapse Sidebar.',
  404. attachTo: '.modern-nav-toggle .collapse-toggle-icon bottom',
  405. buttons: [
  406. {
  407. text: "Skip",
  408. action: tour.complete
  409. },
  410. {
  411. text: 'Next',
  412. action: tour.next
  413. },
  414. ]
  415. });
  416. tour.addStep('step-2', {
  417. text: 'Create your own bookmarks. You can also re-arrange them using drag & drop.',
  418. attachTo: '.bookmark-icons .icon-mail bottom',
  419. buttons: [
  420. {
  421. text: "Skip",
  422. action: tour.complete
  423. },
  424. {
  425. text: "previous",
  426. action: tour.back
  427. },
  428. {
  429. text: 'Next',
  430. action: tour.next
  431. },
  432. ]
  433. });
  434. tour.addStep('step-3', {
  435. text: 'You can change language from here.',
  436. attachTo: '.dropdown-language .flag-icon bottom',
  437. buttons: [
  438. {
  439. text: "Skip",
  440. action: tour.complete
  441. },
  442. {
  443. text: "previous",
  444. action: tour.back
  445. },
  446. {
  447. text: 'Next',
  448. action: tour.next
  449. },
  450. ]
  451. });
  452. tour.addStep('step-4', {
  453. text: 'Try fuzzy search to visit pages in flash.',
  454. attachTo: '.nav-link-search .icon-search bottom',
  455. buttons: [
  456. {
  457. text: "Skip",
  458. action: tour.complete
  459. },
  460. {
  461. text: "previous",
  462. action: tour.back
  463. },
  464. {
  465. text: 'Next',
  466. action: tour.next
  467. },
  468. ]
  469. });
  470. tour.addStep('step-5', {
  471. text: 'Buy this awesomeness at affordable price!',
  472. attachTo: '.buy-now bottom',
  473. buttons: [
  474. {
  475. text: "previous",
  476. action: tour.back
  477. },
  478. {
  479. text: "Finish",
  480. action: tour.complete
  481. },
  482. ]
  483. });
  484. if ($(window).width() > 1200 && !$("body").hasClass("menu-collapsed")) {
  485. tour.start()
  486. }
  487. else {
  488. tour.cancel()
  489. }
  490. if($("body").hasClass("horizontal-menu")){
  491. tour.cancel()
  492. }
  493. $(window).on("resize", function () {
  494. tour.cancel()
  495. })
  496. });