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

Revert "Stat: Add ability to remove default single-color background gradient" (#65002)

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

This reverts commit de901560d7.
This commit is contained in:
Torkel Ödegaard
2023-03-20 14:17:51 +01:00
committed by GitHub
parent ff49683673
commit 18385bfb0e
8 changed files with 17 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -216,7 +216,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 each update
// this is a significant optimization for streaming, where we currently re-process all values in the buffer on ech 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,8 +53,6 @@ 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 */

26
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, hasGradient } = this.props;
const { width, height, theme, colorMode } = this.props;
const panelStyles: CSSProperties = {
width: `${width}px`,
@@ -130,23 +130,17 @@ 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:
panelStyles.background =
hasGradient === false ? `none ${this.valueColor}` : buildGradientBackground(this.valueColor);
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})`;
break;
case BigValueColorMode.Value:
panelStyles.background = `transparent`;