사용자 정의 대시보드

<!-- 실패 목록과 함께 danger 팝오버 상태를 표시합니다 -->
<panels-base
 :title="오류가 있는 테스트 패널"
 :show-alert-state="true"
 :alert-variant="VARIANT_DANGER"
 :alert-popover-title="매우 나쁩니다!"
>
  <template #alert-popover>
    <p>{{ "다음과 같은 실패가 발생했습니다:" }}</p>
    <ul>
      <li>{{ "API 로드 실패" }}</li>
      <li>{{ "UI 로드 실패" }}</li>
    </ul>
  </template>
</panels-base>

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

export default {
  name: '내 사용자 정의 대시보드',
  components: {
    CustomizableDashboard,
    PanelsBase,
  },
  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,
      // 편집할 때 각 패널에 표시할 GlDisclosureDropdown 항목의 배열입니다.
      panelActions: [
        {
          text: __('삭제'),
          action: () => this.$emit('delete'),
          icon: 'remove',
        },
      ],
    };
  },
};
</script>

<template>
  <customizable-dashboard
    :initial-dashboard="dashboard"
    :default-filters="defaultFilters"
    :sync-url-filters="syncUrlFilters"
    :show-date-range-filter="showDateRangeFilter"
    :date-range-limit="dateRangeLimit"
  />
    <template #panel="{ panel, filters, editing, deletePanel }">
      <!-- Panels base는 시각화에 스타일된 래퍼를 제공합니다. -->
      <panels-base
        :title="panel.title"
        :editing="editing"
        :actions="panelActions"
        @delete="deletePanel"
      >
        <template #body>
          <!-- 여기에서 패널의 시각화를 렌더링합니다 -->
        </template>
      </panels-base>
    </template>
  </customizable-dashboard>
</template>

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

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

export default {
  name: 'MyCustomDashboard',
  data() {
    return {
      ...,
      // 초기 저장된 대시보드. 변경 사항 추적에 사용.
      initialDashboard: dashboard,
      // 대시보드 저장 상태를 렌더링하려면 true로 설정.
      isSaving: false,
      // 기능별로 분류된 사용 가능한 시각화 목록.
      availableVisualizations: {
        // 표시할 시각화 카테고리 제목.
        [I18N_MY_NEW_CATEGORY]: {
          // 시각화 ID를 비동기적으로 로드할 때 true로 설정.
          loading: false,
          // 사용자가 대시보드에 추가할 수 있는 사용 가능한 시각화 ID 목록.
          visualizationIds: [
            'page_views_over_time',
            'events_over_time',
          ],
        },
      }
    };
  },
  methods: {
    /**
     * 사용자가 현재 대시보드에서 변경한 내용을 저장할 때의 이벤트 핸들러.
     * @param  {String} dashboardId 현재 대시보드 ID.
     * @param  {String} newDashboardObject 새로 수정된 대시보드 객체.
     */
    saveDashboard(dashboardId, newDashboardObject) {
      this.isSaving = true;
      // 변경 사항을 어딘가에 저장.
      // 그런 다음 저장된 대시보드 버전 업데이트.
      this.initialDashboard = newDashboardObject;
      this.isSaving = false;
    },
  },
}
</script>

<template>
  <customizable-dashboard
    :initial-dashboard="initialDashboard"
    :available-visualizations="availableVisualizations"
    :is-saving="isSaving"
    @save="saveDashboard"
  />
    <template #panel="{ panel, filters, editing, deletePanel }">
      <my-dashboard-panel :panel="panel" />
    </template>
  </customizable-dashboard>
</template>