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

TablePanel/StatPanel: Fix values not being visible when background transparent (#55092)

Browse Source 
* TablePanel/StatPanel: Fix values not being visible when background transparent

* Maintain backwards compatibility
This commit is contained in:
Victor Marin
2022-09-19 11:47:37 +03:00
committed by GitHub
parent 1e9f5a5080
commit 32c4245efd
3 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2';
import { formattedValueToString, DisplayValue, FieldConfig, FieldType, VizOrientation } from '@grafana/data'; import { formattedValueToString, DisplayValue, FieldConfig, FieldType, VizOrientation } from '@grafana/data';
import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema'; import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema';
import { getTextColorForBackground } from '../../utils'; import { getTextColorForAlphaBackground } from '../../utils';
import { calculateFontSize } from '../../utils/measureText'; import { calculateFontSize } from '../../utils/measureText';
import { Sparkline } from '../Sparkline/Sparkline'; import { Sparkline } from '../Sparkline/Sparkline';
@@ -67,7 +67,7 @@ export abstract class BigValueLayout {
} }
if (this.props.colorMode === BigValueColorMode.Background) { if (this.props.colorMode === BigValueColorMode.Background) {
styles.color = getTextColorForBackground(this.valueColor); styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
} }
return styles; return styles;
@@ -91,7 +91,7 @@ export abstract class BigValueLayout {
styles.color = this.valueColor; styles.color = this.valueColor;
break; break;
case BigValueColorMode.Background: case BigValueColorMode.Background:
styles.color = getTextColorForBackground(this.valueColor); styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
break; break;
case BigValueColorMode.None: case BigValueColorMode.None:
styles.color = this.props.theme.colors.text.primary; styles.color = this.props.theme.colors.text.primary;

6
packages/grafana-ui/src/components/Table/DefaultCell.tsx
View File

@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2';
import { DisplayValue, Field, formattedValueToString } from '@grafana/data'; import { DisplayValue, Field, formattedValueToString } from '@grafana/data';
import { getTextColorForBackground, getCellLinks } from '../../utils'; import { getCellLinks, getTextColorForAlphaBackground } from '../../utils';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu'; import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { CellActions } from './CellActions'; import { CellActions } from './CellActions';
@@ -63,7 +63,7 @@ function getCellStyle(
if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackgroundSolid) { if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackgroundSolid) {
const bgColor = tinycolor(displayValue.color); const bgColor = tinycolor(displayValue.color);
const textColor = getTextColorForBackground(displayValue.color!); const textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
return tableStyles.buildCellContainerStyle(textColor, bgColor.toRgbString(), !disableOverflowOnHover); return tableStyles.buildCellContainerStyle(textColor, bgColor.toRgbString(), !disableOverflowOnHover);
} }
@@ -74,7 +74,7 @@ function getCellStyle(
.spin(5) .spin(5)
.toRgbString(); .toRgbString();
const textColor = getTextColorForBackground(displayValue.color!); const textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
return tableStyles.buildCellContainerStyle( return tableStyles.buildCellContainerStyle(
textColor, textColor,

13
packages/grafana-ui/src/utils/colors.ts
View File

@@ -114,6 +114,19 @@ function hslToHex(color: tinycolor.ColorFormats.HSLA) {
export function getTextColorForBackground(color: string) { export function getTextColorForBackground(color: string) {
const b = tinycolor(color).getBrightness(); const b = tinycolor(color).getBrightness();
return b > 180 ? 'rgb(32, 34, 38)' : 'rgb(247, 248, 250)';
}
export function getTextColorForAlphaBackground(color: string, themeIsDark: boolean) {
const tcolor = tinycolor(color);
const b = tcolor.getBrightness();
const a = tcolor.getAlpha();
if (a < 0.3) {
return themeIsDark ? 'rgb(247, 248, 250)' : 'rgb(32, 34, 38)';
}
return b > 180 ? 'rgb(32, 34, 38)' : 'rgb(247, 248, 250)'; return b > 180 ? 'rgb(32, 34, 38)' : 'rgb(247, 248, 250)';
} }