@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.10 → 1.0.12

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

@@ -502,7 +502,7 @@ export const BarChartExamples = [
             width: 'p50',
             hover: {
               enabled: true,
-              grouped: true
+              : true
             }
           },
           tooltip: {
@@ -2109,6 +2109,81 @@ export const LineChartExamples = [
         chartData={chartData}
       />`
     },
+    {
+        title: '라인 차트 - Bullet Label (데이터 포인트에 값 표시)',
+        description: '라인 차트의 각 데이터 포인트 위에 값을 라벨로 표시하는 bullet label 예제입니다. format, prefix, suffix를 사용하여 값 형식을 지정할 수 있습니다.',
+        code_props_usage: `
+      const chartId = 'line-chart-bullet-label-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        chart: {
+          paddingTop: 30,
+          paddingBottom: 30
+        },
+        xAxis: {
+          type: 'date',
+          dateFormats: [
+            { type: 'day', dateFormat: 'MM-dd' },
+            { type: 'month', dateFormat: 'yy-MM' }
+          ],
+          baseInterval: { timeUnit: 'month', count: 1 },
+          gridHidden: true
+        },
+        yAxis: {
+          type: 'value',
+          extraMax: 0.15,
+          min: 0,
+          numberFormat: '$#,###'
+        },
+        series: {
+          valueXField: 'date',
+          dataProcessor: {
+            dateFields: ['date'],
+            dateFormat: 'yyyy-MM-dd'
+          },
+          bullet: {
+            type: 'label',        // 'label' 타입으로 설정
+            locationX: 0.5,       // X축 위치 (0~1, 0.5 = 중앙)
+            locationY: 1,         // Y축 위치 (0~1, 1 = 상단)
+            label: {
+              dy: -15,            // Y축 오프셋 (음수: 위로 이동)
+              format: '#,###',    // 숫자 포맷
+              prefix: '$',        // 접두사
+              fontSize: 9
+            }
+          }
+        },
+        legend: { useExtension: false }
+      })
+      const [chartCategory, setChartCategory] = useState(['cost1', 'cost2'])
+      const [chartData, setChartData] = useState([
+        { date: '2024-10-01', cost1: 70000, cost2: 8000 },
+        { date: '2024-11-01', cost1: 85000, cost2: 10000 },
+        { date: '2024-12-01', cost1: 170000, cost2: 15000 },
+        { date: '2025-01-01', cost1: 165000, cost2: 14000 },
+        { date: '2025-02-01', cost1: 95000, cost2: 10000 },
+        { date: '2025-03-01', cost1: 115000, cost2: 12000 },
+        { date: '2025-04-01', cost1: 140000, cost2: 13000 },
+        { date: '2025-05-01', cost1: 270000, cost2: 18000 },
+        { date: '2025-06-01', cost1: 135000, cost2: 13500 },
+        { date: '2025-07-01', cost1: 140000, cost2: 14000 },
+        { date: '2025-08-01', cost1: 135000, cost2: 13800 },
+        { date: '2025-09-01', cost1: 159857, cost2: 14334 }
+      ])
+      const chartCategoryLocaleMapping = [
+        { name: 'cost1', value: '계정 1 비용' },
+        { name: 'cost2', value: '계정 2 비용' }
+      ]
+    `,
+        code: `<OpsnowCommonLineChart
+        chartId={chartId}
+        chartRef={chartRef}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+        chartCategoryLocaleMapping={chartCategoryLocaleMapping}
+      />`
+    },
 ];
 export const StackChartExamples = [
     {
@@ -5980,4 +6055,331 @@ export const XyMultiChartExamples = [
         chartUserDefinedFunc={udf()}
       />`
     },
