Improve first implementation

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -1,2 +1,57 @@
 //= require vue
 //= require_tree .
+
+$(() => {
+
+  const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
+  const cycleAnalyticsStore = gl.cycleAnalytics.CycleAnalyticsStore;
+  const cycleAnalyticsService = new gl.cycleAnalytics.CycleAnalyticsService({
+    requestPath: cycleAnalyticsEl.dataset.requestPath
+  })
+
+  gl.cycleAnalyticsApp = new Vue({
+    el: '#cycle-analytics',
+    name: 'CycleAnalytics',
+    data: cycleAnalyticsStore.state,
+    created() {
+      this.fetchCycleAnalyticsData();
+    },
+    methods: {
+      handleError(data) {
+        cycleAnalyticsStore.setErrorState(true);
+        new Flash('There was an error while fetching cycle analytics data.');
+      },
+      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.fetchCycleAnalyticsData({ startDate: value });
+        });
+      },
+      fetchCycleAnalyticsData(options) {
+        options = options || { startDate: 30 };
+
+        cycleAnalyticsStore.setLoadingState(true);
+
+        cycleAnalyticsService
+          .fetchCycleAnalyticsData(options)
+          .then((response) => {
+            cycleAnalyticsStore.setCycleAnalyticsData(response);
+            this.initDropdown();
+          })
+          .fail(() => {
+            this.handleError(data);
+          })
+          .always(() => {
+            cycleAnalyticsStore.setLoadingState(false);
+          });
+      }
+    }
+  });
+});

app/assets/javascripts/cycle_analytics/cycle_analytics_service.js.es6

@@ -0,0 +1,28 @@
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  class CycleAnalyticsService {
+    constructor(options) {
+      this.requestPath = options.requestPath;
+    }
+
+    fetchCycleAnalyticsData(options) {
+      options = options || { startDate: 30 };
+
+      return $.ajax({
+        url: this.requestPath,
+        method: 'GET',
+        dataType: 'json',
+        contentType: 'application/json',
+        data: {
+          cycle_analytics: {
+            start_date: options.startDate
+          }
+        }
+      });
+    }
+  };
+
+  global.cycleAnalytics.CycleAnalyticsService = CycleAnalyticsService;
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6

@@ -0,0 +1,41 @@
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.CycleAnalyticsStore = {
+    state: {
+      isLoading: true,
+      hasError: false,
+      summary: '',
+      stats: '',
+      analytics: ''
+    },
+    setCycleAnalyticsData(data) {
+      this.state = Object.assign(this.state, this.decorateData(data));
+    },
+    decorateData(data) {
+      let newData = {};
+
+      newData.stats = data.stats || [];
+      newData.summary = data.summary || [];
+
+      newData.summary.forEach((item) => {
+        item.value = item.value || '-';
+      });
+
+      newData.stats.forEach((item) => {
+        item.value = item.value || '- - -';
+      });
+
+      newData.analytics = data;      
+
+      return newData;
+    },
+    setLoadingState(state) {
+      this.state.isLoading = state;
+    },
+    setErrorState(state) {
+      this.state.hasError = state;
+    }
+  };
+
+})(window.gl || (window.gl = {}));

app/assets/javascripts/dispatcher.js.es6

@@ -208,9 +208,6 @@
           new gl.ProtectedBranchCreate();
           new gl.ProtectedBranchEditList();
           break;
-        case 'projects:cycle_analytics:show':
-          new gl.CycleAnalytics();
-          break;
       }
       switch (path.first()) {
         case 'admin':