@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.25 → 1.0.26

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

@@ -6838,6 +6838,119 @@ export const XyMultiChartExamples = [
         chartCustomCategory={chartCustomCategory}
       />`
     },
+    {
+        title: 'XY 멀티 차트 - bullet.hitRadius (작은 bullet 의 클릭 영역만 넓히기)',
+        description: 'bullet.hitRadius 속성으로 bullet 의 시각적 크기는 그대로 두고 클릭/호버 인식 영역만 넓히는 예제입니다. anomaly(이상치) 마커처럼 시각적으로는 작아야 하지만 클릭은 쉬워야 하는 경우, bullet 주변 영역까지 클릭할 수 있도록 확장합니다. hitRadius=14 를 적용하면 visible radius 는 동일하지만 hit area 가 약 3배가 됩니다.',
+        code_props_usage: `
+      const chartId = 'multi-chart-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+
+      const [chartProps, setChartProps] = useState({
+        xAxis: {
+          type: 'date',
+          dateFormats: [{ type: 'day', dateFormat: 'yyyy/MM/dd' }],
+          baseInterval: { timeUnit: 'day', count: 1 },
+          gridHidden: true,
+          renderer: { minGridDistance: 30 },
+        },
+        yAxis: {
+          type: 'value',
+          numberFormatter: { numberFormat: '#.#a' },
+        },
+        series: {
+          valueXField: 'date',
+          dataProcessor: { dateFields: ['date'], dateFormat: 'yyyy-MM-dd' },
+          seriesTypes: [
+            // 민감도 범위 (range area)
+            {
+              type: 'line',
+              categoryGroupName: 'sensitivity',
+              strokeWidth: 0,
+              area: {
+                type: 'range',
+                openValueField: 'sensitivity_open',
+                fillOpacity: 0.2,
+              },
+              bullet: { type: 'circle', lineOnly: true },
+            },
+            // 실제 값 (기본 bullet)
+            {
+              type: 'line',
+              categoryGroupName: 'actual',
+              clickTarget: true,
+              bullet: { type: 'circle', cursorOverStyle: 'pointer' },
+            },
+            // anomaly 마커 — hitRadius 로 클릭 영역만 확장
+            {
+              type: 'line',
+              categoryGroupName: 'anomaly',
+              strokeWidth: 0,
+              clickTarget: true,
+              bullet: {
+                type: 'circle',
+                customField: 'bullet_alarm',
+                cursorOverStyle: 'pointer',
+                hitRadius: 14, // 시각 radius 는 유지, 클릭 영역만 확장
+              },
+            },
+          ],
+          tooltip: {
+            type: 'CG',
+            showAt: 'actual',
+            orientation: 'vertical',
+            header: { name: '{valueX.formatDate("yyyy/MM/dd")}' },
+            body: {
+              maxRowCount: 10,
+              name: '{name}',
+              value: '\${valueY}',
+              useMarker: true,
+            },
+          },
+        },
+        legend: { useExtension: false, clickTarget: 'none' },
+        cursor: { visibleY: false },
+      })
+
+      const [chartData, setChartData] = useState([
+        { date: '2026-05-01', sensitivity_open: 10, sensitivity_close: 20, actual_cost: 13 },
+        { date: '2026-05-02', sensitivity_open: 20, sensitivity_close: 30, actual_cost: 22 },
+        {
+          date: '2026-05-03',
+          sensitivity_open: 10, sensitivity_close: 20,
+          actual_cost: 27,
+          anomaly_cost: 27,
+          bullet_alarm: { type: 'alarm', target: 'anomaly_cost' },
+        },
+        { date: '2026-05-04', sensitivity_open: 30, sensitivity_close: 40, actual_cost: 35 },
+        {
+          date: '2026-05-05',
+          sensitivity_open: 40, sensitivity_close: 50,
+          actual_cost: 28,
+          anomaly_cost: 28,
+          bullet_alarm: { type: 'alarm', target: 'anomaly_cost' },
+        },
+        { date: '2026-05-06', sensitivity_open: 20, sensitivity_close: 30, actual_cost: 22 },
+      ])
+      const [chartCategory] = useState([
+        { name: 'sensitivity', categories: ['sensitivity_close'] },
+        { name: 'actual', categories: ['actual_cost'] },
+        { name: 'anomaly', categories: ['anomaly_cost'] },
+      ])
+      const [chartCustomCategory] = useState([
+        { name: 'sensitivity_close', color: '#8cc9ff' },
+        { name: 'actual_cost', color: '#086ce8' },
+        { name: 'anomaly_cost', color: '#d92936', legendMarkerType: 'alarm' },
+      ])
+    `,
+        code: `<OpsnowCommonXyMultiChart
+        ref={chartRef}
+        chartId={chartId}
+        chartProps={chartProps}
+        chartCategory={chartCategory}
+        chartData={chartData}
+        chartCustomCategory={chartCustomCategory}
+      />`
+    },
 ];
 // Heatmap Chart 컴포넌트 예제 데이터
 export const HeatmapChartExamples = [
@@ -7264,3 +7377,239 @@ export const HeatmapChartExamples = [
       <button onClick={() => handleDownload('pdf')}>Download PDF</button>`
     },
 ];
