TablePanel: Add solid background cell display mode (#32446)

* 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>
pull/32642/head
Dominik Prokop 5 years ago committed by GitHub
parent fddc83ec7c
commit 27398625ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      docs/sources/panels/visualizations/table/table-field-options.md
  2. 6
      packages/grafana-ui/src/components/Table/DefaultCell.tsx
  3. 1
      packages/grafana-ui/src/components/Table/types.ts
  4. 3
      public/app/plugins/panel/table/module.tsx

@ -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" >}}

@ -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)

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

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

Loading…
Cancel
Save