가이드
Vue 개발 가이드

Vue 개발 가이드

realpivot-vue로 Vue 앱에 RealPivot2를 적용하는 방법을 안내합니다.

Vue에서는 Wrapper 패키지 realpivot-vue를 사용합니다.
tableOptions, cubes, config 속성을 props로 전달하면 DataSet 로드와 Control 생성을 Wrapper가 자동으로 처리합니다.
런타임 API 호출이 필요한 경우 ref를 통해 컨트롤 인스턴스에 접근합니다.

설치

npm i realpivot2 realpivot-vue

스타일도 함께 로드합니다.

import 'realpivot2/style.css';

사용 예시

<template>
  <RealPivotVue
    ref="pivotRef"
    :realpivot="RealPivot"
    :table-options="tableOptions"
    :cubes="cubes"
    :modules="modules"
    :config="config"
    :license-key="licenseKey"
    w="100%"
    h="480px"
  />
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import * as RealPivot from 'realpivot2';
import {
  RealPivotVue,
  type PivotBookConfiguration,
  type PivotCubeOptions,
  type RealPivotRef,
} from 'realpivot-vue';
import 'realpivot2/style.css';
 
const tableOptions = [
  {
    name: 'sales',
    source: [
      { 국가: '한국', 차종: '승용', 판매수량: 12 },
      { 국가: '한국', 차종: 'SUV', 판매수량: 8 },
      { 국가: '미국', 차종: '승용', 판매수량: 15 },
      { 국가: '미국', 차종: 'SUV', 판매수량: 10 },
    ],
    table: {
      fields: [
        { name: '국가', type: 'text' },
        { name: '차종', type: 'text' },
        { name: '판매수량', type: 'number' },
      ],
    },
  },
];
 
const cubes: PivotCubeOptions[] = [
  {
    name: 'sales',
    table: 'sales',
    schema: {
      dimensions: [
        { name: '국가', type: 'str' },
        { name: '차종', type: 'str' },
      ],
      measures: [{ name: '판매수량', type: 'f64', aggregate: 'sum' }],
    },
  },
];
 
const config: PivotBookConfiguration = {
  general: { title: '첫 번째 RealPivot2' },
  tables: {
    name: 'sales',
    cube: 'sales',
    fields: {
      rows: ['국가'],
      columns: ['차종'],
      values: ['판매수량'],
    },
  },
};
 
const licenseKey = '......라이선스정보.....';
const modules = {};
const pivotRef = ref<RealPivotRef | null>(null);
</script>

템플릿에서는 props를 kebab-case로 전달합니다 (table-options, license-key 등).

탐색기의 Chart·Map 기능을 사용하려면 RealChart·RealMap을 설치한 후 modules 속성에 전달하여 사용할 수 있습니다.

import * as RealChart from 'realchart';
import * as RealMap from 'realmap';
import 'realchart/realchart-style.css';
import 'realmap/realmap-style.css';
 
const modules = { RealChart, RealMap };

RealPivotVue

RealPivotVue 컴포넌트는 tableOptions와 cubes를 바탕으로 DataSet 및 CubeManager를 생성하고, createControl을 통해 피벗을 생성합니다.
ref를 통해 control 및 cubeManager 인스턴스가 노출(expose)됩니다.

생성 흐름은 바닐라 JS와 같습니다. 개념은 시작하기·개발 가이드를 참고하세요.

Props

PropType설명
realpivotRealPivotModuleApi주입할 realpivot2 모듈 (import * as RealPivot from 'realpivot2')
tableOptionsPivotDataTableOptions[]DataSet 테이블 옵션 (source / sourceUrl 등)
cubesPivotCubeOptions[]Cube 스키마 목록
modulesRecord<string, unknown>useAll로 등록할 외부 모듈 (예: RealChart, RealMap). 없으면 {}
configPivotBookConfiguration북·테이블 필드 배치 등 피벗 설정
licenseKeystringRealPivot2 라이선스 키. Control 생성 전에 등록됩니다
idstring컨테이너 DOM id (기본값: "realpivot2")
wstring | number가로 크기 (기본값: 100%)
hstring | number세로 크기 (기본값: 100%)
class—컨테이너 class
styleStyleValue컨테이너 style

RealPivotRef

ref를 통해 피벗 컨트롤과 CubeManager에 접근합니다. 인스턴스는 마운트·데이터 로드 이후에 채워지며, 그전에는 null입니다.

export interface RealPivotRef {
  control: PivotControl | null;
  cubeManager: PivotCubeManager | null;
}

사용 예시

const control = pivotRef.value?.control;
const field = control?.table?.fields.getValueField('판매수량');
field?.updateOption('aggregate', 'avg');

See Also

React 개발 가이드데이터와 큐브