1 files changed, 93 insertions, 0 deletions
diff --git a/app/assets/javascripts/cycle-analytics.js.es6 b/app/assets/javascripts/cycle-analytics.js.es6
new file mode 100644
index 00000000000..cd9886ba58d
--- /dev/null
+++ b/app/assets/javascripts/cycle-analytics.js.es6
@@ -0,0 +1,93 @@
+((global) => {
+
+  const COOKIE_NAME = 'cycle_analytics_help_dismissed';
+  const store = gl.cycleAnalyticsStore = {
+    isLoading: true,
+    hasError: false,
+    isHelpDismissed: $.cookie(COOKIE_NAME),
+    analytics: {}
+  };
+
+  gl.CycleAnalytics = class CycleAnalytics {
+    constructor() {
+      const that = this;
+
+      this.vue = new Vue({
+        el: '#cycle-analytics',
+        name: 'CycleAnalytics',
+        created: this.fetchData(),
+        data: store,
+        methods: {
+          dismissLanding() {
+            that.dismissLanding();
+          }
+        }
+      });
+    }
+
+    fetchData(options) {
+      store.isLoading = true;
+      options = options || { startDate: 30 };
+
+      $.ajax({
+        url: $('#cycle-analytics').data('request-path'),
+        method: 'GET',
+        dataType: 'json',
+        contentType: 'application/json',
+        data: { start_date: options.startDate }
+      }).done((data) => {
+        this.decorateData(data);
+        this.initDropdown();
+      })
+      .error((data) => {
+        this.handleError(data);
+      })
+      .always(() => {
+        store.isLoading = false;
+      })
+    }
+
+    decorateData(data) {
+      data.summary = data.summary || [];
+      data.stats = data.stats || [];
+
+      data.summary.forEach((item) => {
+        item.value = item.value || '-';
+      });
+
+      data.stats.forEach((item) => {
+        item.value = item.value || '- - -';
+      });
+
+      store.analytics = data;
+    }
+
+    handleError(data) {
+      store.hasError = true;
+      new Flash('There was an error while fetching cycle analytics data.', 'alert');
+    }
+
+    dismissLanding() {
+      store.isHelpDismissed = true;
+      $.cookie(COOKIE_NAME, true, {
+        path: gon.relative_url_root || '/'
+      });
+    }
+
+    initDropdown() {
+      const $dropdown = $('.js-ca-dropdown');
+      const $label = $dropdown.find('.dropdown-label');
+
+      $dropdown.find('li a').off('click').on('click', (e) => {
+        e.preventDefault();
+        const $target = $(e.currentTarget);
+        const value = $target.data('value');
+
+        $label.text($target.text().trim());
+        this.fetchData({ startDate: value });
+      })
+    }
+
+  }
+
+})(window.gl || (window.gl = {}));