Analytics 대시보드

요약

분석 대시보드는 설정 기반의 대시보드 구조를 제공하며, GitLab 이나 사용자가 만든 대시보드 설정을 렌더링하고 수정하는 데 쓰입니다. 분석 대시보드는 Premium 및 Ultimate 구독을 대상으로 합니다. 분석 대시보드는 다음 논리적 구성 요소로 나눌 수 있습니다.

히스토리

GitLab 15.5에서 실험 기능으로 도입됐습니다.
인라인 시각화 설정이 GitLab 17.9에서 도입됐습니다.
패널 툴팁 설정이 GitLab 18.3에서 도입됐습니다.
패널 뷰 설정이 GitLab 19.1에서 도입됐습니다.
패널 제목 아이콘 설정이 GitLab 19.2에서 도입됐습니다.

분석 대시보드는 설정 기반의 대시보드 구조를 제공하며, GitLab 이나 사용자가 만든 대시보드 설정을 렌더링하고 수정하는 데 쓰입니다.

Note

분석 대시보드는 Premium 및 Ultimate 구독을 대상으로 합니다.

개요#

분석 대시보드는 다음 논리적 구성 요소로 나눌 수 있습니다.

대시보드: 모든 시각화를 구성하고 표시하는 컨테이너
패널: 시각화를 담는 개별 영역
시각화: 데이터 표시 템플릿(차트, 표 등)
데이터 소스: 기반 데이터에 대한 연결

대시보드#

대시보드는 데이터 소스, 패널, 시각화의 모음을 한 페이지로 묶어 데이터를 시각적으로 표현합니다.

대시보드의 각 패널은 해당 데이터 소스를 조회하고 그 결과를 지정된 시각화로 표시합니다. 시각화는 데이터를 표시하는 방법의 템플릿 역할을 하며 여러 패널에서 재사용할 수 있습니다.

일반적인 대시보드 구조는 다음과 같습니다.

dashboard
├── panelA
│  └── visualizationX
│      └── datasource1
├── panelB
│  └── visualizationY
│      └── datasource2
├── panelC
│  └── visualizationY
│      └── datasource1

대시보드 필터#

대시보드는 다음 필터를 지원합니다.

Date range: 날짜로 데이터를 필터링하는 날짜 선택기.
Anonymous users: 데이터셋에서 익명 사용자를 포함하거나 제외하는 토글.
Project: 프로젝트로 데이터를 필터링하는 드롭다운 목록.
Filtered search: 선택한 속성으로 데이터를 필터링하는 필터 바.

대시보드 상태#

status 배지가 있는 대시보드는 개발 단계와 기능 수준을 나타냅니다. status 배지가 없는 대시보드는 개발이 완료돼 프로덕션에 사용할 수 있습니다.

지원되는 값은 다음과 같습니다.

experiment
beta

패널#

패널은 대시보드의 기본 단위이며 시각화를 담는 컨테이너 역할을 합니다. 각 패널은 GlDashboardPanel이라는 GitLab 표준 UI 컴포넌트로 만들어집니다.

시각화#

시각화는 데이터를 차트나 표 같은 그래픽 형식으로 변환합니다. 다음 표준 시각화 유형을 사용할 수 있습니다.

LineChart
ColumnChart
DataTable
SingleStats

지원되는 모든 시각화 유형은 analytics_visualization_legacy의 AnalyticsVisualization.type enum에서 확인할 수 있습니다. 다만 이 목록에 얽매일 필요는 없으며, 필요에 따라 새 시각화 유형을 만들 수 있습니다.

데이터 소스#

데이터 소스는 데이터베이스, 엔드포인트, 또는 데이터 모음에 대한 연결이며, 대시보드는 이를 통해 결과를 조회하고 가져오고 필터링하고 시각화합니다. 기본으로 지원되는 데이터 소스 집합이 있지만(analytics_visualization_legacy의 Data.type enum 참고), 필요에 맞게 새로 추가할 수 있습니다.

