Skip to content

[FE] Customizable Cycle Analytics: Visualize Tasks by Type

Problem to solve

⚠️ - Need to resolve #38260 (closed)

FE implementation for #32421 (closed)

Feature flags required:

  • tasks_by_type_chart

MRs

Feature flag

:tasks_by_type_chart

Requirements

UI

  • The chart is rendered after a group is selected
  • Users can select labels based on the currently selected group (project labels will not be selectable)
  • User's can switch between issue and merge requests, the chart will update to reflect the user's selections
  • Start data defaults to the current day
  • Description text: Since we can currently only select 1 group, should the helper text read something like "Showing data for group <group_name> and x projects from <start_date> to <end_date>", furthermore if we only have 1 project selected should we just display the project name

BE API Integration

  • Stub endpoint
  • Endpoint: GET -/analytics/tasks_by_type
  • Accepted URL parameters:
Group id: group_id=5

(optional) List of project ids in a group: project_ids[]=4&project_ids[]=15

List of group label ids: label_ids[]=2&label_ids[]=7 (group labels: https://docs.gitlab.com/ee/api/group_labels.html)
Subject: subject=merge_requests OR subject=issues

(optional, defaults to 1 month ago) from: from=2019-06-01

(optional) to: to=2019-08-01
  • Response structure
[
  {
    "label": {
      "id": 1,
      "title": "label 1",
      "color": "#428BCA",
      "text_color": "#FFFFFF"
    },
    "series": [
      [
        "2018-01-01",
        23
      ],
      [
        "2018-01-02",
        5
      ]
    ]
  },
  {
    "label": {
      "id": 2,
      "title": "label 3",
      "color": "#428BCA",
      "text_color": "#FFFFFF"
    },
    "series": [
      [
        "2018-01-01",
        3
      ],
      [
        "2018-01-03",
        10
      ]
    ]
  }
]

Existing UI components

  • Stacked column chart
  • Segmented button control
  • Label multiselector
Edited by Ezekiel Kigbo