### Component Usage Example

Source: https://github.com/ex-em/evui/wiki/[Spec]-Checkbox

Example demonstrating the usage of ev-checkbox within ev-checkbox-group.

```APIDOC
## Component Usage

### ev-checkbox-group
```html
<ev-checkbox-group>
  <ev-checkbox>Option 1</ev-checkbox>
  <ev-checkbox>Option 2</ev-checkbox>
  <ev-checkbox>Option 3</ev-checkbox>
</ev-checkbox-group>
```

### ev-checkbox
- The text content within the `<ev-checkbox>` tag is rendered using a slot.
```

--------------------------------

### Zoom Options Configuration Example

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/zoomChart/api/zoomChart.md

This example provides a comprehensive configuration for the zoom functionality, including buffer memory count, keeping zoom status, and toolbar settings with custom icons and titles for navigation and zoom actions.

```javascript
const options = {
    zoom: {
    bufferMemoryCnt: 100,
    keepZoomStatus: true,
    toolbar: {
      show: true,
      items: {
        previous: {
          icon: 'ev-icon-allow2-left',
          size: 'medium',
          title: 'Previous',
        },
        latest: {
          icon: 'ev-icon-allow2-right',
          size: 'medium',
          title: 'Latest',
        },
        reset: {
          icon: 'ev-icon-redo',
          size: 'medium',
          title: 'Reset',
        },
        dragZoom: {
          icon: 'ev-icon-zoomin',
          size: 'medium',
          title: 'Drag Zoom',
        },
      },
    },
  },
}
```

--------------------------------

### Zoom Start Index Binding

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/zoomChart/api/zoomChart.md

This example demonstrates how to use the `zoomStartIdx` ref to control the starting index of the zoomable area in a chart. This prop is valid when the zoom option is enabled in the chart's configuration.

```javascript
const zoomStartIdx = ref(0);
```

--------------------------------

### Install and Register EVUI Globally

Source: https://context7.com/ex-em/evui/llms.txt

Install EVUI using npm and register it globally in your Vue 3 application's main entry file. Ensure to import the necessary styles.

```ts
// 설치
// npm i evui

// main.ts
import { createApp } from 'vue';
import App from '@/App.vue';
import EVUI from 'evui';
import 'evui/style';

const app = createApp(App);
app.use(EVUI);
app.mount('#app');
```

--------------------------------

### Vue 2.x Reactivity System Example

Source: https://github.com/ex-em/evui/wiki/[Tech-Review]-Plans-for-the-Next-Iteration-of-Vue.js

Demonstrates the Vue 2.x reactivity system using Object.defineProperty. This approach has limitations with dynamically added properties.

```javascript
/**** Reactivity System Example ****/
let data = { price: 5, quantity: 2 }
let target = null

// This is exactly the same Dep class
class Dep {
  constructor () {
    this.subscribers = [] 
  }
  depend() {
    if (target && !this.subscribers.includes(target)) {
      // Only if there is a target & it's not already subscribed
      this.subscribers.push(target)
    } 
  }
  notify() {
    this.subscribers.forEach(sub => sub())
  }
}

// Go through each of our data properties
Object.keys(data).forEach(key => {
  let internalValue = data[key]

  // Each property gets a dependency instance
  const dep = new Dep()

  Object.defineProperty(data, key, {
    get() {
      dep.depend() // <-- Remember the target we're running
      return internalValue
    },
    set(newVal) {
      internalValue = newVal
      dep.notify() // <-- Re-run stored functions
    }
  })
})

// My watcher no longer calls dep.depend,
since that gets called from inside our get method.
function watcher(myFunc) {
  target = myFunc
  target()
  target = null
}

watcher(() => {
  data.total = data.price * data.quantity
})

// Open a console window and input below code.
data.total // 10
data.price = 20
data.total // 40
data.quantity = 3
data.total // 60

```

--------------------------------

### Scatter Chart Data Structure Example

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/scatterChart/api/scatterChart.md

Provides an example of how to structure the data for the scatter chart, including series-specific options and data points with optional styling.

```javascript
const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
const chartData =
  series: { 
    series1: { name: 'series1', pointSize: 5, pointStyle: 'circle' },
    series2: { name: 'series2', pointSize: 6, pointStyle: 'rect' },
  },
  data: {
    series1: [{ x: dayjs(time), y: 1 }, { x: dayjs(time).add(1, 'day'), y: 2 }, { x: dayjs(time).add(2, 'day'), y: 3 }],
    series2: [{ x: dayjs(time), y: 4 }, { x: dayjs(time).add(1, 'day'), y: 5, color: '#FF0000' }],
  },
};
```

--------------------------------

### Selected Label Binding Example

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/barChart/api/barChart.md

Shows how to bind the `selectedLabel` prop to manage the selection of specific labels on the chart.

```javascript
const selectedLabel = ref({
    dataIndex: [0], // option 에 설정한 limit 갯수 까지 선택 가능.
});
```

--------------------------------

### Chart Data Series Configuration

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/barChart/api/barChart.md

