(this.canvasElement = element)}
/>
);
@@ -172,7 +179,7 @@ export class Gauge extends PureComponent
{
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
position: 'relative',
- width: '100%',
+ width: gaugeWidth,
top: '-4px',
cursor: 'default',
}}
diff --git a/packages/grafana-ui/src/components/Gauge/utils.test.ts b/packages/grafana-ui/src/components/Gauge/utils.test.ts
index 45720c01a3c..0aef2c93d3f 100644
--- a/packages/grafana-ui/src/components/Gauge/utils.test.ts
+++ b/packages/grafana-ui/src/components/Gauge/utils.test.ts
@@ -1,8 +1,9 @@
import { FieldColorModeId, FieldConfig, ThresholdsMode } from '@grafana/data';
+import { VizOrientation } from '@grafana/schema';
import { getTheme } from '../../themes';
-import { getFormattedThresholds } from './utils';
+import { calculateGaugeAutoProps, getFormattedThresholds } from './utils';
describe('getFormattedThresholds', () => {
const value = {
@@ -53,3 +54,49 @@ describe('getFormattedThresholds', () => {
]);
});
});
+
+describe('calculateGaugeAutoProps', () => {
+ it('should calculate gauge properties correctly when title is undefined', () => {
+ const width = 200;
+ const height = 300;
+ const orientation = VizOrientation.Horizontal;
+ const title = undefined;
+
+ const result = calculateGaugeAutoProps(width, height, title, orientation);
+
+ expect(result.showLabel).toBe(false);
+ expect(result.gaugeHeight).toBe(200);
+ expect(result.titleFontSize).toBe(20);
+ });
+
+ it('should calculate gauge properties correctly when title is defined', () => {
+ const width = 200;
+ const height = 300;
+ const orientation = VizOrientation.Vertical;
+ const title = 'My Gauge';
+
+ const result = calculateGaugeAutoProps(width, height, title, orientation);
+
+ expect(result.showLabel).toBe(true);
+ expect(result.gaugeHeight).toBe(200);
+ expect(result.titleFontSize).toBe(20);
+ });
+
+ it('should calculate gauge properties correctly for vertical and horizontal orientations', () => {
+ const width = 100;
+ const height = 150;
+ const title = 'My Gauge';
+
+ // Test for vertical orientation
+ const verticalResult = calculateGaugeAutoProps(width, height, title, VizOrientation.Vertical);
+ expect(verticalResult.showLabel).toBe(true);
+ expect(verticalResult.gaugeHeight).toBe(100);
+ expect(verticalResult.titleFontSize).toBe(15);
+
+ // Test for horizontal orientation
+ const horizontalResult = calculateGaugeAutoProps(width, height, title, VizOrientation.Horizontal);
+ expect(horizontalResult.showLabel).toBe(true);
+ expect(horizontalResult.gaugeHeight).toBe(100);
+ expect(horizontalResult.titleFontSize).toBe(10);
+ });
+});
diff --git a/packages/grafana-ui/src/components/Gauge/utils.ts b/packages/grafana-ui/src/components/Gauge/utils.ts
index bfc6ab930da..4ca51fcd10b 100644
--- a/packages/grafana-ui/src/components/Gauge/utils.ts
+++ b/packages/grafana-ui/src/components/Gauge/utils.ts
@@ -12,6 +12,7 @@ import {
ThresholdsConfig,
ThresholdsMode,
} from '@grafana/data';
+import { VizOrientation } from '@grafana/schema';
interface GaugeAutoProps {
titleFontSize: number;
@@ -27,9 +28,15 @@ export const DEFAULT_THRESHOLDS: ThresholdsConfig = {
],
};
-export function calculateGaugeAutoProps(width: number, height: number, title: string | undefined): GaugeAutoProps {
+export function calculateGaugeAutoProps(
+ width: number,
+ height: number,
+ title: string | undefined,
+ orientation?: VizOrientation
+): GaugeAutoProps {
const showLabel = title !== null && title !== undefined;
- const titleFontSize = Math.min((width * 0.15) / 1.5, 20); // 20% of height * line-height, max 40px
+ const titleFontSizeDimension = orientation === VizOrientation.Vertical ? height : width;
+ const titleFontSize = Math.min((titleFontSizeDimension * 0.15) / 1.5, 20); // 20% of height * line-height, max 40px
const titleHeight = titleFontSize * 1.5;
const availableHeight = showLabel ? height - titleHeight : height;
const gaugeHeight = Math.min(availableHeight, width);
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 670a9d09bfe..ee4b622e710 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -31,6 +31,7 @@ export class GaugePanel extends PureComponent> {
theme={config.theme2}
onClick={openMenu}
className={targetClassName}
+ orientation={options.orientation}
/>
);
};
@@ -90,6 +91,8 @@ export class GaugePanel extends PureComponent> {
autoGrid={true}
renderCounter={renderCounter}
orientation={options.orientation}
+ minVizHeight={options.minVizHeight}
+ minVizWidth={options.minVizWidth}
/>
);
}
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 23b1b7369c5..c62938bf84a 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,4 +1,5 @@
import { PanelPlugin } from '@grafana/data';
+import { VizOrientation } from '@grafana/schema';
import { commonOptionsBuilder } from '@grafana/ui';
import { addOrientationOption, addStandardDataReduceOptions } from '../stat/common';
@@ -37,6 +38,20 @@ export const plugin = new PanelPlugin(GaugePanel)
name: 'Show threshold markers',
description: 'Renders the thresholds as an outer bar',
defaultValue: defaultOptions.showThresholdMarkers,
+ })
+ .addNumberInput({
+ path: 'minVizWidth',
+ name: 'Min width',
+ description: 'Minimum column width',
+ defaultValue: defaultOptions.minVizWidth,
+ showIf: (options: Options) => options.orientation === VizOrientation.Vertical,
+ })
+ .addNumberInput({
+ path: 'minVizHeight',
+ name: 'Min height',
+ description: 'Minimum row height',
+ defaultValue: defaultOptions.minVizHeight,
+ showIf: (options: Options) => options.orientation === VizOrientation.Horizontal,
});
commonOptionsBuilder.addTextSizeOptions(builder);
diff --git a/public/app/plugins/panel/gauge/panelcfg.cue b/public/app/plugins/panel/gauge/panelcfg.cue
index 055f22bbade..b3fc121d0eb 100644
--- a/public/app/plugins/panel/gauge/panelcfg.cue
+++ b/public/app/plugins/panel/gauge/panelcfg.cue
@@ -29,6 +29,8 @@ composableKinds: PanelCfg: {
common.SingleStatBaseOptions
showThresholdLabels: bool | *false
showThresholdMarkers: bool | *true
+ minVizWidth: uint32 | *75
+ minVizHeight: uint32 | *75
} @cuetsy(kind="interface")
}
}]
diff --git a/public/app/plugins/panel/gauge/panelcfg.gen.ts b/public/app/plugins/panel/gauge/panelcfg.gen.ts
index dc70c8e5c4c..742a66a1ea8 100644
--- a/public/app/plugins/panel/gauge/panelcfg.gen.ts
+++ b/public/app/plugins/panel/gauge/panelcfg.gen.ts
@@ -11,11 +11,15 @@
import * as common from '@grafana/schema';
export interface Options extends common.SingleStatBaseOptions {
+ minVizHeight: number;
+ minVizWidth: number;
showThresholdLabels: boolean;
showThresholdMarkers: boolean;
}
export const defaultOptions: Partial = {
+ minVizHeight: 75,
+ minVizWidth: 75,
showThresholdLabels: false,
showThresholdMarkers: true,
};