diff --git a/src/components/Chart.vue b/src/components/Chart.vue index ecb41597..4764ceaf 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,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: { 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; },