Provides examples of configuring series data, including basic series options, custom colors, and gradient effects.

```javascript
const chartData = {
    series: {
      series1: { name: 'series#1' }, // 기본 색상으로 자동 할당
      series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상 지정 (hex)
      series3: { name: 'series#2', color: 'rgba(255, 165, 0, 1)' }, // 특정 색상 지정 (rgb)
      series4: { name: 'series#3', color: [[0, 'rgba(255, 165, 0, 0.4)'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
      series5: { name: 'series#3', color: [[], [1, 'rgba(255, 165, 0, 1)']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
    },
    ... 생략
}
```

--------------------------------

### HeatMap Data Structure Example

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/heatMap/api/heatMap.md

Provides an example of the data structure required for the HeatMap component, including series, data points, and labels for axes. This structure is crucial for rendering the chart correctly.

```javascript
const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
const chartData =
  series: {
    series1: {
      name: 'series#1',
    },
  },
  data: {
    series1: [
      { x: 'Jan', y: '2018', value: 1 },
      { x: 'Jan', y: '2020', value: 2 },
      { x: 'Feb', y: '2019', value: 3 },
      { x: 'Feb', y: '2022', value: 4 },
      { x: 'May', y: '2021', value: 5 },
      { x: 'Jun', y: '2021', value: 6 },
      { x: 'Aug', y: '2021', value: 7 },
      { x: 'Aug', y: '2022', value: 8 },
    ],
  },
  labels: {
    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    y: ['2018', '2019', '2020', '2021', '2022'],
  },
```

--------------------------------

### EvChart Initialization Sequence Diagram

Source: https://github.com/ex-em/evui/wiki/Chart-Architecture

Sequence diagram outlining the initialization process of EvChart, from Vue component mounting to canvas rendering and event listener setup.

```mermaid
sequenceDiagram
    participant CV as Chart.vue
    participant EC as EvChart
    participant M as Model
    participant S as Scale
    participant E as Element

    CV->>CV: onMounted()
    CV->>EC: new EvChart(target, data, options, ...)
    Note over EC: Object.assign()으로 플러그인 합성<br/>3중 캔버스 생성, DOM 구성

    CV->>EC: init()
    EC->>M: createSeriesSet() — 시리즈 인스턴스 생성
    EC->>M: createDataSet() — 데이터 정규화
    EC->>EC: getStoreMinMax() — min/max 계산
    EC->>EC: initRect() — 타이틀/범례 레이아웃
    EC->>S: createAxes('x'/'y') — Scale 인스턴스
    EC->>EC: drawChart()
    EC->>E: 각 시리즈.draw() — 캔버스 렌더링
    EC->>EC: createTooltipDOM()
    EC->>EC: createEventFunctions() — 이벤트 리스너
```

--------------------------------

### Vue.js Render Function Example

Source: https://github.com/ex-em/evui/wiki/[Tech-Review]-Plans-for-the-Next-Iteration-of-Vue.js

Demonstrates the use of the render function in Vue.js to programmatically create Virtual DOM elements. This example shows how to use the `h` function to define element attributes, classes, and content.

```html
<div id="app"></div>
<script>
  new Vue({
    el: '#app',
    data: {
      name: "EXEM"
    },
    render(h) { 
      return h('div', { 
        attrs: { id: 'people' },
        class: 'sideBar'
      }, "EXEM and EVUI") 
    }
    // Adding JSX with the help of Babel Plugin.
    // render(h) {
    //	return (
    //    <div id="people" class="sideBar">EXEM and EVUI</div>
    //  )
  	// }
  });
</script>
```

--------------------------------

### Chart Data Structure

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/pieChart/api/pieChart.md

Example of the expected data structure for the chart, including series definitions and data points for each series.

```javascript
const chartData =
  series: {
    series1: { name: 'series1', color: '#FF00FF' },
    series2: { name: 'series2' },
  },
  data: {
    series1: [10],
    series2: [90],
  },
```

--------------------------------

### Basic Input Number Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/inputNumber/api/inputNumber.md

Demonstrates the basic structure of the ev-input-number component. Use this as a starting point for implementing numerical input fields.

```html
<ev-input-number
  options
/>
```

--------------------------------

### MessageBox Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/messageBox/api/messageBox.md

Demonstrates how to use the MessageBox component, either with a simple message or with a configuration object.