+    {
+        title: 'XY 멀티 차트 - Bullet Label (Line + Stack)',
+        description: 'XY 멀티 차트에서 Line과 Stack 시리즈 모두에 bullet label을 적용하여 데이터 포인트에 값을 표시하는 예제입니다.',
+        code_props_usage: `
+      const chartId = 'xy-multi-bullet-label-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        chart: {
+          paddingTop: 30
+        },
+        xAxis: {
+          type: 'date',
+          dateFormats: [
+            { type: 'day', dateFormat: 'MM-dd' },
+            { type: 'month', dateFormat: 'yy-MM' }
+          ],
+          baseInterval: { timeUnit: 'month', count: 1 },
+          gridHidden: true
+        },
+        yAxis: {
+          type: 'value',
+          extraMax: 0.15,
+          min: 0,
+          numberFormat: '$#,###'
+        },
+        series: {
+          valueXField: 'date',
+          dataProcessor: {
+            dateFields: ['date'],
+            dateFormat: 'yyyy-MM-dd'
+          },
+          seriesTypes: [
+            {
+              type: 'line',
+              order: 'front',
+              categoryGroupName: 'cost_line',
+              bullet: {
+                type: 'label',        // 라벨 타입 bullet
+                locationX: 0.5,
+                locationY: 1,
+                label: {
+                  dy: -10,            // 위로 이동
+                  format: '#,###',    // 숫자 포맷
+                  prefix: '$',        // 달러 기호 접두사
+                  fontSize: 9
+                }
+              }
+            },
+            {
+              type: 'stack',
+              categoryGroupName: 'cost_stack',
+              bullet: {
+                type: 'label',
+                locationX: 0.5,
+                locationY: 1,
+                label: {
+                  dy: -10,
+                  format: '#,###',
+                  prefix: '$',
+                  fontSize: 9
+                }
+              }
+            }
+          ],
+          tooltip: {
+            type: 'CG',
+            header: { name: '{category}' },
+            body: {
+              name: '{name}',
+              value: '\${valueY.formatNumber("#,###")}',
+              useMarker: true
+            }
+          }
+        },
+        legend: { useExtension: false }
+      })
+      const [chartData, setChartData] = useState([
+        { date: '2024-10-01', totalCost: 79580, cloudCost: 50000, onpremCost: 29580 },
+        { date: '2024-11-01', totalCost: 95812, cloudCost: 60000, onpremCost: 35812 },
+        { date: '2024-12-01', totalCost: 182965, cloudCost: 120000, onpremCost: 62965 },
+        { date: '2025-01-01', totalCost: 178695, cloudCost: 115000, onpremCost: 63695 },
+        { date: '2025-02-01', totalCost: 103273, cloudCost: 70000, onpremCost: 33273 },
+        { date: '2025-03-01', totalCost: 122976, cloudCost: 82000, onpremCost: 40976 },
+        { date: '2025-04-01', totalCost: 151876, cloudCost: 100000, onpremCost: 51876 },
+        { date: '2025-05-01', totalCost: 288608, cloudCost: 190000, onpremCost: 98608 },
+        { date: '2025-06-01', totalCost: 146040, cloudCost: 95000, onpremCost: 51040 },
+        { date: '2025-07-01', totalCost: 151794, cloudCost: 100000, onpremCost: 51794 },
+        { date: '2025-08-01', totalCost: 147177, cloudCost: 97000, onpremCost: 50177 },
+        { date: '2025-09-01', totalCost: 196047, cloudCost: 130000, onpremCost: 66047 }
+      ])
+      const [chartCategory, setChartCategory] = useState([
+        { name: 'cost_line', categories: ['totalCost'] },
+        { name: 'cost_stack', categories: ['cloudCost', 'onpremCost'] }
+      ])
+      const chartCategoryLocaleMapping = [
+        { name: 'totalCost', value: '총 비용' },
+        { name: 'cloudCost', value: '클라우드 비용' },
+        { name: 'onpremCost', value: '온프레미스 비용' }
+      ]
+    `,
+        code: `<OpsnowCommonXyMultiChart
+        chartId={chartId}
+        chartRef={chartRef}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+        chartCategoryLocaleMapping={chartCategoryLocaleMapping}
+      />`
+    },
+    {
+        title: 'XY 멀티 차트 - Bullet Label (Dual Axis: Bar + Line)',
+        description: 'Dual Axis(Y축 2개) 차트에서 Bar와 Line 시리즈에 각각 다른 bullet label을 적용하는 예제입니다. 비용(Bar)에는 달러 기호, 증감률(Line)에는 % 기호를 사용합니다.',
+        code_props_usage: `
+      const chartId = 'xy-multi-dual-axis-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        chart: {
+          paddingTop: 30,
+          paddingRight: 50
+        },
+        xAxis: {
+          type: 'date',
+          dateFormats: [
+            { type: 'day', dateFormat: 'MM-dd' },
+            { type: 'month', dateFormat: 'MMM\\nyyyy' }
+          ],
+          baseInterval: { timeUnit: 'month', count: 1 },
+          gridHidden: true
+        },
+        yAxis: {
+          type: 'value',
+          numberFormat: "'$'#,###",
+          extraMax: 0.15,
+          min: 0
+        },
+        yAxis2: {
+          type: 'value',
+          numberFormat: "#'%'",
+          opposite: true,
+          gridHidden: true
+        },
+        series: {
+          valueXField: 'date',
+          dataProcessor: {
+            dateFields: ['date'],
+            dateFormat: 'yyyy-MM-dd'
+          },
+          seriesTypes: [
+            {
+              type: 'bar',
+              categoryGroupName: 'bar_group',
+              bullet: {
+                type: 'label',
+                locationX: 0.5,
+                locationY: 1,
+                label: {
+                  dy: -5,
+                  format: '#,###',
+                  prefix: '$',        // 비용에 달러 기호
+                  fontSize: 9
+                }
+              }
+            },
+            {
+              type: 'line',
+              order: 'front',
+              categoryGroupName: 'line_group',
+              yAxis: 'yAxis2',         // 두 번째 Y축 사용
+              bullet: {
+                type: 'label',
+                locationX: 0.5,
+                locationY: 1,
+                label: {
+                  dy: -10,
+                  format: '#.#',
+                  suffix: '%',        // 증감률에 % 기호
+                  fontSize: 9
+                }
+              }
+            }
+          ],
+          tooltip: {
+            type: 'CG',
+            header: { name: '{valueX.formatDate("yyyy년 M월")}' },
+            body: {
+              name: '{name}',
+              value: '{valueY}',
+              useMarker: true
+            }
+          }
+        },
+        legend: { useExtension: false }
+      })
+      const [chartData, setChartData] = useState([
+        { date: '2024-10-01', cost: 11255, changeRate: null },
+        { date: '2024-11-01', cost: 18464, changeRate: 64.1 },
+        { date: '2024-12-01', cost: 17335, changeRate: -6.1 },
+        { date: '2025-01-01', cost: 18731, changeRate: 8.1 },
+        { date: '2025-02-01', cost: 20358, changeRate: 8.7 },
+        { date: '2025-03-01', cost: 27291, changeRate: 34.1 },
+        { date: '2025-04-01', cost: 40417, changeRate: 48.1 },
+        { date: '2025-05-01', cost: 39887, changeRate: -1.3 },
+        { date: '2025-06-01', cost: 41529, changeRate: 4.1 },
+        { date: '2025-07-01', cost: 49871, changeRate: 20.1 },
+        { date: '2025-08-01', cost: 50659, changeRate: 1.6 },
+        { date: '2025-09-01', cost: 58388, changeRate: 15.3 }
+      ])
+      const [chartCategory, setChartCategory] = useState([
+        { name: 'bar_group', categories: ['cost'] },
+        { name: 'line_group', categories: ['changeRate'] }
+      ])
+      const chartCategoryLocaleMapping = [
+        { name: 'cost', value: 'Cost' },
+        { name: 'changeRate', value: '증감률' }
+      ]
+      const chartCustomCategory = [
+        { name: 'cost', color: '#C8A2C8' },
+        { name: 'changeRate', color: '#2E4A62' }
+      ]
+    `,
+        code: `<OpsnowCommonXyMultiChart
+        chartId={chartId}
+        chartRef={chartRef}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+        chartCategoryLocaleMapping={chartCategoryLocaleMapping}
+        chartCustomCategory={chartCustomCategory}
+      />`
+    },
+    {
+        title: 'XY 멀티 차트 - Bullet Label (Grouped Bar)',
+        description: 'Grouped Bar 차트에서 bullet label을 사용하여 각 바 위에 값을 표시하는 예제입니다. text 속성으로 amCharts5 포맷 문자열을 직접 사용할 수 있습니다.',
+        code_props_usage: `
+      const chartId = 'xy-multi-grouped-bar-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        chart: {
+          paddingTop: 30
+        },
+        xAxis: {
+          type: 'date',
+          dateFormats: [
+            { type: 'day', dateFormat: 'MM-dd' },
+            { type: 'month', dateFormat: 'yy년 M월' }
+          ],
+          baseInterval: { timeUnit: 'month', count: 1 },
+          gridHidden: true,
+          cellStartLocation: 0.1,
+          cellEndLocation: 0.9
+        },
+        yAxis: {
+          type: 'value',
+          numberFormat: '$#,###',
+          extraMax: 0.08
+        },
+        series: {
+          valueXField: 'date',
+          dataProcessor: {
+            dateFields: ['date'],
+            dateFormat: 'yyyy-MM-dd'
+          },
+          bullet: {
+            type: 'label',
+            locationX: 0.5,
+            locationY: 1,
+            label: {
+              dy: -2,
+              text: '\${valueY.formatNumber("#,###")}',  // amCharts5 포맷 문자열 직접 사용
+              fontSize: 9
+            }
+          },
+          seriesTypes: [
+            {
+              type: 'bar',
+              categoryGroupName: 'cost_group',
+              grouped: true
+            }
+          ],
+          tooltip: {
+            type: 'CG',
+            header: { name: '{valueX.formatDate("yyyy년 M월")}' },
+            body: {
+              name: '{name}',
+              value: '\${valueY.formatNumber("#,###")}',
+              useMarker: true
+            }
+          }
+        },
+        legend: { useExtension: false }
+      })
+      const [chartData, setChartData] = useState([
+        { date: '2024-10-01', costUsd: 79580, cloudCost: 81530 },
+        { date: '2024-11-01', costUsd: 95812, cloudCost: 98903 },
+        { date: '2024-12-01', costUsd: 182965, cloudCost: 188854 },
+        { date: '2025-01-01', costUsd: 178695, cloudCost: 184359 },
+        { date: '2025-02-01', costUsd: 103273, cloudCost: 106587 },
+        { date: '2025-03-01', costUsd: 122976, cloudCost: 126556 },
+        { date: '2025-04-01', costUsd: 151876, cloudCost: 155737 },
+        { date: '2025-05-01', costUsd: 288608, cloudCost: 296687 },
+        { date: '2025-06-01', costUsd: 146040, cloudCost: 149912 },
+        { date: '2025-07-01', costUsd: 151794, cloudCost: 155419 },
+        { date: '2025-08-01', costUsd: 147177, cloudCost: 150342 },
+        { date: '2025-09-01', costUsd: 220261, cloudCost: 196047 }
+      ])
+      const [chartCategory, setChartCategory] = useState([
+        { name: 'cost_group', categories: ['costUsd', 'cloudCost'] }
+      ])
+      const chartCategoryLocaleMapping = [
+        { name: 'costUsd', value: 'Cost(USD, 청구)' },
+        { name: 'cloudCost', value: '클라우드 사용요금' }
+      ]
+      const chartCustomCategory = [
+        { name: 'costUsd', color: '#6B8E23' },
+        { name: 'cloudCost', color: '#1976d2' }
+      ]
+    `,
+        code: `<OpsnowCommonXyMultiChart
+        chartId={chartId}
+        chartRef={chartRef}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+        chartCategoryLocaleMapping={chartCategoryLocaleMapping}
+        chartCustomCategory={chartCustomCategory}
+      />`
+    },
 ];

