improve rendering of bar chart

4 files changed, 16 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/apps/account/components/IssueWidgets.js b/server/sonar-web/src/main/js/apps/account/components/IssueWidgets.js
index 8679486d1d6..cc828b572ce 100644
--- a/server/sonar-web/src/main/js/apps/account/components/IssueWidgets.js
+++ b/server/sonar-web/src/main/js/apps/account/components/IssueWidgets.js
@@ -136,7 +136,7 @@ export default class IssueWidgets extends Component {
               xTicks={xTicks}
               xValues={xValues}
               barsWidth={20}
-              padding={[25, 0, 25, 0]}
+              padding={[25, 10, 25, 10]}
               height={80}
               onBarClick={this.handleByDateClick.bind(this)}/>
         </section>
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 56781f4770f..daa9b8141bd 100644
--- 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
@@ -54,8 +54,8 @@ export const ComplexityDistribution = React.createClass({
                      xTicks={xTicks}
                      xValues={xValues}
                      height={HEIGHT}
-                     barsWidth={10}
-                     padding={[25, 0, 25, 0]}/>;
+                     barsWidth={20}
+                     padding={[25, 10, 25, 10]}/>;
   },
 
   render () {
diff --git a/server/sonar-web/src/main/js/components/charts/bar-chart.js b/server/sonar-web/src/main/js/components/charts/bar-chart.js
index c73405d370b..a2345491bc0 100644
--- a/server/sonar-web/src/main/js/components/charts/bar-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/bar-chart.js
@@ -30,7 +30,7 @@ export const BarChart = React.createClass({
     xValues: React.PropTypes.arrayOf(React.PropTypes.any),
     height: React.PropTypes.number,
     padding: React.PropTypes.arrayOf(React.PropTypes.number),
-    barsWidth: React.PropTypes.number,
+    barsWidth: React.PropTypes.number.isRequired,
     onBarClick: React.PropTypes.func
   },
 
@@ -40,8 +40,7 @@ export const BarChart = React.createClass({
     return {
       xTicks: [],
       xValues: [],
-      padding: [10, 10, 10, 10],
-      barsWidth: 40
+      padding: [10, 10, 10, 10]
     };
   },
 
@@ -59,7 +58,7 @@ export const BarChart = React.createClass({
     }
     let ticks = this.props.xTicks.map((tick, index) => {
       let point = this.props.data[index];
-      let x = Math.round(xScale(point.x) + xScale.rangeBand() / 2 + this.props.barsWidth / 2);
+      let x = Math.round(xScale(point.x) + xScale.rangeBand() / 2);
       let y = yScale.range()[0];
       let d = this.props.data[index];
       let tooltipAtts = {};
@@ -85,7 +84,7 @@ export const BarChart = React.createClass({
     }
     let ticks = this.props.xValues.map((value, index) => {
       let point = this.props.data[index];
-      let x = Math.round(xScale(point.x) + xScale.rangeBand() / 2 + this.props.barsWidth / 2);
+      let x = Math.round(xScale(point.x) + xScale.rangeBand() / 2);
       let y = yScale(point.y);
       let d = this.props.data[index];
       let tooltipAtts = {};
@@ -107,7 +106,7 @@ export const BarChart = React.createClass({
 
   renderBars (xScale, yScale) {
     let bars = this.props.data.map((d, index) => {
-      let x = Math.round(xScale(d.x) + xScale.rangeBand() / 2);
+      let x = Math.round(xScale(d.x));
       let maxY = yScale.range()[0];
       let y = Math.round(yScale(d.y)) - /* minimum bar height */ 1;
       let height = maxY - y;
@@ -137,10 +136,13 @@ export const BarChart = React.createClass({
     let availableWidth = this.state.width - this.props.padding[1] - this.props.padding[3];
     let availableHeight = this.state.height - this.props.padding[0] - this.props.padding[2];
 
+    const innerPadding = (availableWidth - this.props.barsWidth * this.props.data.length) / (this.props.data.length - 1);
+    const relativeInnerPadding = innerPadding / (innerPadding + this.props.barsWidth);
+
     let maxY = d3.max(this.props.data, d => d.y);
     let xScale = d3.scale.ordinal()
                    .domain(this.props.data.map(d => d.x))
-                   .rangeRoundBands([0, availableWidth]);
+                   .rangeBands([0, availableWidth], relativeInnerPadding, 0);
     let yScale = d3.scale.linear()
                    .domain([0, maxY])
                    .range([availableHeight, 0]);
diff --git a/server/sonar-web/tests/components/charts/bar-chart-test.js b/server/sonar-web/tests/components/charts/bar-chart-test.js
index 894d02a483e..e56497e4891 100644
--- a/server/sonar-web/tests/components/charts/bar-chart-test.js
+++ b/server/sonar-web/tests/components/charts/bar-chart-test.js
@@ -13,7 +13,7 @@ describe('Bar Chart', function () {
       { x: 2, y: 30 },
       { x: 3, y: 20 }
     ];
-    let chart = TestUtils.renderIntoDocument(<BarChart data={data} width={100} height={100}/>);
+    let chart = TestUtils.renderIntoDocument(<BarChart data={data} width={100} height={100} barsWidth={20}/>);
     expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-bar')).to.have.length(3);
   });
 
@@ -24,7 +24,7 @@ describe('Bar Chart', function () {
       { x: 3, y: 20 }
     ];
     const ticks = ['A', 'B', 'C'];
-    let chart = TestUtils.renderIntoDocument(<BarChart data={data} xTicks={ticks} width={100} height={100}/>);
+    let chart = TestUtils.renderIntoDocument(<BarChart data={data} xTicks={ticks} width={100} height={100} barsWidth={20}/>);
     expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-tick')).to.have.length(3);
   });
 
@@ -35,7 +35,7 @@ describe('Bar Chart', function () {
       { x: 3, y: 20 }
     ];
     const values = ['A', 'B', 'C'];
-    let chart = TestUtils.renderIntoDocument(<BarChart data={data} xValues={values} width={100} height={100}/>);
+    let chart = TestUtils.renderIntoDocument(<BarChart data={data} xValues={values} width={100} height={100} barsWidth={20}/>);
     expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-tick')).to.have.length(3);
   });
 
@@ -48,7 +48,7 @@ describe('Bar Chart', function () {
     const ticks = ['A', 'B', 'C'];
     const values = ['A', 'B', 'C'];
     let chart = TestUtils.renderIntoDocument(
-        <BarChart data={data} xTicks={ticks} xValues={values} width={100} height={100}/>);
+        <BarChart data={data} xTicks={ticks} xValues={values} width={100} height={100} barsWidth={20}/>);
     expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-bar')).to.have.length(3);
     expect(TestUtils.scryRenderedDOMComponentsWithClass(chart, 'bar-chart-tick')).to.have.length(6);
   });