Update analytics components to use `options` for stateless data

Update

This applies to all 3 analytics features

  • Cycle analytics
  • Productivity analytics
  • Code analytics

The following discussion from !16906 (merged) should be addressed:

  • @pslaughter started a discussion: (+3 comments)

    suggestion: Since this object isn't part of the component's "state" (i.e. it isn't expected to change), data() isn't necessarily the best place for it. data() will spend time making these properties reactive, which is a waste in this case.

    What do you think of moving these into the component options? 🤔

    diff --git a/ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue b/ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
    index 8ca81b1b7ff..eeb33100c5e 100644
    --- a/ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
    +++ b/ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue
    @@ -37,13 +37,6 @@ export default {
         return {
           multiProjectSelect: true,
           dateOptions: [7, 30, 90],
    -      groupsQueryParams: {
    -        min_access_level: featureAccessLevel.EVERYONE,
    -      },
    -      projectsQueryParams: {
    -        per_page: PROJECTS_PER_PAGE,
    -        with_shared: false,
    -      },
         };
       },
       computed: {
    @@ -105,6 +98,13 @@ export default {
           this.showCustomStageForm();
         },
       },
    +  groupsQueryParams: {
    +    min_access_level: featureAccessLevel.EVERYONE,
    +  },
    +  projectsQueryParams: {
    +    per_page: PROJECTS_PER_PAGE,
    +    with_shared: false,
    +  },
     };
     </script>
     
    @@ -119,7 +119,7 @@ export default {
           >
             <groups-dropdown-filter
               class="js-groups-dropdown-filter dropdown-select"
    -          :query-params="groupsQueryParams"
    +          :query-params="$options.groupsQueryParams"
               @selected="onGroupSelect"
             />
             <projects-dropdown-filter
    @@ -127,7 +127,7 @@ export default {
               :key="selectedGroup.id"
               class="js-projects-dropdown-filter ml-md-1 mt-1 mt-md-0 dropdown-select"
               :group-id="selectedGroup.id"
    -          :query-params="projectsQueryParams"
    +          :query-params="$options.projectsQueryParams"
               :multi-select="multiProjectSelect"
               @selected="onProjectsSelect"
             />
Edited Oct 25, 2019 by Brandon Labuschagne
Assignee Loading
Time tracking Loading