From 532284333c8ec747009199112b536e37140c2119 Mon Sep 17 00:00:00 2001 From: AnthonyLaw Date: Fri, 29 Aug 2025 01:05:19 +0800 Subject: [PATCH 1/2] [explorer] fix: extended x and y axis range, prevent bubble get cut half --- src/components/Chart.vue | 32 +++++++++++++-- ...odeHeightAndFinalizedHeightStatsWidget.vue | 39 +++++++++++++++++++ 2 files changed, 67 insertions(+), 4 deletions(-) diff --git a/src/components/Chart.vue b/src/components/Chart.vue index ecb41597..403e7325 100644 --- a/src/components/Chart.vue +++ b/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: '', 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,7 +211,11 @@ export default { : val; } } - : {} + : {}, + ...(this.yaxisRange && { + min: this.yaxisRange[0], + max: this.yaxisRange[1] + }) }, tooltip: { enabled: true, diff --git a/src/components/widgets/NodeHeightAndFinalizedHeightStatsWidget.vue b/src/components/widgets/NodeHeightAndFinalizedHeightStatsWidget.vue index 48992cc2..afa1be34 100644 --- a/src/components/widgets/NodeHeightAndFinalizedHeightStatsWidget.vue +++ b/src/components/widgets/NodeHeightAndFinalizedHeightStatsWidget.vue @@ -12,6 +12,8 @@ :data="chartData" xaxisType="category" :height="400" + :xaxisRange="xaxisRange" + :yaxisRange="yaxisRange" /> @@ -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; }, From 6fd88fa9890eb5f6ab31ae2574427fb4f0e6cf16 Mon Sep 17 00:00:00 2001 From: AnthonyLaw Date: Sat, 30 Aug 2025 04:49:09 +0800 Subject: [PATCH 2/2] [explorer] fix: removed duplicate z value in tooltips --- src/components/Chart.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Chart.vue b/src/components/Chart.vue index 403e7325..4764ceaf 100644 --- a/src/components/Chart.vue +++ b/src/components/Chart.vue @@ -220,7 +220,8 @@ export default { tooltip: { enabled: true, z: { - title: 'Count: ' + formatter: () => '', + title: '' }, }, legend: {