모든 시각화 유형을 지원하려면 데이터 소스가 단일 집계 값과, 각 시점의 값을 담은 시계열을 함께 반환하도록 합니다.

각 패널은 다른 패널과 무관하게 데이터 소스에서 데이터를 개별적으로 가져옵니다.

기본 제공 대시보드 생성#

GitLab은 By GitLab으로 표시되는 사전 정의 대시보드를 제공합니다. 사용자는 이를 편집할 수 없지만, 복제하거나 유사한 사용자 지정 대시보드를 만드는 기반으로 사용할 수 있습니다.

Note

여기서는 _legacy 스키마 쌍(analytics_dashboard_legacy.json과 analytics_visualization_legacy.json)으로 검증하는 그룹 및 프로젝트 대시보드를 다룹니다. explore 대시보드에는 레거시가 아닌 스키마 쌍(analytics_dashboard.json과 analytics_visualization.json)을 사용합니다.

기본 제공 분석 대시보드를 만드는 절차는 다음과 같습니다.

ee/lib/gitlab/analytics 아래에 새 대시보드용 폴더를 만듭니다. 예를 들면 다음과 같습니다.
```
ee/lib/gitlab/analytics/cool_dashboard
```
새 폴더에 대시보드 설정 파일(예: dashboard.yaml)을 만듭니다. 설정은 ee/app/validators/json_schemas/analytics_dashboard_legacy.json에 정의된 JSON 스키마를 따라야 합니다. 예시는 다음과 같습니다.
```
# cool_dashboard/dashboard.yaml
---
title: My dashboard
description: My cool dashboard
panels: []
```

선택 사항. .yaml 설정 파일에서 필터의 enabled 옵션을 true로 설정해 대시보드 필터를 활성화합니다.

# cool_dashboard/dashboard.yaml
---
title: My dashboard
filters:
  excludeAnonymousUsers:
    enabled: true
  dateRange:
    enabled: true
  projects:
    enabled: true
  filteredSearch:
    enabled: true
    # Use `options` to define an array of tokens to override the default ones
    options:
      - token: assignee
        unique: false
      - token: label
        maxSuggestions: 10

지원되는 필터 목록은 ee/app/validators/json_schemas/analytics_dashboard_legacy.json의 DashboardFilters 타입을 참고합니다.

선택 사항. 대시보드가 프로덕션에 사용할 준비가 되지 않았다면 알맞은 상태를 설정합니다.
```
# cool_dashboard/dashboard.yaml
---
title: My dashboard
status: experiment
```
선택 사항. 대시보드 디렉터리에 템플릿용 폴더(예: visualizations/)를 만들고 각 템플릿의 설정 파일을 추가해 시각화 템플릿을 만듭니다.

시각화 템플릿은 하나의 시각화를 여러 대시보드에서 사용할 때 유용합니다. 템플릿을 쓰면 같은 YAML 블록을 여러 번 중복해서 쓰지 않아도 됩니다. 기본 제공 대시보드는 시각화 템플릿이 바뀌면 대시보드도 자동으로 갱신됩니다. 사용자 정의 대시보드는 시각화 템플릿을 참조하지 않고 복사합니다. 대시보드로 복사된 시각화 템플릿은 원본 시각화 템플릿이 갱신돼도 함께 갱신되지 않습니다.

각 파일은 ee/app/validators/json_schemas/analytics_visualization_legacy.json에 정의된 JSON 스키마를 따라야 합니다. 예시는 다음과 같습니다.
```
# cool_dashboard/visualizations/cool_viz.yaml
---
version: 1
type: LineChart    # The render type of the visualization.
data:
  type: my_datasource    # The name of the datasource
  query: {}
options: {}
```
query와 options 객체는 모두 데이터 소스로 전달돼 알맞은 쿼리를 만드는 데 쓰입니다.