```APIDOC
## MessageBox Usage

### Description
This section shows the basic invocation of the MessageBox component.

### Method
Direct method call

### Endpoint
N/A (Component Method)

### Parameters
#### Message Only
- **message** (String) - Required - The message text to display.

#### With Options
- **options** (Object) - Required - An object containing configuration for the MessageBox.
  - **message** (String) - Required - The message text to display.
  - **type** (String) - Optional - Message style ('info', 'success', 'warning', 'error').
  - **title** (String) - Optional - Title text for the MessageBox.
  - **iconClass** (String) - Optional - Custom icon class for the MessageBox.
  - **onClose** (Function) - Optional - Callback function executed when the MessageBox is closed.
  - **showClose** (Boolean) - Optional - Whether to display the close button (default: true).
  - **showConfirmBtn** (Boolean) - Optional - Whether to display the confirm button (default: true).
  - **showCancelBtn** (Boolean) - Optional - Whether to display the cancel button (default: true).
  - **confirmBtnText** (String) - Optional - Text for the confirm button (default: 'OK').
  - **cancelBtnText** (String) - Optional - Text for the cancel button (default: 'Cancel').
  - **closeOnClickModal** (Boolean) - Optional - Whether to close the MessageBox when clicking the modal overlay (default: true).
  - **useHTML** (Boolean) - Optional - Whether to interpret message content as HTML (default: false).
  - **focusable** (Boolean) - Optional - Whether interactive elements within the MessageBox should receive focus (default: false).

### Request Example
```js
// Message only
ctx.$messagebox('This is a simple message.');

// With options
ctx.$messagebox({
  message: 'This is a message with options.',
  type: 'success',
  title: 'Success',
  showCancelBtn: false
});
```

### Response
N/A (MessageBox is a UI component, not an API endpoint with a direct response).
```

--------------------------------

### Window Component Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/window/api/window.md

Demonstrates the basic structure and props for using the ev-window component.

```APIDOC
## ev-window Component

### Description
The `<ev-window>` component (referred to as `<window>`) is a modal dialog that appears when its `v-mode:visible` prop is set to true.

### Usage
```html
<ev-window
    v-mode:visible="BooleanValue"
    :title="'Title Variable'"
    :icon-class="'icon-class-name'"
>
    Content
</ev-window>
```

### Props
| Name                   | Type             | Default   | Description                                      |
|------------------------|------------------|-----------|--------------------------------------------------|
| v-mode:visible         | Boolean          | false     | Controls the visibility of the window (two-way binding) |
| title                  | String, Number   | null      | The title displayed in the window header         |
| window-class           | String           | ''        | Custom class name for the window                 |
| width                  | String, Number   | 50vw      | The width of the window                          |
| height                 | String, Number   | 50vh      | The height of the window                         |
| min-width              | String, Number   | 150       | The minimum width of the window                  |
| min-height             | String, Number   | 150       | The minimum height of the window                 |
| icon-class             | String           | ''        | Icon displayed to the left of the window title   |
| fullscreen             | Boolean          | false     | Enables fullscreen mode                          |
| is-modal               | Boolean          | true      | Determines if the window is modal (shows dim layer) |
| close-on-click-modal | Boolean          | false     | Closes the window when the modal layer is clicked |
| hide-scroll            | Boolean          | true      | Locks the body scroll when the window is open    |
| draggable              | Boolean          | false     | Enables dragging the window by its header        |
| resizable              | Boolean          | false     | Enables resizing the window by dragging its borders |
| maximizable            | Boolean          | false     | Enables maximizing the window via a button       |
| esc-close              | Boolean          | false     | Closes the window when the ESC key is pressed    |
| focusable              | Boolean          | false     | Brings the window to the front when clicked      |

### Slots
- **Default Slot**: Content for the window body.
- **`#header`**: Custom content for the window header.

### Events
| Name                   | Parameters        | Description                                      |
|------------------------|-------------------|--------------------------------------------------|
| mousedown              | clickedInfo       | Detects mousedown events for drag and resize     |
| mousedown-mouseup      | MouseEvent object | Detects mouseup events for drag and resize       |
| mousedown-mousemove    | MouseEvent object | Detects mousemove events for drag and resize     |
| resize                 | MouseEvent object, positionInfo | Detects mousemove events during resize           |
| expand                 | Previous window style info | Detects click event on the maximize button       |

#### clickedInfo Object
```json
{
    state: '',         // '', 'mousedown', 'mousedown-mousemove'
    pressedSpot: '',   // '', 'header', 'border'
    top: 0,
    left: 0,
    width: 0,
    height: 0,
    clientX: 0,
    clientY: 0
}
```

#### positionInfo Object
```json
{
    top: 0,
    left: 0, 
    width: 0,
    height: 0 
}
```

```

--------------------------------

### EvChart Class Initialization with Mixins

Source: https://github.com/ex-em/evui/wiki/Chart-Architecture

Demonstrates how the EvChart class composes functionality using Object.assign() for mixins, conditionally including plugins based on options.

```javascript
// chart.core.js:27-37
class EvChart {
  constructor(target, data, options, listeners, ...) {
    // Model의 모든 메서드를 this에 합성
    Object.keys(Model).forEach((key) => Object.assign(this, Model[key]));

    // 브러시 모드가 아닐 때만 플러그인 합성
    if (!options.brush) {
      Object.assign(this, Tooltip);
      Object.assign(this, Interaction);
      Object.assign(this, Tip);
      Object.assign(this, Legend);
      Object.assign(this, Pie);
      Object.assign(this, Title);
      Object.assign(this, Scrollbar);
    }
  }
}

