IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Stat: Add ability to remove default single-color background gradient (#64353)

Browse Source 
* 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
This commit is contained in:
Jev Forsberg 2023-03-14 08:59:54 -06:00 committed by GitHub
parent 23e0f85ef9
commit de901560d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/sources/developers/kinds/composable/statpanelcfg/schema-reference.md
View File

@ -27,6 +27,7 @@ It extends [SingleStatBaseOptions](#singlestatbaseoptions).
| `graphMode` | string | **Yes** | TODO docs<br/>Possible values are: `none`, `line`, `area`. |
| `justifyMode` | string | **Yes** | TODO docs<br/>Possible values are: `auto`, `center`. |
| `textMode` | string | **Yes** | TODO docs<br/>Possible values are: `auto`, `value`, `value_and_name`, `name`, `none`. |
| `hasGradient` | boolean | No | Default: `true`. |
| `orientation` | string | No | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs<br/>Possible values are: `auto`, `vertical`, `horizontal`. |
| `reduceOptions` | [ReduceDataOptions](#reducedataoptions) | No | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs |
| `text` | [VizTextDisplayOptions](#viztextdisplayoptions) | No | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs |

2
packages/grafana-data/src/field/fieldOverrides.ts
View File

@ -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)

2
packages/grafana-ui/src/components/BigValue/BigValue.tsx
View File

@ -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 */

18
packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
View File

@ -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;
switch (colorMode) {
case BigValueColorMode.Background:
const bgColor2 = tinycolor(this.valueColor)
function buildGradientBackground(valueColor: BigValueLayout['valueColor']) {
const bgColor2 = tinycolor(valueColor)
.darken(15 * themeFactor)
.spin(8)
.toRgbString();
const bgColor3 = tinycolor(this.valueColor)
const bgColor3 = tinycolor(valueColor)
.darken(5 * themeFactor)
.spin(-8)
.toRgbString();
panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
return `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
}
switch (colorMode) {
case BigValueColorMode.Background:
panelStyles.background =
hasGradient === false ? `none ${this.valueColor}` : buildGradientBackground(this.valueColor);
break;
case BigValueColorMode.Value:
panelStyles.background = `transparent`;

1
public/app/plugins/panel/stat/StatPanel.tsx
View File

@ -37,6 +37,7 @@ export class StatPanel extends PureComponent<PanelProps<PanelOptions>> {
count={count}
sparkline={sparkline}
colorMode={options.colorMode}
hasGradient={options.hasGradient}
graphMode={options.graphMode}
justifyMode={options.justifyMode}
textMode={this.getTextMode()}

13
public/app/plugins/panel/stat/module.tsx
View File

@ -20,7 +20,7 @@ export const plugin = new PanelPlugin<PanelOptions>(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<PanelOptions>(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<PanelOptions>(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',

1
public/app/plugins/panel/stat/panelcfg.cue
View File

@ -30,6 +30,7 @@ composableKinds: PanelCfg: {
common.SingleStatBaseOptions
graphMode: common.BigValueGraphMode | *"area"
colorMode: common.BigValueColorMode | *"value"
hasGradient?: bool | *true
justifyMode: common.BigValueJustifyMode | *"auto"
textMode: common.BigValueTextMode | *"auto"
} @cuetsy(kind="interface")

2
public/app/plugins/panel/stat/panelcfg.gen.ts
View File

@ -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<PanelOptions> = {
colorMode: common.BigValueColorMode.Value,
graphMode: common.BigValueGraphMode.Area,
hasGradient: true,
justifyMode: common.BigValueJustifyMode.Auto,
textMode: common.BigValueTextMode.Auto,
};