지원되는 데이터 소스 목록은 데이터 소스를, 지원되는 시각화 렌더 유형 목록은 시각화를 참고합니다.

시각화를 참조하는 패널을 대시보드에 추가하려면 다음 중 하나를 사용합니다.

권장. 대시보드 설정 파일 안에서 인라인 시각화를 사용합니다.

# cool_dashboard/dashboard.yaml
---
title: My dashboard
description: My cool dashboard
panels:
  - title: "My cool panel"
    titleIcon: chart
    tooltip:
      description: "This is a cool panel. %{linkStart}Learn more%{linkEnd}."
      descriptionLink: "https://gitlab.com"
    visualization:
      version: 1
      slug: 'cool_viz' # Recommended to define a slug when a visualization is inline
      type: LineChart    # The render type of the visualization.
      data:
        type: my_datasource    # The name of the datasource
        query: {}
      options: {}
    gridAttributes:
      yPos: 0
      xPos: 0
      width: 3
      height: 1

query와 options 객체는 모두 데이터 소스로 전달돼 알맞은 쿼리를 만드는 데 쓰입니다.

지원되는 데이터 소스 목록은 데이터 소스를, 지원되는 시각화 렌더 유형 목록은 시각화를 참고합니다.

시각화 템플릿을 사용합니다.

# cool_dashboard/dashboard.yaml
---
title:  My dashboard
description: My cool dashboard

panels:
  - title: "My cool panel"
    titleIcon: chart
    tooltip:
      description: "This is a cool panel. %{linkStart}Learn more%{linkEnd}."
      descriptionLink: "https://gitlab.com"
    visualization: cool_viz    # Must match the visualization config filename
    gridAttributes:
      yPos: 0
      xPos: 0
      width: 3
      height: 1

gridAttributes는 12x12 대시보드 그리드 안에서 패널의 위치를 지정합니다.

titleIcon은 패널 제목 옆에 아이콘을 추가합니다. 패널이 오류 상태이면 제목 아이콘 대신 경고 아이콘이 표시됩니다.

tooltip은 패널 제목 옆에 도움말 아이콘을 추가해 마우스를 올렸을 때 상황에 맞는 도움말을 표시합니다. description 텍스트를 사용하며, %{linkStart}와 %{linkEnd} 자리표시자 사이에 링크를 넣으려면 descriptionLink를 함께 지정합니다. tooltip은 visualization.options의 시각화 수준에서 정의하거나, 데이터 소스에서 setVisualizationOverrides 콜백 함수로 동적으로 정의할 수도 있습니다. 패널 수준 툴팁이 시각화 수준 툴팁보다 우선합니다.

선택 사항. 패널에 views를 추가하면 사용자가 여러 시각화를 전환할 수 있습니다. 패널에는 뷰를 2개 이상 5개 이하로 정의해야 합니다(Pajamas 세그먼티드 컨트롤 참고). 각 뷰에는 text 레이블과 visualization(인라인 시각화 또는 시각화 템플릿)이 필요합니다. 첫 번째 뷰가 기본으로 선택됩니다. views를 설정해도 스키마상 패널 수준의 visualization 속성은 여전히 필요하며, 첫 번째 뷰와 같은 시각화로 설정합니다.
```
# cool_dashboard/dashboard.yaml
---
panels:
  - title: "Code Suggestions"
    visualization: suggestions_weekly
    views:
      - text: Weekly
        visualization: suggestions_weekly
      - text: Monthly
        visualization: suggestions_monthly
    gridAttributes:
      yPos: 0
      xPos: 0
      width: 6
      height: 4
```
ee/app/models/analytics/dashboards/dashboard.rb의 builtin_dashboards에 추가해 대시보드를 등록합니다. 여기에서 대시보드를 프로젝트 수준이나 그룹 수준(또는 둘 다)에서 제공하도록 설정하고, 기능 플래그·라이선스·사용자 권한 등으로 접근을 제한할 수 있습니다.
선택 사항. ee/app/models/analytics/dashboards/visualization.rb의 get_path_for_visualization에 추가해 시각화 템플릿을 등록합니다.

