IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Stat Panel: Add an option for a non-gradient/solid background (#65052)

Browse Source 
* baldm0mma/statNoGrad/ add no gradient option

* baldm0mma/statsNoGrad/ update migration and tests

* baldm0mma/statsNoGrad/ update suggestions module

* baldm0mma/statsNoGrad/ update bigValueLayout test

* baldm0mma/statNoGrad/ remove unused comment

* baldm0mma/statNoGrad/ revert to background

* baldm0mma/statNoGrad/ update enum values
This commit is contained in:
Jev Forsberg 2023-03-20 11:13:27 -06:00 committed by GitHub
parent ccfe09d20e
commit 93bcc3b26c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-schema/src/common/common.gen.ts
View File

@ -479,6 +479,7 @@ export interface OptionsWithTextFormatting {
*/
export enum BigValueColorMode {
Background = 'background',
BackgroundSolid = 'background_solid',
None = 'none',
Value = 'value',
}

2
packages/grafana-schema/src/common/mudball.cue
View File

@ -178,7 +178,7 @@ OptionsWithTextFormatting: {
} @cuetsy(kind="interface")
// TODO docs
BigValueColorMode: "value" | "background" | "none" @cuetsy(kind="enum")
BigValueColorMode: "value" | "background" | "background_solid" | "none" @cuetsy(kind="enum", memberNames="Value|Background|BackgroundSolid|None")
// TODO docs
BigValueGraphMode: "none" | "line" | "area" @cuetsy(kind="enum")

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

@ -31,7 +31,9 @@ const meta: Meta = {
argTypes: {
width: { control: { type: 'range', min: 200, max: 800 } },
height: { control: { type: 'range', min: 200, max: 800 } },
colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
colorMode: {
control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] },
},
graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
textMode: {

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

@ -11,9 +11,10 @@ import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDi
import { buildLayout } from './BigValueLayout';
export enum BigValueColorMode {
Value = 'value',
Background = 'background',
BackgroundSolid = 'background_solid',
None = 'none',
Value = 'value',
}
export enum BigValueGraphMode {

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

@ -67,7 +67,10 @@ export abstract class BigValueLayout {
styles.paddingRight = '0.75ch';
}
if (this.props.colorMode === BigValueColorMode.Background) {
if (
this.props.colorMode === BigValueColorMode.Background ||
this.props.colorMode === BigValueColorMode.BackgroundSolid
) {
styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
}
@ -92,6 +95,7 @@ export abstract class BigValueLayout {
styles.color = this.valueColor;
break;
case BigValueColorMode.Background:
case BigValueColorMode.BackgroundSolid:
styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
break;
case BigValueColorMode.None:
@ -142,6 +146,9 @@ export abstract class BigValueLayout {
.toRgbString();
panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
break;
case BigValueColorMode.BackgroundSolid:
panelStyles.background = tinycolor(this.valueColor).toString();
break;
case BigValueColorMode.Value:
panelStyles.background = `transparent`;
break;
@ -167,6 +174,7 @@ export abstract class BigValueLayout {
switch (colorMode) {
case BigValueColorMode.Background:
case BigValueColorMode.BackgroundSolid:
fillColor = 'rgba(255,255,255,0.4)';
lineColor = tinycolor(this.valueColor).brighten(40).toRgbString();
break;

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

@ -35,7 +35,7 @@ export const plugin = new PanelPlugin<PanelOptions>(StatPanel)
});
builder
.addRadio({
.addSelect({
path: 'colorMode',
name: 'Color mode',
defaultValue: BigValueColorMode.Value,
@ -44,7 +44,8 @@ export const plugin = new PanelPlugin<PanelOptions>(StatPanel)
options: [
{ value: BigValueColorMode.None, label: 'None' },
{ value: BigValueColorMode.Value, label: 'Value' },
{ value: BigValueColorMode.Background, label: 'Background' },
{ value: BigValueColorMode.Background, label: 'Background Gradient' },
{ value: BigValueColorMode.BackgroundSolid, label: 'Background Solid' },
],
},
})