New bar gauge style: Unfilled (#21201)

* BarGauge: Added unfilled option

* Fixed white theme and added 2 unit tests

* Added another demo dashboard

* Fixed dev env dashboards

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -43,6 +43,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
               onClick={openMenu}
               className={targetClassName}
               alignmentFactors={alignmentFactors}
+              showUnfilled={options.showUnfilled}
             />
           );
         }}

public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx

@@ -11,6 +11,7 @@ import {
   FormLabel,
   Select,
   DataLinksEditor,
+  Switch,
 } from '@grafana/ui';
 import { FieldDisplayOptions, FieldConfig, DataLink, PanelEditorProps } from '@grafana/data';
 
@@ -54,6 +55,9 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
 
   onOrientationChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, orientation: value });
   onDisplayModeChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, displayMode: value });
+  onToggleShowUnfilled = () => {
+    this.props.onOptionsChange({ ...this.props.options, showUnfilled: !this.props.options.showUnfilled });
+  };
 
   onDataLinksChanged = (links: DataLink[]) => {
     this.onDefaultsChange({
@@ -96,6 +100,14 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
                 value={displayModes.find(item => item.value === options.displayMode)}
               />
             </div>
+            {options.displayMode !== 'lcd' && (
+              <Switch
+                label="Unfilled"
+                labelClass={`width-${labelWidth}`}
+                checked={options.showUnfilled}
+                onChange={this.onToggleShowUnfilled}
+              />
+            )}
           </PanelOptionsGroup>
           <PanelOptionsGroup title="Field">
             <FieldPropertiesEditor

public/app/plugins/panel/bargauge/types.ts

@@ -4,6 +4,7 @@ import { VizOrientation, SelectableValue } from '@grafana/data';
 
 export interface BarGaugeOptions extends SingleStatBaseOptions {
   displayMode: 'basic' | 'lcd' | 'gradient';
+  showUnfilled: boolean;
 }
 
 export const displayModes: Array<SelectableValue<string>> = [
@@ -16,4 +17,5 @@ export const defaults: BarGaugeOptions = {
   displayMode: 'lcd',
   orientation: VizOrientation.Horizontal,
   fieldOptions: standardGaugeFieldOptions,
+  showUnfilled: true,
 };