전체 예시는 GitLab Duo 및 SDLC 트렌드 대시보드 설정을 참고합니다.

새 데이터 소스 추가#

새 데이터 소스를 추가하는 절차는 다음과 같습니다.

fetch 메서드를 내보내는 새 JavaScript 모듈을 만듭니다. fetch API의 전체 문서는 analytics_dashboards/data_sources/index.js를 참고합니다. 예시로 cube_analytics.js도 확인할 수 있습니다
data_sources/index.js의 exports 목록에 모듈을 추가합니다.
그룹 및 프로젝트 대시보드용으로 analytics_visualization_legacy.json의 Data 타입 목록에 데이터 소스를 추가합니다. explore 대시보드에서도 사용할 수 있게 하려면 analytics_visualization.json에도 추가합니다.

Note

모든 패널이 동일하게 필터링된 데이터를 보여주도록 데이터 소스는 필터를 따라야 합니다.

새 시각화 렌더 유형 추가#

새 시각화 렌더 유형을 추가하는 절차는 다음과 같습니다.

data와 options 속성을 받는 새 Vue 컴포넌트를 만듭니다. 예시는 line_chart.vue를 참고합니다.
시각화의 여러 상태에 대한 Storybook 스토리를 추가합니다. 예시는 line_chart.stories.js를 참고합니다.
analytics_dashboard_panel.vue의 조건부 컴포넌트 import 목록에 컴포넌트를 추가합니다.
그룹 및 프로젝트 대시보드용으로 analytics_visualization_legacy.json의 AnalyticsVisualization enum 타입에 컴포넌트를 추가합니다. explore 대시보드에서도 이 렌더 유형을 사용할 수 있게 하려면 analytics_visualization.json에도 추가합니다.

기존 컴포넌트를 시각화로 마이그레이션#

기존 컴포넌트를 대시보드 시각화로 마이그레이션할 수 있습니다. 이때는 기존 컴포넌트를 새 시각화로 감싸 필요한 컨텍스트와 데이터를 전달합니다. 예시는 dora_performers_score.vue를 참고합니다.

전환 과정에서 컴포넌트가 내부적으로 데이터를 직접 가져올 수도 있습니다. 다만 공유 분석 데이터 소스 방식으로 시각화를 옮길 계획은 반드시 세워야 합니다. 예시는 value_stream.js를 참고합니다.

기능 플래그 뒤에서 시각화 도입#

새 시각화를 개발하는 동안에는 기능 플래그를 사용해 사용자에게 장애나 잘못된 데이터가 노출될 위험을 줄일 수 있습니다.

from_data 메서드는 대시보드의 패널 객체를 만듭니다. filter_map 메서드를 사용하면 개발 중인 시각화가 포함된 패널의 렌더링을 건너뛰는 조건을 추가할 수 있습니다.

예를 들어 다음은 enable_usage_overview_visualization 기능 플래그를 추가하고, 그 상태를 확인해 usage_overview 시각화를 사용하는 패널을 렌더링할지 결정하는 코드입니다.

panel_yaml.filter_map do |panel|
  # Skip processing the usage_overview panel if the feature flag is disabled
  next if panel['visualization'] == 'usage_overview' && Feature.disabled?(:enable_usage_overview_visualization)

  new(
    title: panel['title'],
    project: project,
    grid_attributes: panel['gridAttributes'],
    query_overrides: panel['queryOverrides'],
    visualization: panel['visualization']
  )
end

Analytics 대시보드

GitLab v19.4

원문 보기

번역일: 2026-09-18

요약

히스토리