```

--------------------------------

### Vue.js Scoped Slot Syntax Example

Source: https://github.com/ex-em/evui/wiki/[Tech-Review]-Plans-for-the-Next-Iteration-of-Vue.js

Demonstrates the usage of scoped slots in Vue.js for passing data from a child component to its parent. This example shows how to define and use scoped slots for both default and named slots.

```html
<!-- Scoped-Slot Sample Code 1 -->
<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component>
      <p slot-scope="defaultSlotScope">
        {{ defaultSlotScope.text }}
        <!-- Renders <p>I'll get rendered inside the default slot.</p> -->
      </p>
      <p slot="literally-the-best" slot-scope="bestSlotScope">
        {{ bestSlotScope.text }}
         <!-- Renders <p>I'll get rendered inside the *best* slot.</p> -->
      </p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>
```

```html
<!-- Scoped-Slot Sample Code 2 -->
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Look, there's a slot below me!</p>
    <slot :text="defaultSlotText"></slot>
    <slot name="literally-the-best" :text="namedSlotText"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultSlotText: "I'll get rendered inside the default slot.",
      namedSlotText: "I'll get rendered inside the *best* slot."
    }
  }
}
</script>
```

--------------------------------

### Store Data Set Creation Methods

Source: https://github.com/ex-em/evui/wiki/Chart-Architecture

Provides an overview of methods within the Store model for creating and normalizing various types of dataset structures.

```javascript
`createDataSet(data, labels)`
`addSeriesDS(sData, label)`
`addSeriesStackDS(sData, label, bsIds, stackIndex)`
`addSeriesDSforScatter(sData)`
`addSeriesDSForHeatMap(sData)`
`createPieDataSet(data, seriesIDs)`
`createRealTimeScatterDataSet(datas)`
`getStoreMinMax()`
`getSeriesMinMax(data, passingValue)`
```

--------------------------------

### Selected Item Binding

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/pieChart/api/pieChart.md

Example of binding the `selectedItem` prop to track the currently selected data point in the chart.

```javascript
const selectedItem = ref({
    seriesID: 'series1', // Series ID (key)
});
```

--------------------------------

### Basic Ev-Calendar Component

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/calendar/api/calendar.md

Defines the basic structure of the Ev-Calendar component. Use this as a starting point for integrating the calendar into your application.

```html
<ev-calendar
  옵션
/>
```

--------------------------------

### Context Menu Component Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/contextMenu/api/contextMenu.md

This snippet shows the basic structure and available properties for the `<ev-context-menu>` component. It demonstrates how to bind items, handle clicks, and use slots for custom rendering.

```APIDOC
## `<ev-context-menu>` Component

### Description

The `<ev-context-menu>` component (referred to as `<컨텍스트메뉴>`) is a customizable context menu that can be triggered by a right-click event.

### Usage

It is typically used in conjunction with a right-click event listener on a specific area:

```html
<ev-context-menu
  ref="REF명"
  :items="[
    {
      text: '텍스트명',
      iconClass: '텍스트 앞에 위치하는 아이콘 태그 클래스명',
      disabled: true, // Boolean - 사용여부
      isShowMenu: true, // Boolean - 항목 클릭 시에도 메뉴 유지
      click: () => { ... }, // 클릭 시 발생하는 메소드
    },
    {
      text: '기본 텍스트',
      slotKey: 'customItem', // slot key 지정
      click: () => { ... },
    },
    { ... },
  ]"
>
  <!-- slotKey로 지정된 slot -->
  <template #customItem="{ item }">
    <span style="color: red;">{{ item.text }} - 커스텀</span>
  </template>
</ev-context-menu>

<script>
export default {
  methods: {
    showContextMenu(refName) {
      this.$refs[refName].show();
    }
  }
}
</script>
```

### Properties

#### Binding

| Name | Type | Default | Description | Kind |
| ---- | ---- | ----- | ---- | --- |
| ref | String | '' | The REF name for the `<ev-context-menu>`. This is required. | |

#### Props

| Name | Type | Default | Description | Kind |
| ---- | ---- | ----- | ---- | --- |
| items | Array | [] | The list of items for the `<ev-context-menu>`. Can be nested. | |
| | {} |  | Represents a single item in the `<ev-context-menu>`. | |
| | | text | Text for the `<ev-context-menu>` item. | |
| | | iconClass | Class for an icon preceding the text of the `<ev-context-menu>` item. | |
| | | itemClass | Class for individual `<ev-context-menu>` items. | |
| | | hidden | Whether to hide the `<ev-context-menu>` item. | false, true |
| | | disabled | Whether the `<ev-context-menu>` item is usable. | false, true |
| | | isShowMenu | Keep the `<ev-context-menu>` open after clicking an item. | false, true |
| | | click | Method to be executed when the `<ev-context-menu>` item is clicked. | |
| | | slotKey | Slot key for the `<ev-context-menu>` item. If specified, the corresponding slot is used for custom text rendering. | |
| customClass | String | '' | Class name to be applied to the `<ev-context-menu>`. | |
| isShowMenuOnClick | Boolean | false | Keep the `<ev-context-menu>` open even when clicking outside the menu items and area. | |

