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

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

@@ -514,6 +514,59 @@ export const PieChartExamples = [
         chartCustomCategory={chartCustomCategory}
       />`
     },
+    {
+        title: '파이 차트 - 다운로드',
+        description: 'ref를 사용하여 파이 차트를 다양한 형식으로 다운로드하는 예제입니다. 다운로드 시에는 chartRef가 아닌 React ref를 사용해야 합니다. downloadFile(fileName, fileType, fileOption?)을 호출합니다.',
+        code_props_usage: `
+      const chartId = 'pie-chart-download-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps] = useState({
+        series: {
+          categoryField: 'service',
+          valueField: 'cost',
+          tooltip: {
+            type: 'CI',
+            body: {
+              name: '{category}',
+              value: '\${value.formatNumber("0,0.00")}',
+              useMarker: true
+            }
+          }
+        },
+        legend: {}
+      })
+      const [chartData] = useState([
+        { service: 'EC2', cost: 15600 },
+        { service: 'RDS', cost: 8200 },
+        { service: 'S3', cost: 4300 }
+      ])
+      const [chartCategory] = useState(['EC2', 'RDS', 'S3'])
+
+      // 다운로드 핸들러
+      const handleDownload = () => {
+        chartRef.current.downloadFile('파일명', 'xlsx')
+      }
+
+      // 커스텀 데이터 소스로 다운로드
+      const handleCustomDownload = () => {
+        chartRef.current.downloadFile('파일명', 'xlsx', {
+          dataSource: [
+            { Category: 'Custom Row 1', Value: 100 },
+            { Category: 'Custom Row 2', Value: 200 }
+          ]
+        })
+      }
+
+      // 지원 형식: xlsx, csv, png, jpg, pdf, json, html, canvas, pdfdata, print
+    `,
+        code: `<OpsnowCommonPieChart
+        ref={chartRef}
+        chartId={chartId}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+      />`
+    },
 ];
 export const BarChartExamples = [
     {
@@ -1275,6 +1328,97 @@ export const BarChartExamples = [
         chartCategory={chartCategory}
       />`
     },
+    {
+        title: '바 차트 - 다운로드 (기본)',
+        description: 'ref를 사용하여 바 차트를 다양한 형식으로 다운로드하는 예제입니다. 다운로드 시에는 chartRef가 아닌 React ref를 사용해야 합니다. downloadFile(fileName, fileType, fileOption?)을 호출합니다.',
+        code_props_usage: `
+      const chartId = 'bar-chart-download-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps] = useState({
+        xAxis: { type: 'category', valueField: 'month' },
+        yAxis: { type: 'value' },
+        series: {
+          valueXField: 'month',
+          columns: { width: 'p60' },
+          tooltip: {
+            type: 'CG',
+            body: {
+              name: '{name}',
+              value: '\${valueY.formatNumber("0,0.00")}',
+              useMarker: true
+            }
+          }
+        },
+        legend: {}
+      })
+      const [chartData] = useState([
+        { month: 'Jan', AWS: 12500, Azure: 8300 },
+        { month: 'Feb', AWS: 13100, Azure: 8700 }
+      ])
+      const [chartCategory] = useState(['AWS', 'Azure'])
+
+      // 다운로드 핸들러
+      const handleDownload = () => {
+        chartRef.current.downloadFile('파일명', 'xlsx')
+      }
+    `,
+        code: `<OpsnowCommonBarChart
+        ref={chartRef}
+        chartId={chartId}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+      />`
+    },
+    {
+        title: '바 차트 - 다운로드 (커스텀 데이터 소스)',
+        description: '커스텀 데이터 소스를 지정하여 차트 데이터를 다운로드하는 예제입니다. downloadFile의 세 번째 인자로 dataSource를 전달하면 차트 데이터 대신 지정한 데이터로 다운로드됩니다.',
+        code_props_usage: `
+      const chartId = 'bar-chart-custom-download-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps] = useState({
+        xAxis: { type: 'category', valueField: 'month' },
+        yAxis: { type: 'value' },
+        series: {
+          valueXField: 'month',
+          columns: { width: 'p60' },
+          tooltip: {
+            type: 'CG',
+            body: {
+              name: '{name}',
+              value: '\${valueY.formatNumber("0,0.00")}',
+              useMarker: true
+            }
+          }
+        },
+        legend: {}
+      })
+      const [chartData] = useState([
+        { month: 'Jan', AWS: 12500, Azure: 8300 },
+        { month: 'Feb', AWS: 13100, Azure: 8700 }
+      ])
+      const [chartCategory] = useState(['AWS', 'Azure'])
+
+      // 커스텀 데이터 소스로 다운로드
+      const handleCustomDownload = () => {
+        chartRef.current.downloadFile('파일명', 'xlsx', {
+          dataSource: [
+            { Category: 'Custom Row 1', Value: 100 },
+            { Category: 'Custom Row 2', Value: 200 }
+          ]
+        })
+      }
+
+      // 지원 형식: xlsx, csv, png, jpg, pdf, json, html, canvas, pdfdata, print
+    `,
+        code: `<OpsnowCommonBarChart
+        ref={chartRef}
+        chartId={chartId}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+      />`
+    },
 ];
 export const LineChartExamples = [
     {
@@ -2239,6 +2383,59 @@ export const LineChartExamples = [
         chartCategoryLocaleMapping={chartCategoryLocaleMapping}
       />`
     },
+    {
+        title: '라인 차트 - 다운로드',
+        description: 'ref를 사용하여 라인 차트를 다양한 형식으로 다운로드하는 예제입니다. 다운로드 시에는 chartRef가 아닌 React ref를 사용해야 합니다. downloadFile(fileName, fileType, fileOption?)을 호출합니다.',
+        code_props_usage: `
+      const chartId = 'line-chart-download-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps] = useState({
+        xAxis: { type: 'category', valueField: 'month' },
+        yAxis: { type: 'value' },
+        series: {
+          valueXField: 'month',
+          tooltip: {
+            type: 'CG',
+            body: {
+              name: '{name}',
+              value: '\${valueY.formatNumber("0,0.00")}',
+              useMarker: true
+            }
+          }
+        },
+        legend: {}
+      })
+      const [chartData] = useState([
+        { month: 'Jan', AWS: 12500, Azure: 8300 },
+        { month: 'Feb', AWS: 13100, Azure: 8700 }
+      ])
+      const [chartCategory] = useState(['AWS', 'Azure'])
+
+      // 다운로드 핸들러
+      const handleDownload = () => {
+        chartRef.current.downloadFile('파일명', 'xlsx')
+      }
+
+      // 커스텀 데이터 소스로 다운로드
+      const handleCustomDownload = () => {
+        chartRef.current.downloadFile('파일명', 'xlsx', {
+          dataSource: [
+            { Category: 'Custom Row 1', Value: 100 },
+            { Category: 'Custom Row 2', Value: 200 }
+          ]
+        })
+      }
+
+      // 지원 형식: xlsx, csv, png, jpg, pdf, json, html, canvas, pdfdata, print
+    `,
+        code: `<OpsnowCommonLineChart
+        ref={chartRef}
+        chartId={chartId}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+      />`
+    },
 ];
 export const StackChartExamples = [
     {
@@ -3618,6 +3815,60 @@ export const StackChartExamples = [
         chartCustomCategory={chartCustomCategory}
       />`
     },