GitLab 15.5에서 실험 기능으로 도입됐습니다.
인라인 시각화 설정이 GitLab 17.9에서 도입됐습니다.
패널 툴팁 설정이 GitLab 18.3에서 도입됐습니다.
패널 뷰 설정이 GitLab 19.1에서 도입됐습니다.
패널 제목 아이콘 설정이 GitLab 19.2에서 도입됐습니다.

분석 대시보드는 설정 기반의 대시보드 구조를 제공하며, GitLab 이나 사용자가 만든 대시보드 설정을 렌더링하고 수정하는 데 쓰입니다.

Note

분석 대시보드는 Premium 및 Ultimate 구독을 대상으로 합니다.

개요#

분석 대시보드는 다음 논리적 구성 요소로 나눌 수 있습니다.

대시보드: 모든 시각화를 구성하고 표시하는 컨테이너
패널: 시각화를 담는 개별 영역
시각화: 데이터 표시 템플릿(차트, 표 등)
데이터 소스: 기반 데이터에 대한 연결

대시보드#

대시보드는 데이터 소스, 패널, 시각화의 모음을 한 페이지로 묶어 데이터를 시각적으로 표현합니다.

일반적인 대시보드 구조는 다음과 같습니다.

dashboard
├── panelA
│  └── visualizationX
│      └── datasource1
├── panelB
│  └── visualizationY
│      └── datasource2
├── panelC
│  └── visualizationY
│      └── datasource1

대시보드 필터#

대시보드는 다음 필터를 지원합니다.

Date range: 날짜로 데이터를 필터링하는 날짜 선택기.
Anonymous users: 데이터셋에서 익명 사용자를 포함하거나 제외하는 토글.
Project: 프로젝트로 데이터를 필터링하는 드롭다운 목록.
Filtered search: 선택한 속성으로 데이터를 필터링하는 필터 바.

대시보드 상태#

status 배지가 있는 대시보드는 개발 단계와 기능 수준을 나타냅니다. status 배지가 없는 대시보드는 개발이 완료돼 프로덕션에 사용할 수 있습니다.

지원되는 값은 다음과 같습니다.

experiment
beta

패널#

패널은 대시보드의 기본 단위이며 시각화를 담는 컨테이너 역할을 합니다. 각 패널은 GlDashboardPanel이라는 GitLab 표준 UI 컴포넌트로 만들어집니다.

시각화#

시각화는 데이터를 차트나 표 같은 그래픽 형식으로 변환합니다. 다음 표준 시각화 유형을 사용할 수 있습니다.

LineChart
ColumnChart
DataTable
SingleStats

데이터 소스#

모든 시각화 유형을 지원하려면 데이터 소스가 단일 집계 값과, 각 시점의 값을 담은 시계열을 함께 반환하도록 합니다.

각 패널은 다른 패널과 무관하게 데이터 소스에서 데이터를 개별적으로 가져옵니다.

기본 제공 대시보드 생성#

Note

기본 제공 분석 대시보드를 만드는 절차는 다음과 같습니다.

ee/lib/gitlab/analytics 아래에 새 대시보드용 폴더를 만듭니다. 예를 들면 다음과 같습니다.
```
ee/lib/gitlab/analytics/cool_dashboard
```
새 폴더에 대시보드 설정 파일(예: dashboard.yaml)을 만듭니다. 설정은 ee/app/validators/json_schemas/analytics_dashboard_legacy.json에 정의된 JSON 스키마를 따라야 합니다. 예시는 다음과 같습니다.
```
# cool_dashboard/dashboard.yaml
---
title: My dashboard
description: My cool dashboard
panels: []
```

선택 사항. .yaml 설정 파일에서 필터의 enabled 옵션을 true로 설정해 대시보드 필터를 활성화합니다.

# cool_dashboard/dashboard.yaml
---
title: My dashboard
filters:
  excludeAnonymousUsers:
    enabled: true
  dateRange:
    enabled: true
  projects:
    enabled: true
  filteredSearch:
    enabled: true
    # Use `options` to define an array of tokens to override the default ones
    options:
      - token: assignee
        unique: false
      - token: label
        maxSuggestions: 10