+// Bubble Chart 컴포넌트 예제 데이터
+export const BubbleChartExamples = [
+    {
+        title: '버블 차트 - 국가별 GDP (sizeField + colorField + 다국어)',
+        description: '국가별 GDP 지수(X) × 기대수명(Y) × 인구(size)를 버블로 표시하는 기본 예제입니다. sizeField로 버블 크기를 데이터에 매핑하고, colorField 로 항목별 색상을 직접 지정합니다. chartLocaleMessage 로 country_xx 키를 다국어 국가명으로 치환합니다.',
+        code_props_usage: `
+      const chartId = 'bubble-chart-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        xAxis: { gridHidden: false, labelHidden: false },
+        yAxis: { gridHidden: false, labelHidden: false },
+        series: {
+          valueXField: 'x',
+          valueYField: 'y',
+          sizeField: 'value',
+          minBulletSize: 6,
+          maxBulletSize: 40,
+          colorField: 'fillColor',
+          fillOpacity: 0.7,
+          tooltip: {
+            header: { name: '[bold]{name}[/]' },
+            body: {
+              value:
+                '{l.gdpIndex}: {valueX}\\n{l.lifeExp}: {valueY}\\n{l.population}: {value}',
+            },
+          },
+        },
+        cursor: { behavior: 'none', visibleX: true, visibleY: true },
+      })
+      const [chartData, setChartData] = useState([
+        { x: 83, y: 78.2, value: 330000, name: 'country_us', fillColor: '#4caf50' },
+        { x: 64, y: 75.4, value: 1400000, name: 'country_cn', fillColor: '#f44336' },
+        { x: 47, y: 73.1, value: 1380000, name: 'country_in', fillColor: '#ff9800' },
+        { x: 42, y: 84.2, value: 125000, name: 'country_jp', fillColor: '#2196f3' },
+        { x: 70, y: 80.9, value: 83000, name: 'country_de', fillColor: '#9c27b0' },
+        { x: 72, y: 81.3, value: 67000, name: 'country_uk', fillColor: '#00bcd4' },
+        { x: 58, y: 82.6, value: 51000, name: 'country_kr', fillColor: '#3f51b5' },
+      ])
+      const chartLocaleMessage = [
+        { name: 'country_us', locale: '미국' },
+        { name: 'country_cn', locale: '중국' },
+        { name: 'country_in', locale: '인도' },
+        { name: 'country_jp', locale: '일본' },
+        { name: 'country_de', locale: '독일' },
+        { name: 'country_uk', locale: '영국' },
+        { name: 'country_kr', locale: '대한민국' },
+      ]
+      const chartLocaleProps = [
+        { name: 'l.gdpIndex', locale: 'GDP 지수' },
+        { name: 'l.lifeExp', locale: '기대 수명' },
+        { name: 'l.population', locale: '인구' },
+      ]
+    `,
+        code: `<OpsnowCommonBubbleChart
+        chartId={chartId}
+        chartRef={chartRef}
+        chartProps={chartProps}
+        chartData={chartData}
+        chartLocaleMessage={chartLocaleMessage}
+        chartLocaleProps={chartLocaleProps}
+      />`
+    },
+    {
+        title: '버블 차트 - 클러스터 분포 (클릭 이벤트)',
+        description: '클러스터별 분포(X, Y)와 멤버 수(size), 위험도(색상)를 표시하는 버블 차트 예제입니다. avg_distance 값에 따라 색상이 다르게 지정되고 (severity: critical/warning/info), onChartClick 으로 클릭한 클러스터 정보를 받습니다.',
+        code_props_usage: `
+      const chartId = 'bubble-chart-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [clickedItem, setClickedItem] = useState(null)
+      const [chartProps, setChartProps] = useState({
+        xAxis: { gridHidden: false, labelHidden: true },
+        yAxis: { gridHidden: false, labelHidden: true },
+        series: {
+          valueXField: 'x',
+          valueYField: 'y',
+          sizeField: 'value',
+          minBulletSize: 5,
+          maxBulletSize: 30,
+          colorField: 'fillColor',
+          fillOpacity: 0.65,
+          tooltip: {
+            header: { name: '[bold]{name}[/]' },
+            body: {
+              value: '{l.logs}: {member_count}\\n{l.clarity}: {avg_distance}',
+            },
+          },
+        },
+        cursor: { behavior: 'none' },
+      })
+      // avg_distance 임계값 기반으로 fillColor 매핑
+      const [chartData, setChartData] = useState([
+        { x: 0.2, y: 5.8, value: 1200, member_count: 1200, avg_distance: 0.85, fillColor: '#f44336', name: 'cluster_1' },
+        { x: 1.5, y: 4.2, value: 800,  member_count: 800,  avg_distance: 0.55, fillColor: '#ff9800', name: 'cluster_2' },
+        { x: 4.1, y: 2.0, value: 2000, member_count: 6500, avg_distance: 0.25, fillColor: '#4caf50', name: 'cluster_3' },
+        { x: 4.8, y: 3.1, value: 1500, member_count: 4200, avg_distance: 0.3,  fillColor: '#4caf50', name: 'cluster_4' },
+        { x: 8.2, y: 0.5, value: 600,  member_count: 600,  avg_distance: 0.72, fillColor: '#f44336', name: 'cluster_5' },
+      ])
+      const chartLocaleMessage = chartData.map((d, i) => ({
+        name: d.name,
+        locale: \`클러스터 #\${i + 1}\`,
+      }))
+      const chartLocaleProps = [
+        { name: 'l.logs', locale: '로그 수' },
+        { name: 'l.clarity', locale: '평균 거리' },
+      ]
+      const handleChartClick = (data) => {
+        setClickedItem(data)
+        console.log('Clicked bubble:', data)
+      }
+    `,
+        code: `<OpsnowCommonBubbleChart
+        chartId={chartId}
+        chartRef={chartRef}
+        chartProps={chartProps}
+        chartData={chartData}
+        chartLocaleMessage={chartLocaleMessage}
+        chartLocaleProps={chartLocaleProps}
+        onChartClick={handleChartClick}
+      />`
+    },
+    {
+        title: '버블 차트 - 자동 색상 할당 (colorField/sizeField 미지정)',
+        description: 'colorField 와 sizeField 를 생략한 가장 단순한 형태의 버블 차트(산점도) 예제입니다. 색상은 amCharts5 가 자동 할당하며, 모든 버블이 동일 크기로 표시됩니다. 특정 항목만 fillColor 를 직접 지정해 강조할 수 있습니다.',
+        code_props_usage: `
+      const chartId = 'bubble-chart-${generateUniqueGeneralId()}'
+      const chartRef = useRef(null)
+      const [chartProps, setChartProps] = useState({
+        xAxis: { gridHidden: false, labelHidden: false },
+        yAxis: { gridHidden: false, labelHidden: false },
+        series: {
+          valueXField: 'x',
+          valueYField: 'y',
+          fillOpacity: 0.8,
+          tooltip: {
+            header: { name: '[bold]{name}[/]' },
+            body: { value: 'x: {valueX}, y: {valueY}' },
+          },
+        },
+        cursor: { behavior: 'none', visibleX: true, visibleY: true },
+      })
+      const [chartData, setChartData] = useState([
+        { x: 1, y: 5, name: 'A' },
+        { x: 3, y: 8, name: 'B' },
+        { x: 5, y: 3, name: 'C' },
+        { x: 7, y: 9, name: 'D' },
+        { x: 2, y: 7, name: 'E' },
+        { x: 8, y: 2, name: 'F' },
+        { x: 4, y: 6, name: 'G' },
+        // 특정 항목만 fillColor 로 강조
+        { x: 6, y: 4, name: 'h_label', fillColor: '#000000' },
+      ])
+      const chartLocaleMessage = [
+        { name: 'h_label', locale: '강조 H' },
+      ]
+    `,
+        code: `<OpsnowCommonBubbleChart
+        chartId={chartId}
+        chartRef={chartRef}
+        chartProps={chartProps}
+        chartData={chartData}
+        chartLocaleMessage={chartLocaleMessage}
+      />`
+    },
+    {
+        title: '버블 차트 - 축 Padding (extraMin/extraMax 로 가장자리 잘림 방지)',
+        description: '버블이 X/Y 축의 최소/최대값에 가까울 경우 버블이 차트 가장자리에 잘리는 현상을 방지하는 예제입니다. xAxis/yAxis 의 extraMin / extraMax 값(0~1, 비율) 으로 축 양 끝에 여백을 추가할 수 있습니다. 좌(기본) / 우(extraMin=0.1, extraMax=0.1) 비교 시 효과를 확인할 수 있습니다.',
+        code_props_usage: `
+      const chartIdA = 'bubble-padding-default-${generateUniqueGeneralId()}'
+      const chartIdB = 'bubble-padding-extra-${generateUniqueGeneralId()}'
+      const chartRefA = useRef(null)
+      const chartRefB = useRef(null)
+
+      // Before — extraMin/extraMax 없음 (모서리 버블이 잘림)
+      const [chartPropsA] = useState({
+        xAxis: { gridHidden: false, labelHidden: false },
+        yAxis: { gridHidden: false, labelHidden: false },
+        series: {
+          valueXField: 'x',
+          valueYField: 'y',
+          sizeField: 'value',
+          minBulletSize: 8,
+          maxBulletSize: 24,
+          colorField: 'fillColor',
+          fillOpacity: 0.7,
+          tooltip: {
+            header: { name: '[bold]{name}[/]' },
+            body: { value: 'x: {valueX}, y: {valueY}' },
+          },
+        },
+        cursor: { behavior: 'none' },
+      })
+      // After — extraMin/extraMax 적용 (가장자리 여백 확보)
+      const [chartPropsB] = useState({
+        xAxis: { gridHidden: false, labelHidden: false, extraMin: 0.1, extraMax: 0.1 },
+        yAxis: { gridHidden: false, labelHidden: false, extraMin: 0.1, extraMax: 0.1 },
+        series: {
+          valueXField: 'x',
+          valueYField: 'y',
+          sizeField: 'value',
+          minBulletSize: 8,
+          maxBulletSize: 24,
+          colorField: 'fillColor',
+          fillOpacity: 0.7,
+          tooltip: {
+            header: { name: '[bold]{name}[/]' },
+            body: { value: 'x: {valueX}, y: {valueY}' },
+          },
+        },
+        cursor: { behavior: 'none' },
+      })
+      const [chartData] = useState([
+        { x: 0,  y: 0,  value: 100, name: 'edge_bl', fillColor: '#f44336' }, // 좌하단
+        { x: 0,  y: 10, value: 100, name: 'edge_tl', fillColor: '#ff9800' }, // 좌상단
+        { x: 10, y: 0,  value: 100, name: 'edge_br', fillColor: '#4caf50' }, // 우하단
+        { x: 10, y: 10, value: 100, name: 'edge_tr', fillColor: '#2196f3' }, // 우상단
+        { x: 5,  y: 5,  value: 200, name: 'center',  fillColor: '#9c27b0' },
+      ])
+    `,
+        code: `<>
+        {/* Before — extraMin/extraMax 없음 */}
+        <OpsnowCommonBubbleChart
+          chartId={chartIdA}
+          chartRef={chartRefA}
+          chartProps={chartPropsA}
+          chartData={chartData}
+        />
+        {/* After — extraMin/extraMax=0.1 (가장자리 여백) */}
+        <OpsnowCommonBubbleChart
+          chartId={chartIdB}
+          chartRef={chartRefB}
+          chartProps={chartPropsB}
+          chartData={chartData}
+        />
+      </>`
+    },
+];

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