package/build/components/examples/opsnow-common-grid-examples-data.js

@@ -1032,6 +1032,110 @@ export const DataGridExamples = [
             langCd={i18n.getLocale()}
           />`
     },
+    {
+        title: 'Data Bar',
+        description: 'Excel 스타일의 Data Bar 예제입니다. 셀 배경에 값에 비례하는 막대를 표시합니다. 월별 비용 데이터를 시각화하는 예제입니다.',
+        code_props_usage: `
+      import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
+      import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+
+      // 월별 비용 데이터
+      const initRowData = [
+        { product: 'Amazon Elastic Compute Cloud', cost_202410: 11255, cost_202411: 18464, cost_202412: 17335, cost_202501: 18731, cost_202502: 20358, cost_202503: 27291 },
+        { product: 'Amazon CloudFront', cost_202410: 10055, cost_202411: 13741, cost_202412: 12527, cost_202501: 14702, cost_202502: 17044, cost_202503: 23615 },
+        { product: 'AWS Data Transfer', cost_202410: 13308, cost_202411: 18896, cost_202412: 16358, cost_202501: 16044, cost_202502: 15475, cost_202503: 21206 },
+        { product: 'Amazon Relational Database Service', cost_202410: 12057, cost_202411: 13592, cost_202412: 12883, cost_202501: 11609, cost_202502: 10681, cost_202503: 13413 },
+        { product: 'AmazonCloudWatch', cost_202410: 11107, cost_202411: 6883, cost_202412: 6623, cost_202501: 6391, cost_202502: 6295, cost_202503: 8128 },
+        { product: 'Amazon Managed Streaming for Apache Kafka', cost_202410: 5555, cost_202411: 5423, cost_202412: 5555, cost_202501: 6131, cost_202502: 6193, cost_202503: 7631 },
+        { product: 'Elastic Load Balancing', cost_202410: 2482, cost_202411: 4760, cost_202412: 3651, cost_202501: 4464, cost_202502: 4219, cost_202503: 6394 },
+        { product: 'AWS WAF', cost_202410: 3714, cost_202411: 4362, cost_202412: 3768, cost_202501: 3490, cost_202502: 3776, cost_202503: 4905 },
+      ]
+
+      // 월 필드 목록
+      const monthFields = [
+        'cost_202410', 'cost_202411', 'cost_202412',
+        'cost_202501', 'cost_202502', 'cost_202503'
+      ]
+
+      // 최대값 계산 (바 스케일링용)
+      const maxCost = Math.max(...initRowData.flatMap(row =>
+        monthFields.map(field => row[field])
+      ))
+
+      // 합계 행 계산
+      const totals = monthFields.reduce((acc, field) => {
+        acc[field] = initRowData.reduce((sum, r) => sum + r[field], 0)
+        return acc
+      }, { product: 'Total' })
+
+      // 컬럼 정의
+      const columnDefs = [
+        { headerName: 'Product', field: 'product', colId: 'product', width: 280, pinned: 'left' },
+        ...monthFields.map(field => {
+          const year = field.slice(5, 9)
+          const month = field.slice(9, 11)
+          return {
+            headerName: \`\${year}-\${month}\`,
+            field: field,
+            width: 120,
+            type: ['dataBar'],
+            cellRendererParams: {
+              typeParams: {
+                maxValue: maxCost,       // 모든 컬럼에서 동일한 스케일 적용
+                barColor: '#E91E8C',     // 막대 색상
+                barOpacity: 0.5,         // 막대 투명도
+                valuePrefix: '$',        // 값 앞에 $ 표시
+              },
+            },
+          }
+        })
+      ]
+
+      const gridOptions = {
+        animateRows: true,
+        tooltipShowDelay: 100,
+        domLayout: 'autoHeight',
+        pinnedBottomRowData: [totals],  // 합계 행을 하단에 고정
+      }
+
+      const defaultColDef = {
+        suppressMenu: true,
+        sortable: true,
+        resizable: true,
+      }
+
+      const { OpsnowCommonDataGrid } = useCommonComponents();
+      const { CommonConst } = useGlobalContext()
+      // rowData와 status 상태를 관리
+      const [rowData, setRowData] = useState([]) // 초기에는 빈 배열로 설정
+      const [status, setStatus] = useState(CommonConst.GRID_STATUS.LOADING) // 초기에는 LOADING 상태
+      const gridRef = useRef(null)
+
+      // 데이터 지연 설정을 위한 useEffect
+      useEffect(() => {
+        // 1초 후에 데이터를 설정
+        const timeoutId = setTimeout(() => {
+          setRowData(initRowData)
+          setStatus(CommonConst.GRID_STATUS.DATA_EXISTS)
+        }, 1000)
+
+        // 컴포넌트 언마운트 시 타임아웃 클리어
+        return () => {
+          clearTimeout(timeoutId)
+        }
+      }, [])
+    `,
+        code: `<OpsnowCommonDataGrid
+            ref={gridRef}
+            key={status}
+            columnDefs={columnDefs}
+            defaultColDef={defaultColDef}
+            rowData={rowData}
+            status={status} // 상태를 전달
+            gridOptions={gridOptions}
+            langCd={i18n.getLocale()}
+          />`
+    },
     {
         title: 'How to insert into the slot to the left of the search',
         description: 'Search 왼쪽에 컴포넌트를 추가하는 방법입니다.',
@@ -2138,8 +2242,8 @@ export const DataGridExamples = [
         />`
     },
     {
-        title: 'Long Text with autoHeight',
-        description: 'Long Text with autoHeight (긴 텍스트 자동 높이 조절) 예제입니다.',
+        title: 'Auto Row Height',
+        description: '행 높이 자동 조절 예제입니다. 다음 경우 반드시 적용: 1) 긴 텍스트가 들어올 수 있는 컬럼이 있는 경우 (설명, 메시지, 항목, 이름, 제목, 등) 2) 컬럼이 resizable인 경우 - 폭을 줄여도 텍스트가 잘리지 않고 여러 줄로 정상 표시되어야 함 (ellipsis로 자르면 안됨)',
         code_props_usage: `
       import { useCommonComponents, useGlobalContext } from '@opsnow-common/opsnow-finops-common-ui-loader'
       import i18n from '@opsnow-common/opsnow-finops-common-i18n'
@@ -2157,9 +2261,11 @@ export const DataGridExamples = [
           field: 'description',
           flex: 3,  // 가장 넓은 비율
           minWidth: 300,
-          suppressSizeToFit: true,  // 자동 리사이즈 방지
+          wrapText: true,            // 텍스트 줄바꿈 - 필수
+          autoHeight: true,          // 행 높이 자동 조절 - 필수
+          suppressSizeToFit: true,   // 자동 리사이즈 방지
           cellStyle: {
-            'align-items': 'center'  // autoHeight 작동을 위해 필수
+            alignItems: 'center'  // autoHeight 작동을 위해 필수
           }
         },
         {
@@ -2194,11 +2300,16 @@ export const DataGridExamples = [
         },
       ]
 
+      const defaultColDef = {
+        wrapText: true,      // 텍스트 줄바꿈 활성화
+        autoHeight: true,    // 셀 높이 자동 조절
+      }
+
       const gridOptions = {
         animateRows: true,
         rowSelection: { mode: 'singleRow', checkboxes: false, enableClickSelection: true },
         tooltipShowDelay: 100,
-        domLayout: 'autoHeight',
+        domLayout: 'autoHeight',  // 그리드 전체 레이아웃 자동 높이
         suppressCellFocus: true,
       }
 
@@ -2207,6 +2318,7 @@ export const DataGridExamples = [
     `,
         code: `<OpsnowCommonDataGrid
           columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
           rowData={rowData}
           status={CommonConst.GRID_STATUS.DATA_EXISTS}
           gridOptions={gridOptions}

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

@@ -76,10 +76,25 @@ const XyMultiChartSchema = z.object({
           "connect": true, // 라인 연결 여부
           "lineType": "smoothedX", // 라인 스무딩 타입
           "bullet": { // 불릿 설정, 라인 유형 차트에서 필수
-            "type": "circle", // 불릿 타입: 'circle' | 'square' | 'triangle'
+            "type": "circle", // 불릿 타입: 'circle' | 'square' | 'triangle' | 'label'
             "lineOnly": true, // 라인만 표시 여부
             "cursorOverStyle": "pointer", // 마우스 오버시 커서 스타일
-            "customField": "custom_bullet" // 불릿 커스텀 필드
+            "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으로 설정 여부
@@ -401,6 +416,24 @@ export const StackChartSchema = z.object({
         },
         "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')
@@ -414,7 +447,7 @@ export const StackChartSchema = z.object({
         "delay": 500 // 애니메이션 지연 시간
       }
     },
-    
+
     // 범례 설정
     "legend": {
       "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
@@ -441,7 +474,7 @@ export const StackChartSchema = z.object({
   [
     {
       'date': '2022-07-01',
-      'cost_test_01': 3, 
+      'cost_test_01': 3,
       'cost_test_02': 7
     },
     {
@@ -455,7 +488,7 @@ export const StackChartSchema = z.object({
   [
     {
       'date': '2022-07-01',
-      'cost_test_01': 3, 
+      'cost_test_01': 3,
       'cost_test_02': 7
     },
     {
@@ -534,7 +567,7 @@ export const StackChartSchema = z.object({
     }))
         .optional()
         .describe("사용자 정의 카테고리 스타일 및 설정"),
-    // 기타 설정    
+    // 기타 설정
     chartTooltipDetailText: z.string()
         .optional()
         .describe("툴팁에서 보여주는 상세 텍스트"),
@@ -644,6 +677,24 @@ export const BarChartSchema = z.object({
         },
         "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')
@@ -657,7 +708,7 @@ export const BarChartSchema = z.object({
         "delay": 500 // 애니메이션 지연 시간
       }
     },
-    
+
     // 범례 설정
     "legend": {
       "clickTarget": "none", // 범례 클릭 대상: "none" | "" (기본값: "none")
@@ -682,7 +733,7 @@ export const BarChartSchema = z.object({
   [
     {
       'date': '2022-07-01',
-      'cost_test_01': 3, 
+      'cost_test_01': 3,
       'cost_test_02': 7
     },
     {
@@ -696,7 +747,7 @@ export const BarChartSchema = z.object({
   [
     {
       'date': '2022-07-01',
-      'cost_test_01': 3, 
+      'cost_test_01': 3,
       'cost_test_02': 7
     },
     {
@@ -870,9 +921,24 @@ export const LineChartSchema = z.object({
         "dateFormat": "yyyy-MM-dd" // dateFields에 지정된 필드의 날짜 형식
       },
       "bullet": { // 라인 차트의 블릿 설정으로 필수 속성
-        "type": "circle", // 라인 차트의 블릿 타입 (기본값: "circle")
+        "type": "circle", // 라인 차트의 블릿 타입: 'circle' | 'square' | 'triangle' | 'label' (기본값: "circle")
         "cursorOverStyle": "pointer", // 커서 오버 스타일, 클릭 대상이 true일 때 사용: "pointer" | "hand" (기본값: "pointer")
-        "lineOnly": false // 라인만 표시 여부 (기본값: false)
+        "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: 모든 카테고리를 보여줄때
@@ -1343,7 +1409,10 @@ export function createChartComponent() {
             description: `바 차트 컴포넌트 - 바 차트 시각화 지원
 
       **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
-      
+
+      **주의: Grouped Bar Chart(묶음 막대 차트)는 이 컴포넌트가 아닌 OpsnowCommonXyMultiChart를 사용해야 합니다.**
+      Grouped Bar Chart란 각 카테고리에서 여러 시리즈의 막대가 나란히 배치되는 차트입니다.
+
       **import:**
         \`\`\`javascript
         import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
@@ -1457,7 +1526,10 @@ export function createChartComponent() {
             description: `XY 멀티 차트 컴포넌트 - XY 멀티 차트 시각화 지원
 
       **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
-      
+
+      **Grouped Bar Chart(묶음 막대 차트)를 만들려면 이 컴포넌트를 사용하세요.**
+      series의 type을 'grouped'로 설정하면 각 카테고리에서 여러 시리즈의 막대가 나란히 배치됩니다.
+
       **import:**
         \`\`\`javascript
         import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';

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

@@ -47,8 +47,11 @@ const columnDefsSchema = z.lazy(() => z.object({
         'mixFormat',
         'numberTooltip',
         'ratioBar',
+        'dataBar',
         'value'
-    ])).optional().describe('컬럼 타입'),
+    ])).optional().describe(`컬럼 타입.
+    - ratioBar: 여러 색상/세그먼트로 구성 비율을 보여주는 스택 차트 스타일 바. 여러 필드의 비율을 시각화할 때 사용 (예: Cost Composition by Type). 'Ratio Bar' 예제 참고.
+    - dataBar: 단일 색상으로 셀 배경을 값에 비례하여 채우는 Excel 스타일 바. 단일 값의 크기를 시각화할 때 사용 (예: 월별 비용 트렌드). 'Data Bar' 예제 참고.`),
     cellRenderer: z.any().optional().describe('셀 렌더러'),
     cellRendererParams: z.object({
         typeParams: z.object({
@@ -205,26 +208,36 @@ export function createDataGridComponent() {
       **이 데이터 그리드 컴포넌트는 ag-grid를 기반으로 구현되었습니다.**
       **데이터 그리드 데이터, 컬럼 정의 등의 데이터가 제공되지 않을 경우 목업 데이터를 사용하세요.**
 
-      **중요: 긴 텍스트 컬럼 처리 (필수)**
-      컬럼 값이 길어서 줄바꿈이 필요한 경우, 반드시 다음을 따라야 합니다:
-      1. 모든 컬럼에 flex 속성 필수 (비율로 너비 분배, 예: flex: 1, flex: 3)
-      2. 긴 텍스트 컬럼에 suppressSizeToFit: true 필수
-      3. 긴 텍스트 컬럼에 cellStyle: { 'align-items': 'center' } 필수
-      4. gridOptions에 domLayout: 'autoHeight' 설정
+      **CRITICAL: Auto Row Height - 다음 경우 반드시 적용**
+      1. 긴 텍스트가 들어올 수 있는 컬럼이 있는 경우 (설명, 메시지, 항목, 이름, 제목, 코멘트, 비고, 등)
+      2. 컬럼이 resizable인 경우 - 사용자가 폭을 줄여도 텍스트가 잘리지 않고 여러 줄로 정상 표시되어야 함 (ellipsis로 자르면 안됨)
 
-      예시:
-      const columnDefs = [
-        { headerName: 'ID', field: 'id', flex: 1, minWidth: 80 },
-        {
-          headerName: 'Description',
-          field: 'description',
-          flex: 3,
-          minWidth: 300,
-          suppressSizeToFit: true,
-          cellStyle: { 'align-items': 'center' }
-        },
-        { headerName: 'Status', field: 'status', flex: 1, minWidth: 120 }
-      ];
+      [필수] defaultColDef에 반드시 포함:
+      const defaultColDef = {
+        // ... 다른 설정들
+        wrapText: true,      // 필수 - 텍스트 줄바꿈
+        autoHeight: true,    // 필수 - 행 높이 자동 조절
+      };
+
+      [필수] gridOptions에 반드시 포함:
+      const gridOptions = {
+        // ... 다른 설정들
+        domLayout: 'autoHeight',  // 필수
+      };
+
+      [필수] 텍스트 컬럼에 반드시 포함:
+      {
+        headerName: '설명',
+        field: 'description',
+        flex: 2,                              // 필수 - flex 사용
+        minWidth: 200,
+        wrapText: true,                       // 필수 - 텍스트 줄바꿈
+        autoHeight: true,                     // 필수 - 행 높이 자동 조절
+        suppressSizeToFit: true,              // 필수
+        cellStyle: { alignItems: 'center' } // 필수 (flex-start도 가능)
+      }
+
+      ⚠️ defaultColDef에 wrapText, autoHeight가 없으면 텍스트가 넘칩니다!
 
       **import:**
       \`\`\`javascript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opsnow-mcp/opsnow-mcp-common-ui-server",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "type": "module",
   "main": "index.js",
   "bin": {