### Features

- Items can have text, icons, disabled states, and click events.
- Clicking an item executes `item.click` and hides the entire `<ev-context-menu>`.
- Nested item structures are supported.
- Mouseenter on items at the same level can hide child components of that level.
- `slotKey` allows for custom rendering of menu item text using slots. If `slotKey` is used, the content of the specified slot is rendered instead of the default text. The `item` object is passed to the slot, providing access to all menu item information.
```

--------------------------------

### EvChart Update Call for Options Change

Source: https://github.com/ex-em/evui/wiki/Chart-Architecture

Example of calling the `update` method on EvChart when chart options are modified, specifying which components to re-render.

```javascript
evChart.update({
  updateSeries: false,
  updateSelTip: { update: false, keepDomain: false },
  updateLegend: isUpdateLegendType,
  updateTooltip: isUpdateTooltip,
});
```

--------------------------------

### Basic ev-window Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/window/api/window.md

Defines the basic structure of the ev-window component using template syntax. It shows how to bind visibility, set a title, and apply an icon class.

```html
<ev-window
    v-mode:visible="Boolean값"
    :title="'타이틀 변수'"
    :icon-class="'아이콘 클래스명'"
>
    내용
</ev-window>
```

--------------------------------

### Global Method Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/messageBox/api/messageBox.md

How to use the MessageBox as a global method registered on `app.config.globalProperties`.

```APIDOC
## Global Method Usage

### Description
Registering the MessageBox component globally allows it to be accessed from any component using `this.$messagebox` or `ctx.$messagebox` in the Composition API.

### Method
Global Property Access

### Endpoint
N/A (Component Method)

### Parameters
Refer to the 'MessageBox Usage' section for detailed parameters.

### Request Example
```vue
<template>
    <ev-button @click="showMsg">Show Message</ev-button>
</template>
<script>
  import { getCurrentInstance } from 'vue';

  export default {
    setup() {
      const ctx = getCurrentInstance().appContext.config.globalProperties;
      const showMsg = () => {
        ctx.$messagebox({
          message: 'Global message',
          type: 'info'
        });
      };
      return {
        showMsg,
      };
    },
  }
</script>
```

### Response
N/A
```

--------------------------------

### EvChart Update Call for Data Change

Source: https://github.com/ex-em/evui/wiki/Chart-Architecture

Example of calling the `update` method on EvChart when chart data is modified, indicating data and selection tip updates.

```javascript
evChart.update({
  updateSeries: isUpdateSeries,
  updateSelTip: { update: true, keepDomain: false },
  updateData: isUpdateData,
});
```

--------------------------------

### Basic MessageBox Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/messageBox/api/messageBox.md

Demonstrates how to use the MessageBox with just a message or with additional options. This can be called directly via the context in a Vue application.

```javascript
ctx.$messagebox('message');
```

```javascript
ctx.$messagebox({
  message: 'message',
  // options
});
```

--------------------------------

### Basic Select Component Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/select/api/select.md

This snippet shows the basic structure for using the ev-select component with initial value binding and a list of items.

```html
<ev-select
    v-model="초기값(value)"
    :items="[{...}, {...}, {...}]"
/>
```

--------------------------------

### Zoom Options Configuration

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/zoomChart/api/zoomChart.md

Detailed configuration for zoom behavior, including toolbar settings, buffer memory, animation, and mouse wheel interaction.

```APIDOC
## Zoom Options

### options.zoom
- **Type**: Object
- **Default**: (See detailed zoom options)
- **Description**: Configuration for chart zoom settings.

#### options.zoom.toolbar
- **Type**: Object
- **Default**: (See detailed toolbar options)
- **Description**: Configuration for the zoom control toolbar.

##### options.zoom.toolbar.items
- **Type**: Object
- **Default**: (See detailed items options)
- **Description**: Configuration for the icons and their functions within the toolbar.

###### options.zoom.toolbar.items.previous, latest, reset, dragZoom
- **Type**: Object
- **Description**: Common properties for toolbar items.
  - **icon** (String): Sets the icon shape for the toolbar item. Examples: 'ev-icon-allow2-left', 'ev-icon-allow2-right', 'ev-icon-redo', 'ev-icon-zoomin'.
  - **size** (String): Sets the size of the icon. Options: 'small', 'medium', 'large'. Default: 'medium'.
  - **title** (String): Text displayed when hovering over the icon. Examples: 'Previous', 'Latest', 'Reset', 'Drag Zoom'.

### Other Zoom Properties
- **bufferMemoryCnt** (Number): Limits the number of zoom history records stored. Default: 100.
- **keepZoomStatus** (Boolean): Maintains the zoom state (area, memory, icon activation) when data is updated. Default: false.
- **useAnimation** (Boolean): Enables or disables zoom animations. Default: true.
- **useWheelMove** (Boolean): Enables or disables chart zoom area movement using the mouse wheel. Default: true.

