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: Add solid background cell display mode (#32446)

Browse Source 
* Add solid color background cell display mode

* Update docs/sources/panels/visualizations/table/table-field-options.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>

* Update docs/sources/panels/visualizations/table/table-field-options.md

Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com>
This commit is contained in:
Dominik Prokop
2021-04-02 13:49:12 +02:00
committed by GitHub
parent fddc83ec7c
commit 27398625ca
4 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/sources/panels/visualizations/table/table-field-options.md
View File

@@ -42,7 +42,7 @@ If thresholds are set, then the field text is displayed in the appropriate thres
{{< docs-imagebox img="/img/docs/tables/color-text.png" max-width="500px" caption="Color text" class="docs-image--no-shadow" >}}
### Color background
### Color background (gradient or solid)
If thresholds are set, then the field background is displayed in the appropriate threshold color.

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

@@ -35,6 +35,12 @@ function getCellStyle(tableStyles: TableStyles, field: Field, displayValue: Disp
return tableStyles.buildCellContainerStyle(displayValue.color);
}
if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackgroundSolid) {
const bgColor = tinycolor(displayValue.color);
const textColor = getTextColorForBackground(displayValue.color!);
return tableStyles.buildCellContainerStyle(textColor, bgColor.toRgbString());
}
if (field.config.custom?.displayMode === TableCellDisplayMode.ColorBackground) {
const themeFactor = tableStyles.theme.isDark ? 1 : -0.7;
const bgColor2 = tinycolor(displayValue.color)

1
packages/grafana-ui/src/components/Table/types.ts
View File

@@ -14,6 +14,7 @@ export enum TableCellDisplayMode {
Auto = 'auto',
ColorText = 'color-text',
ColorBackground = 'color-background',
ColorBackgroundSolid = 'color-background-solid',
GradientGauge = 'gradient-gauge',
LcdGauge = 'lcd-gauge',
JSONView = 'json-view',

3
public/app/plugins/panel/table/module.tsx
View File

@@ -42,7 +42,8 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
options: [
{ value: TableCellDisplayMode.Auto, label: 'Auto' },
{ value: TableCellDisplayMode.ColorText, label: 'Color text' },
{ value: TableCellDisplayMode.ColorBackground, label: 'Color background' },
{ value: TableCellDisplayMode.ColorBackground, label: 'Color background (gradient)' },
{ value: TableCellDisplayMode.ColorBackgroundSolid, label: 'Color background (solid)' },
{ value: TableCellDisplayMode.GradientGauge, label: 'Gradient gauge' },
{ value: TableCellDisplayMode.LcdGauge, label: 'LCD gauge' },
{ value: TableCellDisplayMode.BasicGauge, label: 'Basic gauge' },