IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 08:56:43 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 6 deletions
Show Stats 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 { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema';
import { getTextColorForBackground } from '../../utils';
import { getTextColorForAlphaBackground } from '../../utils';
import { calculateFontSize } from '../../utils/measureText';
import { Sparkline } from '../Sparkline/Sparkline';
@ -67,7 +67,7 @@ export abstract class BigValueLayout {
}
if (this.props.colorMode === BigValueColorMode.Background) {
styles.color = getTextColorForBackground(this.valueColor);
styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
}
return styles;
@ -91,7 +91,7 @@ export abstract class BigValueLayout {
styles.color = this.valueColor;
break;
case BigValueColorMode.Background:
styles.color = getTextColorForBackground(this.valueColor);
styles.color = getTextColorForAlphaBackground(this.valueColor, this.props.theme.isDark);
break;
case BigValueColorMode.None:
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 { getTextColorForBackground, getCellLinks } from '../../utils';
import { getCellLinks, getTextColorForAlphaBackground } from '../../utils';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { CellActions } from './CellActions';
@ -63,7 +63,7 @@ function getCellStyle(
if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackgroundSolid) {
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);
}
@ -74,7 +74,7 @@ function getCellStyle(
.spin(5)
.toRgbString();
const textColor = getTextColorForBackground(displayValue.color!);
const textColor = getTextColorForAlphaBackground(displayValue.color!, tableStyles.theme.isDark);
return tableStyles.buildCellContainerStyle(
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) {
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)';
}