지원되는 필터 목록은 ee/app/validators/json_schemas/analytics_dashboard_legacy.json의 DashboardFilters 타입을 참고합니다.

선택 사항. 대시보드가 프로덕션에 사용할 준비가 되지 않았다면 알맞은 상태를 설정합니다.
```
# cool_dashboard/dashboard.yaml
---
title: My dashboard
status: experiment
```
선택 사항. 대시보드 디렉터리에 템플릿용 폴더(예: visualizations/)를 만들고 각 템플릿의 설정 파일을 추가해 시각화 템플릿을 만듭니다.

시각화 템플릿은 하나의 시각화를 여러 대시보드에서 사용할 때 유용합니다. 템플릿을 쓰면 같은 YAML 블록을 여러 번 중복해서 쓰지 않아도 됩니다. 기본 제공 대시보드는 시각화 템플릿이 바뀌면 대시보드도 자동으로 갱신됩니다. 사용자 정의 대시보드는 시각화 템플릿을 참조하지 않고 복사합니다. 대시보드로 복사된 시각화 템플릿은 원본 시각화 템플릿이 갱신돼도 함께 갱신되지 않습니다.

각 파일은 ee/app/validators/json_schemas/analytics_visualization_legacy.json에 정의된 JSON 스키마를 따라야 합니다. 예시는 다음과 같습니다.
```
# cool_dashboard/visualizations/cool_viz.yaml
---
version: 1
type: LineChart    # The render type of the visualization.
data:
  type: my_datasource    # The name of the datasource
  query: {}
options: {}
```
query와 options 객체는 모두 데이터 소스로 전달돼 알맞은 쿼리를 만드는 데 쓰입니다.

지원되는 데이터 소스 목록은 데이터 소스를, 지원되는 시각화 렌더 유형 목록은 시각화를 참고합니다.

시각화를 참조하는 패널을 대시보드에 추가하려면 다음 중 하나를 사용합니다.

권장. 대시보드 설정 파일 안에서 인라인 시각화를 사용합니다.

# cool_dashboard/dashboard.yaml
---
title: My dashboard
description: My cool dashboard
panels:
  - title: "My cool panel"
    titleIcon: chart
    tooltip:
      description: "This is a cool panel. %{linkStart}Learn more%{linkEnd}."
      descriptionLink: "https://gitlab.com"
    visualization:
      version: 1
      slug: 'cool_viz' # Recommended to define a slug when a visualization is inline
      type: LineChart    # The render type of the visualization.
      data:
        type: my_datasource    # The name of the datasource
        query: {}
      options: {}
    gridAttributes:
      yPos: 0
      xPos: 0
      width: 3
      height: 1

query와 options 객체는 모두 데이터 소스로 전달돼 알맞은 쿼리를 만드는 데 쓰입니다.

지원되는 데이터 소스 목록은 데이터 소스를, 지원되는 시각화 렌더 유형 목록은 시각화를 참고합니다.

시각화 템플릿을 사용합니다.

# cool_dashboard/dashboard.yaml
---
title:  My dashboard
description: My cool dashboard

panels:
  - title: "My cool panel"
    titleIcon: chart
    tooltip:
      description: "This is a cool panel. %{linkStart}Learn more%{linkEnd}."
      descriptionLink: "https://gitlab.com"
    visualization: cool_viz    # Must match the visualization config filename
    gridAttributes:
      yPos: 0
      xPos: 0
      width: 3
      height: 1

gridAttributes는 12x12 대시보드 그리드 안에서 패널의 위치를 지정합니다.

titleIcon은 패널 제목 옆에 아이콘을 추가합니다. 패널이 오류 상태이면 제목 아이콘 대신 경고 아이콘이 표시됩니다.

