Peter Holmberg пре 7 година
родитељ
комит
8c5c953521

+ 1 - 1
packages/grafana-ui/src/components/Gauge/Gauge.tsx

@@ -175,7 +175,7 @@ export class Gauge extends PureComponent<Props> {
     return (
     return (
       <div
       <div
         style={{
         style={{
-          height: `${height * 0.9}px`,
+          height: `${Math.min(height, width * 1.3)}px`,
           width: `${Math.min(width, height * 1.3)}px`,
           width: `${Math.min(width, height * 1.3)}px`,
           top: '10px',
           top: '10px',
           margin: 'auto',
           margin: 'auto',

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

@@ -43,12 +43,12 @@ export class VizRepeater extends PureComponent<Props> {
     let vizWidth = width;
     let vizWidth = width;
     let vizHeight = height;
     let vizHeight = height;
 
 
-    if (orientation === 'horizontal' || width > height) {
+    if ((orientation && orientation === 'horizontal') || width > height) {
       vizContainerStyle = horizontalVisualization;
       vizContainerStyle = horizontalVisualization;
       vizWidth = repeatingVizWidth;
       vizWidth = repeatingVizWidth;
     }
     }
 
 
-    if (orientation === 'vertical' || height > width) {
+    if ((orientation && orientation === 'vertical') || height > width) {
       vizContainerStyle = verticalVisualization;
       vizContainerStyle = verticalVisualization;
       vizHeight = repeatingVizHeight;
       vizHeight = repeatingVizHeight;
     }
     }

+ 3 - 3
public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -45,14 +45,14 @@ export class GaugePanel extends PureComponent<Props> {
     const { options, width, height } = this.props;
     const { options, width, height } = this.props;
     const value = timeSeries[0].stats[options.valueOptions.stat];
     const value = timeSeries[0].stats[options.valueOptions.stat];
 
 
-    return <div className="singlestat-panel">{this.renderGauge(value, width, height)}</div>;
+    return <div style={{ display: 'flex' }}>{this.renderGauge(value, width, height)}</div>;
   }
   }
 
 
   renderGaugeWithTableData(panelData) {
   renderGaugeWithTableData(panelData) {
     const { width, height } = this.props;
     const { width, height } = this.props;
     const firstTableDataValue = panelData.tableData.rows[0].find(prop => prop > 0);
     const firstTableDataValue = panelData.tableData.rows[0].find(prop => prop > 0);
 
 
-    return <div className="singlestat-panel">{this.renderGauge(firstTableDataValue, width, height)}</div>;
+    return <div style={{ display: 'flex' }}>{this.renderGauge(firstTableDataValue, width, height)}</div>;
   }
   }
 
 
   render() {
   render() {
@@ -73,7 +73,7 @@ export class GaugePanel extends PureComponent<Props> {
                 const value = stat !== 'name' ? series.stats[stat] : series.label;
                 const value = stat !== 'name' ? series.stats[stat] : series.label;
 
 
                 return (
                 return (
-                  <div className="singlestat-panel" key={`${series.label}-${index}`} style={vizContainerStyle}>
+                  <div key={`${series.label}-${index}`} style={Object.assign(vizContainerStyle, { display: 'flex' })}>
                     {this.renderGauge(value, vizWidth, vizHeight)}
                     {this.renderGauge(value, vizWidth, vizHeight)}
                   </div>
                   </div>
                 );
                 );