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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,9 +42,9 @@ 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.
If thresholds are set, then the field background is displayed in the appropriate threshold color.
{{< docs-imagebox img="/img/docs/tables/color-background.png" max-width="500px" caption="Color background" class="docs-image--no-shadow" >}}

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' },