@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.21 → 1.0.22

package/build/components/opsnow-common-chart.js

@@ -0,0 +1,1643 @@
+import { z } from "zod";
+const XyMultiChartSchema = z.object({
+    chartId: z.string().describe("차트의 고유 식별자"),
+    chartProps: z.object({}).describe(`
+  다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
+  **유효한 JSON 형식이어야합니다.**
+  {
+    // 차트 기본 설정
+    "chart": {
+      "paddingTop": 20, // 차트 상단 패딩 (px)
+      "paddingBottom": 30, // 차트 하단 패딩 (px)
+      "paddingLeft": 10, // 차트 좌측 패딩 (px)
+      "paddingRight": 50 // 차트 우측 패딩 (px, 이중 축 사용 시 우측 여유 공간 확보)
+    },
+
+    // X축 설정
+    "xAxis": {
+      "type": "date", // 축 타입: 'date' | 'category'
+      "valueField": "date", // X축 값 필드
+      "dateFormats": [ // xAxis type이 'date'일 때 사용
+        {
+          "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
+          "dateFormat": "MM/dd" // amCharts5에서 지원하는 날짜 형식
+        }
+      ],
+      "baseInterval": { // xAxis type이 'date'일 때 사용
+        "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
+        "count": 1 // 간격 수(1로 고정이며 변경 불가)
+      },
+      "gridHidden": true, // 격자선 표시 여부 (기본값: true)
+      "startLocation": 1, // X축 시작 위치 (0~1 사이 값)
+      "endLocation": 0, // X축 끝 위치 (0~1 사이 값)
+      "cellStartLocation": 0.1, // 셀 시작 위치 (0~1, Grouped Bar 간격 조정 시 사용)
+      "cellEndLocation": 0.9, // 셀 끝 위치 (0~1, Grouped Bar 간격 조정 시 사용)
+      "strictMinMax": false, // X축 최소/최대값 엄격 적용 여부
+      "renderer": { // 렌더러 설정
+        "minGridDistance": 30 // 격자선 최소 간격 - 많은 데이터가 뿌려질 경우 조정시 사용
+      }
+    },
+    
+    // Y축 설정
+    "yAxis": {
+      "type": "value", // Y축 타입: 'value'
+      "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
+      "min": 0, // Y축 최소값 직접 지정
+      "max": 100, // Y축 최대값 직접 지정
+      "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
+      "extraMax": 0.1, // 최대값 위 추가 여유 공간 (0~1 비율)
+      "strictMinMax": true, // Y축 최소/최대값 엄격 적용 여부
+      "gridHidden": false, // Y축 격자선 표시 여부
+      "label": { // Y축 라벨 설정
+        "maxWidth": 100, // Y축 라벨 최대 너비
+        "rotation": 0, // Y축 라벨 회전 각도
+        "fontSize": 12, // Y축 라벨 폰트 크기
+        "color": "#666666" // Y축 라벨 색상
+      },
+      "numberFormatter": { // 숫자 포맷터 설정
+        "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
+        "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
+          {
+            "number": 1000, // 기준 숫자 (예: 1e3, 1e6 등)
+            "suffix": "K" // 접미사 (예: K, M, B, T 등)
+          },
+          {
+            "number": 1000000,
+            "suffix": "M"
+          }
+        ],
+        "smallNumberPrefixes": [ // 작은 숫자에 대한 접미사 설정
+          {
+            "number": 0.001,
+            "suffix": "m"
+          }
+        ]
+      }
+    },
+
+    // 보조 Y축 설정 (이중 축 차트에서 사용, seriesTypes[].yAxis에서 'yAxis2'로 참조)
+    "yAxis2": {
+      "type": "value", // 보조 Y축 타입: 'value'
+      "numberFormat": "#'%'", // 보조 Y축 숫자 포맷
+      "opposite": true, // 반대편(우측)에 표시 (기본값: true)
+      "gridHidden": true, // 보조 Y축 격자선 숨김 여부
+      "min": 0, // 보조 Y축 최소값 직접 지정
+      "max": 100, // 보조 Y축 최대값 직접 지정
+      "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
+      "extraMax": 0.1 // 최대값 위 추가 여유 공간 (0~1 비율)
+    },
+
+    // 시리즈 설정
+    "series": {
+      "valueXField": "date", // X축 값 필드
+      "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
+        "dateFields": ["date"], // X축 값 필드
+        "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
+      },
+      "seriesTypes": [ // XY 멀티 차트용 시리즈 타입 설정
+        {
+          "type": "stack-line", // 시리즈 타입: 'line' | 'stack' | 'stack-line'
+          "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+          "order": "front", // 시리즈 순서: 'front' | 'back'
+          "connect": true, // 라인 연결 여부
+          "lineType": "smoothedX", // 라인 스무딩 타입
+          "bullet": { // 불릿 설정, 라인 유형 차트에서 필수
+            "type": "circle", // 불릿 타입: 'circle' | 'square' | 'triangle' | 'label'
+            "lineOnly": true, // 라인만 표시 여부
+            "cursorOverStyle": "pointer", // 마우스 오버시 커서 스타일
+            "customField": "custom_bullet", // 불릿 커스텀 필드
+            "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
+            "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
+            "label": { // 라벨 불릿 설정 (type이 'label'일 때 사용)
+              "dy": -10, // Y축 오프셋
+              "dx": 0, // X축 오프셋
+              "text": "{valueY}", // 라벨 텍스트
+              "fontSize": 12, // 폰트 크기
+              "format": "#,###", // 숫자 포맷
+              "prefix": "", // 접두사
+              "suffix": "", // 접미사
+              "background": { // 라벨 배경 설정
+                "fill": "#ffffff", // 배경 색상
+                "fillOpacity": 0.8 // 배경 투명도
+              }
+            }
+          },
+          "clickTarget": true, // 클릭 대상 여부
+          "setPreviousToZero": false, // 이전 데이터를 0으로 설정 여부
+          "strokeDasharray": [5, 5], // 라인 점선 패턴
+          "strokeWidth": 2, // 라인 두께
+          "area": { // 영역 설정
+            "type": "range", // 영역 타입
+            "opacity": 0.3, // 영역 투명도 (0~1)
+            "openValueField": "open_value", // 영역 시작 값 필드
+            "fillOpacity": 0.5 // 영역 투명도 (0~1)
+          },
+          "yAxis": "cost_axis", // 같은 카테고리 그룹에서 사용할 Y축 필드
+          "noRisers": false, // 라인 높이 조정 여부
+          "layer": 1, // 레이어 순서
+          "columns": { // 칼럼 설정, 컬럼 유형 차트에서 필수
+            "width": "p50", // 칼럼 너비 (예: p50 = 50%), 컬럼 바 차트일 때만 필요함
+            "height": "p80", // 칼럼 높이 (예: p80 = 80%), 바 차트일 때만 필요함
+            "hover": { // 호버 설정
+              "enabled": true, // 호버 표시 여부
+              "grouped": true // 그룹 표시 여부
+            },
+            "fillOpacity": 0.8, // 칼럼 투명도 (0~1)
+            "fillPattern": "diagonal" // 칼럼 패턴: 'diagonal' | 'horizontal' | 'vertical' | 'none'
+          }
+        },
+        {
+          "type": "stack", // 스택 타입
+          "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+          "columns": {
+            "width": "p50",
+            "hover": {
+              "enabled": true,
+              "grouped": true
+            }
+          }
+        }
+      ],
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
+        "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
+        "withinArea": true, // 차트 영역 내에서만 툴팁 표시 여부
+        "stopActionEnabled": false, // 툴팁 액션 중지 여부
+        "orientation": "horizontal", // 툴팁 방향: 'horizontal' | 'vertical'
+        "showAt": "ondemand_cost", // 특정 카테고리 그룹에서만 툴팁 표시
+        "position": { // 툴팁 위치 설정
+          "topFixed": true, // 상단 고정
+          "criteria": "pointer" // 위치 기준
+        },
+        "header": { // 툴팁 헤더 설정
+          "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름 (단순 문자열)
+          // 또는 카테고리별로 다른 헤더를 표시하려면:
+          // "name": [
+          //   {
+          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+          //     "value": "{l.cost}" // 헤더 값
+          //   },
+          //   {
+          //     "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+          //     "value": "{l.usage}" // 헤더 값
+          //   }
+          // ]
+        },
+        "body": { // 툴팁 바디 설정
+          "maxRowCount": 6, // 최대 행 개수
+          "name": "{name}", // 툴팁 바디 이름
+          "value": [ // 툴팁 바디 값 (배열 형태로 카테고리별 설정 가능)
+            {
+              "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+              "value": "{valueY.formatNumber('0,0')}({valueYPercent.formatNumber('0.0')}%)" // 바디 값
+            },
+            {
+              "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+              "value": "{valueY.formatNumber('0,0')}"
+            }
+          ],
+          "useMarker": true // 툴팁 바디 마커 사용 여부
+        },
+        "footer": { // 툴팁 푸터 설정
+          "name": "{l.total}", // 툴팁 푸터 이름 (단순 문자열)
+          "value": "{valueYSum.formatNumber('0,0')}" // 툴팁 푸터 값 (단순 문자열)
+          // 또는 카테고리별로 다른 푸터를 표시하려면:
+          // "name": [
+          //   {
+          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+          //     "value": "{l.total}" // 푸터 이름
+          //   }
+          // ],
+          // "value": [
+          //   {
+          //     "categoryGroupName": "ondemand_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+          //     "value": "{valueYSum.formatNumber('0,0')}(100.0%)" // 푸터 값
+          //   },
+          //   {
+          //     "categoryGroupName": "savings_cost", // 카테고리 그룹명, 카테고리 그룹명과 카테고리명은 서로 중복될 수 없음
+          //     "value": "{valueYSum.formatNumber('0,0')}"
+          //   }
+          // ]
+        },
+        "sort": "byName" // 툴팁 정렬 방향: 'byName' | 'reverse'
+      },
+      "animation": { // 애니메이션 설정
+        "duration": 2000, // 애니메이션 지속 시간
+        "delay": 500 // 애니메이션 지연 시간
+      }
+    },
+    
+    // 커서 설정
+    "cursor": {
+      "visibleY": false // Y축 커서 표시 여부
+    },
+    
+    // 범례 설정
+    "legend": {
+      "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
+      "useExtension": false // 범례 확장 사용 여부 (기본값: false) - 범례 전체 선택 체크 박스를 사용하려면 필수
+    }
+  }  
+  `),
+    chartData: z.array(z.record(z.any())
+        .and(z.object({
+        bullet_alarm: z.object({
+            type: z.enum(['alarm']).describe('알람 타입'),
+            target: z.string().describe('알람 대상 필드명')
+        }).optional().describe('알람 표시를 위한 bullet 설정')
+    })))
+        .optional().describe(`차트에 표시할 데이터 배열입니다.
+  예시)
+  [
+    {
+      'date': '2022-07-01',
+      'cost_test_01': 3, 
+      'cost_test_02': 7
+    },
+    {
+      'date': '2022-07-02',
+      'cost_test_01': 5,
+      'cost_test_02': 10
+    }
+  ]`),
+    chartCategory: z.array(z.object({
+        name: z.string(),
+        categories: z.array(z.string())
+    })).describe(`차트 카테고리 설정입니다.
+  예시)
+  [
+    {
+      name: 'ondemand_cost',
+      categories: [
+        'rds_ondemand_cost',
+        'elasti_cache_ondemand_cost'
+      ]
+    },
+    {
+      name: 'savings_cost',
+      categories: [
+        'rds_savings_cost'
+      ]
+    }
+  ]
+  `),
+    chartLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe(`차트에 적용할 다국어 목록입니다.
+  예시)
+  [
+    {
+      'name': 'l.cost.test',
+      'locale': t('cost.test')
+    }
+  ]`),
+    chartLocaleData: z.array(z.object({
+        name: z.string().describe("chartData에 정의된 필드 이름"),
+        value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
+        locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
+    }))
+        .optional()
+        .describe(`차트 데이터에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: 'category',
+      value: 'Usage',
+      locale: $t('usage')
+    }
+  ]`),
+    chartLocaleMessage: z.array(z.object({
+        name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
+        locale: z.string().describe("차트 데이터 필드 다국어 값으로 name에 다국어 값을 적용")
+    }))
+        .optional()
+        .describe(`차트 특정 메시지에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: '사용량',
+      locale: $t('usage')
+    },
+    {
+      name: '상한',
+      locale: $t('maximum')
+    }
+  ]`),
+    chartCategoryLocaleMapping: z.array(z.object({
+        name: z.string(),
+        value: z.string()
+    }))
+        .optional()
+        .describe(`차트 카테고리에 다국어를 적용합니다. chartLocaleProps에 정의된 이름을 사용합니다.
+  예시)
+  [
+    {
+      'name': 'cost_test_01',
+      'value': '{l.cost.test} 01'
+    }
+  ]`),
+    // 사용자 정의 설정
+    chartCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
+        strokeDasharray: z.array(z.number()).optional(),
+        tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
+    }).describe('사용자 정의 카테고리 스타일 및 설정'))
+        .optional()
+        .describe("사용자 정의 카테고리 스타일 및 설정"),
+    chartUserDefinedFunc: z.record(z.string()).optional().describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
+    langCd: z.string().optional().describe("언어 코드"),
+    onChartClick: z.string().optional().describe("차트 클릭 이벤트"),
+    onSeriesPointerOver: z.string().optional().describe("시리즈 포인터 오버 이벤트"),
+    chartTooltipDetailText: z.string().optional().describe("툴팁에서 보여주는 상세 텍스트")
+});
+// opsnow-common-stack-chart
+export const StackChartSchema = z.object({
+    // 차트 식별자 및 데이터
+    chartId: z.string().describe("차트의 고유 식별자"),
+    chartProps: z.object({}).describe(`
+  다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
+  **유효한 JSON 형식이어야합니다.**
+  {
+    // 차트 기본 설정
+    "chart": {
+      "paddingTop": 20, // 차트 상단 패딩 (px)
+      "paddingBottom": 30, // 차트 하단 패딩 (px)
+      "paddingLeft": 10, // 차트 좌측 패딩 (px)
+      "paddingRight": 30 // 차트 우측 패딩 (px)
+    },
+
+    // X축 설정
+    "xAxis": {
+      "type": "date", // 축 타입: 'date' | 'value' | 'category' (바형 차트일 경우는 value 사용)
+      "valueField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
+      "dateFormats": [ // xAxis type이 'date'일 때 사용
+        {
+          "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
+          "dateFormat": "MM/dd" // amCharts5에서 지원하는 날짜 형식
+        }
+      ],
+      "baseInterval": { // xAxis type이 'date'일 때 사용
+        "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
+        "count": 1 // 간격 수(1로 고정이며 변경 불가)
+      },
+      "gridHidden": true, // 격자선 표시 여부 (기본값: true)
+      "renderer": { // 렌더러 설정
+        "minGridDistance": 30 // 격자선 최소 간격 - 많은 데이터가 뿌려질 경우 조정시 사용
+      }
+    },
+    
+    // Y축 설정
+    "yAxis": {
+      "type": "value", // Y축 타입: 'value' | 'date' | 'category' (컬럼형 차트일 경우는 value 사용)
+      "valueField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
+      "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
+      "min": 0, // Y축 최소값 직접 지정
+      "max": 100, // Y축 최대값 직접 지정
+      "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
+      "extraMax": 0.1, // 최대값 위 추가 여유 공간 (0~1 비율)
+      "tooltip": {}, // Y축 툴팁 설정 (바형 차트일 경우 Y축 라벨 말줄임 사용시 필요)
+      "numberFormatter": { // 숫자 포맷터 설정
+        "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
+        "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
+          {
+            "number": 1000, // 기준 숫자 (예: 1e3, 1e6 등)
+            "suffix": "K" // 접미사 (예: K, M, B, T 등)
+          },
+          {
+            "number": 1000000,
+            "suffix": "M"
+          }
+        ],
+        "smallNumberPrefixes": [ // 작은 숫자에 대한 접미사 설정
+          {
+            "number": 0.001,
+            "suffix": "m"
+          }
+        ]
+      }
+    },
+    
+    // 시리즈 설정
+    "series": {
+      "valueXField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
+      "valueYField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
+      "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
+        "dateFields": ["date"], // X축 값 필드
+        "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
+      },
+      "columns": { // 칼럼 설정
+        "width": "p50", // 칼럼 너비 (예: p50 = 50%), 축 변경시 필요 없음
+        "height": "p80", // 칼럼 높이 (예: p80 = 80%), 축 변경시 필요
+        "hover": { // 호버 설정
+          "enabled": true, // 호버 표시 여부
+          "grouped": true // 그룹 표시 여부
+        }
+      },
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
+        "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
+        "header": { // 툴팁 헤더 설정
+          "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
+        },
+        "body": { // 툴팁 바디 설정
+          "name": "{name}", // 툴팁 바디 이름, 사용 예) {name}
+          "value": "{valueY.formatNumber('0.00')}", // 툴팁 바디 값, 사용 예) {valueY.formatNumber("0.00")}
+          "useMarker": true // 툴팁 바디 마커 사용 여부
+        },
+        "footer": { // 툴팁 푸터 설정
+          "name": "Total", // 툴팁 푸터 이름, 사용 예) Total
+          "value": "{valueYSum.formatNumber('0.00')}" // 툴팁 푸터 값, 사용 예) {valueYSum.formatNumber("0.00")}
+        },
+        "sort": "byName" // 툴팁 정렬 방향: 'byName' | 'reverse'
+      },
+      "bullet": { // 스택 차트의 블릿 설정 (선택 사항)
+        "type": "label", // 블릿 타입: 'circle' | 'square' | 'triangle' | 'label'
+        "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
+        "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
+        "label": { // 라벨 불릿 설정 (type이 'label'일 때 사용)
+          "dy": -10, // Y축 오프셋
+          "dx": 0, // X축 오프셋
+          "text": "{valueY}", // 라벨 텍스트
+          "fontSize": 12, // 폰트 크기
+          "format": "#,###", // 숫자 포맷
+          "prefix": "", // 접두사
+          "suffix": "", // 접미사
+          "background": { // 라벨 배경 설정
+            "fill": "#ffffff", // 배경 색상
+            "fillOpacity": 0.8 // 배경 투명도
+          }
+        }
+      },
+      "topNOthers": { // Top N + Others 옵션
+        "topN": 5, // 상위 N개 항목만 표시
+        "othersName": "Others", // 기타 항목의 이름 (기본값: 'Others')
+        "useOthersCount": true, // 기타 항목에 포함된 개수 표시 여부 (기본값: true)
+        "showViewDetails": false, // View Details 버튼 표시 여부 (기본값: false)
+        "showViewDetailsBtn": true, // View Details 버튼 사용 여부 (기본값: true)
+        "viewDetailsSize": "lg" // View Details 모달 크기: 'sm' | 'md' | 'lg' (기본값: 'lg')
+      },
+      "animation": { // 애니메이션 설정
+        "duration": 2000, // 애니메이션 지속 시간
+        "delay": 500 // 애니메이션 지연 시간
+      }
+    },
+
+    // 범례 설정
+    "legend": {
+      "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
+      "useExtension": false // 범례 확장 사용 여부 (기본값: false) - 범례 전체 선택 체크 박스를 사용하려면 필수
+    }
+  }
+  `),
+    chartData: z.array(z.record(z.any())
+        .and(z.object({
+        customLabel: z.string().optional().describe('해당 데이터의 축 라벨(예: X축 또는 범례 이름)을 커스터마이징'),
+        columnSettings: z
+            .object({
+            strokeWidth: z.number().optional().describe('선 두께'),
+            strokeDasharray: z.array(z.number()).optional().describe('점선 패턴'),
+            fillOpacity: z.number().optional().describe('채우기 투명도'),
+            fillPattern: z.enum(['diagonal']).optional().describe('채우기 패턴'),
+            stroke: z.string().optional().describe('선 색상'),
+            fill: z.string().optional().describe('채우기 색상'),
+        })
+            .optional().describe('해당 데이터 시리즈의 시각적 스타일을 정의'),
+    })))
+        .optional().describe(`차트에 표시할 데이터 배열입니다.
+  예시)
+  [
+    {
+      'date': '2022-07-01',
+      'cost_test_01': 3,
+      'cost_test_02': 7
+    },
+    {
+      'date': '2022-07-02',
+      'cost_test_01': 5,
+      'cost_test_02': 10
+    }
+  ]`),
+    chartCategory: z.array(z.string()).describe(`차트에 표시할 시리즈(라인)들의 이름을 정의하는 배열입니다.
+  예시) 차트 데이터가 다음과 같을 경우 카테고리는 ['cost_test_01', 'cost_test_02']가 됩니다.
+  [
+    {
+      'date': '2022-07-01',
+      'cost_test_01': 3,
+      'cost_test_02': 7
+    },
+    {
+      'date': '2022-07-02',
+      'cost_test_01': 5,
+      'cost_test_02': 10
+    }
+  ]`),
+    // 국제화 설정
+    chartLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe(`차트에 적용할 다국어 목록입니다.
+  예시)
+  [
+    {
+      'name': 'l.cost.test',
+      'locale': t('cost.test')
+    }
+  ]`),
+    chartLocaleData: z.array(z.object({
+        name: z.string().describe("chartData에 정의된 필드 이름"),
+        value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
+        locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
+    }))
+        .optional()
+        .describe(`차트 데이터에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: 'category',
+      value: 'Usage',
+      locale: $t('usage')
+    }
+  ]`),
+    chartLocaleMessage: z.array(z.object({
+        name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
+        locale: z.string().describe("차트 데이터 필드 다국어 값으로 name에 다국어 값을 적용")
+    }))
+        .optional()
+        .describe(`차트 특정 메시지에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: '사용량',
+      locale: $t('usage')
+    },
+    {
+      name: '상한',
+      locale: $t('maximum')
+    }
+  ]`),
+    chartCategoryLocaleMapping: z.array(z.object({
+        name: z.string(),
+        value: z.string()
+    }))
+        .optional()
+        .describe(`차트 카테고리에 다국어를 적용합니다. chartLocaleProps에 정의된 이름을 사용합니다.
+  예시)
+  [
+    {
+      'name': 'cost_test_01',
+      'value': '{l.cost.test} 01'
+    }
+  ]`),
+    // 사용자 정의 설정
+    chartCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
+        strokeDasharray: z.array(z.number()).optional(),
+        tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
+    }))
+        .optional()
+        .describe("사용자 정의 카테고리 스타일 및 설정"),
+    // 기타 설정
+    chartTooltipDetailText: z.string()
+        .optional()
+        .describe("툴팁에서 보여주는 상세 텍스트"),
+    chartSelectAllLegends: z.string()
+        .optional()
+        .describe("'범례 전체 선택' 체크 박스 라벨 다국어 적용"),
+    chartUnfoldLegend: z.string()
+        .optional()
+        .describe("'범례 전체 펼침' 버튼 다국어 적용"),
+    chartFoldLegend: z.string()
+        .optional()
+        .describe("'범례 전체 접힘' 버튼 다국어 적용"),
+    chartUserDefinedFunc: z.record(z.string())
+        .optional()
+        .describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
+    langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar'])
+        .optional()
+        .describe("언어 코드"),
+    onChartClick: z.string()
+        .optional()
+        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
+});
+// opsnow-common-bar-chart
+export const BarChartSchema = z.object({
+    // 차트 식별자 및 데이터
+    chartId: z.string().describe("차트의 고유 식별자"),
+    chartProps: z.object({}).describe(`
+  다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
+  **유효한 JSON 형식이어야합니다.**
+  {
+    // 차트 기본 설정
+    "chart": {
+      "paddingTop": 20, // 차트 상단 패딩 (px)
+      "paddingBottom": 30, // 차트 하단 패딩 (px)
+      "paddingLeft": 10, // 차트 좌측 패딩 (px)
+      "paddingRight": 30 // 차트 우측 패딩 (px)
+    },
+
+    // X축 설정
+    "xAxis": {
+      "type": "date", // 축 타입: 'date' | 'value' | 'category' (바형 차트일 경우는 value 사용)
+      "valueField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
+      "dateFormats": [ // xAxis type이 'date'일 때 사용
+        {
+          "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
+          "dateFormat": "MM/dd" // amCharts5에서 지원하는 날짜 형식
+        }
+      ],
+      "baseInterval": { // xAxis type이 'date'일 때 사용
+        "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
+        "count": 1 // 간격 수(1로 고정이며 변경 불가)
+      },
+      "gridHidden": true, // 격자선 표시 여부 (기본값: true)
+      "renderer": { // 렌더러 설정
+        "minGridDistance": 30 // 격자선 최소 간격 - 많은 데이터가 뿌려질 경우 조정시 사용
+      }
+    },
+    
+    // Y축 설정
+    "yAxis": {
+      "type": "value", // Y축 타입: 'value' | 'date' | 'category' (컬럼형 차트일 경우는 value 사용)
+      "valueField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
+      "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
+      "min": 0, // Y축 최소값 직접 지정
+      "max": 100, // Y축 최대값 직접 지정
+      "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
+      "extraMax": 0.1, // 최대값 위 추가 여유 공간 (0~1 비율)
+      "tooltip": {}, // Y축 툴팁 설정 (바형 차트일 경우 Y축 라벨 말줄임 사용시 필요)
+      "numberFormatter": { // 숫자 포맷터 설정
+        "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
+        "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
+          {
+            "number": 1000, // 기준 숫자 (예: 1e3, 1e6 등)
+            "suffix": "K" // 접미사 (예: K, M, B, T 등)
+          },
+          {
+            "number": 1000000,
+            "suffix": "M"
+          }
+        ],
+        "smallNumberPrefixes": [ // 작은 숫자에 대한 접미사 설정
+          {
+            "number": 0.001,
+            "suffix": "m"
+          }
+        ]
+      }
+    },
+    
+    // 시리즈 설정
+    "series": {
+      "valueXField": "date", // X축 값 필드 (컬럼형 차트일 경우 필수, 바형 차트일 경우 절대 생성하면 안됨)
+      "valueYField": "cost", // Y축 값 필드 (바형 차트일 경우 필수, 컬럼형 차트일 경우 절대 생성하면 안됨)
+      "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
+        "dateFields": ["date"], // X축 값 필드
+        "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
+      },
+      "columns": { // 칼럼 설정
+        "width": "p50", // 칼럼 너비 (예: p50 = 50%), 축 변경시 필요 없음
+        "height": "p80", // 칼럼 높이 (예: p80 = 80%), 축 변경시 필요
+        "hover": { // 호버 설정
+          "enabled": true, // 호버 표시 여부
+          "grouped": true // 그룹 표시 여부
+        }
+      },
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
+        "type": "CI", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
+        "header": { // 툴팁 헤더 설정
+          "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
+        },
+        "body": { // 툴팁 바디 설정
+          "name": "{name}", // 툴팁 바디 이름, 사용 예) {name}
+          "value": "{valueY.formatNumber('0.00')}", // 툴팁 바디 값, 사용 예) {valueY.formatNumber("0.00")}
+          "useMarker": true // 툴팁 바디 마커 사용 여부
+        },
+        "footer": { // 툴팁 푸터 설정
+          "name": "Total", // 툴팁 푸터 이름, 사용 예) Total
+          "value": "{valueYSum.formatNumber('0.00')}" // 툴팁 푸터 값, 사용 예) {valueYSum.formatNumber("0.00")}
+        },
+        "sort": "byName" // 툴팁 정렬 방향: 'byName' | 'reverse'
+      },
+      "bullet": { // 바 차트의 블릿 설정 (선택 사항)
+        "type": "label", // 블릿 타입: 'circle' | 'square' | 'triangle' | 'label'
+        "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
+        "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
+        "label": { // 라벨 불릿 설정 (type이 'label'일 때 사용)
+          "dy": -10, // Y축 오프셋
+          "dx": 0, // X축 오프셋
+          "text": "{valueY}", // 라벨 텍스트
+          "fontSize": 12, // 폰트 크기
+          "format": "#,###", // 숫자 포맷
+          "prefix": "", // 접두사
+          "suffix": "", // 접미사
+          "background": { // 라벨 배경 설정
+            "fill": "#ffffff", // 배경 색상
+            "fillOpacity": 0.8 // 배경 투명도
+          }
+        }
+      },
+      "topNOthers": { // Top N + Others 옵션
+        "topN": 5, // 상위 N개 항목만 표시
+        "othersName": "Others", // 기타 항목의 이름 (기본값: 'Others')
+        "useOthersCount": true, // 기타 항목에 포함된 개수 표시 여부 (기본값: true)
+        "showViewDetails": false, // View Details 버튼 표시 여부 (기본값: false)
+        "showViewDetailsBtn": true, // View Details 버튼 사용 여부 (기본값: true)
+        "viewDetailsSize": "lg" // View Details 모달 크기: 'sm' | 'md' | 'lg' (기본값: 'lg')
+      },
+      "animation": { // 애니메이션 설정
+        "duration": 2000, // 애니메이션 지속 시간
+        "delay": 500 // 애니메이션 지연 시간
+      }
+    },
+
+    // 범례 설정
+    "legend": {
+      "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
+      "useExtension": false // 범례 확장 사용 여부 (기본값: false) - 범례 전체 선택 체크 박스를 사용하려면 필수
+    }
+  }
+  `),
+    chartData: z.array(z.record(z.any())
+        .and(z.object({
+        customLabel: z.string().optional().describe('해당 데이터의 축 라벨(예: X축 또는 범례 이름)을 커스터마이징'),
+        columnSettings: z
+            .object({
+            strokeWidth: z.number().optional().describe('선 두께'),
+            strokeDasharray: z.array(z.number()).optional().describe('점선 패턴'),
+            fillOpacity: z.number().optional().describe('채우기 투명도'),
+            fillPattern: z.enum(['diagonal']).optional().describe('채우기 패턴'),
+        })
+            .optional().describe('해당 데이터 시리즈의 시각적 스타일을 정의'),
+    })))
+        .optional().describe(`차트에 표시할 데이터 배열입니다.
+  예시)
+  [
+    {
+      'date': '2022-07-01',
+      'cost_test_01': 3,
+      'cost_test_02': 7
+    },
+    {
+      'date': '2022-07-02',
+      'cost_test_01': 5,
+      'cost_test_02': 10
+    }
+  ]`),
+    chartCategory: z.array(z.string()).describe(`차트에 표시할 시리즈(라인)들의 이름을 정의하는 배열입니다.
+  예시) 차트 데이터가 다음과 같을 경우 카테고리는 ['cost_test_01', 'cost_test_02']가 됩니다.
+  [
+    {
+      'date': '2022-07-01',
+      'cost_test_01': 3,
+      'cost_test_02': 7
+    },
+    {
+      'date': '2022-07-02',
+      'cost_test_01': 5,
+      'cost_test_02': 10
+    }
+  ]`),
+    // 국제화 설정
+    chartLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe(`차트에 적용할 다국어 목록입니다.
+  예시)
+  [
+    {
+      'name': 'l.cost.test',
+      'locale': t('cost.test')
+    }
+  ]`),
+    chartLocaleData: z.array(z.object({
+        name: z.string().describe("chartData에 정의된 필드 이름"),
+        value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
+        locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
+    }))
+        .optional()
+        .describe(`차트 데이터에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: 'category',
+      value: 'Usage',
+      locale: $t('usage')
+    }
+  ]`),
+    chartLocaleMessage: z.array(z.object({
+        name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
+        locale: z.string().describe("차트 데이터 필드 다국어 값으로 name에 다국어 값을 적용")
+    }))
+        .optional()
+        .describe(`차트 특정 메시지에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: '사용량',
+      locale: $t('usage')
+    },
+    {
+      name: '상한',
+      locale: $t('maximum')
+    }
+  ]`),
+    chartCategoryLocaleMapping: z.array(z.object({
+        name: z.string(),
+        value: z.string()
+    }))
+        .optional()
+        .describe(`차트 카테고리에 다국어를 적용합니다. chartLocaleProps에 정의된 이름을 사용합니다.
+  예시)
+  [
+    {
+      'name': 'cost_test_01',
+      'value': '{l.cost.test} 01'
+    }
+  ]`),
+    // 사용자 정의 설정
+    chartCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
+        strokeDasharray: z.array(z.number()).optional(),
+        tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
+    }).describe('사용자 정의 카테고리 스타일 및 설정'))
+        .optional()
+        .describe("사용자 정의 카테고리 스타일 및 설정"),
+    // 기타 설정    
+    chartTooltipDetailText: z.string()
+        .optional()
+        .describe("툴팁에서 보여주는 상세 텍스트"),
+    chartSelectAllLegends: z.string()
+        .optional()
+        .describe("'범례 전체 선택' 체크 박스 라벨 다국어 적용"),
+    chartUnfoldLegend: z.string()
+        .optional()
+        .describe("'범례 전체 펼침' 버튼 다국어 적용"),
+    chartFoldLegend: z.string()
+        .optional()
+        .describe("'범례 전체 접힘' 버튼 다국어 적용"),
+    chartUserDefinedFunc: z.record(z.string())
+        .optional()
+        .describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
+    langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar'])
+        .optional()
+        .describe("언어 코드"),
+    onChartClick: z.string()
+        .optional()
+        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
+});
+// opsnow-common-line-chart
+export const LineChartSchema = z.object({
+    // 차트 식별자 및 데이터
+    chartId: z.string().describe("차트의 고유 식별자"),
+    chartProps: z.object({}).describe(`
+  다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
+  **유효한 JSON 형식이어야합니다.**
+  {
+    // 차트 기본 설정
+    "chart": {
+      "paddingTop": 20, // 차트 상단 패딩 (px)
+      "paddingBottom": 30, // 차트 하단 패딩 (px)
+      "paddingLeft": 10, // 차트 좌측 패딩 (px)
+      "paddingRight": 30 // 차트 우측 패딩 (px)
+    },
+
+    // X축 설정
+    "xAxis": {
+      "type": "category", // 축 타입: 'date' | 'value' | 'category'
+      "valueField": "date", // X축 값 필드
+      "dateFormats": [ // xAxis type이 'date'일 때 사용
+        {
+          "type": "day", // 날짜 단위: 'day' | 'week' | 'month' | 'year'
+          "dateFormat": "MM/dd" // amCharts5에서 지원하는 날짜 형식
+        }
+      ],
+      "baseInterval": { // xAxis type이 'date'일 때 사용
+        "timeUnit": "day", // 시간 단위: 'day' | 'week' | 'month' | 'year'
+        "count": 1 // 간격 수(1로 고정이며 변경 불가)
+      },
+      "gridHidden": true, // 격자선 표시 여부 (기본값: true)
+      "renderer": { // 렌더러 설정
+        "minGridDistance": 50 // 격자선 최소 간격 - 많은 데이터가 뿌려질 경우 조정시 사용
+      }
+    },
+    
+    // Y축 설정
+    "yAxis": {
+      "type": "value", // Y축 타입: 'value' | 'date' | 'category'
+      "useMin": false, // Y축 최소값 사용 여부 (기본값: false)
+      "min": 0, // Y축 최소값 직접 지정
+      "max": 100, // Y축 최대값 직접 지정
+      "extraMin": 0.1, // 최소값 아래 추가 여유 공간 (0~1 비율)
+      "extraMax": 0.1, // 최대값 위 추가 여유 공간 (0~1 비율)
+      "numberFormatter": { // 숫자 포맷터 설정
+        "numberFormat": "#.#a", // 숫자 포맷 (예: #.#a)
+        "bigNumberPrefixes": [ // 큰 숫자에 대한 접미사 설정
+          {
+            "number": 1000, // 기준 숫자 (예: 1e3, 1e6 등)
+            "suffix": "K" // 접미사 (예: K, M, B, T 등)
+          },
+          {
+            "number": 1000000,
+            "suffix": "M"
+          }
+        ],
+        "smallNumberPrefixes": [ // 작은 숫자에 대한 접미사 설정
+          {
+            "number": 0.001,
+            "suffix": "m"
+          }
+        ]
+      }
+    },
+    
+    // 시리즈 설정
+    "series": {
+      "valueXField": "date", // X축 값 필드
+      "connect": true, // 시리즈 연결 여부 (기본값: true)
+      "area": { // min-max area 영역 표시 옵션
+        "type": "min-max", // area 타입 (현재 min-max만 지원)
+        "minMaxCategories": { // min/max 카테고리명
+          "min": "min_value", // 최소값 카테고리명
+          "max": "max_value" // 최대값 카테고리명
+        },
+        "fill": "#ff0000", // area 채우기 색상
+        "fillOpacity": 0.3 // area 투명도 (0~1)
+      },
+      "clickTarget": true, // 시리즈 클릭 대상 여부 (기본값: false)
+      "dataProcessor": { // xAxis type이 'date'일 때 반드시 사용
+        "dateFields": ["date"], // X축 값 필드
+        "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
+      },
+      "bullet": { // 라인 차트의 블릿 설정으로 필수 속성
+        "type": "circle", // 라인 차트의 블릿 타입: 'circle' | 'square' | 'triangle' | 'label' (기본값: "circle")
+        "cursorOverStyle": "pointer", // 커서 오버 스타일, 클릭 대상이 true일 때 사용: "pointer" | "hand" (기본값: "pointer")
+        "lineOnly": false, // 라인만 표시 여부 (기본값: false)
+        "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
+        "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
+        "label": { // 라벨 불릿 설정 (type이 'label'일 때 사용)
+          "dy": -10, // Y축 오프셋
+          "dx": 0, // X축 오프셋
+          "text": "{valueY}", // 라벨 텍스트
+          "fontSize": 12, // 폰트 크기
+          "format": "#,###", // 숫자 포맷
+          "prefix": "", // 접두사
+          "suffix": "", // 접미사
+          "background": { // 라벨 배경 설정
+            "fill": "#ffffff", // 배경 색상
+            "fillOpacity": 0.8 // 배경 투명도
+          }
+        }
+      },
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
+        "type": "CG", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
+        "header": { // 툴팁 헤더 설정
+          "name": "{valueX.formatDate('MM/dd')}" // 툴팁 헤더 이름, 사용 예) {valueX.formatDate("MM/dd")}
+        },
+        "body": { // 툴팁 바디 설정
+          "name": "{name}", // 툴팁 바디 이름, 사용 예) {name}
+          "value": "{valueY.formatNumber('0.00')}", // 툴팁 바디 값, 사용 예) {valueY.formatNumber("0.00")}
+          "useMarker": true // 툴팁 바디 마커 사용 여부
+        },
+        "footer": { // 툴팁 푸터 설정
+          "name": "Total", // 툴팁 푸터 이름, 사용 예) Total
+          "value": "{valueYSum.formatNumber('0.00')}" // 툴팁 푸터 값, 사용 예) {valueYSum.formatNumber("0.00")}
+        },
+        "sort": "byName" // 툴팁 정렬 방향: 'byName' | 'reverse'
+      },
+      "topNOthers": { // Top N + Others 옵션
+        "topN": 5, // 상위 N개 항목만 표시
+        "othersName": "Others", // 기타 항목의 이름 (기본값: 'Others')
+        "useOthersCount": true, // 기타 항목에 포함된 개수 표시 여부 (기본값: true)
+        "showViewDetails": false, // View Details 버튼 표시 여부 (기본값: false)
+        "showViewDetailsBtn": true, // View Details 버튼 사용 여부 (기본값: true)
+        "viewDetailsSize": "lg" // View Details 모달 크기: 'sm' | 'md' | 'lg' (기본값: 'lg')
+      },
+      "animation": { // 애니메이션 설정
+        "duration": 2000, // 애니메이션 지속 시간
+        "delay": 500 // 애니메이션 지연 시간
+      }
+    },
+    
+    // 범례 설정
+    "legend": {
+      "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
+      "useExtension": false // 범례 확장 사용 여부 (기본값: false) - 범례 전체 선택 체크 박스를 사용하려면 필수
+    }
+  }
+  `),
+    chartData: z.array(z.record(z.any())).optional().describe(`차트에 표시할 데이터 배열입니다.
+  예시)
+  [
+    {
+      'date': '2022-07-01',
+      'cost_test_01': 3, 
+      'cost_test_02': 7
+    },
+    {
+      'date': '2022-07-02',
+      'cost_test_01': 5,
+      'cost_test_02': 10
+    }
+  ]`),
+    chartCategory: z.array(z.string()).describe(`차트에 표시할 시리즈(라인)들의 이름을 정의하는 배열입니다.
+  예시) 차트 데이터가 다음과 같을 경우 카테고리는 ['cost_test_01', 'cost_test_02']가 됩니다.
+  [
+    {
+      'date': '2022-07-01',
+      'cost_test_01': 3, 
+      'cost_test_02': 7
+    },
+    {
+      'date': '2022-07-02',
+      'cost_test_01': 5,
+      'cost_test_02': 10
+    }
+  ]`),
+    // 국제화 설정
+    chartLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe(`차트에 적용할 다국어 목록입니다.
+  예시)
+  [
+    {
+      'name': 'l.cost.test',
+      'locale': t('cost.test')
+    }
+  ]`),
+    chartLocaleData: z.array(z.object({
+        name: z.string().describe("chartData에 정의된 필드 이름"),
+        value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
+        locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
+    }))
+        .optional()
+        .describe(`차트 데이터에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: 'category',
+      value: 'Usage',
+      locale: $t('usage')
+    }
+  ]`),
+    chartLocaleMessage: z.array(z.object({
+        name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
+        locale: z.string().describe("차트 데이터 필드 다국어 값으로 name에 다국어 값을 적용")
+    }))
+        .optional()
+        .describe(`차트 특정 메시지에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: '사용량',
+      locale: $t('usage')
+    },
+    {
+      name: '상한',
+      locale: $t('maximum')
+    }
+  ]`),
+    chartCategoryLocaleMapping: z.array(z.object({
+        name: z.string(),
+        value: z.string()
+    }))
+        .optional()
+        .describe(`차트 카테고리에 다국어를 적용합니다. chartLocaleProps에 정의된 이름을 사용합니다.
+  예시)
+  [
+    {
+      'name': 'cost_test_01',
+      'value': '{l.cost.test} 01'
+    }
+  ]`),
+    // 사용자 정의 설정
+    chartCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
+        strokeDasharray: z.array(z.number()).optional(),
+        tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
+    }).describe('사용자 정의 카테고리 스타일 및 설정'))
+        .optional()
+        .describe("사용자 정의 카테고리 스타일 및 설정"),
+    // 기타 설정    
+    chartTooltipDetailText: z.string()
+        .optional()
+        .describe("툴팁에서 보여주는 상세 텍스트"),
+    chartSelectAllLegends: z.string()
+        .optional()
+        .describe("'범례 전체 선택' 체크 박스 라벨 다국어 적용"),
+    chartUnfoldLegend: z.string()
+        .optional()
+        .describe("'범례 전체 펼침' 버튼 다국어 적용"),
+    chartFoldLegend: z.string()
+        .optional()
+        .describe("'범례 전체 접힘' 버튼 다국어 적용"),
+    chartUserDefinedFunc: z.record(z.string())
+        .optional()
+        .describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
+    langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar'])
+        .optional()
+        .describe("언어 코드"),
+    onChartClick: z.string()
+        .optional()
+        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
+});
+// opsnow-common-pie-chart
+export const PieChartSchema = z.object({
+    chartId: z.string().describe("차트의 고유 식별자"),
+    chartProps: z.object({}).describe(`
+  다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
+  **유효한 JSON 형식이어야합니다.**
+  {
+    // 차트 기본 설정
+    "chart": {
+      "innerRadius": "p62", // 내부 반지름 (퍼센트 값을 문자열로 표시: 예) 20% -> 'p20', 30% -> 'p30', ...)
+      "layout": "horizontal" // 레이아웃: 'horizontal' | 'vertical'
+    },
+    
+    // 라벨 설정
+    "label": {
+      "fontSize": 15, // 폰트 크기
+      "text": "[bold fontSize:30px]4.56[/]\n[fontSize:18px]total[/]", // 차트 가운데에 표시되는 라벨 텍스트. [bold fontSize:30px]4.56[/]\n[fontSize:18px]total[/]와 같이 텍스트 스타일을 지정할 수 있습니다.
+      "src": "data:image/svg+xml,..." // svg 이미지 값
+    },
+    
+    // 시리즈 설정
+    "series": {
+      "valueField": "cost", // 값 필드명
+      "categoryField": "ratioName", // 카테고리 필드명
+      "tooltip": { // 툴팁 설정(툴팁 설정시 body 설정 필수)
+        "type": "CI", // CI: 각 카테고리를 보여줄때 | CG: 모든 카테고리를 보여줄때
+        "position": { // 툴팁 위치 설정
+          "criteria": "left" // 위치 기준: 'left' | 'right'
+        },
+        "body": { // 툴팁 바디 설정
+          "name": "{category}", // 툴팁 바디 이름
+          "value": "{valuePercentTotal.formatNumber('0.00')}%", // 툴팁 바디 값
+          "useMarker": true // 툴팁 바디 마커 사용 여부
+        }
+      },
+      "animation": { // 애니메이션 설정
+        "duration": 2000, // 애니메이션 지속 시간
+        "delay": 500 // 애니메이션 지연 시간
+      }
+    },
+    
+    // 범례 설정
+    "legend": {
+      "layout": "vertical", // 범례 레이아웃: 'horizontal' | 'vertical'
+      "valueLabel": { // 값 라벨 설정
+        "textAlign": "right", // 텍스트 정렬
+        "fontSize": 11 // 폰트 크기
+      },
+      "label": { // 범례 라벨 설정
+        "fontSize": 11, // 폰트 크기
+        "maxWidth": 200, // 최대 너비
+        "width": 120, // 너비
+        "oversizedBehavior": "wrap" // 크기 초과 시 동작: 'none' | 'hide' | 'fit' | 'wrap' | 'wrap-no-break' | 'truncate'
+      }
+    }
+  }
+  `),
+    chartData: z.array(z.record(z.any())).optional().describe(`차트에 표시할 데이터 배열입니다.
+  예시)
+  [
+    {
+      'date': '2022-07-01',
+      'cost_test_01': 3, 
+      'cost_test_02': 7
+    },
+    {
+      'date': '2022-07-02',
+      'cost_test_01': 5,
+      'cost_test_02': 10
+    }
+  ]`),
+    chartLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    })).optional().describe(`차트에 적용할 다국어 목록입니다.
+  예시)
+  [
+    {
+      'name': 'l.cost.test',
+      'locale': t('cost.test')
+    }
+  ]`),
+    chartLocaleData: z.array(z.object({
+        name: z.string().describe("chartData에 정의된 필드 이름"),
+        value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
+        locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
+    })).optional().describe(`차트 데이터에 다국어를 적용합니다.
+  예시)
+  [
+    {
+      name: 'category',
+      value: 'Usage',
+      locale: $t('usage')
+    }
+  ]`),
+    chartCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        shape: z.enum(['gap', 'interval']).optional().describe("XY 멀티 차트에서 사용"),
+        strokeDasharray: z.array(z.number()).optional(),
+        tooltipText: z.string().optional().describe("툴팁 텍스트, 파이 차트에서 사용")
+    }).describe('사용자 정의 카테고리 스타일 및 설정')).optional().describe("사용자 정의 카테고리"),
+    chartUserDefinedFunc: z.record(z.string()).optional().describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
+    langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar']).optional().describe("언어 코드"),
+    onChartClick: z.string().optional().describe('차트 클릭 시 호출되는 콜백 함수(stringified)'),
+    onLegendClick: z.string().optional().describe('범례 클릭 시 호출되는 콜백 함수(stringified)')
+});
+// opsnow-common-gauge-chart
+export const GaugeChartSchema = z.object({
+    chartId: z.string().describe("차트의 고유 식별자"),
+    chartProps: z.object({}).describe(`
+  다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
+  **유효한 JSON 형식이어야합니다.**
+  {
+    // 차트 기본 설정
+    "chart": {
+      "panX": false, // X축 이동 가능 여부 (기본값: false)
+      "panY": false, // Y축 이동 가능 여부 (기본값: false)
+      "startAngle": 100, // 시작 각도 (기본값: 100)
+      "endAngle": 360 // 종료 각도 (기본값: 360)
+    },
+    
+    // 축 렌더러 설정
+    "axisRenderer": {
+      "innerRadius": -20, // 내부 반지름 (기본값: -20)
+      "labels": {
+        "fill": "#7e8793" // 라벨 색상 (기본값: "#7e8793")
+      }
+    },
+    
+    // X축 설정
+    "xAxis": {
+      "min": 0, // 최소값 (기본값: 0)
+      "max": 100 // 최대값 (기본값: 100)
+    },
+    
+    // 시계 바늘 설정
+    "clockHand": {
+      "innerRadius": 20, // 내부 반지름 (기본값: 20)
+      "radius": 99, // 반지름 (기본값: 99)
+      "topWidth": 1, // 상단 너비 (기본값: 1)
+      "bottomWidth": 1, // 하단 너비 (기본값: 1)
+      "pinRadius": 0 // 핀 반지름 (기본값: 0)
+    },
+    
+    // 라벨 설정
+    "label": {
+      "centerX": 50, // 중앙 X 좌표 (기본값: 50)
+      "textAlign": "center", // 텍스트 정렬 (기본값: "center")
+      "centerY": 25, // 중앙 Y 좌표 (기본값: 25)
+      "fontSize": "16px", // 폰트 크기 (기본값: "16px")
+      "fontFamily": "Montserrat" // 폰트 패밀리 (기본값: "Montserrat")
+    },
+    
+    // 불릿 설정
+    "bullet": {
+      "labelText": "" // 게이지 가운데 표시하는 라벨 (기본값: "")
+    },
+    
+    // 전면 축 범위 설정
+    "axisRangeFront": {
+      "axisFill": {
+        "fill": "#57A000" // 전면 축 채우기 색상 (기본값: "#57A000")
+      }
+    },
+    
+    // 후면 축 범위 설정
+    "axisRangeBack": {
+      "axisFill": {
+        "fill": "#B0B6BD" // 후면 축 채우기 색상 (기본값: "#B0B6BD")
+      }
+    }
+  }
+  `),
+    chartValue: z.number().describe("차트 값"),
+});
+// Chart 컴포넌트 함수 - 배열 반환
+export function createChartComponent() {
+    return [
+        {
+            name: "createGaugeChart",
+            description: `게이지 차트 컴포넌트 - 가이어 차트 시각화 지원
+
+      **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
+      
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonGaugeChart } = useCommonComponents();
+        \`\`\``,
+            parameters: GaugeChartSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.chartId)
+                    props.push(`chartId="${args.chartId}"`);
+                if (args.chartProps)
+                    props.push(`chartProps={${args.chartProps}}`);
+                if (args.chartValue)
+                    props.push(`chartValue={${args.chartValue}}`);
+                const code = `<OpsnowCommonGaugeChart ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createPieChart",
+            description: `파이 차트 컴포넌트 - 파이, 도넛 차트 시각화 지원
+
+      **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
+      **레전드는 차트 좌우로만 배치가 가능합니다. 따라서 위,아래 배치는 불가능합니다.**
+      
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonPieChart } = useCommonComponents();
+        \`\`\``,
+            parameters: PieChartSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.chartId)
+                    props.push(`chartId="${args.chartId}"`);
+                if (args.chartProps)
+                    props.push(`chartProps={${args.chartProps}}`);
+                if (args.chartData)
+                    props.push(`chartData={${args.chartData}}`);
+                else
+                    props.push(`chartData={[]}`);
+                if (args.chartLocaleProps)
+                    props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
+                if (args.chartLocaleData)
+                    props.push(`chartLocaleData={${args.chartLocaleData}}`);
+                if (args.chartCustomCategory)
+                    props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
+                const code = `<OpsnowCommonPieChart ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createLineChart",
+            description: `라인 차트 컴포넌트 - 라인 차트 시각화 지원
+
+      **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
+      
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonLineChart } = useCommonComponents();
+        \`\`\``,
+            parameters: LineChartSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.chartId)
+                    props.push(`chartId="${args.chartId}"`);
+                if (args.chartProps)
+                    props.push(`chartProps={${args.chartProps}}`);
+                if (args.chartData)
+                    props.push(`chartData={${args.chartData}}`);
+                else
+                    props.push(`chartData={[]}`);
+                if (args.chartCategory)
+                    props.push(`chartCategory={${args.chartCategory}}`);
+                if (args.chartLocaleProps)
+                    props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
+                if (args.chartCategoryLocaleMapping)
+                    props.push(`chartCategoryLocaleMapping={${args.chartCategoryLocaleMapping}}`);
+                if (args.chartLocaleData)
+                    props.push(`chartLocaleData={${args.chartLocaleData}}`);
+                if (args.chartCustomCategory)
+                    props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
+                if (args.langCd)
+                    props.push(`langCd="${args.langCd}"`);
+                if (args.onChartClick)
+                    props.push(`onChartClick={${args.onChartClick}}`);
+                if (args.chartTooltipDetailText)
+                    props.push(`chartTooltipDetailText="${args.chartTooltipDetailText}"`);
+                if (args.chartSelectAllLegends)
+                    props.push(`chartSelectAllLegends="${args.chartSelectAllLegends}"`);
+                if (args.chartUnfoldLegend)
+                    props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
+                if (args.chartFoldLegend)
+                    props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
+                const code = `<OpsnowCommonLineChart ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createBarChart",
+            description: `바 차트 컴포넌트 - 바 차트 시각화 지원
+
+      **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
+
+      **주의: Grouped Bar Chart(묶음 막대 차트)는 이 컴포넌트가 아닌 OpsnowCommonXyMultiChart를 사용해야 합니다.**
+      Grouped Bar Chart란 각 카테고리에서 여러 시리즈의 막대가 나란히 배치되는 차트입니다.
+
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonBarChart } = useCommonComponents();
+        \`\`\``,
+            parameters: BarChartSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.chartId)
+                    props.push(`chartId="${args.chartId}"`);
+                if (args.chartProps) {
+                    // const chartProps = JSON.parse(args.chartProps);
+                    props.push(`chartProps={${args.chartProps}}`);
+                }
+                if (args.chartData)
+                    props.push(`chartData={${args.chartData}}`);
+                else
+                    props.push(`chartData={[]}`);
+                if (args.chartCategory)
+                    props.push(`chartCategory={${args.chartCategory}}`);
+                if (args.chartLocaleProps)
+                    props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
+                if (args.chartCategoryLocaleMapping)
+                    props.push(`chartCategoryLocaleMapping={${args.chartCategoryLocaleMapping}}`);
+                if (args.chartLocaleData)
+                    props.push(`chartLocaleData={${args.chartLocaleData}}`);
+                if (args.chartCustomCategory)
+                    props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
+                if (args.langCd)
+                    props.push(`langCd="${args.langCd}"`);
+                if (args.onChartClick)
+                    props.push(`onChartClick={${args.onChartClick}}`);
+                if (args.chartTooltipDetailText)
+                    props.push(`chartTooltipDetailText="${args.chartTooltipDetailText}"`);
+                if (args.chartSelectAllLegends)
+                    props.push(`chartSelectAllLegends="${args.chartSelectAllLegends}"`);
+                if (args.chartUnfoldLegend)
+                    props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
+                if (args.chartFoldLegend)
+                    props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
+                const code = `<OpsnowCommonBarChart ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createStackChart",
+            description: `스택 차트 컴포넌트 - 스택 차트 시각화 지원
+
+      **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
+      
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonStackChart } = useCommonComponents();
+        \`\`\``,
+            parameters: StackChartSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.chartId)
+                    props.push(`chartId="${args.chartId}"`);
+                if (args.chartProps)
+                    props.push(`chartProps={${args.chartProps}}`);
+                if (args.chartData)
+                    props.push(`chartData={${args.chartData}}`);
+                else
+                    props.push(`chartData={[]}`);
+                if (args.chartCategory)
+                    props.push(`chartCategory={${args.chartCategory}}`);
+                if (args.chartLocaleProps)
+                    props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
+                if (args.chartCategoryLocaleMapping)
+                    props.push(`chartCategoryLocaleMapping={${args.chartCategoryLocaleMapping}}`);
+                if (args.chartLocaleData)
+                    props.push(`chartLocaleData={${args.chartLocaleData}}`);
+                if (args.chartCustomCategory)
+                    props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
+                if (args.chartUserDefinedFunc)
+                    props.push(`chartUserDefinedFunc={${args.chartUserDefinedFunc}}`);
+                if (args.langCd)
+                    props.push(`langCd="${args.langCd}"`);
+                if (args.onChartClick)
+                    props.push(`onChartClick={${args.onChartClick}}`);
+                if (args.chartTooltipDetailText)
+                    props.push(`chartTooltipDetailText="${args.chartTooltipDetailText}"`);
+                if (args.chartSelectAllLegends)
+                    props.push(`chartSelectAllLegends="${args.chartSelectAllLegends}"`);
+                if (args.chartUnfoldLegend)
+                    props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
+                if (args.chartFoldLegend)
+                    props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
+                const code = `<OpsnowCommonStackChart ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+        {
+            name: "createXyMultiChart",
+            description: `XY 멀티 차트 컴포넌트 - XY 멀티 차트 시각화 지원
+
+      **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
+
+      **Grouped Bar Chart(묶음 막대 차트)를 만들려면 이 컴포넌트를 사용하세요.**
+      series의 type을 'grouped'로 설정하면 각 카테고리에서 여러 시리즈의 막대가 나란히 배치됩니다.
+
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonXyMultiChart } = useCommonComponents();
+        \`\`\``,
+            parameters: XyMultiChartSchema,
+            handler: async (args) => {
+                const props = [];
+                if (args.chartId)
+                    props.push(`chartId="${args.chartId}"`);
+                if (args.chartProps)
+                    props.push(`chartProps={${args.chartProps}}`);
+                if (args.chartData)
+                    props.push(`chartData={${args.chartData}}`);
+                else
+                    props.push(`chartData={[]}`);
+                if (args.chartCategory)
+                    props.push(`chartCategory={${args.chartCategory}}`);
+                if (args.chartLocaleProps)
+                    props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
+                if (args.chartLocaleMessage)
+                    props.push(`chartLocaleMessage={${args.chartLocaleMessage}}`);
+                if (args.chartCategoryLocaleMapping)
+                    props.push(`chartCategoryLocaleMapping={${args.chartCategoryLocaleMapping}}`);
+                if (args.chartLocaleData)
+                    props.push(`chartLocaleData={${args.chartLocaleData}}`);
+                if (args.chartCustomCategory)
+                    props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
+                if (args.chartUserDefinedFunc)
+                    props.push(`chartUserDefinedFunc={${args.chartUserDefinedFunc}}`);
+                if (args.langCd)
+                    props.push(`langCd="${args.langCd}"`);
+                if (args.onChartClick)
+                    props.push(`onChartClick={${args.onChartClick}}`);
+                if (args.onSeriesPointerOver)
+                    props.push(`onSeriesPointerOver={${args.onSeriesPointerOver}}`);
+                const code = `<OpsnowCommonXyMultiChart ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
+    ];
+}