analytics.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/dashboard/analytics", ["jquery", "Site"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(require("jquery"), require("Site"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(global.jQuery, global.Site);
  11. global.dashboardAnalytics = mod.exports;
  12. }
  13. })(this, function (_jquery, _Site) {
  14. "use strict";
  15. _jquery = babelHelpers.interopRequireDefault(_jquery);
  16. (0, _jquery.default)(document).ready(function ($$$1) {
  17. (0, _Site.run)();
  18. }); // Top Line Chart With Tooltips
  19. // ----------------------------
  20. (function () {
  21. // common options for common style
  22. var options = {
  23. showArea: true,
  24. low: 0,
  25. high: 8000,
  26. height: 240,
  27. fullWidth: true,
  28. axisX: {
  29. offset: 40
  30. },
  31. axisY: {
  32. offset: 30,
  33. labelInterpolationFnc: function labelInterpolationFnc(value) {
  34. if (value === 0) {
  35. return null;
  36. }
  37. return value / 1000 + 'k';
  38. },
  39. scaleMinSpace: 40
  40. },
  41. plugins: [Chartist.plugins.tooltip()]
  42. }; //day data
  43. var dayLabelList = ['AUG 8', 'SEP 15', 'OCT 22', 'NOV 29', 'DEC 8', 'JAN 15', 'FEB 22', ''];
  44. var daySeries1List = {
  45. name: 'series-1',
  46. data: [0, 7300, 6200, 6833, 7568, 4620, 4856, 2998]
  47. };
  48. var daySeries2List = {
  49. name: 'series-2',
  50. data: [0, 3100, 7200, 5264, 5866, 2200, 3850, 1032]
  51. }; //week data
  52. var weekLabelList = ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', ''];
  53. var weekSeries1List = {
  54. name: 'series-1',
  55. data: [0, 2400, 6200, 7833, 5568, 3620, 4856, 2998]
  56. };
  57. var weekSeries2List = {
  58. name: 'series-2',
  59. data: [0, 4100, 6800, 5264, 5866, 3200, 2850, 1032]
  60. }; //month data
  61. var monthLabelList = ['AUG', 'SEP', 'OCT', 'NOV', 'DEC', 'JAN', 'FEB', ''];
  62. var monthSeries1List = {
  63. name: 'series-1',
  64. data: [0, 6400, 5200, 7833, 5568, 3620, 5856, 0]
  65. };
  66. var monthSeries2List = {
  67. name: 'series-2',
  68. data: [0, 3100, 4800, 5264, 6866, 3200, 2850, 1032]
  69. };
  70. var newScoreLineChart = function newScoreLineChart(chartId, labelList, series1List, series2List, options) {
  71. var lineChart = new Chartist.Line(chartId, {
  72. labels: labelList,
  73. series: [series1List, series2List]
  74. }, options); //start create
  75. lineChart.on('draw', function (data) {
  76. var elem, parent;
  77. if (data.type === 'point') {
  78. elem = data.element;
  79. parent = new Chartist.Svg(elem._node.parentNode);
  80. parent.elem('line', {
  81. x1: data.x,
  82. y1: data.y,
  83. x2: data.x + 0.01,
  84. y2: data.y,
  85. "class": 'ct-point-content'
  86. });
  87. }
  88. }); //end create
  89. }; //finally new a chart according to the state
  90. var createKindChart = function createKindChart(clickli) {
  91. var clickli = clickli || (0, _jquery.default)("#productOverviewWidget .product-filters").find(".active");
  92. var chartId = clickli.attr("href");
  93. switch (chartId) {
  94. case "#scoreLineToDay":
  95. newScoreLineChart(chartId, dayLabelList, daySeries1List, daySeries2List, options);
  96. break;
  97. case "#scoreLineToWeek":
  98. newScoreLineChart(chartId, weekLabelList, weekSeries1List, weekSeries2List, options);
  99. break;
  100. case "#scoreLineToMonth":
  101. newScoreLineChart(chartId, monthLabelList, monthSeries1List, monthSeries2List, options);
  102. break;
  103. }
  104. }; //default create chart whithout click
  105. createKindChart(); //create for click
  106. (0, _jquery.default)(".product-filters li a").on("click", function () {
  107. createKindChart((0, _jquery.default)(this));
  108. });
  109. })(); //// Overlapping Bars One ~ Four
  110. // ------------------------------
  111. (function () {
  112. //Four Overlapping Bars Data
  113. var overlappingBarsDataOne = {
  114. labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
  115. series: [[3, 4, 6, 10, 8, 6, 3, 4], [2, 3, 5, 8, 6, 5, 4, 3]]
  116. };
  117. var overlappingBarsDataTwo = {
  118. labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
  119. series: [[2, 4, 5, 10, 6, 8, 3, 5], [3, 5, 6, 5, 4, 6, 3, 3]]
  120. };
  121. var overlappingBarsDataThree = {
  122. labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
  123. series: [[5, 2, 6, 7, 10, 8, 6, 5], [4, 3, 5, 6, 8, 6, 4, 3]]
  124. };
  125. var barsData = [overlappingBarsDataOne, overlappingBarsDataTwo, overlappingBarsDataThree, overlappingBarsDataThree]; //Common OverlappingBarsOptions
  126. var overlappingBarsOptions = {
  127. low: 0,
  128. high: 10,
  129. seriesBarDistance: 6,
  130. fullWidth: true,
  131. axisX: {
  132. showLabel: false,
  133. showGrid: false,
  134. offset: 0
  135. },
  136. axisY: {
  137. showLabel: false,
  138. showGrid: false,
  139. offset: 0
  140. },
  141. chartPadding: {
  142. // top: 20,
  143. // right: 115,
  144. // bottom: 55,
  145. left: 30
  146. }
  147. };
  148. var responsiveOptions = [['screen and (max-width: 640px)', {
  149. seriesBarDistance: 6,
  150. axisX: {
  151. labelInterpolationFnc: function labelInterpolationFnc(value) {
  152. return value[0];
  153. }
  154. }
  155. }]]; // create Four Bars
  156. var createBar = function createBar(chartId, data, options, responsiveOptions) {
  157. new Chartist.Bar(chartId, data, options, responsiveOptions);
  158. };
  159. (0, _jquery.default)("#productOptionsData .ct-chart").each(function (index) {
  160. createBar(this, barsData[index], overlappingBarsOptions, responsiveOptions);
  161. });
  162. })(); //// Stacked Week Bar Chart
  163. // ------------------------
  164. (function () {
  165. new Chartist.Bar('#weekStackedBarChart', {
  166. labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  167. series: [[4, 4.5, 5, 6, 7, 7.5, 7], [6, 5.5, 5, 4, 3, 2.5, 3]]
  168. }, {
  169. stackBars: true,
  170. axisY: {
  171. offset: 0
  172. },
  173. axisX: {
  174. offset: 60
  175. }
  176. }).on('draw', function (data) {
  177. if (data.type === 'bar') {
  178. data.element.attr({
  179. style: 'stroke-width: 20px'
  180. });
  181. }
  182. });
  183. })(); // Example Morris Donut
  184. // --------------------
  185. (function () {
  186. Morris.Donut({
  187. resize: true,
  188. element: 'browersVistsDonut',
  189. data: [{
  190. label: 'Chrome',
  191. value: 4625 //label: 'From last week'
  192. }, {
  193. label: 'Firfox',
  194. value: 1670 //label: 'From last month'
  195. }, {
  196. label: 'Safari',
  197. value: 1100 //label: 'From last year'
  198. }],
  199. colors: ['#f96868', '#62a9eb', '#f3a754'] //valueColors: ['#37474f', '#f96868', '#76838f']
  200. }).on('click', function (i, row) {
  201. console.log(i, row);
  202. });
  203. })();
  204. });