+    {
+        title: '스택 차트 - 다운로드',
+        description: 'ref를 사용하여 스택 차트를 다양한 형식으로 다운로드하는 예제입니다. 다운로드 시에는 chartRef가 아닌 React ref를 사용해야 합니다. downloadFile(fileName, fileType, fileOption?)을 호출합니다.',
+        code_props_usage: `
+      const chartId = 'stack-chart-download-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps] = useState({
+        xAxis: { type: 'category', valueField: 'month' },
+        yAxis: { type: 'value' },
+        series: {
+          valueXField: 'month',
+          columns: { width: 'p60' },
+          tooltip: {
+            type: 'CG',
+            body: {
+              name: '{name}',
+              value: '\${valueY.formatNumber("0,0.00")}',
+              useMarker: true
+            }
+          }
+        },
+        legend: {}
+      })
+      const [chartData] = useState([
+        { month: 'Jan', AWS: 12500, Azure: 8300 },
+        { month: 'Feb', AWS: 13100, Azure: 8700 }
+      ])
+      const [chartCategory] = useState(['AWS', 'Azure'])
+
+      // 다운로드 핸들러
+      const handleDownload = () => {
+        chartRef.current.downloadFile('파일명', 'xlsx')
+      }
+
+      // 커스텀 데이터 소스로 다운로드
+      const handleCustomDownload = () => {
+        chartRef.current.downloadFile('파일명', 'xlsx', {
+          dataSource: [
+            { Category: 'Custom Row 1', Value: 100 },
+            { Category: 'Custom Row 2', Value: 200 }
+          ]
+        })
+      }
+
+      // 지원 형식: xlsx, csv, png, jpg, pdf, json, html, canvas, pdfdata, print
+    `,
+        code: `<OpsnowCommonStackChart
+        ref={chartRef}
+        chartId={chartId}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+      />`
+    },
 ];
 export const XyMultiChartExamples = [
     {
@@ -6588,3 +6839,428 @@ export const XyMultiChartExamples = [
       />`
     },
 ];
+// Heatmap Chart 컴포넌트 예제 데이터
+export const HeatmapChartExamples = [
+    {
+        title: '히트맵 차트 - 기본',
+        description: '인시던트 발생 패턴(시간×요일) 히트맵 차트 기본 예제입니다. heatRule로 최소/최대 색상을 지정하고, 기본 그래디언트 범례를 표시합니다.',
+        code_props_usage: `
+      const chartId = 'heatmap-chart-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        chart: {
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingBottom: 0,
+        },
+        xAxis: {
+          type: 'category',
+          valueField: 'hour',
+          gridHidden: true,
+          renderer: {
+            opposite: true,
+            minGridDistance: 20,
+          },
+          label: { fontSize: 11 },
+        },
+        yAxis: {
+          type: 'category',
+          valueField: 'day',
+          gridHidden: true,
+          renderer: {
+            inversed: true,
+            minGridDistance: 20,
+          },
+          label: { fontSize: 11, maxWidth: 70, fontWeight: 'bold' },
+        },
+        series: {
+          categoryXField: 'hour',
+          categoryYField: 'day',
+          valueField: 'value',
+          columns: {
+            strokeWidth: 2,
+            hover: { enabled: true },
+          },
+          tooltip: {
+            type: 'CI',
+            header: { name: '{day} {hour}h' },
+            body: { value: '{value} {l.unit}' },
+          },
+        },
+        heatRule: {
+          key: 'fill',
+          minColor: '#fce4ec',
+          maxColor: '#c62828',
+        },
+        legend: {
+          orientation: 'horizontal',
+          legendWidth: 200,
+        },
+      })
+      const [chartData, setChartData] = useState([
+        { hour: '0', day: 'day_0', value: 0 }, { hour: '1', day: 'day_0', value: 2 },
+        { hour: '2', day: 'day_0', value: 0 }, { hour: '3', day: 'day_0', value: 5 },
+        { hour: '4', day: 'day_0', value: 0 }, { hour: '5', day: 'day_0', value: 0 },
+        { hour: '6', day: 'day_0', value: 1 }, { hour: '7', day: 'day_0', value: 3 },
+        { hour: '8', day: 'day_0', value: 0 }, { hour: '9', day: 'day_0', value: 0 },
+        { hour: '10', day: 'day_0', value: 4 }, { hour: '11', day: 'day_0', value: 0 },
+        { hour: '12', day: 'day_0', value: 0 }, { hour: '13', day: 'day_0', value: 2 },
+        { hour: '14', day: 'day_0', value: 0 }, { hour: '15', day: 'day_0', value: 0 },
+        { hour: '16', day: 'day_0', value: 6 }, { hour: '17', day: 'day_0', value: 0 },
+        { hour: '18', day: 'day_0', value: 0 }, { hour: '19', day: 'day_0', value: 1 },
+        { hour: '20', day: 'day_0', value: 0 }, { hour: '21', day: 'day_0', value: 0 },
+        { hour: '22', day: 'day_0', value: 3 }, { hour: '23', day: 'day_0', value: 0 },
+        { hour: '0', day: 'day_1', value: 0 }, { hour: '1', day: 'day_1', value: 0 },
+        { hour: '2', day: 'day_1', value: 1 }, { hour: '3', day: 'day_1', value: 0 },
+        { hour: '4', day: 'day_1', value: 0 }, { hour: '5', day: 'day_1', value: 3 },
+        { hour: '6', day: 'day_1', value: 0 }, { hour: '7', day: 'day_1', value: 0 },
+        { hour: '8', day: 'day_1', value: 7 }, { hour: '9', day: 'day_1', value: 0 },
+        { hour: '10', day: 'day_1', value: 0 }, { hour: '11', day: 'day_1', value: 2 },
+        { hour: '12', day: 'day_1', value: 0 }, { hour: '13', day: 'day_1', value: 0 },
+        { hour: '14', day: 'day_1', value: 4 }, { hour: '15', day: 'day_1', value: 0 },
+        { hour: '16', day: 'day_1', value: 0 }, { hour: '17', day: 'day_1', value: 1 },
+        { hour: '18', day: 'day_1', value: 0 }, { hour: '19', day: 'day_1', value: 5 },
+        { hour: '20', day: 'day_1', value: 0 }, { hour: '21', day: 'day_1', value: 0 },
+        { hour: '22', day: 'day_1', value: 0 }, { hour: '23', day: 'day_1', value: 2 },
+        { hour: '0', day: 'day_2', value: 1 }, { hour: '1', day: 'day_2', value: 0 },
+        { hour: '2', day: 'day_2', value: 0 }, { hour: '3', day: 'day_2', value: 0 },
+        { hour: '4', day: 'day_2', value: 3 }, { hour: '5', day: 'day_2', value: 0 },
+        { hour: '6', day: 'day_2', value: 0 }, { hour: '7', day: 'day_2', value: 6 },
+        { hour: '8', day: 'day_2', value: 0 }, { hour: '9', day: 'day_2', value: 2 },
+        { hour: '10', day: 'day_2', value: 0 }, { hour: '11', day: 'day_2', value: 0 },
+        { hour: '12', day: 'day_2', value: 4 }, { hour: '13', day: 'day_2', value: 0 },
+        { hour: '14', day: 'day_2', value: 0 }, { hour: '15', day: 'day_2', value: 1 },
+        { hour: '16', day: 'day_2', value: 0 }, { hour: '17', day: 'day_2', value: 0 },
+        { hour: '18', day: 'day_2', value: 5 }, { hour: '19', day: 'day_2', value: 0 },
+        { hour: '20', day: 'day_2', value: 0 }, { hour: '21', day: 'day_2', value: 3 },
+        { hour: '22', day: 'day_2', value: 0 }, { hour: '23', day: 'day_2', value: 0 },
+      ])
+      const chartLocaleMessage = [
+        { name: 'day_0', locale: 'Mon 4/14' },
+        { name: 'day_1', locale: 'Tue 4/15' },
+        { name: 'day_2', locale: 'Wed 4/16' },
+      ]
+      const chartLocaleProps = [
+        { name: 'l.unit', locale: 'incidents' },
+      ]
+    `,
+        code: `<OpsnowCommonHeatmapChart
+        chartId={chartId}
+        ref={chartRef}
+        chartProps={chartProps}
+        chartData={chartData}
+        chartLocaleMessage={chartLocaleMessage}
+        chartLocaleProps={chartLocaleProps}
+      />`
+    },
+    {
+        title: '히트맵 차트 - 레전드 라벨 및 스타일',
+        description: '범례에 labelText와 스타일(폰트 크기, 바 높이)을 커스터마이징한 히트맵 차트 예제입니다.',
+        code_props_usage: `
+      const chartId = 'heatmap-chart-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        chart: {
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingBottom: 0,
+        },
+        xAxis: {
+          type: 'category',
+          valueField: 'hour',
+          gridHidden: true,
+          renderer: {
+            opposite: true,
+            minGridDistance: 20,
+          },
+          label: { fontSize: 11 },
+        },
+        yAxis: {
+          type: 'category',
+          valueField: 'day',
+          gridHidden: true,
+          renderer: {
+            inversed: true,
+            minGridDistance: 20,
+          },
+          label: { fontSize: 11, maxWidth: 70, fontWeight: 'bold' },
+        },
+        series: {
+          categoryXField: 'hour',
+          categoryYField: 'day',
+          valueField: 'value',
+          columns: {
+            strokeWidth: 2,
+            hover: { enabled: true },
+          },
+          tooltip: {
+            type: 'CI',
+            header: { name: '{day} {hour}h' },
+            body: { value: '{value} {l.unit}' },
+            label: { fontSize: 11 },
+          },
+        },
+        heatRule: {
+          key: 'fill',
+          minColor: '#fce4ec',
+          maxColor: '#c62828',
+        },
+        legend: {
+          orientation: 'horizontal',
+          labelText: '{l.legendLabel}',
+          labelFontSize: 12,
+          legendWidth: 200,
+          barHeight: 16,
+        },
+      })
+      const [chartData, setChartData] = useState([
+        { hour: '0', day: 'day_0', value: 0 }, { hour: '1', day: 'day_0', value: 2 },
+        { hour: '2', day: 'day_0', value: 0 }, { hour: '3', day: 'day_0', value: 5 },
+        { hour: '4', day: 'day_0', value: 0 }, { hour: '5', day: 'day_0', value: 0 },
+        { hour: '6', day: 'day_0', value: 1 }, { hour: '7', day: 'day_0', value: 3 },
+        { hour: '8', day: 'day_0', value: 0 }, { hour: '9', day: 'day_0', value: 0 },
+        { hour: '10', day: 'day_0', value: 4 }, { hour: '11', day: 'day_0', value: 0 },
+        { hour: '12', day: 'day_0', value: 0 }, { hour: '13', day: 'day_0', value: 2 },
+        { hour: '14', day: 'day_0', value: 0 }, { hour: '15', day: 'day_0', value: 0 },
+        { hour: '16', day: 'day_0', value: 6 }, { hour: '17', day: 'day_0', value: 0 },
+        { hour: '18', day: 'day_0', value: 0 }, { hour: '19', day: 'day_0', value: 1 },
+        { hour: '20', day: 'day_0', value: 0 }, { hour: '21', day: 'day_0', value: 0 },
+        { hour: '22', day: 'day_0', value: 3 }, { hour: '23', day: 'day_0', value: 0 },
+        { hour: '0', day: 'day_1', value: 0 }, { hour: '1', day: 'day_1', value: 0 },
+        { hour: '2', day: 'day_1', value: 1 }, { hour: '3', day: 'day_1', value: 0 },
+        { hour: '4', day: 'day_1', value: 0 }, { hour: '5', day: 'day_1', value: 3 },
+        { hour: '6', day: 'day_1', value: 0 }, { hour: '7', day: 'day_1', value: 0 },
+        { hour: '8', day: 'day_1', value: 7 }, { hour: '9', day: 'day_1', value: 0 },
+        { hour: '10', day: 'day_1', value: 0 }, { hour: '11', day: 'day_1', value: 2 },
+        { hour: '12', day: 'day_1', value: 0 }, { hour: '13', day: 'day_1', value: 0 },
+        { hour: '14', day: 'day_1', value: 4 }, { hour: '15', day: 'day_1', value: 0 },
+        { hour: '16', day: 'day_1', value: 0 }, { hour: '17', day: 'day_1', value: 1 },
+        { hour: '18', day: 'day_1', value: 0 }, { hour: '19', day: 'day_1', value: 5 },
+        { hour: '20', day: 'day_1', value: 0 }, { hour: '21', day: 'day_1', value: 0 },
+        { hour: '22', day: 'day_1', value: 0 }, { hour: '23', day: 'day_1', value: 2 },
+      ])
+      const chartLocaleMessage = [
+        { name: 'day_0', locale: 'Mon 4/14' },
+        { name: 'day_1', locale: 'Tue 4/15' },
+      ]
+      const chartLocaleProps = [
+        { name: 'l.unit', locale: 'incidents' },
+        { name: 'l.legendLabel', locale: 'Incident Count' },
+      ]
+    `,
+        code: `<OpsnowCommonHeatmapChart
+        chartId={chartId}
+        ref={chartRef}
+        chartProps={chartProps}
+        chartData={chartData}
+        chartLocaleMessage={chartLocaleMessage}
+        chartLocaleProps={chartLocaleProps}
+      />`
+    },
+    {
+        title: '히트맵 차트 - 커스텀 색상 및 클릭 이벤트',
+        description: '커스텀 색상(보라 계열 그래디언트)과 셀 클릭 이벤트를 처리하는 히트맵 차트 예제입니다. onChartClick으로 클릭한 셀 정보를 받을 수 있습니다.',
+        code_props_usage: `
+      const chartId = 'heatmap-chart-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [clickedCell, setClickedCell] = useState(null)
+      const [chartProps, setChartProps] = useState({
+        chart: {
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingBottom: 0,
+        },
+        xAxis: {
+          type: 'category',
+          valueField: 'hour',
+          gridHidden: true,
+          renderer: {
+            opposite: true,
+            minGridDistance: 20,
+          },
+          label: { fontSize: 11 },
+        },
+        yAxis: {
+          type: 'category',
+          valueField: 'day',
+          gridHidden: true,
+          renderer: {
+            inversed: true,
+            minGridDistance: 20,
+          },
+          label: { fontSize: 11, maxWidth: 70, fontWeight: 'bold' },
+        },
+        series: {
+          categoryXField: 'hour',
+          categoryYField: 'day',
+          valueField: 'value',
+          columns: {
+            strokeWidth: 2,
+            hover: { enabled: true, color: '#d50000' },
+          },
+          tooltip: {
+            type: 'CI',
+            header: { name: '{day} {hour}h' },
+            body: { value: '{value} {l.unit}' },
+          },
+        },
+        heatRule: {
+          key: 'fill',
+          minColor: '#e8eaf6',
+          maxColor: '#4a148c',
+        },
+        legend: {
+          orientation: 'horizontal',
+          labelText: '{l.legendLabel}',
+          labelFontSize: 12,
+          labelFontWeight: 'bold',
+          legendWidth: 200,
+          barHeight: 16,
+        },
+      })
+      const [chartData, setChartData] = useState([
+        { hour: '0', day: 'day_0', value: 0 }, { hour: '1', day: 'day_0', value: 2 },
+        { hour: '2', day: 'day_0', value: 0 }, { hour: '3', day: 'day_0', value: 5 },
+        { hour: '4', day: 'day_0', value: 0 }, { hour: '5', day: 'day_0', value: 0 },
+        { hour: '6', day: 'day_0', value: 1 }, { hour: '7', day: 'day_0', value: 3 },
+        { hour: '8', day: 'day_0', value: 0 }, { hour: '9', day: 'day_0', value: 0 },
+        { hour: '10', day: 'day_0', value: 4 }, { hour: '11', day: 'day_0', value: 0 },
+        { hour: '12', day: 'day_0', value: 0 }, { hour: '13', day: 'day_0', value: 2 },
+        { hour: '14', day: 'day_0', value: 0 }, { hour: '15', day: 'day_0', value: 0 },
+        { hour: '16', day: 'day_0', value: 6 }, { hour: '17', day: 'day_0', value: 0 },
+        { hour: '18', day: 'day_0', value: 0 }, { hour: '19', day: 'day_0', value: 1 },
+        { hour: '20', day: 'day_0', value: 0 }, { hour: '21', day: 'day_0', value: 0 },
+        { hour: '22', day: 'day_0', value: 3 }, { hour: '23', day: 'day_0', value: 0 },
+        { hour: '0', day: 'day_1', value: 0 }, { hour: '1', day: 'day_1', value: 0 },
+        { hour: '2', day: 'day_1', value: 1 }, { hour: '3', day: 'day_1', value: 0 },
+        { hour: '4', day: 'day_1', value: 0 }, { hour: '5', day: 'day_1', value: 3 },
+        { hour: '6', day: 'day_1', value: 0 }, { hour: '7', day: 'day_1', value: 0 },
+        { hour: '8', day: 'day_1', value: 7 }, { hour: '9', day: 'day_1', value: 0 },
+        { hour: '10', day: 'day_1', value: 0 }, { hour: '11', day: 'day_1', value: 2 },
+        { hour: '12', day: 'day_1', value: 0 }, { hour: '13', day: 'day_1', value: 0 },
+        { hour: '14', day: 'day_1', value: 4 }, { hour: '15', day: 'day_1', value: 0 },
+        { hour: '16', day: 'day_1', value: 0 }, { hour: '17', day: 'day_1', value: 1 },
+        { hour: '18', day: 'day_1', value: 0 }, { hour: '19', day: 'day_1', value: 5 },
+        { hour: '20', day: 'day_1', value: 0 }, { hour: '21', day: 'day_1', value: 0 },
+        { hour: '22', day: 'day_1', value: 0 }, { hour: '23', day: 'day_1', value: 2 },
+      ])
+      const chartLocaleMessage = [
+        { name: 'day_0', locale: 'Mon 4/14' },
+        { name: 'day_1', locale: 'Tue 4/15' },
+      ]
+      const chartLocaleProps = [
+        { name: 'l.unit', locale: 'incidents' },
+        { name: 'l.legendLabel', locale: 'Incident Count' },
+      ]
+      const handleChartClick = (data) => {
+        setClickedCell(data)
+        console.log('Clicked cell:', data)
+      }
+    `,
+        code: `<OpsnowCommonHeatmapChart
+        chartId={chartId}
+        ref={chartRef}
+        chartProps={chartProps}
+        chartData={chartData}
+        chartLocaleMessage={chartLocaleMessage}
+        chartLocaleProps={chartLocaleProps}
+        onChartClick={handleChartClick}
+      />`
+    },
+    {
+        title: '히트맵 차트 - downloadFile (차트 다운로드)',
+        description: 'ref를 통해 downloadFile 메서드를 호출하여 히트맵 차트를 이미지(png, jpg) 또는 PDF로 다운로드하는 예제입니다.',
+        code_props_usage: `
+      const chartId = 'heatmap-chart-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        chart: {
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingBottom: 0,
+        },
+        xAxis: {
+          type: 'category',
+          valueField: 'hour',
+          gridHidden: true,
+          renderer: {
+            opposite: true,
+            minGridDistance: 20,
+          },
+          label: { fontSize: 11 },
+        },
+        yAxis: {
+          type: 'category',
+          valueField: 'day',
+          gridHidden: true,
+          renderer: {
+            inversed: true,
+            minGridDistance: 20,
+          },
+          label: { fontSize: 11, maxWidth: 70, fontWeight: 'bold' },
+        },
+        series: {
+          categoryXField: 'hour',
+          categoryYField: 'day',
+          valueField: 'value',
+          columns: {
+            strokeWidth: 2,
+            hover: { enabled: true },
+          },
+          tooltip: {
+            type: 'CI',
+            header: { name: '{day} {hour}h' },
+            body: { value: '{value} {l.unit}' },
+          },
+        },
+        heatRule: {
+          key: 'fill',
+          minColor: '#e0f2f1',
+          maxColor: '#00695c',
+        },
+        legend: {
+          orientation: 'horizontal',
+          legendWidth: 200,
+        },
+      })
+      const [chartData, setChartData] = useState([
+        { hour: '0', day: 'day_0', value: 0 }, { hour: '1', day: 'day_0', value: 2 },
+        { hour: '2', day: 'day_0', value: 0 }, { hour: '3', day: 'day_0', value: 5 },
+        { hour: '4', day: 'day_0', value: 0 }, { hour: '5', day: 'day_0', value: 0 },
+        { hour: '6', day: 'day_0', value: 1 }, { hour: '7', day: 'day_0', value: 3 },
+        { hour: '8', day: 'day_0', value: 0 }, { hour: '9', day: 'day_0', value: 0 },
+        { hour: '10', day: 'day_0', value: 4 }, { hour: '11', day: 'day_0', value: 0 },
+        { hour: '12', day: 'day_0', value: 0 }, { hour: '13', day: 'day_0', value: 2 },
+        { hour: '14', day: 'day_0', value: 0 }, { hour: '15', day: 'day_0', value: 0 },
+        { hour: '16', day: 'day_0', value: 6 }, { hour: '17', day: 'day_0', value: 0 },
+        { hour: '18', day: 'day_0', value: 0 }, { hour: '19', day: 'day_0', value: 1 },
+        { hour: '20', day: 'day_0', value: 0 }, { hour: '21', day: 'day_0', value: 0 },
+        { hour: '22', day: 'day_0', value: 3 }, { hour: '23', day: 'day_0', value: 0 },
+      ])
+      const chartLocaleProps = [
+        { name: 'l.unit', locale: 'incidents' },
+      ]
+      const chartLocaleMessage = [
+        { name: 'day_0', locale: 'Mon 4/14' },
+      ]
+
+      // 다운로드 함수
+      const handleDownload = (fileType) => {
+        // fileType: 'png' | 'jpg' | 'pdf'
+        // fileOption: { quality?: number } (jpg일 때 품질 0~1)
+        chartRef.current?.downloadFile('heatmap-chart', fileType)
+      }
+    `,
+        code: `<OpsnowCommonHeatmapChart
+        chartId={chartId}
+        ref={chartRef}
+        chartProps={chartProps}
+        chartData={chartData}
+        chartLocaleMessage={chartLocaleMessage}
+        chartLocaleProps={chartLocaleProps}
+      />
+      <button onClick={() => handleDownload('png')}>Download PNG</button>
+      <button onClick={() => handleDownload('jpg')}>Download JPG</button>
+      <button onClick={() => handleDownload('pdf')}>Download PDF</button>`
+    },
+];

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

@@ -49,6 +49,16 @@ export const SelectExamples = [
         title: 'filled, size=medium, disabled',
         code: `<OpsnowCommonSelect items={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]} size="medium" variant="filled" disabled value={value} onChange={e => setValue(e.target.value)} />`,
         description: 'filled variant, medium 사이즈, 비활성화 셀렉트 예제입니다.'
+    },
+    {
+        title: 'outlined, size=small, label + placeholder (단일 선택)',
+        code: `<OpsnowCommonSelect items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} size="small" variant="outlined" label="옵션 선택" placeholder="옵션을 선택하세요" value={value} onChange={e => setValue(e.target.value)} />`,
+        description: 'outlined variant, small 사이즈, label과 placeholder를 함께 사용하는 단일 선택 셀렉트 예제입니다.'
+    },
+    {
+        title: 'outlined, size=small, label + placeholder, multiple (다중 선택)',
+        code: `<OpsnowCommonSelect items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} size="small" variant="outlined" multiple label="항목" placeholder="항목을 선택하세요" value={value} onChange={e => setValue(e.target.value)} />`,
+        description: 'outlined variant, small 사이즈, label과 placeholder를 함께 사용하는 다중 선택 셀렉트 예제입니다.'
     }
 ];
 // Autocomplete(오토컴플리트) 컴포넌트 예제 데이터

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

@@ -1337,6 +1337,172 @@ export const GaugeChartSchema = z.object({
   `),
     chartValue: z.number().describe("차트 값"),
 });
