@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.28 → 1.0.30

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

@@ -354,7 +354,45 @@ const XyMultiChartSchema = z.object({
     langCd: z.string().optional().describe("언어 코드"),
     onChartClick: z.string().optional().describe("차트 클릭 이벤트"),
     onSeriesPointerOver: z.string().optional().describe("시리즈 포인터 오버 이벤트"),
-    chartTooltipDetailText: z.string().optional().describe("툴팁에서 보여주는 상세 텍스트")
+    onSeriesPointerOut: z.string().optional().describe("시리즈에서 포인터가 벗어날 때 호출되는 콜백 함수(stringified). onSeriesPointerOver와 짝으로 사용합니다."),
+    chartTooltipDetailText: z.string().optional().describe("툴팁에서 보여주는 상세 텍스트"),
+    // 샘플(스켈레톤) 차트 설정 — chartProps 없이 chartSample* 계열만 전달하면 실데이터 로딩 전 미리보기(스켈레톤) 차트가 렌더링됩니다.
+    chartSampleProps: z.object({}).optional().describe("샘플(스켈레톤) 차트 속성 (object, 기본값 없음). chartProps와 동일한 구조의 JSON입니다. chartProps 없이 chartSampleProps만 전달하면 차트가 샘플(미리보기/스켈레톤) 모드로 렌더링됩니다."),
+    chartSampleCategory: z.array(z.object({
+        name: z.string(),
+        categories: z.array(z.string())
+    })).optional().describe("샘플 차트 카테고리 설정 (object[], 기본값 없음). chartCategory와 동일한 구조({ name, categories[] })이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleData: z.array(z.record(z.any())).optional().describe("샘플 차트에 표시할 데이터 배열 (object[], 기본값 없음). chartData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        strokeDasharray: z.array(z.number()).optional()
+    })).optional().describe("샘플 차트의 사용자 정의 카테고리 스타일 (object[], 기본값 없음). chartCustomCategory와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    })).optional().describe("샘플 차트에 적용할 다국어 목록 (object[], 기본값 없음). chartLocaleProps와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCategoryLocaleMapping: z.array(z.object({
+        name: z.string(),
+        value: z.string()
+    })).optional().describe("샘플 차트 카테고리 다국어 매핑 (object[], 기본값 없음). chartCategoryLocaleMapping과 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleData: z.array(z.object({
+        name: z.string(),
+        value: z.string(),
+        locale: z.string()
+    })).optional().describe("샘플 차트 데이터 다국어 적용 목록 (object[], 기본값 없음). chartLocaleData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartCategoryColorByVendor: z.array(z.object({
+        vendor: z.string().describe("벤더명: 'aws' | 'azure' | 'gcp' | 'oci' | 'ncloud' | 'tencent' | 'basic' | 'mix'"),
+        categories: z.array(z.string()).describe("해당 벤더 색상 팔레트를 적용할 카테고리 이름 배열")
+    })).optional().describe(`벤더별 색상 팔레트를 카테고리에 적용합니다 (object[], 기본값 없음). 각 항목의 vendor 팔레트에서 categories 개수만큼 색상을 순서대로 할당합니다. 지정 시 useOpsnowUs보다 우선합니다.
+  예시)
+  [
+    { "vendor": "aws", "categories": ["ec2_cost", "s3_cost"] },
+    { "vendor": "azure", "categories": ["vm_cost"] }
+  ]`),
+    useOpsnowUs: z.boolean().optional().describe("OpsNow US 기본(basic) 색상 팔레트 사용 여부 (boolean, 기본값 true). false면 mix 팔레트를 사용합니다. chartCategoryColorByVendor가 지정되면 그 설정이 우선합니다."),
+    chartNoRowsText: z.string().optional().describe("차트 데이터가 없을 때 표시할 텍스트 (string, 기본값 없음)")
 });
 // opsnow-common-stack-chart
 export const StackChartSchema = z.object({
@@ -627,7 +665,70 @@ export const StackChartSchema = z.object({
         .describe("언어 코드"),
     onChartClick: z.string()
         .optional()
-        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
+        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)'),
+    onSeriesPointerOver: z.string()
+        .optional()
+        .describe('시리즈에 포인터가 올라갈 때 호출되는 콜백 함수(stringified). onSeriesPointerOut과 짝으로 사용합니다.'),
+    onSeriesPointerOut: z.string()
+        .optional()
+        .describe('시리즈에서 포인터가 벗어날 때 호출되는 콜백 함수(stringified). onSeriesPointerOver와 짝으로 사용합니다.'),
+    onTopNPopupDetailClick: z.string()
+        .optional()
+        .describe("TopN(others) 상세 팝업에서 'View Details' 버튼 클릭 시 호출되는 콜백 함수(stringified). chartProps.series.topNOthers 설정과 함께 사용합니다."),
+    // 샘플(스켈레톤) 차트 설정 — chartProps 없이 chartSample* 계열만 전달하면 실데이터 로딩 전 미리보기(스켈레톤) 차트가 렌더링됩니다.
+    chartSampleProps: z.object({})
+        .optional()
+        .describe("샘플(스켈레톤) 차트 속성 (object, 기본값 없음). chartProps와 동일한 구조의 JSON입니다. chartProps 없이 chartSampleProps만 전달하면 차트가 샘플(미리보기/스켈레톤) 모드로 렌더링됩니다."),
+    chartSampleCategory: z.array(z.string())
+        .optional()
+        .describe("샘플 차트의 카테고리(시리즈 이름) 배열 (string[], 기본값 없음). chartCategory와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다. 예) ['sample_01', 'sample_02']"),
+    chartSampleData: z.array(z.record(z.any()))
+        .optional()
+        .describe("샘플 차트에 표시할 데이터 배열 (object[], 기본값 없음). chartData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        strokeDasharray: z.array(z.number()).optional()
+    }))
+        .optional()
+        .describe("샘플 차트의 사용자 정의 카테고리 스타일 (object[], 기본값 없음). chartCustomCategory와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트에 적용할 다국어 목록 (object[], 기본값 없음). chartLocaleProps와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCategoryLocaleMapping: z.array(z.object({
+        name: z.string(),
+        value: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트 카테고리 다국어 매핑 (object[], 기본값 없음). chartCategoryLocaleMapping과 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleData: z.array(z.object({
+        name: z.string(),
+        value: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트 데이터 다국어 적용 목록 (object[], 기본값 없음). chartLocaleData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartCategoryColorByVendor: z.array(z.object({
+        vendor: z.string().describe("벤더명: 'aws' | 'azure' | 'gcp' | 'oci' | 'ncloud' | 'tencent' | 'basic' | 'mix'"),
+        categories: z.array(z.string()).describe("해당 벤더 색상 팔레트를 적용할 카테고리 이름 배열")
+    }))
+        .optional()
+        .describe(`벤더별 색상 팔레트를 카테고리에 적용합니다 (object[], 기본값 없음). 각 항목의 vendor 팔레트에서 categories 개수만큼 색상을 순서대로 할당합니다. 지정 시 useOpsnowUs보다 우선합니다.
+  예시)
+  [
+    { "vendor": "aws", "categories": ["ec2_cost", "s3_cost"] },
+    { "vendor": "azure", "categories": ["vm_cost"] }
+  ]`),
+    useOpsnowUs: z.boolean()
+        .optional()
+        .describe("OpsNow US 기본(basic) 색상 팔레트 사용 여부 (boolean, 기본값 true). false면 mix 팔레트를 사용합니다. chartCategoryColorByVendor가 지정되면 그 설정이 우선합니다."),
+    chartNoRowsText: z.string()
+        .optional()
+        .describe("차트 데이터가 없을 때 표시할 텍스트 (string, 기본값 없음)")
 });
 // opsnow-common-bar-chart
 export const BarChartSchema = z.object({
@@ -898,7 +999,64 @@ export const BarChartSchema = z.object({
         .describe("언어 코드"),
     onChartClick: z.string()
         .optional()
-        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
+        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)'),
+    onTopNPopupDetailClick: z.string()
+        .optional()
+        .describe("TopN(others) 상세 팝업에서 'View Details' 버튼 클릭 시 호출되는 콜백 함수(stringified). chartProps.series.topNOthers 설정과 함께 사용합니다."),
+    // 샘플(스켈레톤) 차트 설정 — chartProps 없이 chartSample* 계열만 전달하면 실데이터 로딩 전 미리보기(스켈레톤) 차트가 렌더링됩니다.
+    chartSampleProps: z.object({})
+        .optional()
+        .describe("샘플(스켈레톤) 차트 속성 (object, 기본값 없음). chartProps와 동일한 구조의 JSON입니다. chartProps 없이 chartSampleProps만 전달하면 차트가 샘플(미리보기/스켈레톤) 모드로 렌더링됩니다."),
+    chartSampleCategory: z.array(z.string())
+        .optional()
+        .describe("샘플 차트의 카테고리(시리즈 이름) 배열 (string[], 기본값 없음). chartCategory와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다. 예) ['sample_01', 'sample_02']"),
+    chartSampleData: z.array(z.record(z.any()))
+        .optional()
+        .describe("샘플 차트에 표시할 데이터 배열 (object[], 기본값 없음). chartData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        strokeDasharray: z.array(z.number()).optional()
+    }))
+        .optional()
+        .describe("샘플 차트의 사용자 정의 카테고리 스타일 (object[], 기본값 없음). chartCustomCategory와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트에 적용할 다국어 목록 (object[], 기본값 없음). chartLocaleProps와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCategoryLocaleMapping: z.array(z.object({
+        name: z.string(),
+        value: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트 카테고리 다국어 매핑 (object[], 기본값 없음). chartCategoryLocaleMapping과 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleData: z.array(z.object({
+        name: z.string(),
+        value: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트 데이터 다국어 적용 목록 (object[], 기본값 없음). chartLocaleData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartCategoryColorByVendor: z.array(z.object({
+        vendor: z.string().describe("벤더명: 'aws' | 'azure' | 'gcp' | 'oci' | 'ncloud' | 'tencent' | 'basic' | 'mix'"),
+        categories: z.array(z.string()).describe("해당 벤더 색상 팔레트를 적용할 카테고리 이름 배열")
+    }))
+        .optional()
+        .describe(`벤더별 색상 팔레트를 카테고리에 적용합니다 (object[], 기본값 없음). 각 항목의 vendor 팔레트에서 categories 개수만큼 색상을 순서대로 할당합니다. 지정 시 useOpsnowUs보다 우선합니다.
+  예시)
+  [
+    { "vendor": "aws", "categories": ["ec2_cost", "s3_cost"] },
+    { "vendor": "azure", "categories": ["vm_cost"] }
+  ]`),
+    useOpsnowUs: z.boolean()
+        .optional()
+        .describe("OpsNow US 기본(basic) 색상 팔레트 사용 여부 (boolean, 기본값 true). false면 mix 팔레트를 사용합니다. chartCategoryColorByVendor가 지정되면 그 설정이 우선합니다."),
+    chartNoRowsText: z.string()
+        .optional()
+        .describe("차트 데이터가 없을 때 표시할 텍스트 (string, 기본값 없음)")
 });
 // opsnow-common-line-chart
 export const LineChartSchema = z.object({
@@ -1156,10 +1314,64 @@ export const LineChartSchema = z.object({
         .describe('툴팁에서 사용하는 사용자 정의 함수(stringified)'),
     langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar'])
         .optional()
-        .describe("언어 코드"),
+        .describe("언어 코드 ('ar' 지정 시 RTL 레이아웃 적용)"),
     onChartClick: z.string()
         .optional()
-        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)')
+        .describe('차트 클릭 시 호출되는 콜백 함수(stringified)'),
+    onTopNPopupDetailClick: z.string()
+        .optional()
+        .describe("TopN(others) 상세 팝업에서 'View Details' 버튼 클릭 시 호출되는 콜백 함수(stringified). chartProps.series.topNOthers 설정과 함께 사용합니다."),
+    // 샘플(스켈레톤) 차트 설정 — chartProps 없이 chartSample* 계열만 전달하면 실데이터 로딩 전 미리보기(스켈레톤) 차트가 렌더링됩니다.
+    chartSampleProps: z.object({})
+        .optional()
+        .describe("샘플(스켈레톤) 차트 속성 (object, 기본값 없음). chartProps와 동일한 구조의 JSON입니다. chartProps 없이 chartSampleProps만 전달하면 차트가 샘플(미리보기/스켈레톤) 모드로 렌더링됩니다."),
+    chartSampleCategory: z.array(z.string())
+        .optional()
+        .describe("샘플 차트의 카테고리(시리즈 이름) 배열 (string[], 기본값 없음). chartCategory와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다. 예) ['sample_01', 'sample_02']"),
+    chartSampleData: z.array(z.record(z.any()))
+        .optional()
+        .describe("샘플 차트에 표시할 데이터 배열 (object[], 기본값 없음). chartData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        strokeDasharray: z.array(z.number()).optional()
+    }))
+        .optional()
+        .describe("샘플 차트의 사용자 정의 카테고리 스타일 (object[], 기본값 없음). chartCustomCategory와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트에 적용할 다국어 목록 (object[], 기본값 없음). chartLocaleProps와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCategoryLocaleMapping: z.array(z.object({
+        name: z.string(),
+        value: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트 카테고리 다국어 매핑 (object[], 기본값 없음). chartCategoryLocaleMapping과 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleData: z.array(z.object({
+        name: z.string(),
+        value: z.string(),
+        locale: z.string()
+    }))
+        .optional()
+        .describe("샘플 차트 데이터 다국어 적용 목록 (object[], 기본값 없음). chartLocaleData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartCategoryColorByVendor: z.array(z.object({
+        vendor: z.string().describe("벤더명: 'aws' | 'azure' | 'gcp' | 'oci' | 'ncloud' | 'tencent' | 'basic' | 'mix'"),
+        categories: z.array(z.string()).describe("해당 벤더 색상 팔레트를 적용할 카테고리 이름 배열")
+    }))
+        .optional()
+        .describe(`벤더별 색상 팔레트를 카테고리에 적용합니다 (object[], 기본값 없음). 각 항목의 vendor 팔레트에서 categories 개수만큼 색상을 순서대로 할당합니다. 지정 시 useOpsnowUs보다 우선합니다.
+  예시)
+  [
+    { "vendor": "aws", "categories": ["ec2_cost", "s3_cost"] },
+    { "vendor": "azure", "categories": ["vm_cost"] }
+  ]`),
+    useOpsnowUs: z.boolean()
+        .optional()
+        .describe("OpsNow US 기본(basic) 색상 팔레트 사용 여부 (boolean, 기본값 true). false면 mix 팔레트를 사용합니다. chartCategoryColorByVendor가 지정되면 그 설정이 우선합니다.")
 });
 // opsnow-common-pie-chart
 export const PieChartSchema = z.object({
@@ -1265,9 +1477,36 @@ export const PieChartSchema = z.object({
         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)')
+    onLegendClick: z.string().optional().describe('범례 클릭 시 호출되는 콜백 함수(stringified)'),
+    // 샘플(스켈레톤) 차트 설정 — chartProps 없이 chartSample* 계열만 전달하면 실데이터 로딩 전 미리보기(스켈레톤) 차트가 렌더링됩니다.
+    chartSampleProps: z.object({}).optional().describe("샘플(스켈레톤) 차트 속성 (object, 기본값 없음). chartProps와 동일한 구조의 JSON입니다. chartProps 없이 chartSampleProps만 전달하면 차트가 샘플(미리보기/스켈레톤) 모드로 렌더링됩니다."),
+    chartSampleData: z.array(z.record(z.any())).optional().describe("샘플 차트에 표시할 데이터 배열 (object[], 기본값 없음). chartData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleCustomCategory: z.array(z.object({
+        name: z.string(),
+        color: z.string().optional(),
+        pattern: z.string().optional(),
+        tooltipText: z.string().optional()
+    })).optional().describe("샘플 차트의 사용자 정의 카테고리 스타일 (object[], 기본값 없음). chartCustomCategory와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    })).optional().describe("샘플 차트에 적용할 다국어 목록 (object[], 기본값 없음). chartLocaleProps와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleData: z.array(z.object({
+        name: z.string(),
+        value: z.string(),
+        locale: z.string()
+    })).optional().describe("샘플 차트 데이터 다국어 적용 목록 (object[], 기본값 없음). chartLocaleData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartCategoryColorByVendor: z.array(z.object({
+        vendor: z.string().describe("벤더명: 'aws' | 'azure' | 'gcp' | 'oci' | 'ncloud' | 'tencent' | 'basic' | 'mix'"),
+        categories: z.array(z.string()).describe("해당 벤더 색상 팔레트를 적용할 카테고리 이름 배열")
+    })).optional().describe(`벤더별 색상 팔레트를 카테고리에 적용합니다 (object[], 기본값 없음). 각 항목의 vendor 팔레트에서 categories 개수만큼 색상을 순서대로 할당합니다. 지정 시 useOpsnowUs보다 우선합니다.
+  예시)
+  [
+    { "vendor": "aws", "categories": ["ec2_cost", "s3_cost"] },
+    { "vendor": "azure", "categories": ["vm_cost"] }
+  ]`),
+    useOpsnowUs: z.boolean().optional().describe("OpsNow US 기본(basic) 색상 팔레트 사용 여부 (boolean, 기본값 true). false면 mix 팔레트를 사용합니다. chartCategoryColorByVendor가 지정되면 그 설정이 우선합니다.")
 });
 // opsnow-common-gauge-chart
 export const GaugeChartSchema = z.object({
@@ -1337,6 +1576,28 @@ export const GaugeChartSchema = z.object({
   }
   `),
     chartValue: z.number().describe("차트 값"),
+    // 샘플(스켈레톤) 차트 설정 — chartProps 없이 chartSample* 계열만 전달하면 실데이터 로딩 전 미리보기(스켈레톤) 차트가 렌더링됩니다.
+    chartSampleProps: z.object({}).optional().describe("샘플(스켈레톤) 차트 속성 (object, 기본값 없음). chartProps와 동일한 구조의 JSON입니다. chartProps 없이 chartSampleProps만 전달하면 차트가 샘플(미리보기/스켈레톤) 모드로 렌더링됩니다."),
+    chartSampleValue: z.number().optional().describe("샘플(스켈레톤) 차트에 표시할 게이지 값 (number, 기본값 없음). chartValue와 동일한 의미이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    })).optional().describe(`차트에 적용할 다국어 목록입니다 (object[], 기본값 없음). {l.xxx} 형태로 chartProps에서 참조합니다.
+  예시)
+  [
+    {
+      'name': 'l.cost.test',
+      'locale': t('cost.test')
+    }
+  ]`),
+    chartLocaleMessage: z.array(z.object({
+        name: z.string().describe("차트에서 사용하는 필드의 값 전체 또는 일부"),
+        locale: z.string().describe("치환할 다국어 텍스트")
+    })).optional().describe(`차트 특정 메시지(라벨 등)에 다국어를 적용합니다 (object[], 기본값 없음).
+  예시)
+  [
+    { name: '사용량', locale: $t('usage') }
+  ]`),
 });
 // opsnow-common-heatmap-chart
 export const HeatmapChartSchema = z.object({
@@ -1498,11 +1759,21 @@ export const HeatmapChartSchema = z.object({
     { "name": "day_0", "locale": "월요일 4/14" },
     { "name": "day_1", "locale": "화요일 4/15" }
   ]`),
-    chartTooltipDetailText: z.string().optional().describe("툴팁 하단에 표시할 상세 안내 텍스트"),
-    chartNoRowsText: z.string().optional().describe("데이터 없을 때 표시할 텍스트"),
     langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar']).optional().describe("언어 코드"),
     isDarkMode: z.boolean().optional().describe("다크 모드 활성화 여부"),
-    onChartClick: z.string().optional().describe('셀 클릭 시 호출되는 콜백 함수(stringified). 클릭 시 { xField, yField, valueField, from: "heatmap" } 객체를 전달합니다.')
+    onChartClick: z.string().optional().describe('셀 클릭 시 호출되는 콜백 함수(stringified). 클릭 시 { xField, yField, valueField, from: "heatmap" } 객체를 전달합니다.'),
+    // 샘플(스켈레톤) 차트 설정 — chartProps 없이 chartSample* 계열만 전달하면 실데이터 로딩 전 미리보기(스켈레톤) 차트가 렌더링됩니다.
+    chartSampleProps: z.object({}).optional().describe("샘플(스켈레톤) 차트 속성 (object, 기본값 없음). chartProps와 동일한 구조의 JSON입니다. chartProps 없이 chartSampleProps만 전달하면 차트가 샘플(미리보기/스켈레톤) 모드로 렌더링됩니다."),
+    chartSampleData: z.array(z.record(z.any())).optional().describe("샘플 차트에 표시할 데이터 배열 (object[], 기본값 없음). chartData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    })).optional().describe("샘플 차트에 적용할 다국어 플레이스홀더 목록 (object[], 기본값 없음). chartLocaleProps와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleData: z.array(z.object({
+        name: z.string(),
+        value: z.string(),
+        locale: z.string()
+    })).optional().describe("샘플 차트 데이터 다국어 적용 목록 (object[], 기본값 없음). chartLocaleData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다.")
 });
 // opsnow-common-bubble-chart
 export const BubbleChartSchema = z.object({
@@ -1590,7 +1861,20 @@ export const BubbleChartSchema = z.object({
   ]`),
     langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar']).optional().describe("언어 코드"),
     onChartClick: z.string().optional().describe(`버블 클릭 시 호출되는 콜백 함수(stringified). 클릭한 데이터 항목 객체를 인자로 전달합니다.
-  예시) "(data) => { console.log(data) }"`)
+  예시) "(data) => { console.log(data) }"`),
+    // 샘플(스켈레톤) 차트 설정 — chartProps 없이 chartSample* 계열만 전달하면 실데이터 로딩 전 미리보기(스켈레톤) 차트가 렌더링됩니다.
+    chartSampleProps: z.object({}).optional().describe("샘플(스켈레톤) 차트 속성 (object, 기본값 없음). chartProps와 동일한 구조의 JSON입니다. chartProps 없이 chartSampleProps만 전달하면 차트가 샘플(미리보기/스켈레톤) 모드로 렌더링됩니다."),
+    chartSampleData: z.array(z.record(z.any())).optional().describe("샘플 차트에 표시할 데이터 배열 (object[], 기본값 없음). chartData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    })).optional().describe("샘플 차트에 적용할 다국어 플레이스홀더 목록 (object[], 기본값 없음). chartLocaleProps와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    chartSampleLocaleData: z.array(z.object({
+        name: z.string(),
+        value: z.string(),
+        locale: z.string()
+    })).optional().describe("샘플 차트 데이터 다국어 적용 목록 (object[], 기본값 없음). chartLocaleData와 동일한 구조이며 샘플(스켈레톤) 모드에서 사용됩니다."),
+    isDarkMode: z.boolean().optional().describe("다크 모드 활성화 여부 (boolean, 기본값 없음 — 미지정 시 MUI 테마의 palette.mode를 따릅니다)")
 });
 // Chart 컴포넌트 함수 - 배열 반환
 export function createChartComponent() {
@@ -1615,6 +1899,14 @@ export function createChartComponent() {
                     props.push(`chartProps={${args.chartProps}}`);
                 if (args.chartValue)
                     props.push(`chartValue={${args.chartValue}}`);
+                if (args.chartSampleProps)
+                    props.push(`chartSampleProps={${args.chartSampleProps}}`);
+                if (args.chartSampleValue !== undefined)
+                    props.push(`chartSampleValue={${args.chartSampleValue}}`);
+                if (args.chartLocaleProps)
+                    props.push(`chartLocaleProps={${args.chartLocaleProps}}`);
+                if (args.chartLocaleMessage)
+                    props.push(`chartLocaleMessage={${args.chartLocaleMessage}}`);
                 const code = `<OpsnowCommonGaugeChart ${props.join(' ')} />`;
                 return {
                     content: [
@@ -1655,6 +1947,22 @@ export function createChartComponent() {
                     props.push(`chartLocaleData={${args.chartLocaleData}}`);
                 if (args.chartCustomCategory)
                     props.push(`chartCustomCategory={${args.chartCustomCategory}}`);
+                if (args.chartSampleProps)
+                    props.push(`chartSampleProps={${args.chartSampleProps}}`);
+                if (args.chartSampleData)
+                    props.push(`chartSampleData={${args.chartSampleData}}`);
+                if (args.chartSampleCustomCategory)
+                    props.push(`chartSampleCustomCategory={${args.chartSampleCustomCategory}}`);
+                if (args.chartSampleLocaleProps)
+                    props.push(`chartSampleLocaleProps={${args.chartSampleLocaleProps}}`);
+                if (args.chartSampleLocaleData)
+                    props.push(`chartSampleLocaleData={${args.chartSampleLocaleData}}`);
+                if (args.chartCategoryColorByVendor)
+                    props.push(`chartCategoryColorByVendor={${args.chartCategoryColorByVendor}}`);
+                if (args.useOpsnowUs !== undefined)
+                    props.push(`useOpsnowUs={${args.useOpsnowUs}}`);
+                if (args.chartUserDefinedFunc)
+                    props.push(`chartUserDefinedFunc={${args.chartUserDefinedFunc}}`);
                 const code = `<OpsnowCommonPieChart ${props.join(' ')} />`;
                 return {
                     content: [
@@ -1698,8 +2006,6 @@ export function createChartComponent() {
                     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)
@@ -1710,6 +2016,30 @@ export function createChartComponent() {
                     props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
                 if (args.chartFoldLegend)
                     props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
+                if (args.chartSampleProps)
+                    props.push(`chartSampleProps={${args.chartSampleProps}}`);
+                if (args.chartSampleCategory)
+                    props.push(`chartSampleCategory={${args.chartSampleCategory}}`);
+                if (args.chartSampleData)
+                    props.push(`chartSampleData={${args.chartSampleData}}`);
+                if (args.chartSampleCustomCategory)
+                    props.push(`chartSampleCustomCategory={${args.chartSampleCustomCategory}}`);
+                if (args.chartSampleLocaleProps)
+                    props.push(`chartSampleLocaleProps={${args.chartSampleLocaleProps}}`);
+                if (args.chartSampleCategoryLocaleMapping)
+                    props.push(`chartSampleCategoryLocaleMapping={${args.chartSampleCategoryLocaleMapping}}`);
+                if (args.chartSampleLocaleData)
+                    props.push(`chartSampleLocaleData={${args.chartSampleLocaleData}}`);
+                if (args.chartCategoryColorByVendor)
+                    props.push(`chartCategoryColorByVendor={${args.chartCategoryColorByVendor}}`);
+                if (args.useOpsnowUs !== undefined)
+                    props.push(`useOpsnowUs={${args.useOpsnowUs}}`);
+                if (args.onTopNPopupDetailClick)
+                    props.push(`onTopNPopupDetailClick={${args.onTopNPopupDetailClick}}`);
+                if (args.chartUserDefinedFunc)
+                    props.push(`chartUserDefinedFunc={${args.chartUserDefinedFunc}}`);
+                if (args.langCd)
+                    props.push(`langCd="${args.langCd}"`);
                 const code = `<OpsnowCommonLineChart ${props.join(' ')} />`;
                 return {
                     content: [
@@ -1770,6 +2100,28 @@ export function createChartComponent() {
                     props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
                 if (args.chartFoldLegend)
                     props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
+                if (args.chartSampleProps)
+                    props.push(`chartSampleProps={${args.chartSampleProps}}`);
+                if (args.chartSampleCategory)
+                    props.push(`chartSampleCategory={${args.chartSampleCategory}}`);
+                if (args.chartSampleData)
+                    props.push(`chartSampleData={${args.chartSampleData}}`);
+                if (args.chartSampleCustomCategory)
+                    props.push(`chartSampleCustomCategory={${args.chartSampleCustomCategory}}`);
+                if (args.chartSampleLocaleProps)
+                    props.push(`chartSampleLocaleProps={${args.chartSampleLocaleProps}}`);
+                if (args.chartSampleCategoryLocaleMapping)
+                    props.push(`chartSampleCategoryLocaleMapping={${args.chartSampleCategoryLocaleMapping}}`);
+                if (args.chartSampleLocaleData)
+                    props.push(`chartSampleLocaleData={${args.chartSampleLocaleData}}`);
+                if (args.chartCategoryColorByVendor)
+                    props.push(`chartCategoryColorByVendor={${args.chartCategoryColorByVendor}}`);
+                if (args.useOpsnowUs !== undefined)
+                    props.push(`useOpsnowUs={${args.useOpsnowUs}}`);
+                if (args.chartNoRowsText)
+                    props.push(`chartNoRowsText="${args.chartNoRowsText}"`);
+                if (args.onTopNPopupDetailClick)
+                    props.push(`onTopNPopupDetailClick={${args.onTopNPopupDetailClick}}`);
                 const code = `<OpsnowCommonBarChart ${props.join(' ')} />`;
                 return {
                     content: [
@@ -1827,6 +2179,32 @@ export function createChartComponent() {
                     props.push(`chartUnfoldLegend="${args.chartUnfoldLegend}"`);
                 if (args.chartFoldLegend)
                     props.push(`chartFoldLegend="${args.chartFoldLegend}"`);
+                if (args.onSeriesPointerOver)
+                    props.push(`onSeriesPointerOver={${args.onSeriesPointerOver}}`);
+                if (args.onSeriesPointerOut)
+                    props.push(`onSeriesPointerOut={${args.onSeriesPointerOut}}`);
+                if (args.chartSampleProps)
+                    props.push(`chartSampleProps={${args.chartSampleProps}}`);
+                if (args.chartSampleCategory)
+                    props.push(`chartSampleCategory={${args.chartSampleCategory}}`);
+                if (args.chartSampleData)
+                    props.push(`chartSampleData={${args.chartSampleData}}`);
+                if (args.chartSampleCustomCategory)
+                    props.push(`chartSampleCustomCategory={${args.chartSampleCustomCategory}}`);
+                if (args.chartSampleLocaleProps)
+                    props.push(`chartSampleLocaleProps={${args.chartSampleLocaleProps}}`);
+                if (args.chartSampleCategoryLocaleMapping)
+                    props.push(`chartSampleCategoryLocaleMapping={${args.chartSampleCategoryLocaleMapping}}`);
+                if (args.chartSampleLocaleData)
+                    props.push(`chartSampleLocaleData={${args.chartSampleLocaleData}}`);
+                if (args.chartCategoryColorByVendor)
+                    props.push(`chartCategoryColorByVendor={${args.chartCategoryColorByVendor}}`);
+                if (args.useOpsnowUs !== undefined)
+                    props.push(`useOpsnowUs={${args.useOpsnowUs}}`);
+                if (args.chartNoRowsText)
+                    props.push(`chartNoRowsText="${args.chartNoRowsText}"`);
+                if (args.onTopNPopupDetailClick)
+                    props.push(`onTopNPopupDetailClick={${args.onTopNPopupDetailClick}}`);
                 const code = `<OpsnowCommonStackChart ${props.join(' ')} />`;
                 return {
                     content: [
@@ -1883,6 +2261,30 @@ export function createChartComponent() {
                     props.push(`onChartClick={${args.onChartClick}}`);
                 if (args.onSeriesPointerOver)
                     props.push(`onSeriesPointerOver={${args.onSeriesPointerOver}}`);
+                if (args.onSeriesPointerOut)
+                    props.push(`onSeriesPointerOut={${args.onSeriesPointerOut}}`);
+                if (args.chartSampleProps)
+                    props.push(`chartSampleProps={${args.chartSampleProps}}`);
+                if (args.chartSampleCategory)
+                    props.push(`chartSampleCategory={${args.chartSampleCategory}}`);
+                if (args.chartSampleData)
+                    props.push(`chartSampleData={${args.chartSampleData}}`);
+                if (args.chartSampleCustomCategory)
+                    props.push(`chartSampleCustomCategory={${args.chartSampleCustomCategory}}`);
+                if (args.chartSampleLocaleProps)
+                    props.push(`chartSampleLocaleProps={${args.chartSampleLocaleProps}}`);
+                if (args.chartSampleCategoryLocaleMapping)
+                    props.push(`chartSampleCategoryLocaleMapping={${args.chartSampleCategoryLocaleMapping}}`);
+                if (args.chartSampleLocaleData)
+                    props.push(`chartSampleLocaleData={${args.chartSampleLocaleData}}`);
+                if (args.chartCategoryColorByVendor)
+                    props.push(`chartCategoryColorByVendor={${args.chartCategoryColorByVendor}}`);
+                if (args.useOpsnowUs !== undefined)
+                    props.push(`useOpsnowUs={${args.useOpsnowUs}}`);
+                if (args.chartNoRowsText)
+                    props.push(`chartNoRowsText="${args.chartNoRowsText}"`);
+                if (args.chartTooltipDetailText)
+                    props.push(`chartTooltipDetailText="${args.chartTooltipDetailText}"`);
                 const code = `<OpsnowCommonXyMultiChart ${props.join(' ')} />`;
                 return {
                     content: [
@@ -1926,16 +2328,20 @@ export function createChartComponent() {
                     props.push(`chartLocaleData={${args.chartLocaleData}}`);
                 if (args.chartLocaleMessage)
                     props.push(`chartLocaleMessage={${args.chartLocaleMessage}}`);
-                if (args.chartTooltipDetailText)
-                    props.push(`chartTooltipDetailText="${args.chartTooltipDetailText}"`);
-                if (args.chartNoRowsText)
-                    props.push(`chartNoRowsText="${args.chartNoRowsText}"`);
                 if (args.langCd)
                     props.push(`langCd="${args.langCd}"`);
                 if (args.isDarkMode !== undefined)
                     props.push(`isDarkMode={${args.isDarkMode}}`);
                 if (args.onChartClick)
                     props.push(`onChartClick={${args.onChartClick}}`);
+                if (args.chartSampleProps)
+                    props.push(`chartSampleProps={${args.chartSampleProps}}`);
+                if (args.chartSampleData)
+                    props.push(`chartSampleData={${args.chartSampleData}}`);
+                if (args.chartSampleLocaleProps)
+                    props.push(`chartSampleLocaleProps={${args.chartSampleLocaleProps}}`);
+                if (args.chartSampleLocaleData)
+                    props.push(`chartSampleLocaleData={${args.chartSampleLocaleData}}`);
                 const code = `<OpsnowCommonHeatmapChart ${props.join(' ')} />`;
                 return {
                     content: [
@@ -1983,6 +2389,16 @@ export function createChartComponent() {
                     props.push(`langCd="${args.langCd}"`);
                 if (args.onChartClick)
                     props.push(`onChartClick={${args.onChartClick}}`);
+                if (args.chartSampleProps)
+                    props.push(`chartSampleProps={${args.chartSampleProps}}`);
+                if (args.chartSampleData)
+                    props.push(`chartSampleData={${args.chartSampleData}}`);
+                if (args.chartSampleLocaleProps)
+                    props.push(`chartSampleLocaleProps={${args.chartSampleLocaleProps}}`);
+                if (args.chartSampleLocaleData)
+                    props.push(`chartSampleLocaleData={${args.chartSampleLocaleData}}`);
+                if (args.isDarkMode !== undefined)
+                    props.push(`isDarkMode={${args.isDarkMode}}`);
                 const code = `<OpsnowCommonBubbleChart ${props.join(' ')} />`;
                 return {
                     content: [

package/build/components/opsnow-common-coach-mark.js

@@ -6,8 +6,10 @@ export const CoachMarkSchema = z.object({
     content: z.string().describe("가이드 말풍선 본문 - 문자열 또는 JSX 사용 가능 (여러 줄/굵은 글씨/링크 등 표현 시 JSX)"),
     isJsxContent: z.boolean().optional().describe("content를 JSX로 렌더링할지 여부 - true면 content를 JSX 표현식으로 출력"),
     placement: z.enum(["top", "bottom", "left", "right"]).optional().describe("말풍선 표시 위치 (top/bottom/left/right) - 공간이 부족하면 MUI가 자동으로 반대쪽으로 flip"),
-    onClose: z.string().optional().describe("말풍선이 닫힐 때 실행할 콜백 함수명"),
+    defaultOpen: z.boolean().optional().describe("닫힌 기록이 없을 때 첫 노출 여부 (기본 true) - false면 처음부터 표시되지 않음"),
+    onClose: z.string().optional().describe("말풍선이 닫힐 때(X 또는 close 액션) 실행할 콜백 함수명"),
     actionLabel: z.string().optional().describe("하단 우측 액션 버튼 라벨 - 지정 시 actions={(close) => <Button onClick={close}>라벨</Button>} 형태로 렌더링 (close는 '닫기+영구저장' 핸들러)"),
+    actions: z.string().optional().describe("말풍선 하단 우측에 표시할 액션 영역 JSX 코드 문자열 - ReactNode 또는 (close) => ReactNode 함수 표현식을 그대로 출력. actionLabel과 동시 지정 시 actions가 우선"),
 });
 // CoachMark 컴포넌트 함수 - 배열 반환
 export function createCoachMarkComponent() {
@@ -36,9 +38,14 @@ export function createCoachMarkComponent() {
                 }
                 if (args.placement)
                     props.push(`placement="${args.placement}"`);
+                if (args.defaultOpen !== undefined)
+                    props.push(`defaultOpen={${args.defaultOpen}}`);
                 if (args.onClose)
                     props.push(`onClose={${args.onClose}}`);
-                if (args.actionLabel) {
+                if (args.actions) {
+                    props.push(`actions={${args.actions}}`);
+                }
+                else if (args.actionLabel) {
                     props.push(`actions={(close) => (<Button size="small" variant="contained" onClick={close}>${args.actionLabel}</Button>)}`);
                 }
                 const code = `

package/build/components/opsnow-common-data-status.js

@@ -2,10 +2,6 @@ import { z } from "zod";
 import { IconNamesMap, generateIconDescription } from "./data/icon-names.js";
 // DataStatus 컴포넌트 관련 스키마 정의
 export const DataStatusSchema = z.object({
-    headline: z
-        .string()
-        .optional()
-        .describe("데이터 상태 아이콘 위에 크게 보이는 헤드라인 메시지"),
     type: z
         .enum(["loading", "noData", "noSearchResults", "withAction", "error"])
         .describe("데이터 상태 및 화면에 노출 되어야하는 데이터 상태 타입"),
@@ -13,7 +9,6 @@ export const DataStatusSchema = z.object({
         .string()
         .optional()
         .describe("데이터 상태 아이콘 아래에서 크게 보이는 제목 메시지"),
-    useMuiIcon: z.boolean().default(false).describe("MUI 아이콘 사용 여부"),
     description: z
         .string()
         .optional()