Merge branch 'psi-burnup' into 'master'

Add burnup chart FE

See merge request gitlab-org/gitlab!29652

ee/app/assets/javascripts/burndown_chart/burndown_chart_data.js → ee/app/assets/javascripts/burndown_chart/burn_chart_data.js

 import dateFormat from 'dateformat';
 
-export default class BurndownChartData {
-  constructor(burndownEvents, startDate, dueDate) {
+export default class BurnChartData {
+  constructor(events, startDate, dueDate) {
     this.dateFormatMask = 'yyyy-mm-dd';
     this.startDate = startDate;
     this.dueDate = dueDate;
-    this.burndownEvents = this.processRawEvents(burndownEvents);
 
     // determine when to stop burndown chart
     const today = dateFormat(Date.now(), this.dateFormatMask);
@@ -15,11 +14,63 @@ export default class BurndownChartData {
     // and dateFormat() both convert the date at midnight UTC to the browser's
     // timezone, leading to incorrect chart start and end points. Using
     // new Date('YYYY-MM-DDTHH:MM:SS') gets the user's local date at midnight.
+
     this.localStartDate = new Date(`${this.startDate}T00:00:00`);
     this.localEndDate = new Date(`${this.endDate}T00:00:00`);
+
+    this.events = this.processRawEvents(events);
+  }
+
+  generateBurnupTimeseries({ milestoneId } = {}) {
+    const chartData = [];
+
+    let openIssuesCount = 0;
+    let carriedIssuesCount = 0;
+
+    for (
+      let date = this.localStartDate;
+      date <= this.localEndDate;
+      date.setDate(date.getDate() + 1)
+    ) {
+      const dateString = dateFormat(date, this.dateFormatMask);
+
+      const openedIssuesToday = this.filterAndSummarizeBurndownEvents(
+        event =>
+          event.created_at === dateString &&
+          event.event_type === 'milestone' &&
+          event.milestone_id === milestoneId &&
+          event.action === 'add',
+      );
+
+      const closedIssuesToday = this.filterAndSummarizeBurndownEvents(
+        event =>
+          event.created_at === dateString &&
+          event.event_type === 'milestone' &&
+          ((event.action === 'remove' && event.milestone_id === milestoneId) ||
+            (event.action === 'add' && event.milestone_id !== milestoneId)),
+      );
+
+      openIssuesCount += openedIssuesToday.count - closedIssuesToday.count;
+
+      if (openIssuesCount + carriedIssuesCount < 0) {
+        carriedIssuesCount += openIssuesCount;
+
+        openIssuesCount = 0;
+      } else {
+        openIssuesCount += carriedIssuesCount;
+
+        carriedIssuesCount = 0;
+      }
+
+      chartData.push([dateString, openIssuesCount]);
+    }
+
+    return {
+      burnupScope: chartData,
+    };
   }
 
-  generate() {
+  generateBurndownTimeseries() {
     let openIssuesCount = 0;
     let openIssuesWeight = 0;
 
@@ -87,7 +138,7 @@ export default class BurndownChartData {
   }
 
   filterAndSummarizeBurndownEvents(filter) {
-    const issues = this.burndownEvents.filter(filter);
+    const issues = this.events.filter(filter);
 
     return {
       count: issues.length,

ee/app/assets/javascripts/burndown_chart/components/burn_charts.vue

@@ -3,12 +3,14 @@ import { GlButton, GlButtonGroup } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { __ } from '~/locale';
 import BurndownChart from './burndown_chart.vue';
+import BurnupChart from './burnup_chart.vue';
 
 export default {
   components: {
     GlButton,
     GlButtonGroup,
     BurndownChart,
+    BurnupChart,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -30,6 +32,11 @@ export default {
       required: false,
       default: () => [],
     },
+    burnupScope: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -90,6 +97,12 @@ export default {
         :issues-selected="issuesSelected"
         class="col-md-6"
       />
+      <burnup-chart
+        :start-date="startDate"
+        :due-date="dueDate"
+        :scope="burnupScope"
+        class="col-md-6"
+      />
     </div>
     <burndown-chart
       v-else

ee/app/assets/javascripts/burndown_chart/components/burndown_chart.vue

@@ -63,13 +63,13 @@ export default {
       const series = [
         {
           name,
-          data: data.map(d => [new Date(d[0]), d[1]]),
+          data,
         },
       ];
 
       if (series[0] && series[0].data.length >= 2) {
-        const idealStart = [new Date(this.startDate), data[0][1]];
-        const idealEnd = [new Date(this.dueDate), 0];
+        const idealStart = [this.startDate, data[0][1]];
+        const idealEnd = [this.dueDate, 0];
         const idealData = [idealStart, idealEnd];
 
         series.push({
@@ -91,6 +91,8 @@ export default {
         xAxis: {
           name: '',
           type: 'time',
+          min: this.startDate,
+          max: this.dueDate,
           axisLine: {
             show: true,
           },
@@ -141,7 +143,7 @@ export default {
     <div v-if="showTitle" class="burndown-header d-flex align-items-center">
       <h3>{{ __('Burndown chart') }}</h3>
     </div>
-    <resizable-chart-container class="burndown-chart">
+    <resizable-chart-container class="burndown-chart js-burndown-chart">
       <gl-line-chart
         slot-scope="{ width }"
         :width="width"

ee/app/assets/javascripts/burndown_chart/components/burnup_chart.vue

+<script>
+import { GlLineChart } from '@gitlab/ui/dist/charts';
+import dateFormat from 'dateformat';
+import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
+import { __, sprintf } from '~/locale';
+
+export default {
+  components: {
+    GlLineChart,
+    ResizableChartContainer,
+  },
+  props: {
+    startDate: {
+      type: String,
+      required: true,
+    },
+    dueDate: {
+      type: String,
+      required: true,
+    },
+    scope: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      tooltip: {
+        title: '',
+        content: '',
+      },
+    };
+  },
+  computed: {
+    dataSeries() {
+      const series = [
+        {
+          name: __('Total'),
+          data: this.scope,
+        },
+      ];
+
+      return series;
+    },
+    options() {
+      return {
+        xAxis: {
+          name: '',
+          type: 'time',
+          min: this.startDate,
+          max: this.dueDate,
+          axisLine: {
+            show: true,
+          },
+        },
+        yAxis: {
+          name: __('Total issues'),
+          axisLine: {
+            show: true,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: () => '',
+        },
+      };
+    },
+  },
+  methods: {
+    formatTooltipText(params) {
+      const [seriesData] = params.seriesData;
+      this.tooltip.title = dateFormat(params.value, 'dd mmm yyyy');
+
+      const text = __('%{total} open issues');
+
+      this.tooltip.content = sprintf(text, {
+        total: seriesData.value[1],
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div data-qa-selector="burnup_chart">
+    <div class="burndown-header d-flex align-items-center">
+      <h3>{{ __('Burnup chart') }}</h3>
+    </div>
+    <resizable-chart-container class="js-burnup-chart">
+      <gl-line-chart :data="dataSeries" :option="options" :format-tooltip-text="formatTooltipText">
+        <template slot="tooltipTitle">{{ tooltip.title }}</template>
+        <template slot="tooltipContent">{{ tooltip.content }}</template>
+      </gl-line-chart>
+    </resizable-chart-container>
+  </div>
+</template>

ee/app/assets/javascripts/burndown_chart/index.js

@@ -2,8 +2,8 @@ import Vue from 'vue';
 import $ from 'jquery';
 import Cookies from 'js-cookie';
 import BurnCharts from './components/burn_charts.vue';
-import BurndownChartData from './burndown_chart_data';
-import Flash from '~/flash';
+import BurndownChartData from './burn_chart_data';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 
@@ -22,16 +22,34 @@ export default () => {
   if ($chartEl.length) {
     const startDate = $chartEl.data('startDate');
     const dueDate = $chartEl.data('dueDate');
+    const milestoneId = $chartEl.data('milestoneId');
     const burndownEventsPath = $chartEl.data('burndownEventsPath');
+    const burnupEventsPath = $chartEl.data('burnupEventsPath');
 
-    axios
-      .get(burndownEventsPath)
-      .then(response => {
-        const burndownEvents = response.data;
-        const chartData = new BurndownChartData(burndownEvents, startDate, dueDate).generate();
+    const fetchData = [axios.get(burndownEventsPath)];
 
-        const openIssuesCount = chartData.map(d => [d[0], d[1]]);
-        const openIssuesWeight = chartData.map(d => [d[0], d[2]]);
+    if (gon.features.burnupCharts) {
+      fetchData.push(axios.get(burnupEventsPath));
+    }
+
+    Promise.all(fetchData)
+      .then(([burndownResponse, burnupResponse]) => {
+        const burndownEvents = burndownResponse.data;
+        const burndownChartData = new BurndownChartData(
+          burndownEvents,
+          startDate,
+          dueDate,
+        ).generateBurndownTimeseries();
+
+        const burnupEvents = burnupResponse?.data || [];
+
+        const { burnupScope } =
+          new BurndownChartData(burnupEvents, startDate, dueDate).generateBurnupTimeseries({
+            milestoneId,
+          }) || {};
+
+        const openIssuesCount = burndownChartData.map(d => [d[0], d[1]]);
+        const openIssuesWeight = burndownChartData.map(d => [d[0], d[2]]);
 
         return new Vue({
           el: container,
@@ -45,11 +63,14 @@ export default () => {
                 dueDate,
                 openIssuesCount,
                 openIssuesWeight,
+                burnupScope,
               },
             });
           },
         });
       })
-      .catch(() => new Flash(__('Error loading burndown chart data')));
+      .catch(() => {
+        createFlash(__('Error loading burndown chart data'));
+      });
   }
 };

ee/app/views/shared/milestones/_burndown.html.haml

@@ -2,13 +2,15 @@
 - burndown = burndown_chart(milestone)
 - warning = data_warning_for(burndown)
 - burndown_endpoint = milestone.group_milestone? ? api_v4_groups_milestones_burndown_events_path(id: milestone.group.id, milestone_id: milestone.id) : api_v4_projects_milestones_burndown_events_path(id: milestone.project.id, milestone_id: milestone.timebox_id)
+- burnup_endpoint = milestone.group_milestone? ? api_v4_groups_milestones_burnup_events_path(id: milestone.group.id, milestone_id: milestone.id) : api_v4_projects_milestones_burnup_events_path(id: milestone.project.id, milestone_id: milestone.timebox_id)
 
 = warning
 
 - if can_generate_chart?(milestone, burndown)
   .burndown-chart.mb-2{ data: { start_date: burndown.start_date.strftime("%Y-%m-%d"),
     due_date: burndown.due_date.strftime("%Y-%m-%d"),
-    burndown_events_path: expose_url(burndown_endpoint), qa_selector: 'burndown_chart' } }
+    milestone_id: milestone.id,
+    burndown_events_path: expose_url(burndown_endpoint), burnup_events_path: expose_url(burnup_endpoint), qa_selector: 'burndown_chart' } }
 
 - elsif show_burndown_placeholder?(milestone, warning)
   .burndown-hint.content-block.container-fluid

ee/spec/features/burnup_charts_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'Burnup charts', :js do
+  let_it_be(:burnup_chart_selector) { '.js-burnup-chart' }
+  let_it_be(:burndown_chart_selector) { '.js-burndown-chart' }
+
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group) }
+  let_it_be(:project) { create(:project, namespace: group) }
+  let_it_be(:milestone) { create(:milestone, :with_dates, group: group, title: 'January Milestone', description: 'Cut scope from milestone', start_date: '2020-01-30', due_date: '2020-02-10') }
+  let_it_be(:other_milestone) { create(:milestone, :with_dates, group: group, title: 'February Milestone', description: 'burnup sample', start_date: '2020-02-11', due_date: '2020-02-28') }
+
+  let_it_be(:issue_1) { create(:issue, created_at: '2020-01-30', project: project, milestone: milestone, weight: 2) }
+  let_it_be(:issue_2) { create(:issue, created_at: '2020-01-30', project: project, milestone: milestone, weight: 3) }
+  let_it_be(:issue_3) { create(:issue, created_at: '2020-01-30', project: project, milestone: milestone, weight: 2) }
+
+  let_it_be(:event1) { create(:resource_milestone_event, issue: issue_1, milestone: milestone, action: 'add', created_at: '2020-01-30') }
+  let_it_be(:event2) { create(:resource_milestone_event, issue: issue_2, milestone: milestone, action: 'add', created_at: '2020-01-30') }
+  let_it_be(:event3) { create(:resource_milestone_event, issue: issue_3, milestone: milestone, action: 'add', created_at: '2020-01-30') }
+
+  let_it_be(:event4) { create(:resource_milestone_event, issue: issue_2, milestone: milestone, action: 'remove', created_at: '2020-02-06') }
+  let_it_be(:event5) { create(:resource_milestone_event, issue: issue_3, milestone: other_milestone, action: 'add', created_at: '2020-02-06') }
+
+  before do
+    group.add_developer(user)
+    sign_in(user)
+  end
+
+  describe 'licensed feature available' do
+    before do
+      stub_licensed_features(group_burndown_charts: true)
+    end
+
+    it 'shows burnup chart, with a point per day' do
+      visit group_milestone_path(milestone.group, milestone)
+
+      expect(burnup_chart_points.count).to be(12)
+    end
+  end
+
+  describe 'licensed feature not available' do
+    before do
+      stub_licensed_features(group_burndown_charts: false)
+    end
+
+    it 'does not show burnup chart' do
+      visit group_milestone_path(milestone.group, milestone)
+
+      expect(page).not_to have_selector(burnup_chart_selector)
+    end
+  end
+
+  describe 'feature flag disabled' do
+    before do
+      stub_licensed_features(group_burndown_charts: true)
+      stub_feature_flags(burnup_charts: false)
+    end
+
+    it 'only shows burndown chart' do
+      visit group_milestone_path(milestone.group, milestone)
+
+      expect(page).to have_selector(burndown_chart_selector)
+      expect(page).not_to have_selector(burnup_chart_selector)
+    end
+  end
+
+  def burnup_chart_points
+    fill_color = "#5772ff"
+    burnup_chart.all("path[fill='#{fill_color}']", count: 12)
+  end
+
+  def burnup_chart
+    page.find(burnup_chart_selector)
+  end
+end

ee/spec/frontend/burndown_chart/components/burnup_chart_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlLineChart } from '@gitlab/ui/dist/charts';
+import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
+import BurnupChart from 'ee/burndown_chart/components/burnup_chart.vue';
+
+describe('Burnup chart', () => {
+  let wrapper;
+
+  const defaultProps = {
+    startDate: '2019-08-07T00:00:00.000Z',
+    dueDate: '2019-09-09T00:00:00.000Z',
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(BurnupChart, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      stubs: {
+        ResizableChartContainer,
+      },
+    });
+  };
+
+  it.each`
+    scope
+    ${[{ '2019-08-07T00:00:00.000Z': 100 }]}
+    ${[{ '2019-08-07T00:00:00.000Z': 100 }, { '2019-08-08T00:00:00.000Z': 99 }, { '2019-09-08T00:00:00.000Z': 1 }]}
+  `('renders the lineChart correctly', ({ scope }) => {
+    createComponent({ scope });
+    const chartData = wrapper.find(GlLineChart).props('data');
+
+    expect(chartData).toEqual([
+      {
+        name: 'Total',
+        data: scope,
+      },
+    ]);
+  });
+});

locale/gitlab.pot

@@ -3506,6 +3506,9 @@ msgstr ""
 msgid "BurndownChartLabel|Open issues"
 msgstr ""
 
+msgid "Burnup chart"
+msgstr ""
+
 msgid "Business"
 msgstr ""