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 { export enum BigValueColorMode {
Background = 'background', Background = 'background',
BackgroundSolid = 'background_solid',
None = 'none', None = 'none',
Value = 'value', Value = 'value',
} }

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

@ -178,7 +178,7 @@ OptionsWithTextFormatting: {
} @cuetsy(kind="interface") } @cuetsy(kind="interface")
// TODO docs // 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 // TODO docs
BigValueGraphMode: "none" | "line" | "area" @cuetsy(kind="enum") 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: { argTypes: {
width: { control: { type: 'range', min: 200, max: 800 } }, width: { control: { type: 'range', min: 200, max: 800 } },
height: { 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] } }, graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } }, justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
textMode: { 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'; import { buildLayout } from './BigValueLayout';
export enum BigValueColorMode { export enum BigValueColorMode {
Value = 'value',
Background = 'background', Background = 'background',
BackgroundSolid = 'background_solid',
None = 'none', None = 'none',
Value = 'value',
} }
export enum BigValueGraphMode { 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'; 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); styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
} }
@ -92,6 +95,7 @@ export abstract class BigValueLayout {
styles.color = this.valueColor; styles.color = this.valueColor;
break; break;
case BigValueColorMode.Background: case BigValueColorMode.Background:
case BigValueColorMode.BackgroundSolid:
styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark); styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
break; break;
case BigValueColorMode.None: case BigValueColorMode.None:
@ -142,6 +146,9 @@ export abstract class BigValueLayout {
.toRgbString(); .toRgbString();
panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`; panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
break; break;
case BigValueColorMode.BackgroundSolid:
panelStyles.background = tinycolor(this.valueColor).toString();
break;
case BigValueColorMode.Value: case BigValueColorMode.Value:
panelStyles.background = `transparent`; panelStyles.background = `transparent`;
break; break;
@ -167,6 +174,7 @@ export abstract class BigValueLayout {
switch (colorMode) { switch (colorMode) {
case BigValueColorMode.Background: case BigValueColorMode.Background:
case BigValueColorMode.BackgroundSolid:
fillColor = 'rgba(255,255,255,0.4)'; fillColor = 'rgba(255,255,255,0.4)';
lineColor = tinycolor(this.valueColor).brighten(40).toRgbString(); lineColor = tinycolor(this.valueColor).brighten(40).toRgbString();
break; break;

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

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