### Zoom Options Example
```javascript
const options = {
  zoom: {
    bufferMemoryCnt: 100,
    keepZoomStatus: true,
    toolbar: {
      show: true,
      items: {
        previous: {
          icon: 'ev-icon-allow2-left',
          size: 'medium',
          title: 'Previous',
        },
        latest: {
          icon: 'ev-icon-allow2-right',
          size: 'medium',
          title: 'Latest',
        },
        reset: {
          icon: 'ev-icon-redo',
          size: 'medium',
          title: 'Reset',
        },
        dragZoom: {
          icon: 'ev-icon-zoomin',
          size: 'medium',
          title: 'Drag Zoom',
        },
      },
    },
  },
};
```
```

--------------------------------

### Selected Series Binding Example

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/lineChart/api/lineChart.md

Binds the array of currently selected series IDs when the selectSeries option is used. Allows controlling the chart by specifying series IDs.

```javascript
const selectedSeries = ref({
    seriesId: ['series1'], // option 에 설정한 limit 갯수 까지 선택 가능.
});
```

--------------------------------

### Zoom End Index Binding

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/zoomChart/api/zoomChart.md

This example shows how to use the `zoomEndIdx` ref to control the ending index of the zoomable area in a chart. Similar to `zoomStartIdx`, this prop is effective when zoom functionality is activated.

```javascript
const zoomEndIdx = ref(0);
```

--------------------------------

### Tooltip Configuration

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/barChart/api/barChart.md

Configure the tooltip's visibility, styling, and behavior.

```APIDOC
## Tooltip Configuration

### Description
Configure the tooltip's visibility, styling, and behavior.

### Properties

- **use** (Boolean) - Optional - Determines if the tooltip is displayed. Defaults to `true`.
- **backgroundColor** (Hex, RGB, RGBA Code String) - Optional - Sets the background color of the tooltip. Defaults to `'#4C4C4C'`.
- **borderColor** (Hex, RGB, RGBA Code String) - Optional - Sets the border color of the tooltip. Defaults to `'#666666'`.
- **useShadow** (Boolean) - Optional - Enables or disables the shadow effect for the tooltip. Defaults to `false`.
- **shadowOpacity** (Number) - Optional - Sets the opacity of the tooltip's shadow. Defaults to `0.25`.
- **throttledMove** (Boolean) - Optional - Enables throttling for data queries when the mouse moves. Defaults to `false`.
- **debouncedHide** (Boolean) - Optional - Hides the tooltip when the cursor moves away. Defaults to `false`.
- **sortByValue** (Boolean) - Optional - Sorts the tooltip content by value. Defaults to `true`.
- **useScrollbar** (Boolean) - Optional - Enables a scrollbar for the tooltip if content exceeds its bounds. Defaults to `false`.
- **maxHeight** (Number) - Optional - Sets the maximum height of the tooltip.
- **maxWidth** (Number) - Optional - Sets the maximum width of the tooltip.
- **textOverflow** (String) - Optional - Defines how text is handled when it exceeds `maxWidth`. Options: `'wrap'`, `'ellipsis'`. Defaults to `'wrap'`.
- **fontFamily** (String) - Optional - Sets the font family for the tooltip text. Defaults to `'Roboto'`.
- **fontColor** (Hex code String, Object, Function) - Optional - Sets the color of the tooltip text. Defaults to `'#000000'`.
- **fontSize** (Object) - Optional - Sets the font size for the tooltip title and content. Example: `{ title: 16, contents: 14 }`.
- **colorShape** (String) - Optional - Defines the shape of the series color indicator in the tooltip. Options: `'rect'`, `'circle'`. Defaults to `'rect'`.
- **rowPadding** (Object) - Optional - Sets the padding for each row within the tooltip. Example: `{ top: 0, bottom: 3, right: 20, left: 16 }`.
- **showAllValueInRange** (Boolean) - Optional - Displays all series values within the same axes range in the tooltip. Defaults to `false`.
- **showHeader** (Boolean) - Optional - Controls the visibility of the tooltip's header. Defaults to `true`.
- **formatter** (function / Object) - Optional - A function or object used to format the data before it is displayed in the tooltip. Defaults to `null`.
```

--------------------------------

### EV-Chart: Line Chart with Real-time Data

Source: https://context7.com/ex-em/evui/llms.txt

Implement line charts using `type: 'line'`, with options for area fill and time-based axes. This example demonstrates real-time data streaming suitable for monitoring applications.

```vue
<template>
  <ev-chart :data="chartData" :options="chartOptions" />
</template>

<script>
import { reactive, onMounted, onBeforeUnmount } from 'vue';
import dayjs from 'dayjs';

