diff --git a/app/assets/javascripts/cycle-analytics.js.es6 b/app/assets/javascripts/cycle-analytics.js.es6 index afaed7c4f60..6c478c55840 100644 --- a/app/assets/javascripts/cycle-analytics.js.es6 +++ b/app/assets/javascripts/cycle-analytics.js.es6 @@ -1,17 +1,22 @@ ((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.isHelpDismissed = $.cookie(COOKIE_NAME); this.vue = new Vue({ el: '#cycle-analytics', name: 'CycleAnalytics', created: this.fetchData(), - data: this.decorateData({ isLoading: true }), + data: store, methods: { dismissLanding() { that.dismissLanding(); @@ -21,6 +26,7 @@ } fetchData(options) { + store.isLoading = true; options = options || { startDate: 30 }; $.ajax({ @@ -30,22 +36,20 @@ contentType: 'application/json', data: { start_date: options.startDate } }).done((data) => { - this.vue.$data = this.decorateData(data); + this.decorateData(data); this.initDropdown(); }) .error((data) => { this.handleError(data); }) .always(() => { - this.vue.isLoading = false; + store.isLoading = false; }) } decorateData(data) { data.summary = data.summary || []; data.stats = data.stats || []; - data.isHelpDismissed = this.isHelpDismissed; - data.isLoading = data.isLoading || false; data.summary.forEach((item) => { item.value = item.value || '-'; @@ -53,22 +57,18 @@ data.stats.forEach((item) => { item.value = item.value || '- - -'; - }) + }); - return data; + store.analytics = data; } handleError(data) { - this.vue.$data = { - hasError: true, - isHelpDismissed: this.isHelpDismissed - }; - + store.hasError = true; new Flash('There was an error while fetching cycle analytics data.', 'alert'); } dismissLanding() { - this.vue.isHelpDismissed = true; + store.isHelpDismissed = true; $.cookie(COOKIE_NAME, true); } @@ -82,7 +82,6 @@ const value = $target.data('value'); $label.text($target.text().trim()); - this.vue.isLoading = true; this.fetchData({ startDate: value }); }) } diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 6a748690c79..7f346df8797 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -27,7 +27,7 @@ .content-block .container-fluid .row - .col-sm-3.col-xs-12.column{"v-for" => "item in summary"} + .col-sm-3.col-xs-12.column{"v-for" => "item in analytics.summary"} %h3.header {{item.value}} %p.text {{item.title}} @@ -46,7 +46,7 @@ .bordered-box %ul.content-list - %li{"v-for" => "item in stats"} + %li{"v-for" => "item in analytics.stats"} .container-fluid .row .col-xs-8.title-col