선택 사항. 패널에 views를 추가하면 사용자가 여러 시각화를 전환할 수 있습니다. 패널에는 뷰를 2개 이상 5개 이하로 정의해야 합니다(Pajamas 세그먼티드 컨트롤 참고). 각 뷰에는 text 레이블과 visualization(인라인 시각화 또는 시각화 템플릿)이 필요합니다. 첫 번째 뷰가 기본으로 선택됩니다. views를 설정해도 스키마상 패널 수준의 visualization 속성은 여전히 필요하며, 첫 번째 뷰와 같은 시각화로 설정합니다.
```
# cool_dashboard/dashboard.yaml
---
panels:
  - title: "Code Suggestions"
    visualization: suggestions_weekly
    views:
      - text: Weekly
        visualization: suggestions_weekly
      - text: Monthly
        visualization: suggestions_monthly
    gridAttributes:
      yPos: 0
      xPos: 0
      width: 6
      height: 4
```
ee/app/models/analytics/dashboards/dashboard.rb의 builtin_dashboards에 추가해 대시보드를 등록합니다. 여기에서 대시보드를 프로젝트 수준이나 그룹 수준(또는 둘 다)에서 제공하도록 설정하고, 기능 플래그·라이선스·사용자 권한 등으로 접근을 제한할 수 있습니다.
선택 사항. ee/app/models/analytics/dashboards/visualization.rb의 get_path_for_visualization에 추가해 시각화 템플릿을 등록합니다.

전체 예시는 GitLab Duo 및 SDLC 트렌드 대시보드 설정을 참고합니다.

새 데이터 소스 추가#

새 데이터 소스를 추가하는 절차는 다음과 같습니다.

fetch 메서드를 내보내는 새 JavaScript 모듈을 만듭니다. fetch API의 전체 문서는 analytics_dashboards/data_sources/index.js를 참고합니다. 예시로 cube_analytics.js도 확인할 수 있습니다
data_sources/index.js의 exports 목록에 모듈을 추가합니다.
그룹 및 프로젝트 대시보드용으로 analytics_visualization_legacy.json의 Data 타입 목록에 데이터 소스를 추가합니다. explore 대시보드에서도 사용할 수 있게 하려면 analytics_visualization.json에도 추가합니다.

Note

모든 패널이 동일하게 필터링된 데이터를 보여주도록 데이터 소스는 필터를 따라야 합니다.

새 시각화 렌더 유형 추가#

새 시각화 렌더 유형을 추가하는 절차는 다음과 같습니다.

data와 options 속성을 받는 새 Vue 컴포넌트를 만듭니다. 예시는 line_chart.vue를 참고합니다.
시각화의 여러 상태에 대한 Storybook 스토리를 추가합니다. 예시는 line_chart.stories.js를 참고합니다.
analytics_dashboard_panel.vue의 조건부 컴포넌트 import 목록에 컴포넌트를 추가합니다.
그룹 및 프로젝트 대시보드용으로 analytics_visualization_legacy.json의 AnalyticsVisualization enum 타입에 컴포넌트를 추가합니다. explore 대시보드에서도 이 렌더 유형을 사용할 수 있게 하려면 analytics_visualization.json에도 추가합니다.

기존 컴포넌트를 시각화로 마이그레이션#

기능 플래그 뒤에서 시각화 도입#

새 시각화를 개발하는 동안에는 기능 플래그를 사용해 사용자에게 장애나 잘못된 데이터가 노출될 위험을 줄일 수 있습니다.

panel_yaml.filter_map do |panel|
  # Skip processing the usage_overview panel if the feature flag is disabled
  next if panel['visualization'] == 'usage_overview' && Feature.disabled?(:enable_usage_overview_visualization)

  new(
    title: panel['title'],
    project: project,
    grid_attributes: panel['gridAttributes'],
    query_overrides: panel['queryOverrides'],
    visualization: panel['visualization']
  )
end