]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-7065 Add tooltips for complexity distribution bars on the overview page
authorStas Vilchik <vilchiks@gmail.com>
Fri, 27 Nov 2015 15:26:47 +0000 (16:26 +0100)
committerStas Vilchik <vilchiks@gmail.com>
Fri, 27 Nov 2015 15:28:16 +0000 (16:28 +0100)
server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
server/sonar-web/src/main/js/apps/overview/domains/size-domain.js
server/sonar-web/src/main/js/components/charts/bar-chart.js
server/sonar-web/tests/apps/overview/components/complexity-distribution-test.js
sonar-core/src/main/resources/org/sonar/l10n/core.properties

index 390273da2e1d9339906a79477be637c5c61568cd..a32a6cca4c3619d0ec5661bf644f6e47ac82b9f2 100644 (file)
@@ -9,13 +9,21 @@ const HEIGHT = 80;
 
 export const ComplexityDistribution = React.createClass({
   propTypes: {
-    distribution: React.PropTypes.string.isRequired
+    distribution: React.PropTypes.string.isRequired,
+    of: React.PropTypes.string.isRequired
   },
 
   renderBarChart () {
     let data = this.props.distribution.split(';').map((point, index) => {
-      let tokens = point.split('=');
-      return { x: index, y: parseInt(tokens[1], 10), value: parseInt(tokens[0], 10) };
+      let tokens = point.split('='),
+          y = parseInt(tokens[1], 10),
+          value = parseInt(tokens[0], 10);
+      return {
+        x: index,
+        y: y,
+        value: value,
+        tooltip: window.tp(`overview.complexity_tooltip.${this.props.of}`, y, value)
+      };
     });
 
     let xTicks = data.map(point => point.value);
index ed309e8d7f4da655885ef8fe49b7b65a22df1622..a5e0f2e7fabbfdab76fa19a6a8382aa34b6f7b05 100644 (file)
@@ -116,10 +116,14 @@ export const SizeMain = React.createClass({
             <div className="overview-detailed-measures-list">
               <DetailedMeasure {...this.props} {...this.state} metric="complexity" type="INT"/>
               <DetailedMeasure {...this.props} {...this.state} metric="function_complexity" type="FLOAT">
-                <ComplexityDistribution distribution={this.state.measures['function_complexity_distribution']}/>
+                <ComplexityDistribution
+                    distribution={this.state.measures['function_complexity_distribution']}
+                    of="function"/>
               </DetailedMeasure>
               <DetailedMeasure {...this.props} {...this.state} metric="file_complexity" type="FLOAT">
-                <ComplexityDistribution distribution={this.state.measures['file_complexity_distribution']}/>
+                <ComplexityDistribution
+                    distribution={this.state.measures['file_complexity_distribution']}
+                    of="file"/>
               </DetailedMeasure>
               <DetailedMeasure {...this.props} {...this.state} metric="class_complexity" type="FLOAT"/>
               {this.renderOtherComplexityMeasures()}
index 7ce292921bc5276bed75caf4b8fd681f12e02379..7cd32a52c59afc7ca4a958958b2a6fcb1f3bb9e0 100644 (file)
@@ -61,7 +61,12 @@ export const BarChart = React.createClass({
       let maxY = yScale.range()[0];
       let y = Math.round(yScale(d.y)) - /* minimum bar height */ 1;
       let height = maxY - y;
-      return <rect key={index} className="bar-chart-bar"
+      let tooltipAtts = {};
+      if (d.tooltip) {
+        tooltipAtts['title'] = d.tooltip;
+        tooltipAtts['data-toggle'] = 'tooltip';
+      }
+      return <rect key={index} className="bar-chart-bar" {...tooltipAtts}
                    x={x} y={y} width={this.props.barsWidth} height={height}/>;
     });
     return <g>{bars}</g>;
index a79cdbf34bc1eb6c7bc30b56809ea12527162bdf..0033010e56283216cfade1ce97086d3d701c559c 100644 (file)
@@ -13,7 +13,7 @@ describe('ComplexityDistribution', function () {
 
   beforeEach(function () {
     let renderer = TestUtils.createRenderer();
-    renderer.render(<ComplexityDistribution distribution={DISTRIBUTION}/>);
+    renderer.render(<ComplexityDistribution distribution={DISTRIBUTION} of="function"/>);
     let output = renderer.getRenderOutput();
     let child = React.Children.only(output.props.children);
     props = child.props;
@@ -21,13 +21,13 @@ describe('ComplexityDistribution', function () {
 
   it('should pass right data', function () {
     expect(props.data).to.deep.equal([
-      { x: 0, y: 11950, value: 1 },
-      { x: 1, y: 86, value: 2 },
-      { x: 2, y: 77, value: 4 },
-      { x: 3, y: 43, value: 6 },
-      { x: 4, y: 17, value: 8 },
-      { x: 5, y: 12, value: 10 },
-      { x: 6, y: 3, value: 12 }
+      { x: 0, y: 11950, value: 1, tooltip: 'overview.complexity_tooltip.function.11950.1' },
+      { x: 1, y: 86, value: 2, tooltip: 'overview.complexity_tooltip.function.86.2' },
+      { x: 2, y: 77, value: 4, tooltip: 'overview.complexity_tooltip.function.77.4' },
+      { x: 3, y: 43, value: 6, tooltip: 'overview.complexity_tooltip.function.43.6' },
+      { x: 4, y: 17, value: 8, tooltip: 'overview.complexity_tooltip.function.17.8' },
+      { x: 5, y: 12, value: 10, tooltip: 'overview.complexity_tooltip.function.12.10' },
+      { x: 6, y: 3, value: 12, tooltip: 'overview.complexity_tooltip.function.3.12' }
     ]);
   });
 
index cd8c9af424af597f5d13b67b1288bd881434a8c5..9dca2e81f50b065775952bb9ebefa4876b60c620 100644 (file)
@@ -3146,6 +3146,9 @@ overview.chart.files=Files
 overview.chart.components=Components
 overview.chart.history=History
 
+overview.complexity_tooltip.function={0} functions have complexity around {1}
+overview.complexity_tooltip.file={0} files have complexity around {1}
+
 
 #------------------------------------------------------------------------------
 #