@@ -105,6 +105,7 @@ const XyMultiChartSchema = z.object({
             "type": "circle", // 불릿 타입: 'circle' | 'square' | 'triangle' | 'label'
             "lineOnly": true, // 라인만 표시 여부
             "cursorOverStyle": "pointer", // 마우스 오버시 커서 스타일
+            "hitRadius": 14, // 클릭/호버 감지 영역(hit area) 확장 반경(px). bullet 의 시각적 크기는 그대로 두고, 클릭 가능한 hit area 만 넓힘. 작은 점(작은 bullet) 도 클릭하기 쉽게 만들 때 사용. anomaly/이상치 마커처럼 시각적으론 작아야 하지만 인터랙션은 쉬워야 하는 경우 유용.
             "customField": "custom_bullet", // 불릿 커스텀 필드
             "locationX": 0.5, // 불릿 X축 위치 (0~1, type이 'label'일 때 사용)
             "locationY": 1, // 불릿 Y축 위치 (0~1, type이 'label'일 때 사용)
@@ -1503,6 +1504,94 @@ export const HeatmapChartSchema = z.object({
     isDarkMode: z.boolean().optional().describe("다크 모드 활성화 여부"),
     onChartClick: z.string().optional().describe('셀 클릭 시 호출되는 콜백 함수(stringified). 클릭 시 { xField, yField, valueField, from: "heatmap" } 객체를 전달합니다.')
 });
+// opsnow-common-bubble-chart
+export const BubbleChartSchema = z.object({
+    chartId: z.string().describe("차트의 고유 식별자"),
+    chartProps: z.object({}).describe(`
+  다음 정의된 형식 예를 보고 버블 차트 속성을 설정하세요.
+  **유효한 JSON 형식이어야 합니다.**
+  {
+    // 차트 기본 설정
+    "chart": {
+      "paddingTop": 0,
+      "paddingBottom": 0,
+      "paddingLeft": 0,
+      "paddingRight": 0
+    },
+
+    // X축 설정 (수치 축)
+    "xAxis": {
+      "gridHidden": false,    // 격자선 숨김 여부
+      "labelHidden": false,   // 라벨 숨김 여부
+      "extraMin": 0.1,        // 축 최소쪽 여백 비율 (0~1) — bullet 이 가장자리에 잘리지 않도록 패딩
+      "extraMax": 0.1,        // 축 최대쪽 여백 비율 (0~1)
+      "label": { "fontSize": 11 }
+    },
+
+    // Y축 설정 (수치 축)
+    "yAxis": {
+      "gridHidden": false,
+      "labelHidden": false,
+      "extraMin": 0.1,
+      "extraMax": 0.1,
+      "label": { "fontSize": 11 }
+    },
+
+    // 시리즈 설정 (단일 BubbleSeries)
+    "series": {
+      "valueXField": "x",       // X 값 필드 (chartData 의 필드명)
+      "valueYField": "y",       // Y 값 필드
+      "sizeField": "value",     // 버블 크기에 매핑할 값 필드 (생략 시 모든 버블이 동일 크기)
+      "minBulletSize": 6,       // 버블 최소 크기 (px)
+      "maxBulletSize": 40,      // 버블 최대 크기 (px)
+      "colorField": "fillColor",// 데이터 항목별 색상을 지정하는 필드 (CSS 색상 문자열). 미지정 시 자동 색상 할당
+      "fillOpacity": 0.7,       // 버블 채우기 투명도 (0~1)
+      "tooltip": {
+        "header": { "name": "[bold]{name}[/]" },           // 헤더 포맷 ({} 로 필드 참조, [bold]...[/] 굵게)
+        "body": {
+          "value": "{l.label}: {valueX}\\n{l.label2}: {valueY}\\n{l.label3}: {value}" // \\n 으로 줄바꿈, {l.xxx} locale 참조
+        }
+      }
+    },
+
+    // 커서 설정
+    "cursor": {
+      "behavior": "none",  // 'none' | 'selectX' | 'selectY' | 'zoomX' | 'zoomY' | 'zoomXY'
+      "visibleX": true,    // X 가이드라인 표시
+      "visibleY": true     // Y 가이드라인 표시
+    }
+  }
+  `),
+    chartData: z.array(z.record(z.any())).optional().describe(`버블 차트에 표시할 데이터 배열입니다. 각 항목은 X값, Y값, (선택) 크기값/색상값을 포함합니다.
+  예시)
+  [
+    { "x": 83, "y": 78.2, "value": 330000, "name": "country_us", "fillColor": "#4caf50" },
+    { "x": 64, "y": 75.4, "value": 1400000, "name": "country_cn", "fillColor": "#f44336" },
+    { "x": 42, "y": 84.2, "value": 125000, "name": "country_jp", "fillColor": "#2196f3" }
+  ]`),
+    chartLocaleProps: z.array(z.object({
+        name: z.string(),
+        locale: z.string()
+    })).optional().describe(`차트에 적용할 다국어 플레이스홀더 목록입니다. {l.xxx} 형태로 chartProps 의 tooltip 에서 참조합니다.
+  예시)
+  [
+    { "name": "l.gdpIndex", "locale": "GDP 지수" },
+    { "name": "l.lifeExp", "locale": "기대 수명" },
+    { "name": "l.population", "locale": "인구" }
+  ]`),
+    chartLocaleMessage: z.array(z.object({
+        name: z.string().describe("chartData 항목의 name 키 (또는 카테고리 키)"),
+        locale: z.string().describe("표시할 다국어 텍스트")
+    })).optional().describe(`데이터 항목의 name 을 다국어 텍스트로 치환합니다. 툴팁 헤더({name}) 에 표시되는 텍스트를 언어별로 바꿀 때 사용합니다.
+  예시)
+  [
+    { "name": "country_us", "locale": "미국" },
+    { "name": "country_cn", "locale": "중국" }
+  ]`),
+    langCd: z.enum(['ko', 'en', 'ja', 'zh', 'ar']).optional().describe("언어 코드"),
+    onChartClick: z.string().optional().describe(`버블 클릭 시 호출되는 콜백 함수(stringified). 클릭한 데이터 항목 객체를 인자로 전달합니다.
+  예시) "(data) => { console.log(data) }"`)
+});
 // Chart 컴포넌트 함수 - 배열 반환
 export function createChartComponent() {
     return [
@@ -1858,5 +1947,52 @@ export function createChartComponent() {
                 };
             }
         },
+        {
+            name: "createBubbleChart",
+            description: `버블 차트 컴포넌트 - 3차원(X, Y, 크기) 데이터 시각화 지원
+
+      **이 차트 컴포넌트는 amCharts5를 기반으로 구현되었습니다.**
+
+      X축/Y축 모두 수치(value) 축이며, 각 데이터 항목을 버블(원)로 표시합니다.
+      sizeField 로 버블 크기, colorField 로 항목별 색상을 지정할 수 있고,
+      colorField 미지정 시 자동 색상 할당이 동작합니다.
+      GDP 분포(국가별 X=지수, Y=수명, size=인구), 클러스터 분포, 산점도(scatter) 형태의
+      3차원 데이터 시각화에 적합합니다.
+
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonBubbleChart } = useCommonComponents();
+        \`\`\``,
+            parameters: BubbleChartSchema,
+            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.chartLocaleMessage)
+                    props.push(`chartLocaleMessage={${args.chartLocaleMessage}}`);
+                if (args.langCd)
+                    props.push(`langCd="${args.langCd}"`);
+                if (args.onChartClick)
+                    props.push(`onChartClick={${args.onChartClick}}`);
+                const code = `<OpsnowCommonBubbleChart ${props.join(' ')} />`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        },
     ];
 }

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