export default {
  setup() {
    const chartData = reactive({
      series: {
        cpu:  { name: 'CPU 사용률',  point: false, fill: true, fillOpacity: 0.2 },
        mem:  { name: '메모리 사용률', point: false, lineWidth: 2 },
      },
      labels: [],
      data: { cpu: [], mem: [] },
    });

    const chartOptions = reactive({
      type: 'line',
      width: '100%',
      height: '250px',
      title: { show: true, text: '서버 실시간 모니터링' },
      legend: { show: true, position: 'right' },
      axesX: [{
        type: 'time',
        interval: 'minute',
        timeFormat: 'HH:mm',
        showAxisTick: true,
      }],
      axesY: [{
        type: 'linear',
        startToZero: true,
        range: [0, 100],
        formatter: (v) => `${v}%`,
      }],
      tooltip: {
        use: true,
        formatter: ({ x, y, name }) => `[${dayjs(x).format('HH:mm:ss')}] ${name}: ${y.toFixed(1)}%`,
      },
    });

    let interval;
    const addData = () => {
      const now = dayjs();
      chartData.labels.push(now);
      chartData.data.cpu.push(Math.random() * 100);
      chartData.data.mem.push(Math.random() * 80 + 20);
      // 최근 60개 데이터만 유지
      if (chartData.labels.length > 60) {
        chartData.labels.shift();
        chartData.data.cpu.shift();
        chartData.data.mem.shift();
      }
    };

    onMounted(() => {
      for (let i = 0; i < 30; i++) addData();
      interval = setInterval(addData, 1000);
    });

    onBeforeUnmount(() => clearInterval(interval));

    return { chartData, chartOptions };
  },
};
</script>
```

--------------------------------

### tipStyle Options

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/scatterChart/api/scatterChart.md

Configure the style of the tip displayed on the scatter chart.

```APIDOC
## tipStyle

### Description
Configure the style of the tip displayed on the scatter chart.

### Options

- **height** (Number) - Optional - Default: `20` - Sets the height of the tip.
- **background** (String) - Optional - Default: `'#000000'` - Sets the background color of the tip. Accepts Hex, RGB, or RGBA color codes.
- **textColor** (String) - Optional - Default: `'#FFFFFF'` - Sets the text color of the tip. Accepts Hex, RGB, or RGBA color codes.
- **fontSize** (Number) - Optional - Default: `14` - Sets the font size of the tip text.
- **fontFamily** (String) - Optional - Default: `'Roboto'` - Sets the font family of the tip text.
- **fontWeight** (Number) - Optional - Default: `400` - Sets the font weight of the tip text. Accepts values from 100 to 900.
```

--------------------------------

### Local Import Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/messageBox/api/messageBox.md

How to import and use the MessageBox component directly within a specific component.

```APIDOC
## Local Import Usage

### Description
Importing the MessageBox component locally provides a way to use it within specific components without global registration.

### Method
Direct Import and Call

### Endpoint
N/A (Component Method)

### Parameters
Refer to the 'MessageBox Usage' section for detailed parameters.

### Request Example
```vue
<template>
    <ev-button @click="showMsg">Show Message</ev-button>
</template>
<script>
  import { EvMessageBox } from 'evui';

  export default {
    setup() {
      const showMsg = () => {
        EvMessageBox({
          message: 'Local import message',
          type: 'warning'
        });
      };
      return {
        showMsg,
      };
    },
  }
</script>
```

### Response
N/A
```

--------------------------------

### Individual Chart Zoom Configuration

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/zoomChart/api/zoomChart.md

Use the zoom option within existing chart options to enable zoom functionality on a single chart. This example shows how to bind zoomStartIdx and zoomEndIdx for controlling the zoom range.

```html
<ev-chart
    v-model:zoomStartIdx="줌 StartIdx 조절"
    v-model:zoomEndIdx="줌 EndIdx 조절"
    ...
  />
```

--------------------------------

### External Legend Binding Example

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/lineChart/api/lineChart.md

Binds legend items for external rendering when the legend's 'external' option is true. The chart updates the legendItems array with series details, and external controls can use chart methods like toggleSeries.

```javascript
const legendItems = ref([]);

// legendItems[i]: { sId: string, name: string, color: string, type: string, show: boolean }
<ev-chart
  ref="chartRef"
  v-model:legend-data="legendItems"
  :options="{ legend: { show: true, external: true } }"
  ...
/>
```

--------------------------------

### Series Model Methods

Source: https://github.com/ex-em/evui/wiki/Chart-Architecture

Lists key methods in the Series model responsible for creating and managing series instances and their rendering order.

```javascript
`createSeriesSet(series, type, horizontal, groups)`
`addSeries({type, id, opt, index, isHorizontal})`
`getOverlappingSeriesKeys(series, defaultType, groups)`
```

--------------------------------

### Using Chart Brush in a Chart Group

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/brushChart/api/brushChart.md

Demonstrates how to integrate <ev-chart-brush> components within an <ev-chart-group> to enable brush functionality for charts. Multiple brush instances can be used with different options.

```html
<ev-chart-group
    ...
>
  <ev-chart
    ...
  />
  <ev-chart-brush :options='options'/>
  <ev-chart
    ...
  />
  <ev-chart-brush :options='options2'/>
