Panels: Add support for panels with no padding (#20012)

* Panels: Added support to set panel padding to zero

* WIP: fullChromeControl work

* Tweaks to header position

* Reverted some overlay mechanic and now back to no title only

* Fixed test

* Fixed transparent flag

* Added show title

* Added font weight to value

* Reverted back to no padding option

* Fixed issue with border and width and height

packages/grafana-data/src/types/panel.ts

@@ -74,6 +74,7 @@ export class PanelPlugin<TOptions = any> extends GrafanaPlugin<PanelPluginMeta>
   defaults?: TOptions;
   onPanelMigration?: PanelMigrationHandler<TOptions>;
   onPanelTypeChanged?: PanelTypeChangedHandler<TOptions>;
+  noPadding?: boolean;
 
   /**
    * Legacy angular ctrl.  If this exists it will be used instead of the panel
@@ -95,6 +96,11 @@ export class PanelPlugin<TOptions = any> extends GrafanaPlugin<PanelPluginMeta>
     return this;
   }
 
+  setNoPadding() {
+    this.noPadding = true;
+    return this;
+  }
+
   /**
    * This function is called before the panel first loads if
    * the current version is different than the version that was saved.

packages/grafana-ui/src/components/BigValue/BigValue.tsx

@@ -160,7 +160,7 @@ export function calculateLayout(props: Props): LayoutResult {
 export function getTitleStyles(layout: LayoutResult) {
   const styles: CSSProperties = {
     fontSize: `${layout.titleFontSize}px`,
-    textShadow: '#333 1px 1px 5px',
+    textShadow: '#333 0px 0px 1px',
     color: '#EEE',
   };
 
@@ -175,7 +175,8 @@ export function getValueStyles(layout: LayoutResult) {
   const styles: CSSProperties = {
     fontSize: `${layout.valueFontSize}px`,
     color: '#EEE',
-    textShadow: '#333 1px 1px 5px',
+    textShadow: '#333 0px 0px 1px',
+    fontWeight: 500,
     lineHeight: LINE_HEIGHT,
   };
 
@@ -347,7 +348,7 @@ function renderLineGeom(layout: LayoutResult) {
   const lineStyle: any = {
     stroke: '#CCC',
     lineWidth: 2,
-    shadowBlur: 15,
+    shadowBlur: 10,
     shadowColor: '#444',
     shadowOffsetY: 7,
   };
@@ -359,7 +360,7 @@ function renderVibrant2Geom(layout: LayoutResult) {
   const lineStyle: any = {
     stroke: '#CCC',
     lineWidth: 2,
-    shadowBlur: 15,
+    shadowBlur: 10,
     shadowColor: '#444',
     shadowOffsetY: -5,
   };

packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, CSSProperties } from 'react';
 import { VizOrientation } from '@grafana/data';
 
 interface Props<V, D> {
@@ -87,12 +87,13 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
       repeaterStyle.flexDirection = 'column';
       itemStyles.marginBottom = `${itemSpacing}px`;
       vizWidth = width;
-      vizHeight = height / values.length - itemSpacing;
+      vizHeight = height / values.length - itemSpacing + itemSpacing / values.length;
     } else {
       repeaterStyle.flexDirection = 'row';
+      repeaterStyle.justifyContent = 'space-between';
       itemStyles.marginRight = `${itemSpacing}px`;
       vizHeight = height;
-      vizWidth = width / values.length - itemSpacing;
+      vizWidth = width / values.length - itemSpacing + itemSpacing / values.length;
     }
 
     itemStyles.width = `${vizWidth}px`;
@@ -103,7 +104,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
       <div style={repeaterStyle}>
         {values.map((value, index) => {
           return (
-            <div key={index} style={itemStyles}>
+            <div key={index} style={getItemStylesForIndex(itemStyles, index, values.length)}>
               {renderValue(value, vizWidth, vizHeight, dims)}
             </div>
           );
@@ -112,3 +113,17 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
     );
   }
 }
+
+/*
+ * Removes any padding on the last item
+ */
+function getItemStylesForIndex(itemStyles: CSSProperties, index: number, length: number): CSSProperties {
+  if (index === length - 1) {
+    return {
+      ...itemStyles,
+      marginRight: 0,
+      marginBottom: 0,
+    };
+  }
+  return itemStyles;
+}