realchart-vue/README.md

Wooritech realchart vue component library

# RealChart Vue

**RealChart Vue**는 **RealChart**를  
Vue3에서 쉽게 사용할 수 있도록 제공하는 래퍼 컴포넌트입니다.

---

## 설치

```bash
npm install realchart-vue
```

또는

```bash
yarn add realchart-vue
```

---

## 사용법

### 기본 사용 예제

```vue
<template>
  <RealChartVue
    :realchart="realchart"
    :config="chartConfig"
  />
</template>

<script setup lang="ts">
import * as realchart from 'realchart';
import { RealChartVue } from 'realchart-vue';

const chartConfig = {
    title: '카테고리별 판매량',
    xAxis: {
        categories: ['식품', '전자제품', '의류'],
    },
    series: {
        type: 'bar',
        xField: 'category',
        yField: 'quantity',
        data: [
            { category: '식품', quantity: 120 },
            { category: '전자제품', quantity: 80 },
            { category: '의류', quantity: 50 },
        ],
    },
};
</script>
```

---

## 컴포넌트 설명

### props

| Prop            | 타입                             | 설명                                   | 필수 여부 |
|-----------------|---------------------------------|----------------------------------------|-----------|
| `realchart`    | `typeof RealChart`            | RealChart 모듈                         | ✅        |
| `config`       | `ChartConfiguration`          | 차트 구성 옵션                         | ✅        |
| `id`           | `string`                      | 차트 DOM ID (기본값: "realchart")     | ❌        |
| `w`            | `string`                      | 차트 width (기본값: "100%")            | ❌        |
| `h`            | `string`                      | 차트 height (기본값: "100%")           | ❌        |
| `animate`      | `boolean`                     | 애니메이션 사용 여부 (기본값: `true`) | ❌        |
| `onChartLoaded` | `(args: LoadCallbackArgs) => void` | 차트 로드 후 호출되는 콜백 | ❌        |

---

### `RealChartVueRef`

`ref`를 사용해 RealChart 인스턴스에 접근할 수 있습니다.

```ts
export interface RealChartVueRef {
  realchart: Ref<Chart | null>
}
```

---

## 라이선스

> **RealChart는 라이선스 파일이 필요합니다.**  
> 자세한 내용은 [https://support.realgrid.com/](https://support.realgrid.com/)를 참고하세요.

---

## 관련 링크

- [RealChart 공식 문서](https://www.realchart.co.kr/)
- [RealChart Core (realchart)](https://www.npmjs.com/package/realchart)

---

## 문의

- support@realgrid.com