Fix transparent option #14333

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -83,8 +83,9 @@ export class PanelChrome extends PureComponent<Props, State> {
     const { panel, dashboard, plugin } = this.props;
     const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state;
 
-    const { datasource, targets } = panel;
+    const { datasource, targets, transparent } = panel;
     const PanelComponent = plugin.exports.Panel;
+    const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
 
     return (
       <AutoSizer>
@@ -94,7 +95,7 @@ export class PanelChrome extends PureComponent<Props, State> {
           }
 
           return (
-            <div className="panel-container panel-container--absolute">
+            <div className={containerClassNames}>
               <PanelHeader
                 panel={panel}
                 dashboard={dashboard}

public/app/features/dashboard/panel_model.ts

@@ -53,6 +53,7 @@ const mustKeepProps: { [str: string]: boolean } = {
   cacheTimeout: true,
   nullPointMode: true,
   cachedPluginOptions: true,
+  transparent: true,
 };
 
 const defaults: any = {
@@ -60,6 +61,7 @@ const defaults: any = {
   datasource: null,
   targets: [{}],
   cachedPluginOptions: {},
+  transparent: false,
 };
 
 export class PanelModel {
@@ -91,6 +93,7 @@ export class PanelModel {
   interval?: string;
   description?: string;
   links?: [];
+  transparent: boolean;
 
   // non persisted
   fullscreen: boolean;