사용자 정의 대시보드

<script>
import CustomizableDashboard from 'ee/vue_shared/components/customizable_dashboard/customizable_dashboard.vue';
import { dashboard } from './constants';

export default {
  name: 'AnalyticsDashboard',
  components: {
    CustomizableDashboard,
  },
  data() {
    return {
      // 변경 사항을 추적하기 위해 원본(기본) 대시보드 개체를 유지합니다.
      dashboard: {
        ...dashboard,
        default: { ...dashboard, }
      },
      // 선택적 대시보드 필터. 현재 이용 가능한 필터는 날짜 범위입니다.
      defaultFilters: {
        dateRangeOption: 'last_7_days' // 'custom', 'today', 'last_7_days', 'last_30_days'
        endDate: new Date(2023, 06, 14),
        startDate: new Date(2023, 06, 7),
      },
      // URL 쿼리 문자열로 필터 개체를 동기화하려면 true로 설정합니다.
      syncUrlFilters: true,
      // 날짜 범위 필터를 표시하려면 true로 설정합니다.
      showDateRangeFilter: true,
      // 날짜 범위에 대한 최대 크기입니다. 무제한으로 설정하려면 0입니다.
      dateRangeLimit: 0,
    };
  },
};
</script>

<template>
  <customizable-dashboard
    :initial-dashboard="dashboard"
    :default-filters="defaultFilters"
    :sync-url-filters="syncUrlFilters"
    :show-date-range-filter="showDateRangeFilter"
    :date-range-limit="dateRangeLimit"
  />
</template>

<script>
import { s__ } from '~/locale';

export const I18N_MY_NEW_CATEGORY = s__('Namespace|My data source');

export default {
  name: 'AnalyticsDashboard',
  data() {
    return {
      ...,
      // 대시보드 저장 상태를 렌더링하려면 true로 설정합니다.
      isSaving: false,
      // 기능별로 분류된 사용 가능한 시각화 디렉터리
      availableVisualizations: {
        // 표시할 시각화 카테고리 제목
        [I18N_MY_NEW_CATEGORY]: {
          // 시각화 ID를 비동기적으로 로드 중인 경우 true로 설정합니다.
          loading: false,
          // 사용자가 대시보드에 추가할 수 있는 사용 가능한 시각화 ID 디렉터리
          visualizationIds: [
            'page_views_over_time',
            'events_over_time',
          ],
        },
      }
    };
  },
  methods: {
    // 사용자가 현재 대시보드에 대한 변경 사항을 저장할 때의 이벤트 핸들러
    saveDashboard(dashboardId, newDashboardObject) {
      // 변경 사항을 저장하고 `this.dashboard`를 수정합니다.
    },
    // 사용자가 새 패널에 시각화를 추가할 때의 이벤트 핸들러
    addNewPanel(visualizationId, visualizationSource) {
      // 시각화를 로드하고 `this.dashboard.panels`에 새 패널을 추가합니다.
    },
  },
}
</script>

<template>
  <customizable-dashboard
    ...
    :available-visualizations="availableVisualizations"
    :is-saving="isSaving"
    @save="handleSave"
    @add-panel="handleAddPanel"
  />
</template>