@@ -1,7 +1,7 @@
 import { ButtonExamples, BadgeExamples, TextareaExamples, SwitchExamples, ChipExamples, TextFieldExamples, AvatarExamples, CheckboxExamples, RadioGroupExamples, CollapseExamples, SliderExamples, LinkExamples, TreeViewExamples, InsightCardExamples, InsightContentExamples, ToggleButtonExamples } from "./examples/opsnow-common-forms-examples-data.js";
 import { IconExamples, MuiIconExamples } from "./examples/opsnow-common-icons-examples-data.js";
 import { CalendarExamples } from "./examples/opsnow-common-calendar-examples-data.js";
-import { GaugeChartExamples, PieChartExamples, BarChartExamples, LineChartExamples, StackChartExamples, XyMultiChartExamples } from "./examples/opsnow-common-chart-examples-data.js";
+import { GaugeChartExamples, PieChartExamples, BarChartExamples, LineChartExamples, StackChartExamples, XyMultiChartExamples, HeatmapChartExamples, BubbleChartExamples } from "./examples/opsnow-common-chart-examples-data.js";
 import { TooltipExamples } from "./examples/opsnow-common-tooltip-examples-data.js";
 import { DataGridExamples } from "./examples/opsnow-common-grid-examples-data.js";
 import { PopupExamples } from "./examples/opsnow-common-popup-examples-data.js";
@@ -44,6 +44,8 @@ const EXAMPLES_MAP = {
     LineChart: LineChartExamples,
     StackChart: StackChartExamples,
     XyMultiChart: XyMultiChartExamples,
+    HeatmapChart: HeatmapChartExamples,
+    BubbleChart: BubbleChartExamples,
     Tooltip: TooltipExamples,
     DataGrid: DataGridExamples,
     Popup: PopupExamples,

package/package.json

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