Commit 9bed4094 authored by Martin Wortschack's avatar Martin Wortschack 🌴 Committed by Filipa Lacerda
Browse files

Show scatterplot behind feature flag 

- Introduce productivity_analytics_scatterplot_enabled feature flag and
prevent scatterplot from being loaded and show
parent be5aa0e0

ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue

+17 −1
Original line number Diff line number Diff line
@@ -9,6 +9,7 @@ import { 
  GlTooltipDirective,

} from '@gitlab/ui';

import { GlColumnChart } from '@gitlab/ui/dist/charts';

import featureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';

import Icon from '~/vue_shared/components/icon.vue';

import MetricChart from './metric_chart.vue';

import Scatterplot from '../../shared/components/scatterplot.vue';
@@ -31,6 +32,7 @@ export default { 
  directives: {

    GlTooltip: GlTooltipDirective,

  },

  mixins: [featureFlagsMixin()],

  props: {

    endpoint: {

      type: String,
@@ -65,6 +67,7 @@ export default { 
      'getSelectedMetric',

      'scatterplotYaxisLabel',

      'hasNoAccessError',

      'isChartEnabled',

    ]),

    ...mapGetters('table', [

      'sortFieldDropdownLabel',
@@ -89,10 +92,19 @@ export default { 
  },

  mounted() {

    this.setEndpoint(this.endpoint);

    this.setChartEnabled({

      chartKey: chartKeys.scatterplot,

      isEnabled: this.isScatterplotFeatureEnabled(),

    });

  },

  methods: {

    ...mapActions(['setEndpoint']),

    ...mapActions('charts', ['fetchChartData', 'setMetricType', 'chartItemClicked']),

    ...mapActions('charts', [

      'fetchChartData',

      'setMetricType',

      'chartItemClicked',

      'setChartEnabled',

    ]),

    ...mapActions('table', ['setSortField', 'setPage', 'toggleSortOrder', 'setColumnMetric']),

    onMainChartItemClicked({ params }) {

      const itemValue = params.data.value[0];
@@ -108,6 +120,9 @@ export default { 
        ...this.getColumnChartDatazoomOption(chartKey),

      };

    },

    isScatterplotFeatureEnabled() {

      return this.glFeatures.productivityAnalyticsScatterplotEnabled;

    },

  },

};

</script>
@@ -217,6 +232,7 @@ export default { 
          </div>



          <metric-chart

            v-if="isChartEnabled(chartKeys.scatterplot)"

            ref="scatterplot"

            class="mb-4"

            :title="s__('ProductivityAnalytics|Trendline')"

ee/app/assets/javascripts/analytics/productivity_analytics/store/modules/charts/actions.js

+18 −12
Original line number Diff line number Diff line
@@ -16,18 +16,21 @@ export const fetchSecondaryChartData = ({ state, dispatch }) => { 
export const requestChartData = ({ commit }, chartKey) =>

  commit(types.REQUEST_CHART_DATA, chartKey);



export const fetchChartData = ({ dispatch, getters, rootState }, chartKey) => {

export const fetchChartData = ({ dispatch, getters, state, rootState }, chartKey) => {

  // let's fetch data for enabled charts only

  if (state.charts[chartKey].enabled) {

    dispatch('requestChartData', chartKey);



    const params = getters.getFilterParams(chartKey);



  return axios

    axios

      .get(rootState.endpoint, { params })

      .then(response => {

        const { data } = response;

        dispatch('receiveChartDataSuccess', { chartKey, data });

      })

      .catch(error => dispatch('receiveChartDataError', { chartKey, error }));

  }

};



export const receiveChartDataSuccess = ({ commit }, { chartKey, data = {} }) => {
@@ -57,5 +60,8 @@ export const chartItemClicked = ({ commit, dispatch }, { chartKey, item }) => { 
  dispatch('table/setPage', 0, { root: true });

};



export const setChartEnabled = ({ commit }, { chartKey, isEnabled }) =>

  commit(types.SET_CHART_ENABLED, { chartKey, isEnabled });



// prevent babel-plugin-rewire from generating an invalid default during karma tests

export default () => {};

ee/app/assets/javascripts/analytics/productivity_analytics/store/modules/charts/getters.js

+2 −0
Original line number Diff line number Diff line
@@ -169,5 +169,7 @@ export const scatterplotYaxisLabel = (_state, getters, rootState) => { 
export const hasNoAccessError = state =>

  state.charts[chartKeys.main].errorCode === httpStatus.FORBIDDEN;



export const isChartEnabled = state => chartKey => state.charts[chartKey].enabled;



// prevent babel-plugin-rewire from generating an invalid default during karma tests

export default () => {};

ee/app/assets/javascripts/analytics/productivity_analytics/store/modules/charts/mutation_types.js

+1 −0
Original line number Diff line number Diff line
@@ -5,3 +5,4 @@ export const RECEIVE_CHART_DATA_ERROR = 'RECEIVE_CHART_DATA_ERROR'; 


export const SET_METRIC_TYPE = 'SET_METRIC_TYPE';

export const UPDATE_SELECTED_CHART_ITEMS = 'UPDATE_SELECTED_CHART_ITEMS';

export const SET_CHART_ENABLED = 'SET_CHART_ENABLED';

ee/app/assets/javascripts/analytics/productivity_analytics/store/modules/charts/mutations.js

+3 −0
Original line number Diff line number Diff line
@@ -29,4 +29,7 @@ export default { 
      state.charts[chartKey].selected.splice(idx, 1);

    }

  },

  [types.SET_CHART_ENABLED](state, { chartKey, isEnabled }) {

    state.charts[chartKey].enabled = isEnabled;

  },

};