fix widgets resizing on the overview page

diff --git a/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
index daa9b8141bdf1f83cd4f8220ea5a2664104a9d39..a60be02070f20aad13056498b45f3ab60e87ed6c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
@@ -59,7 +59,7 @@ export const ComplexityDistribution = React.createClass({
   },
 
   render () {
-    return <div className="overview-bar-chart">
+    return <div className="overview-bar-chart" style={{ height: HEIGHT }}>
       {this.renderBarChart()}
     </div>;
   }

diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js b/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
index 6554987adf68898c60ff4a8806f629e42487feb4..ddc46fb99ed010f65884e02a1a60b7a12cdf9829 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
@@ -154,7 +154,7 @@ export class DomainBubbleChart extends React.Component {
           </li>
         </ul>
       </div>
-      <div className="overview-bubble-chart">
+      <div className="overview-bubble-chart" style={{ height: HEIGHT }}>
         <div className="note" style={{ position: 'relative', top: '10px', left: '10px' }}>
           {this.state.yMetric.name}
         </div>

diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js b/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
index 269389b22d228a1f1f3243d6114fbcd03d886cac..fe497ecb38969c0707502688b2886add3ec08108 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
@@ -151,7 +151,7 @@ export const DomainTimeline = React.createClass({
     let formatValue = (value) => formatMeasure(value, metricType);
     let formatYTick = (tick) => formatMeasure(tick, getShortType(metricType));
 
-    return <div className={'overview-timeline-' + index}>
+    return <div className={'overview-timeline-' + index} style={{ height: HEIGHT }}>
       <Timeline key={metric}
                 data={data}
                 metricType={metricType}

diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-treemap.js b/server/sonar-web/src/main/js/apps/overview/components/domain-treemap.js
index 3ea605187df70204d419cc2b54792d3c78d87a4c..635c0cb41e616d04275cdd94884bdb524d17bc0e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/domain-treemap.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/domain-treemap.js
@@ -155,7 +155,7 @@ export class DomainTreemap extends React.Component {
           {color}
         </ul>
       </div>
-      <div className="overview-treemap">
+      <div className="overview-treemap" style={{ height: HEIGHT }}>
         {this.renderTreemap()}
       </div>
     </div>;

diff --git a/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
index 51b316800744b938603d1a75477ea5813a5d30c1..01685ca3de0c8f6a9f7fbdb9648a63495b771658 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
@@ -74,7 +74,10 @@ export const LanguageDistribution = React.createClass({
   },
 
   render () {
-    return <div className="overview-bar-chart">
+    const count = this.props.distribution.split(';').length;
+    const height = count * 25;
+
+    return <div className="overview-bar-chart" style={{ height }}>
       {this.renderBarChart()}
     </div>;
   }

diff --git a/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
index dfe8cff2dbc726d92da0cb342a8432a2f81fc701..3be2cab002baeb382764acf3de2583501eaf56f5 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
@@ -111,7 +111,7 @@ export const NclocDistribution = React.createClass({
           {translateWithParameters('overview.chart.legend.size_x', translate('metric.ncloc.name'))}
         </span>
       </div>
-      <div className="overview-bar-chart">
+      <div className="overview-bar-chart" style={{ height: HEIGHT }}>
         {this.renderBarChart()}
       </div>
     </div>;

diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index 64e16df4a2c5b0127b0cc308a8674304a1f55076..35a9a7c7a02a4b083cc5565a967a87d0810a96b2 100644 (file)
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -419,6 +419,10 @@
   padding-top: 10px;
   padding-bottom: 15px;
 
+  svg {
+    position: absolute;
+  }
+
   .bar-chart-bar {
     fill: @blue;
   }
@@ -444,6 +448,10 @@
   box-sizing: border-box;
   background-color: #fff;
 
+  svg {
+    position: absolute;
+  }
+
   .line-chart-path {
     fill: none;
     stroke: @blue;
@@ -523,6 +531,9 @@
 }
 
 .overview-treemap {
+  & > div {
+    position: absolute;
+  }
 }
 
 .overview-chart-placeholder {
@@ -534,9 +545,12 @@
 .overview-bubble-chart {
   padding: 10px;
   border: 1px solid @barBorderColor;
-  box-sizing: border-box;
   background-color: #fff;
 
+  svg {
+    position: absolute;
+  }
+
   .bubble-chart-bubble {
     fill: @blue;
     fill-opacity: 0.2;