</ev-chart-group>
```

--------------------------------

### Log Messages with Custom Console

Source: https://github.com/ex-em/evui/wiki/Home

Use the custom Console utility for logging messages. Ensure the Console utility is imported before use. Available methods include log, info, and warn.

```javascript
import Console from '@/commons/utils';
/* Code Skip ...*/
Console.log('Log Message'); 
Console.info('Info Message');
Console.warn('Warninng Message');

```

--------------------------------

### tipStyle Configuration

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/barChart/api/barChart.md

Defines the styling options for the tooltip displayed on the bar chart.

```APIDOC
## tipStyle

### Description
Configuration for the tooltip's appearance.

### Properties
- **height** (Number) - Optional - Default: 20 - The height of the tooltip.
- **background** (Hex, RGB, RGBA Code String) - Optional - Default: '#000000' - The background color of the tooltip.
- **textColor** (Hex, RGB, RGBA Code String) - Optional - Default: '#FFFFFF' - The text color of the tooltip.
- **fontSize** (Number) - Optional - Default: 14 - The font size of the tooltip text.
- **fontFamily** (String) - Optional - Default: 'Roboto' - The font family for the tooltip text.
- **fontWeight** (Number) - Optional - Default: 400 - The font weight for the tooltip text (e.g., 100, 200, ..., 900).
```

--------------------------------

### Basic Tree Component Usage

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/tree/api/tree.md

Use the <ev-tree> component with options to implement a tree structure. Add desired binding options to customize its behavior.

```html
<ev-tree
  옵션
/>
```

--------------------------------

### Pie Chart Options

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/pieChart/api/pieChart.md

Configuration options for the pie chart.

```APIDOC
## Pie Chart Options

### Description
Configuration options for the pie chart.

### Options

- **type** (String) - Default: '' - Description: Specifies the chart type for each series. If not specified, it applies to all series. Example: 'bar', 'pie', 'line', 'scatter'.
- **width** (String / Number) - Default: '100%' - Description: Sets the width of the chart. Example: '100%', '150px', 150.
- **height** (String / Number) - Default: '100%' - Description: Sets the height of the chart. Example: '100%', '150px', 150.
- **title** (Object) - Default: ([See Title Options](#title)) - Description: Controls the display and properties of the chart title.
- **legend** (Object) - Default: ([See Legend Options](#legend)) - Description: Controls the display and properties of the chart legend.
- **doughnutHoleSize** (number) - Default: 0 - Description: Sets the size of the hole in the center of a doughnut chart. Value should be between 0 and 1.
- **pieStroke** (Object) - Default: { show: true, color: '#FFFFFF', lineWidth: 2 } - Description: Configures the border of the pie chart slices, including visibility, color, and line width.
- **tooltip** (Object) - Default: ([See Tooltip Options](#tooltip)) - Description: Controls the display and properties of tooltips shown when hovering over chart elements.
- **eventBehavior** (Object) - Default: ([See Event Behavior Options](#eventbehavior)) - Description: Configures the behavior of events associated with the chart.

### Title Options

#### Description
Options for configuring the chart title.

#### Properties

- **show** (Boolean) - Default: false - Description: Whether to display the title. Example: true / false.
- **height** (Number) - Default: 40 - Description: The height of the title area.
- **text** (String) - Default: '' - Description: The text content of the title.
- **style** (Object) - Description: Styles for the title text.
  - **fontSize** (Number) - Default: 15 - Description: Font size of the title text.
  - **color** (Hex, RGB, RGBA Code String) - Default: '#000' - Description: Color of the title text.
  - **fontFamily** (String) - Default: 'Roboto' - Description: Font family of the title text.
```

--------------------------------

### options Prop

Source: https://github.com/ex-em/evui/blob/3.4/docs/views/calendar/api/calendar.md

Allows for detailed configuration of the calendar through a nested options object.

```APIDOC
## options

### Description
Detailed options for the calendar.

### Type
Object

### Default
{}

### Nested Options:
- **multiType** (String): Sub-type for `mode: dateMulti`. Options: 'date', 'weekday', 'week'.
  - 'date': Select a limited number of single dates (['YYYY-MM-DD', ...]).
  - 'weekday': Select weekdays (Mon-Fri) (['YYYY-MM-DD' (Mon), ..., 'YYYY-MM-DD' (Fri)]).
  - 'week': Select days of the week (Sun-Sat) (['YYYY-MM-DD' (Sun), ..., 'YYYY-MM-DD' (Sat)]).
- **multiDayLimit** (Number): Limit for the number of days selectable when `mode: dateMulti` and `type: date` (Default: 1).
- **disabledDate** (Function): Function to define disabled dates or times. Can accept an array for `dateRange` or `dateTimeRange` modes to apply different rules for from/to dates. Example: `disabledDate: [() => {}, () => {}]`.
- **timeFormat** (String or Array): Sets the selectable range for time values. Use String for single calendars ('HH:mm:00', 'HH:55:00', '10:mm:ss'). Use Array for multiple calendars (['HH:00:ss', 'HH:59:00']). Numbers passed will apply disabled styling.
```