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

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

@@ -514,6 +514,61 @@ 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 },
+        { service: 'Lambda', cost: 2100 },
+        { service: 'CloudFront', cost: 1800 }
+      ])
+      const [chartCategory] = useState(['EC2', 'RDS', 'S3', 'Lambda', 'CloudFront'])
+
+      // 다운로드 핸들러
+      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 +1330,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 +2385,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 +3817,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 = [
     {

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/package.json

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