From de901560d7f31d040b0c61dec70036da341f104b Mon Sep 17 00:00:00 2001 From: Jev Forsberg <46619047+baldm0mma@users.noreply.github.com> Date: Tue, 14 Mar 2023 08:59:54 -0600 Subject: [PATCH] Stat: Add ability to remove default single-color background gradient (#64353) * baldm0mma/feature/solidOption/ update cue and ts types * baldm0mma/feature/solidOption/ update data structures * baldm0mma/feature/solidOption/ vizrepeater investigation * baldm0mma/feature/solidOption/ add buildGradientBackground * baldm0mma/feature/solidOption/ remove conlogs from fieldDisplay.ts * baldm0mma/feature/solidOption/ rem destruct in fielddisplay.ts * baldm0mma/feature/solidOption/ rem conlogs from bivaluelayout.tsx * baldm0mma/feature/solidOption/ rem conlogs in visrepeater * baldm0mma/feature/solidOption/ rem conlogs from statpanel.tsx * baldm0mma/feature/solidOption/ add annotations in BigValue.tsx * baldm0mma/feature/solidOption/ update cue * baldm0mma/feature/solidOption/ remove unused anno * baldm0mma/feature/solidOption/ update with toggle conditinal * Update module.tsx update anno * baldm0mma/feature/solidOption/ update annos * baldm0mma/feature/solidOption/ undo change * baldm0mma/featurew/solidOption/ add anno for boolean toggle in stat module * baldm0mma/featurew/solidOption/ update anno in BigValue.tsx for hasGradient * baldm0mma/featurew/solidOption/ updart default logic in bigValueLayout.tsx --- .../statpanelcfg/schema-reference.md | 1 + .../grafana-data/src/field/fieldOverrides.ts | 2 +- .../src/components/BigValue/BigValue.tsx | 2 ++ .../components/BigValue/BigValueLayout.tsx | 26 ++++++++++++------- public/app/plugins/panel/stat/StatPanel.tsx | 1 + public/app/plugins/panel/stat/module.tsx | 13 ++++++++-- public/app/plugins/panel/stat/panelcfg.cue | 9 ++++--- public/app/plugins/panel/stat/panelcfg.gen.ts | 2 ++ 8 files changed, 39 insertions(+), 17 deletions(-) diff --git a/docs/sources/developers/kinds/composable/statpanelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/statpanelcfg/schema-reference.md index 4435cb03d81..a4f6b93e95b 100644 --- a/docs/sources/developers/kinds/composable/statpanelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/statpanelcfg/schema-reference.md @@ -27,6 +27,7 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions). | `graphMode` | string | **Yes** | TODO docs
Possible values are: `none`, `line`, `area`. | | `justifyMode` | string | **Yes** | TODO docs
Possible values are: `auto`, `center`. | | `textMode` | string | **Yes** | TODO docs
Possible values are: `auto`, `value`, `value_and_name`, `name`, `none`. | +| `hasGradient` | boolean | No | Default: `true`. | | `orientation` | string | No | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*
TODO docs
Possible values are: `auto`, `vertical`, `horizontal`. | | `reduceOptions` | [ReduceDataOptions](#reducedataoptions) | No | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*
TODO docs | | `text` | [VizTextDisplayOptions](#viztextdisplayoptions) | No | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*
TODO docs | diff --git a/packages/grafana-data/src/field/fieldOverrides.ts b/packages/grafana-data/src/field/fieldOverrides.ts index 6b2fbf31195..7f0b3a5c289 100644 --- a/packages/grafana-data/src/field/fieldOverrides.ts +++ b/packages/grafana-data/src/field/fieldOverrides.ts @@ -214,7 +214,7 @@ export function applyFieldOverrides(options: ApplyFieldOverrideOptions): DataFra }); } -// this is a significant optimization for streaming, where we currently re-process all values in the buffer on ech update +// this is a significant optimization for streaming, where we currently re-process all values in the buffer on each update // via field.display(value). this can potentially be removed once we... // 1. process data packets incrementally and/if cache the results in the streaming datafame (maybe by buffer index) // 2. have the ability to selectively get display color or text (but not always both, which are each quite expensive) diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx index c677484b79a..6b273d606dc 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx @@ -53,6 +53,8 @@ export interface Props extends Themeable2 { className?: string; /** Color mode for coloring the value or the background */ colorMode: BigValueColorMode; + /** Whether or not a horizontal gradient is applied to the panel background */ + hasGradient?: boolean; /** Show a graph behind/under the value */ graphMode: BigValueGraphMode; /** Auto justify value and text or center it */ diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx index 7f0e7dc8d46..10356f255fd 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx @@ -117,7 +117,7 @@ export abstract class BigValueLayout { } getPanelStyles(): CSSProperties { - const { width, height, theme, colorMode } = this.props; + const { width, height, theme, colorMode, hasGradient } = this.props; const panelStyles: CSSProperties = { width: `${width}px`, @@ -130,17 +130,23 @@ export abstract class BigValueLayout { const themeFactor = theme.isDark ? 1 : -0.7; + function buildGradientBackground(valueColor: BigValueLayout['valueColor']) { + const bgColor2 = tinycolor(valueColor) + .darken(15 * themeFactor) + .spin(8) + .toRgbString(); + const bgColor3 = tinycolor(valueColor) + .darken(5 * themeFactor) + .spin(-8) + .toRgbString(); + + return `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`; + } + switch (colorMode) { case BigValueColorMode.Background: - const bgColor2 = tinycolor(this.valueColor) - .darken(15 * themeFactor) - .spin(8) - .toRgbString(); - const bgColor3 = tinycolor(this.valueColor) - .darken(5 * themeFactor) - .spin(-8) - .toRgbString(); - panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`; + panelStyles.background = + hasGradient === false ? `none ${this.valueColor}` : buildGradientBackground(this.valueColor); break; case BigValueColorMode.Value: panelStyles.background = `transparent`; diff --git a/public/app/plugins/panel/stat/StatPanel.tsx b/public/app/plugins/panel/stat/StatPanel.tsx index bbc29f28230..157e3fa5081 100644 --- a/public/app/plugins/panel/stat/StatPanel.tsx +++ b/public/app/plugins/panel/stat/StatPanel.tsx @@ -37,6 +37,7 @@ export class StatPanel extends PureComponent> { count={count} sparkline={sparkline} colorMode={options.colorMode} + hasGradient={options.hasGradient} graphMode={options.graphMode} justifyMode={options.justifyMode} textMode={this.getTextMode()} diff --git a/public/app/plugins/panel/stat/module.tsx b/public/app/plugins/panel/stat/module.tsx index 4f4884486b1..8407a5dd483 100644 --- a/public/app/plugins/panel/stat/module.tsx +++ b/public/app/plugins/panel/stat/module.tsx @@ -20,7 +20,7 @@ export const plugin = new PanelPlugin(StatPanel) builder.addSelect({ path: 'textMode', name: 'Text mode', - description: 'Control if name and value is displayed or just name', + description: 'Control the display of the name and value', category: mainCategory, settings: { options: [ @@ -38,7 +38,7 @@ export const plugin = new PanelPlugin(StatPanel) .addRadio({ path: 'colorMode', name: 'Color mode', - defaultValue: BigValueColorMode.Value, + defaultValue: defaultPanelOptions.colorMode, category: mainCategory, settings: { options: [ @@ -48,6 +48,15 @@ export const plugin = new PanelPlugin(StatPanel) ], }, }) + // Boolean toggle for removing the gradient panel background + .addBooleanSwitch({ + path: 'hasGradient', + name: 'Background gradient', + defaultValue: defaultPanelOptions.hasGradient, + category: mainCategory, + // This toggle really only applies when the BigValueColorMode === `background` + showIf: (panelOptions) => panelOptions.colorMode === BigValueColorMode.Background, + }) .addRadio({ path: 'graphMode', name: 'Graph mode', diff --git a/public/app/plugins/panel/stat/panelcfg.cue b/public/app/plugins/panel/stat/panelcfg.cue index 4cb87594a86..de36d422ce1 100644 --- a/public/app/plugins/panel/stat/panelcfg.cue +++ b/public/app/plugins/panel/stat/panelcfg.cue @@ -28,10 +28,11 @@ composableKinds: PanelCfg: { { PanelOptions: { common.SingleStatBaseOptions - graphMode: common.BigValueGraphMode | *"area" - colorMode: common.BigValueColorMode | *"value" - justifyMode: common.BigValueJustifyMode | *"auto" - textMode: common.BigValueTextMode | *"auto" + graphMode: common.BigValueGraphMode | *"area" + colorMode: common.BigValueColorMode | *"value" + hasGradient?: bool | *true + justifyMode: common.BigValueJustifyMode | *"auto" + textMode: common.BigValueTextMode | *"auto" } @cuetsy(kind="interface") }, ] diff --git a/public/app/plugins/panel/stat/panelcfg.gen.ts b/public/app/plugins/panel/stat/panelcfg.gen.ts index c1a246e82e3..dcd5420f5b4 100644 --- a/public/app/plugins/panel/stat/panelcfg.gen.ts +++ b/public/app/plugins/panel/stat/panelcfg.gen.ts @@ -15,6 +15,7 @@ export const PanelCfgModelVersion = Object.freeze([0, 0]); export interface PanelOptions extends common.SingleStatBaseOptions { colorMode: common.BigValueColorMode; graphMode: common.BigValueGraphMode; + hasGradient?: boolean; justifyMode: common.BigValueJustifyMode; textMode: common.BigValueTextMode; } @@ -22,6 +23,7 @@ export interface PanelOptions extends common.SingleStatBaseOptions { export const defaultPanelOptions: Partial = { colorMode: common.BigValueColorMode.Value, graphMode: common.BigValueGraphMode.Area, + hasGradient: true, justifyMode: common.BigValueJustifyMode.Auto, textMode: common.BigValueTextMode.Auto, };