TablePanel: Add support for basic gauge as a cell display mode (#26595)

packages/grafana-ui/src/components/Table/BarGaugeCell.tsx

@@ -37,6 +37,8 @@ export const BarGaugeCell: FC<TableCellProps> = props => {
 
   if (field.config.custom && field.config.custom.displayMode === TableCellDisplayMode.LcdGauge) {
     barGaugeMode = BarGaugeDisplayMode.Lcd;
+  } else if (field.config.custom && field.config.custom.displayMode === TableCellDisplayMode.BasicGauge) {
+    barGaugeMode = BarGaugeDisplayMode.Basic;
   }
 
   let width;

packages/grafana-ui/src/components/Table/types.ts

@@ -17,6 +17,7 @@ export enum TableCellDisplayMode {
   GradientGauge = 'gradient-gauge',
   LcdGauge = 'lcd-gauge',
   JSONView = 'json-view',
+  BasicGauge = 'basic',
 }
 
 export type FieldTextAlignment = 'auto' | 'left' | 'right' | 'center';

packages/grafana-ui/src/components/Table/utils.ts

@@ -91,6 +91,7 @@ function getCellComponent(displayMode: TableCellDisplayMode, field: Field) {
     case TableCellDisplayMode.ColorBackground:
       return withTableStyles(DefaultCell, getBackgroundColorStyle);
     case TableCellDisplayMode.LcdGauge:
+    case TableCellDisplayMode.BasicGauge:
     case TableCellDisplayMode.GradientGauge:
       return BarGaugeCell;
     case TableCellDisplayMode.JSONView:

public/app/plugins/panel/table/module.tsx

@@ -45,6 +45,7 @@ export const plugin = new PanelPlugin<Options, CustomFieldConfig>(TablePanel)
               { value: TableCellDisplayMode.ColorBackground, label: 'Color background' },
               { value: TableCellDisplayMode.GradientGauge, label: 'Gradient gauge' },
               { value: TableCellDisplayMode.LcdGauge, label: 'LCD gauge' },
+              { value: TableCellDisplayMode.BasicGauge, label: 'Basic gauge' },
               { value: TableCellDisplayMode.JSONView, label: 'JSON View' },
             ],
           },