+// opsnow-common-heatmap-chart
+export const HeatmapChartSchema = z.object({
+    chartId: z.string().describe("차트의 고유 식별자"),
+    chartProps: z.object({}).describe(`
+  다음 정의된 형식 예를 보고 차트 속성을 설정하세요.
+  **유효한 JSON 형식이어야합니다.**
+  {
+    // 차트 기본 설정
+    "chart": {
+      "paddingTop": 0, // 차트 상단 패딩 (px)
+      "paddingBottom": 0, // 차트 하단 패딩 (px)
+      "paddingLeft": 0, // 차트 좌측 패딩 (px)
+      "paddingRight": 0, // 차트 우측 패딩 (px)
+      "panX": false, // X축 팬 가능 여부
+      "panY": false, // Y축 팬 가능 여부
+      "wheelStep": 0.25, // 줌 휠 단계
+      "scrollbarX": { // X축 스크롤바 설정
+        "height": 6, // 스크롤바 높이 (px)
+        "gripScale": 0 // 그립 크기 비율
+      },
+      "scrollbarY": { // Y축 스크롤바 설정
+        "gripScale": 0 // 그립 크기 비율
+      },
+      "zoomOutButtonHidden": true // 줌 아웃 버튼 숨김 여부
+    },
+
+    // X축 설정
+    "xAxis": {
+      "type": "category", // 축 타입: 'category' (필수)
+      "valueField": "hour", // X축 값 필드명 (chartData의 필드명과 일치해야 함)
+      "categories": ["0", "1", "2"], // 카테고리 명시적 순서 지정 (선택사항, 생략 시 데이터에서 자동 추출)
+      "gridHidden": true, // 격자선 숨김 여부
+      "labelHidden": false, // 라벨 숨김 여부
+      "label": {
+        "fontSize": 11, // 라벨 폰트 크기
+        "maxWidth": 60, // 라벨 최대 너비 (px)
+        "paddingTop": 5, // 라벨 상단 패딩
+        "fontWeight": "normal" // 라벨 폰트 두께
+      },
+      "renderer": {
+        "opposite": true, // X축을 상단에 배치 (기본값: false)
+        "minGridDistance": 20 // 격자선 최소 간격
+      },
+      "startLocation": 0, // 축 시작 위치 (0~1)
+      "endLocation": 1 // 축 끝 위치 (0~1)
+    },
+
+    // Y축 설정
+    "yAxis": {
+      "type": "category", // 축 타입: 'category' (필수)
+      "valueField": "day", // Y축 값 필드명 (chartData의 필드명과 일치해야 함)
+      "categories": ["day_0", "day_1"], // 카테고리 명시적 순서 지정 (선택사항)
+      "gridHidden": true, // 격자선 숨김 여부
+      "labelHidden": false, // 라벨 숨김 여부
+      "label": {
+        "fontSize": 11, // 라벨 폰트 크기
+        "maxWidth": 70, // 라벨 최대 너비 (px)
+        "fontWeight": "bold" // 라벨 폰트 두께
+      },
+      "renderer": {
+        "inversed": true, // Y축 반전 (기본값: true, 위→아래 순서)
+        "minGridDistance": 20 // 격자선 최소 간격
+      },
+      "startLocation": 0, // 축 시작 위치
+      "endLocation": 1 // 축 끝 위치
+    },
+
+    // 시리즈 설정 (단일 ColumnSeries)
+    "series": {
+      "categoryXField": "hour", // X축 카테고리 필드 (기본값: xAxis.valueField)
+      "categoryYField": "day", // Y축 카테고리 필드 (기본값: yAxis.valueField)
+      "valueField": "value", // 값 필드 (기본값: "value")
+      "columns": {
+        "strokeWidth": 2, // 셀 테두리 두께
+        "cornerRadius": 0, // 셀 모서리 둥글기
+        "hover": {
+          "enabled": true, // 호버 효과 활성화
+          "scale": 1, // 호버 시 확대 비율
+          "color": "#d50000" // 호버 시 테두리 색상
+        }
+      },
+      "tooltip": {
+        "type": "CI", // 'CI' (Individual) 고정 — 각 셀별 툴팁
+        "enabled": true, // 툴팁 활성화
+        "header": { "name": "{day} {hour}h" }, // 헤더 텍스트 ({}로 필드 참조)
+        "body": {
+          "name": "", // 바디 이름 (선택사항)
+          "value": "{value} {l.unit}" // 바디 값 ({l.xxx}로 locale 참조)
+        },
+        "label": { "fontSize": 11 } // 툴팁 폰트 크기
+      },
+      "animation": {
+        "duration": 500, // 애니메이션 지속 시간 (ms)
+        "delay": 100 // 애니메이션 지연 시간 (ms)
+      }
+    },
+
+    // 히트맵 색상 규칙 (필수)
+    "heatRule": {
+      "key": "fill", // 변경할 속성: 'fill' (색상)
+      "dataField": "value", // 값 필드 (기본값: "value")
+      "minColor": "#fce4ec", // 최소값 색상 (연한색)
+      "maxColor": "#c62828", // 최대값 색상 (진한색)
+      "minValue": 0, // 최소값 직접 지정 (선택사항, 생략 시 데이터에서 자동 계산)
+      "maxValue": 10 // 최대값 직접 지정 (선택사항)
+    },
+
+    // 범례 설정 (히트맵 그래디언트 범례)
+    "legend": {
+      "orientation": "horizontal", // 방향: 'horizontal' | 'vertical'
+      "labelText": "{l.legendLabel}", // 범례 라벨 ({l.xxx}로 locale 참조)
+      "labelFontSize": 12, // 라벨 폰트 크기
+      "labelFontWeight": "normal", // 라벨 폰트 두께
+      "valueLabelFontSize": 11, // 값 라벨 폰트 크기
+      "legendWidth": 200, // 범례 너비 (px)
+      "barHeight": 16, // 범례 바 높이 (px)
+      "paddingTop": 10, // 상단 패딩
+      "startText": "Low", // 시작 라벨 텍스트
+      "endText": "High", // 끝 라벨 텍스트
+      "stepCount": 5, // 범례 단계 수
+      "reversed": false // 범례 방향 반전
+    }
+  }
+  `),
+    chartData: z.array(z.record(z.any())).optional().describe(`히트맵에 표시할 데이터 배열입니다. 각 항목은 X축 카테고리, Y축 카테고리, 값 필드를 포함해야 합니다.
+  예시)
+  [
+    { "hour": "0", "day": "day_0", "value": 3 },
+    { "hour": "1", "day": "day_0", "value": 0 },
+    { "hour": "2", "day": "day_0", "value": 5 },
+    { "hour": "0", "day": "day_1", "value": 1 },
+    { "hour": "1", "day": "day_1", "value": 7 }
+  ]`),
+    chartLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    })).optional().describe(`차트에 적용할 다국어 플레이스홀더 목록입니다. {l.xxx} 형태로 chartProps에서 참조합니다.
+  예시)
+  [
+    { "name": "l.unit", "locale": "건" },
+    { "name": "l.legendLabel", "locale": "인시던트 수" }
+  ]`),
+    chartLocaleData: z.array(z.object({
+        name: z.string().describe("chartData에 정의된 필드 이름"),
+        value: z.string().describe("chartData에 정의된 필드 값 전체 또는 일부"),
+        locale: z.string().describe("chartData에 정의된 필드 다국어 값으로 value에 다국어 값을 적용")
+    })).optional().describe(`차트 데이터에 다국어를 적용합니다.
+  예시)
+  [
+    { "name": "day", "value": "day_0", "locale": "월요일" }
+  ]`),
+    chartLocaleMessage: z.array(z.object({
+        name: z.string().describe("카테고리 키 (chartData의 카테고리 값과 일치)"),
+        locale: z.string().describe("표시할 다국어 텍스트")
+    })).optional().describe(`카테고리 라벨을 다국어 텍스트로 치환합니다. Y축 또는 X축 카테고리의 키를 표시 텍스트로 변환할 때 사용합니다.
+  예시)
+  [
+    { "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" } 객체를 전달합니다.')
+});
 // Chart 컴포넌트 함수 - 배열 반환
 export function createChartComponent() {
     return [
@@ -1639,5 +1805,58 @@ export function createChartComponent() {
                 };
             }
         },
+        {
+            name: "createHeatmapChart",
+            description: `히트맵 차트 컴포넌트 - 2차원 매트릭스 형태의 데이터 시각화 지원
+
+      **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
+
+      히트맵 차트는 X축과 Y축 모두 카테고리(category) 축을 사용하며,
+      각 셀의 값에 따라 minColor ~ maxColor 사이의 그래디언트로 색상이 결정됩니다.
+      인시던트 발생 패턴(시간×요일), 리소스 사용량 등 2차원 분포 시각화에 적합합니다.
+
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonHeatmapChart } = useCommonComponents();
+        \`\`\``,
+            parameters: HeatmapChartSchema,
+            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.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}}`);
+                const code = `<OpsnowCommonHeatmapChart ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
     ];
 }

package/package.json

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