dashboard.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. //[Dashboard Javascript]
  2. //Project: Riday - Responsive Admin Template
  3. //Primary use: Used only for the main dashboard (index.html)
  4. $(function () {
  5. 'use strict';
  6. var options = {
  7. series: [{
  8. name: 'Revenue',
  9. data: [31, 50, 28, 70, 45, 90, 140]
  10. }],
  11. chart: {
  12. height: 350,
  13. type: 'area',
  14. zoom: {
  15. enabled: false
  16. },
  17. },
  18. colors: ["#4c95dd"],
  19. dataLabels: {
  20. enabled: false
  21. },
  22. stroke: {
  23. curve: 'smooth'
  24. },
  25. xaxis: {
  26. categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Set", "Sun"]
  27. },
  28. tooltip: {
  29. y: {
  30. formatter: function (val) {
  31. return "$" + val + " thousands"
  32. }
  33. },
  34. },
  35. };
  36. var chart = new ApexCharts(document.querySelector("#chart"), options);
  37. chart.render();
  38. var options = {
  39. chart: {
  40. height: 325,
  41. type: 'bar',
  42. toolbar: {
  43. show: false
  44. },
  45. },
  46. plotOptions: {
  47. bar: {
  48. horizontal: false,
  49. endingShape: 'rounded',
  50. columnWidth: '65%',
  51. },
  52. },
  53. dataLabels: {
  54. enabled: false
  55. },
  56. stroke: {
  57. show: true,
  58. width: 5,
  59. colors: ['transparent']
  60. },
  61. colors: ["#e66430", "#4c95dd"],
  62. series: [{
  63. name: 'In Restaurant',
  64. data: [70, 45, 51, 58, 59, 58, 61]
  65. }, {
  66. name: 'Online Order',
  67. data: [55, 71, 80, 100, 89, 98, 110]
  68. },],
  69. xaxis: {
  70. categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Set", "Sun"],
  71. axisBorder: {
  72. show: true,
  73. color: '#bec7e0',
  74. },
  75. axisTicks: {
  76. show: true,
  77. color: '#bec7e0',
  78. },
  79. },
  80. legend: {
  81. show: false,
  82. },
  83. fill: {
  84. opacity: 1
  85. },
  86. grid: {
  87. row: {
  88. colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
  89. opacity: 0.2
  90. },
  91. borderColor: '#f1f3fa'
  92. },
  93. tooltip: {
  94. y: {
  95. formatter: function (val) {
  96. return "$" + val + "k"
  97. }
  98. }
  99. }
  100. }
  101. var chart = new ApexCharts(
  102. document.querySelector("#yearly-comparison"),
  103. options
  104. );
  105. chart.render();
  106. $('.owl-carousel').owlCarousel({
  107. loop: true,
  108. margin: 20,
  109. responsiveClass: true,
  110. autoplay: true,
  111. dots: false,
  112. nav: true,
  113. responsive: {
  114. 0: {
  115. items: 1,
  116. },
  117. 1024: {
  118. items: 2,
  119. },
  120. 1600: {
  121. items: 3,
  122. },
  123. 2000: {
  124. items: 4,
  125. }
  126. }
  127. });
  128. am4core.ready(function() {
  129. // Themes begin
  130. am4core.useTheme(am4themes_kelly);
  131. am4core.useTheme(am4themes_animated);
  132. // Themes end
  133. // Define marker path
  134. var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
  135. // Create map instance
  136. var chart = am4core.create("chartdiv", am4maps.MapChart);
  137. var interfaceColors = new am4core.InterfaceColorSet();
  138. // Set map definition
  139. chart.geodata = am4geodata_worldLow;
  140. // Set projection
  141. chart.projection = new am4maps.projections.Mercator();
  142. // Add zoom control
  143. chart.zoomControl = new am4maps.ZoomControl();
  144. // Set initial zoom
  145. chart.homeZoomLevel = 2.5;
  146. chart.homeGeoPoint = {
  147. latitude: 51,
  148. longitude: -23
  149. };
  150. // Create map polygon series
  151. var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
  152. polygonSeries.exclude = ["AQ"];
  153. polygonSeries.useGeodata = true;
  154. polygonSeries.mapPolygons.template.nonScalingStroke = true;
  155. // Add images
  156. var imageSeries = chart.series.push(new am4maps.MapImageSeries());
  157. var imageTemplate = imageSeries.mapImages.template;
  158. imageTemplate.tooltipText = "{title}";
  159. imageTemplate.nonScaling = true;
  160. var marker = imageTemplate.createChild(am4core.Sprite);
  161. marker.path = targetSVG;
  162. marker.horizontalCenter = "middle";
  163. marker.verticalCenter = "middle";
  164. marker.scale = 0.7;
  165. marker.fill = interfaceColors.getFor("alternativeBackground");
  166. imageTemplate.propertyFields.latitude = "latitude";
  167. imageTemplate.propertyFields.longitude = "longitude";
  168. imageSeries.data = [ {
  169. "id": "london",
  170. "svgPath": targetSVG,
  171. "title": "London",
  172. "latitude": 51.5002,
  173. "longitude": -0.1262,
  174. "scale": 1
  175. }, {
  176. "svgPath": targetSVG,
  177. "title": "Brussels",
  178. "latitude": 50.8371,
  179. "longitude": 4.3676,
  180. "scale": 0.5
  181. }, {
  182. "svgPath": targetSVG,
  183. "title": "Prague",
  184. "latitude": 50.0878,
  185. "longitude": 14.4205,
  186. "scale": 0.5
  187. }, {
  188. "svgPath": targetSVG,
  189. "title": "Athens",
  190. "latitude": 37.9792,
  191. "longitude": 23.7166,
  192. "scale": 0.5
  193. }, {
  194. "svgPath": targetSVG,
  195. "title": "Reykjavik",
  196. "latitude": 64.1353,
  197. "longitude": -21.8952,
  198. "scale": 0.5
  199. }, {
  200. "svgPath": targetSVG,
  201. "title": "Dublin",
  202. "latitude": 53.3441,
  203. "longitude": -6.2675,
  204. "scale": 0.5
  205. }, {
  206. "svgPath": targetSVG,
  207. "title": "Oslo",
  208. "latitude": 59.9138,
  209. "longitude": 10.7387,
  210. "scale": 0.5
  211. }, {
  212. "svgPath": targetSVG,
  213. "title": "Lisbon",
  214. "latitude": 38.7072,
  215. "longitude": -9.1355,
  216. "scale": 0.5
  217. }, {
  218. "svgPath": targetSVG,
  219. "title": "Moscow",
  220. "latitude": 55.7558,
  221. "longitude": 37.6176,
  222. "scale": 0.5
  223. }, {
  224. "svgPath": targetSVG,
  225. "title": "Belgrade",
  226. "latitude": 44.8048,
  227. "longitude": 20.4781,
  228. "scale": 0.5
  229. }, {
  230. "svgPath": targetSVG,
  231. "title": "Bratislava",
  232. "latitude": 48.2116,
  233. "longitude": 17.1547,
  234. "scale": 0.5
  235. }, {
  236. "svgPath": targetSVG,
  237. "title": "Ljubljana",
  238. "latitude": 46.0514,
  239. "longitude": 14.5060,
  240. "scale": 0.5
  241. }, {
  242. "svgPath": targetSVG,
  243. "title": "Madrid",
  244. "latitude": 40.4167,
  245. "longitude": -3.7033,
  246. "scale": 0.5
  247. }, {
  248. "svgPath": targetSVG,
  249. "title": "Stockholm",
  250. "latitude": 59.3328,
  251. "longitude": 18.0645,
  252. "scale": 0.5
  253. }, {
  254. "svgPath": targetSVG,
  255. "title": "Bern",
  256. "latitude": 46.9480,
  257. "longitude": 7.4481,
  258. "scale": 0.5
  259. }, {
  260. "svgPath": targetSVG,
  261. "title": "Kiev",
  262. "latitude": 50.4422,
  263. "longitude": 30.5367,
  264. "scale": 0.5
  265. }, {
  266. "svgPath": targetSVG,
  267. "title": "Paris",
  268. "latitude": 48.8567,
  269. "longitude": 2.3510,
  270. "scale": 0.5
  271. }, {
  272. "svgPath": targetSVG,
  273. "title": "New York",
  274. "latitude": 40.43,
  275. "longitude": -74,
  276. "scale": 0.5
  277. } ];
  278. // Add lines
  279. var lineSeries = chart.series.push(new am4maps.MapLineSeries());
  280. lineSeries.dataFields.multiGeoLine = "multiGeoLine";
  281. var lineTemplate = lineSeries.mapLines.template;
  282. lineTemplate.nonScalingStroke = true;
  283. lineTemplate.arrow.nonScaling = true;
  284. lineTemplate.arrow.width = 4;
  285. lineTemplate.arrow.height = 6;
  286. lineTemplate.stroke = interfaceColors.getFor("alternativeBackground");
  287. lineTemplate.fill = interfaceColors.getFor("alternativeBackground");
  288. lineTemplate.line.strokeOpacity = 0.4;
  289. lineSeries.data = [{
  290. "multiGeoLine": [
  291. [
  292. { "latitude": 51.5002, "longitude": -0.1262 },
  293. { "latitude": 50.4422, "longitude": 30.5367 }
  294. ]
  295. ]
  296. }, {
  297. "multiGeoLine": [
  298. [
  299. { "latitude": 51.5002, "longitude": -0.1262 },
  300. { "latitude": 40.4300, "longitude": -74.0000 }
  301. ]
  302. ]
  303. }, {
  304. "multiGeoLine": [
  305. [
  306. { "latitude": 51.5002, "longitude": -0.1262 },
  307. { "latitude": 64.1353, "longitude": -21.8952 }
  308. ]
  309. ]
  310. }, {
  311. "multiGeoLine": [
  312. [
  313. { "latitude": 51.5002, "longitude": -0.1262 },
  314. { "latitude": 37.9792, "longitude": 23.7166 }
  315. ]
  316. ]
  317. }, {
  318. "multiGeoLine": [
  319. [
  320. { "latitude": 51.5002, "longitude": -0.1262 },
  321. { "latitude": 38.7072, "longitude": -9.1355 }
  322. ]
  323. ]
  324. }, {
  325. "multiGeoLine": [
  326. [
  327. { "latitude": 51.5002, "longitude": -0.1262 },
  328. { "latitude": 55.7558, "longitude": 37.6176 }
  329. ]
  330. ]
  331. }, {
  332. "multiGeoLine": [
  333. [
  334. { "latitude": 51.5002, "longitude": -0.1262 },
  335. { "latitude": 44.8048, "longitude": 20.4781 }
  336. ]
  337. ]
  338. }, {
  339. "multiGeoLine": [
  340. [
  341. { "latitude": 51.5002, "longitude": -0.1262 },
  342. { "latitude": 48.2116, "longitude": 17.1547 }
  343. ]
  344. ]
  345. }, {
  346. "multiGeoLine": [
  347. [
  348. { "latitude": 51.5002, "longitude": -0.1262 },
  349. { "latitude": 46.0514, "longitude": 14.5060 }
  350. ]
  351. ]
  352. }, {
  353. "multiGeoLine": [
  354. [
  355. { "latitude": 51.5002, "longitude": -0.1262 },
  356. { "latitude": 40.4167, "longitude": -3.7033 }
  357. ]
  358. ]
  359. }, {
  360. "multiGeoLine": [
  361. [
  362. { "latitude": 51.5002, "longitude": -0.1262 },
  363. { "latitude": 59.3328, "longitude": 18.0645 }
  364. ]
  365. ]
  366. }, {
  367. "multiGeoLine": [
  368. [
  369. { "latitude": 51.5002, "longitude": -0.1262 },
  370. { "latitude": 46.9480, "longitude": 7.4481 }
  371. ]
  372. ]
  373. }];
  374. }); // end am4core.ready()
  375. }); // End of use strict