[explorer] fix: statistic page bubble chart cut half

src/components/Chart.vue

@@ -88,6 +88,16 @@ export default {
 		intYaxis: {
 			type: Boolean,
 			default: false
+		},
+		// Axis range configuration for bubble charts
+		xaxisRange: {
+			type: Array,
+			default: () => null
+		},
+
+		yaxisRange: {
+			type: Array,
+			default: () => null
 		}
 	},
 
@@ -114,7 +124,13 @@ export default {
 							reset: '<i class="ico-ios-refresh-outline" style="font-size: 22px;"></i>',
 							customIcons: []
 						}
-					}
+					},
+					...(this.type === 'bubble' && {
+						zoom: {
+							enabled: false,
+							type: 'x'
+						},
+					})
 				},
 				stroke: {
 					show: true,
@@ -160,7 +176,7 @@ export default {
 					display: false
 				},
 				xaxis: {
-					type: this.xaxisType,
+					type: this.type === 'bubble' ? 'numeric' : this.xaxisType,
 					axisBorder: {
 						show: false,
 						color: '#0998a6'
@@ -173,7 +189,11 @@ export default {
 									: val;
 							}
 						}
-						: {}
+						: {},
+					...(this.xaxisRange && {
+						min: this.xaxisRange[0],
+						max: this.xaxisRange[1]
+					})
 				},
 				yaxis: {
 					tooltip: {
@@ -191,12 +211,17 @@ export default {
 									: val;
 							}
 						}
-						: {}
+						: {},
+					...(this.yaxisRange && {
+						min: this.yaxisRange[0],
+						max: this.yaxisRange[1]
+					})
 				},
 				tooltip: {
 					enabled: true,
 					z: {
-						title: 'Count: '
+						formatter: () => '',
+						title: ''
 					},
 				},
 				legend: {

src/components/widgets/NodeHeightAndFinalizedHeightStatsWidget.vue

@@ -12,6 +12,8 @@
 						:data="chartData"
 						xaxisType="category"
 						:height="400"
+						:xaxisRange="xaxisRange"
+						:yaxisRange="yaxisRange"
 					/>
 				</b-col>
 			</b-row>
@@ -57,6 +59,43 @@ export default {
 			return this.data || [];
 		},
 
+		// Calculate axis ranges for bubble chart to ensure full circles
+		xaxisRange () {
+			if (!this.chartData || this.chartData.length === 0) return null;
+
+			const allXValues = [];
+			this.chartData.forEach(series => {
+				series.data.forEach(point => {
+					allXValues.push(point.x);
+				});
+			});
+
+			const minX = Math.min(...allXValues);
+			const maxX = Math.max(...allXValues);
+			const range = (maxX - minX) * 0.05;
+
+			// Add padding to ensure bubbles don't get cut off
+			return [minX - range, maxX + range];
+		},
+
+		yaxisRange () {
+			if (!this.chartData || this.chartData.length === 0) return null;
+
+			const allYValues = [];
+			this.chartData.forEach(series => {
+				series.data.forEach(point => {
+					allYValues.push(point.y);
+				});
+			});
+
+			const minY = Math.min(...allYValues);
+			const maxY = Math.max(...allYValues);
+			const range = (maxY - minY) * 0.5;
+
+			// Add padding to ensure bubbles don't get cut off
+			return [Math.max(0, minY - range), maxY + range];
+		},
+
 		loading () {
 			return this.manager.loading;
 		},