From 23a1dbc2647075ed5ab02ef7ed621191e5b2799b Mon Sep 17 00:00:00 2001 From: myml Date: Tue, 29 Mar 2022 18:21:45 +0800 Subject: [PATCH] feat: Bar Gauge Support scrolling (#46819) * feat: Bar Gauge Support scrolling * Update public/app/plugins/panel/bargauge/module.tsx Co-authored-by: Ashley Harrison * Update public/app/plugins/panel/bargauge/module.tsx Co-authored-by: Ashley Harrison * docs: Bar gauge add 'min-width' and 'min-height' Co-authored-by: Ashley Harrison --- .betterer.results | 2 +- docs/sources/visualizations/bar-gauge-panel.md | 12 ++++++++++++ .../src/components/VizRepeater/VizRepeater.tsx | 18 ++++++++++++++---- .../panel/bargauge/BarGaugePanel.test.tsx | 2 ++ .../plugins/panel/bargauge/BarGaugePanel.tsx | 3 ++- public/app/plugins/panel/bargauge/module.tsx | 16 +++++++++++++++- public/app/plugins/panel/bargauge/types.ts | 2 ++ 7 files changed, 48 insertions(+), 7 deletions(-) diff --git a/.betterer.results b/.betterer.results index 8595a3f19de..abe8fcf708c 100644 --- a/.betterer.results +++ b/.betterer.results @@ -341,7 +341,7 @@ exports[`no enzyme tests`] = { "public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx:1231427": [ [1, 19, 13, "RegExp match", "2409514259"] ], - "public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx:1206229922": [ + "public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx:1527575498": [ [1, 31, 13, "RegExp match", "2409514259"] ] }` diff --git a/docs/sources/visualizations/bar-gauge-panel.md b/docs/sources/visualizations/bar-gauge-panel.md index d3394d9f51f..3671ffd721e 100644 --- a/docs/sources/visualizations/bar-gauge-panel.md +++ b/docs/sources/visualizations/bar-gauge-panel.md @@ -59,3 +59,15 @@ Choose a display mode. ### Show unfilled area Select this if you want to render the unfilled region of the bars as dark gray. Not applicable to Retro LCD display mode. + +### Min width + +Limit the minimum width of the bar column in the vertical direction. + +Automatically show x-axis scrollbar when there is a large amount of data. + +### Min height + +Limit the minimum height of the bar row in the horizontal direction. + +Automatically show y-axis scrollbar when there is a large amount of data. diff --git a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx index 193bc60e46f..4ea26ba9fc8 100644 --- a/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx +++ b/packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx @@ -24,6 +24,7 @@ interface Props { itemSpacing?: number; /** When orientation is set to auto layout items in a grid */ autoGrid?: boolean; + minVizWidth?: number; minVizHeight?: number; } @@ -138,8 +139,17 @@ export class VizRepeater extends PureComponent, State> } render() { - const { renderValue, height, width, itemSpacing, getAlignmentFactors, autoGrid, orientation, minVizHeight } = this - .props as PropsWithDefaults; + const { + renderValue, + height, + width, + itemSpacing, + getAlignmentFactors, + autoGrid, + orientation, + minVizWidth, + minVizHeight, + } = this.props as PropsWithDefaults; const { values } = this.state; if (autoGrid && orientation === VizOrientation.Auto) { @@ -152,7 +162,7 @@ export class VizRepeater extends PureComponent, State> const repeaterStyle: React.CSSProperties = { display: 'flex', - overflow: minVizHeight ? 'hidden auto' : 'hidden', + overflow: `${minVizWidth ? 'auto' : 'hidden'} ${minVizHeight ? 'auto' : 'hidden'}`, }; let vizHeight = height; @@ -173,7 +183,7 @@ export class VizRepeater extends PureComponent, State> repeaterStyle.justifyContent = 'space-between'; itemStyles.marginRight = `${itemSpacing}px`; vizHeight = height; - vizWidth = width / values.length - itemSpacing + itemSpacing / values.length; + vizWidth = Math.max(width / values.length - itemSpacing + itemSpacing / values.length, minVizWidth ?? 0); } itemStyles.width = `${vizWidth}px`; diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx index df1441b4b90..152fbcc90e9 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx @@ -74,6 +74,8 @@ function createBarGaugePanelWithData(data: PanelData): ReactWrapper> { renderCounter={renderCounter} width={width} height={height} - minVizHeight={10} + minVizWidth={options.minVizWidth} + minVizHeight={options.minVizHeight} itemSpacing={this.getItemSpacing()} orientation={options.orientation} /> diff --git a/public/app/plugins/panel/bargauge/module.tsx b/public/app/plugins/panel/bargauge/module.tsx index 6f0c06e8d72..97e7503b8a4 100644 --- a/public/app/plugins/panel/bargauge/module.tsx +++ b/public/app/plugins/panel/bargauge/module.tsx @@ -1,5 +1,5 @@ import { commonOptionsBuilder, sharedSingleStatPanelChangedHandler } from '@grafana/ui'; -import { PanelPlugin } from '@grafana/data'; +import { PanelPlugin, VizOrientation } from '@grafana/data'; import { BarGaugePanel } from './BarGaugePanel'; import { BarGaugeOptions, displayModes } from './types'; import { addOrientationOption, addStandardDataReduceOptions } from '../stat/types'; @@ -28,6 +28,20 @@ export const plugin = new PanelPlugin(BarGaugePanel) description: 'When enabled renders the unfilled region as gray', defaultValue: true, showIf: (options: BarGaugeOptions) => options.displayMode !== 'lcd', + }) + .addNumberInput({ + path: 'minVizWidth', + name: 'Min width', + description: 'Minimum column width', + defaultValue: 0, + showIf: (options: BarGaugeOptions) => options.orientation === VizOrientation.Vertical, + }) + .addNumberInput({ + path: 'minVizHeight', + name: 'Min height', + description: 'Minimum row height', + defaultValue: 10, + showIf: (options: BarGaugeOptions) => options.orientation === VizOrientation.Horizontal, }); }) .setPanelChangeHandler(sharedSingleStatPanelChangedHandler) diff --git a/public/app/plugins/panel/bargauge/types.ts b/public/app/plugins/panel/bargauge/types.ts index 8acb786b088..fd5f52decb8 100644 --- a/public/app/plugins/panel/bargauge/types.ts +++ b/public/app/plugins/panel/bargauge/types.ts @@ -4,6 +4,8 @@ import { SelectableValue } from '@grafana/data'; export interface BarGaugeOptions extends SingleStatBaseOptions { displayMode: BarGaugeDisplayMode; showUnfilled: boolean; + minVizWidth: number; + minVizHeight: number; } export const displayModes: Array> = [