# 대시보드와 피벗 뷰

- Human documentation: [https://docs.univer.ai/ko-KR/guides/bases/features/dashboard](https://docs.univer.ai/ko-KR/guides/bases/features/dashboard)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/bases/features/dashboard.md](https://docs.univer.ai/ko-KR/guides/bases/features/dashboard.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [bases/features/dashboard.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/features/dashboard.ko-KR.mdx)

---

#### Package metadata

```json
{
  "preset": [],
  "plugins": [
    {
      "client": "@univerjs-pro/bases-dashboard",
      "facade": "@univerjs-pro/bases-dashboard/facade",
      "locale": "@univerjs-pro/bases-dashboard/locale/ko-KR"
    },
    {
      "client": "@univerjs-pro/bases-dashboard-ui",
      "locale": "@univerjs-pro/bases-dashboard-ui/locale/ko-KR"
    }
  ],
  "license": true,
  "server": false
}
```

피벗 뷰는 지역별 매출처럼 테이블 데이터를 요약합니다. 대시보드는 차트, 필터, 텍스트, 이미지를 한 페이지에 구성합니다. 각 기능은 별도 플러그인으로 제공되며 로컬 표시에는 공동 편집이 필요하지 않습니다.

## 플러그인 등록

Bases 핵심 및 UI 플러그인 뒤에 등록하세요.

#### npm

```bash
npm install @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
```

#### pnpm

```bash
pnpm add @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
```

#### yarn

```bash
yarn add @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
```

#### bun

```bash
bun add @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
```

```ts
import { UniverBaseDashboardPlugin } from '@univerjs-pro/bases-dashboard'
import { UniverBaseDashboardUIPlugin } from '@univerjs-pro/bases-dashboard-ui'

import '@univerjs-pro/bases-dashboard/facade'

univer.registerPlugin(UniverBaseDashboardPlugin)
univer.registerPlugin(UniverBaseDashboardUIPlugin)
```

추가한 패키지의 언어 리소스를 애플리케이션에 병합하세요. 플러그인은 차트, 문서, 도형 의존성을 선언합니다. 해당 의존성의 설정을 사용자 지정하려면 먼저 등록하세요.

## 매출 피벗 뷰 생성

다음 예제는 테이블을 만들고 지역별로 매출을 집계합니다.

```ts
import { PivotTableFiledAreaEnum } from '@univerjs-pro/engine-pivot'

const base = univerAPI.getActiveBase()
if (!base) throw new Error('Open a Base first')

const table = base.insertTable('Orders', { primaryFieldName: 'Region' })
const revenue = table.addField('Revenue', univerAPI.Enum.BaseFieldType.Number)
table.addRecords([
  { values: { [table.getPrimaryFieldId()]: 'East', [revenue.getId()]: 120 } },
  { values: { [table.getPrimaryFieldId()]: 'West', [revenue.getId()]: 80 } },
])

const pivot = base.createPivotView('Revenue by region', table.getId())
const pivotTable = pivot.getPivotTable()
pivotTable.addFieldWithSourceId(table.getPrimaryFieldId(), PivotTableFiledAreaEnum.Row)
pivotTable.addFieldWithSourceId(revenue.getId(), PivotTableFiledAreaEnum.Value)
pivot.updateConfig({ pivot: pivotTable.toJSON(), displayMode: 'chart-and-table' })

const baseUI = univerAPI.getBaseUI()
await baseUI.activateTable(table.getId())
await baseUI.activateView(pivot.getId())
```

`getPivotTable()`은 분리된 계산 모델을 반환합니다. 수정 후 `updateConfig()`를 호출하여 변경 사항을 Base에 저장하세요. `displayMode`에는 `table`, `chart`, `chart-and-table`을 사용할 수 있습니다.

## 대시보드에 차트 추가

```ts
const dashboard = base.createDashboard('Sales overview')
dashboard.addPivotChart(table.getId(), pivot.getId(), {
  title: 'Revenue by region',
  layout: { column: 0, row: 0, columnSpan: 6, rowSpan: 6 },
})
```

차트는 기존 피벗 뷰를 참조합니다. 집계 필드와 계산은 뷰가 관리하고 레이아웃과 표시는 대시보드가 관리합니다. Bases 사이드바에서 새 대시보드를 여세요.

`addTableFilter()`, `addText()`, `addImage()`, `addFormulaShape()`로 필터, 서식 있는 텍스트, 이미지, 수식 도형을 추가하세요. `getWidgets()`로 위젯을 읽고 `removeWidget()`으로 제거하세요.

## 저장 및 권한

`base.save()`로 대시보드 리소스를 포함한 전체 스냅샷을 저장하세요. 테이블 레코드만 저장하면 이 설정이 손실됩니다. 스냅샷을 복원하기 전에 대시보드 플러그인을 등록하세요.

대시보드와 피벗 뷰는 개별 읽기 전용 설정을 위한 `getPermission()`을 제공합니다. [권한](https://docs.univer.ai/ko-KR/guides/bases/features/core/permissions.md)을 참고하세요. 전체 API는 [Bases Facade](https://docs.univer.ai/ko-KR/reference/facade/base.md)에서 확인할 수 있습니다.