format code using prettier (#1774)

15 files changed, 499 insertions, 588 deletions

diff --git a/server/sonar-web/src/main/js/components/charts/LanguageDistribution.js b/server/sonar-web/src/main/js/components/charts/LanguageDistribution.js
index fe99958cbff..6713668693a 100644
--- a/server/sonar-web/src/main/js/components/charts/LanguageDistribution.js
+++ b/server/sonar-web/src/main/js/components/charts/LanguageDistribution.js
@@ -33,20 +33,20 @@ export default class LanguageDistribution extends React.Component {
 
   state = {};
 
-  componentDidMount () {
+  componentDidMount() {
     this.mounted = true;
     this.requestLanguages();
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return shallowCompare(this, nextProps, nextState);
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.mounted = false;
   }
 
-  requestLanguages () {
+  requestLanguages() {
     getLanguages().then(languages => {
       if (this.mounted) {
         this.setState({ languages });
@@ -54,7 +54,7 @@ export default class LanguageDistribution extends React.Component {
     });
   }
 
-  getLanguageName (langKey) {
+  getLanguageName(langKey) {
     if (this.state.languages) {
       const lang = find(this.state.languages, { key: langKey });
       return lang ? lang.name : translate('unknown');
@@ -63,32 +63,30 @@ export default class LanguageDistribution extends React.Component {
     }
   }
 
-  cutLanguageName (name) {
+  cutLanguageName(name) {
     return name.length > 10 ? `${name.substr(0, 7)}...` : name;
   }
 
-  render () {
-    let data = this.props.distribution.split(';')
-        .map((point, index) => {
-          const tokens = point.split('=');
-          return { x: parseInt(tokens[1], 10), y: index, value: tokens[0] };
-        });
+  render() {
+    let data = this.props.distribution.split(';').map((point, index) => {
+      const tokens = point.split('=');
+      return { x: parseInt(tokens[1], 10), y: index, value: tokens[0] };
+    });
 
     data = sortBy(data, d => -d.x);
 
-    const yTicks = data
-        .map(point => this.getLanguageName(point.value))
-        .map(this.cutLanguageName);
+    const yTicks = data.map(point => this.getLanguageName(point.value)).map(this.cutLanguageName);
     const yValues = data.map(point => formatMeasure(point.x, 'SHORT_INT'));
 
     return (
-        <Histogram
-            data={data}
-            yTicks={yTicks}
-            yValues={yValues}
-            barsWidth={10}
-            height={data.length * 25}
-            padding={[0, 60, 0, 80]}/>
+      <Histogram
+        data={data}
+        yTicks={yTicks}
+        yValues={yValues}
+        barsWidth={10}
+        height={data.length * 25}
+        padding={[0, 60, 0, 80]}
+      />
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/components/charts/Timeline.js b/server/sonar-web/src/main/js/components/charts/Timeline.js
index 7b45ee2cf4f..26b8db6ce45 100644
--- a/server/sonar-web/src/main/js/components/charts/Timeline.js
+++ b/server/sonar-web/src/main/js/components/charts/Timeline.js
@@ -34,54 +34,51 @@ const Timeline = React.createClass({
 
   mixins: [ResizeMixin, TooltipsMixin],
 
-  getDefaultProps () {
+  getDefaultProps() {
     return {
       padding: [10, 10, 10, 10],
       interpolate: 'basis'
     };
   },
 
-  getInitialState () {
+  getInitialState() {
     return {
       width: this.props.width,
       height: this.props.height
     };
   },
 
-  getRatingScale (availableHeight) {
-    return d3.scale.ordinal()
-        .domain([5, 4, 3, 2, 1])
-        .rangePoints([availableHeight, 0]);
+  getRatingScale(availableHeight) {
+    return d3.scale.ordinal().domain([5, 4, 3, 2, 1]).rangePoints([availableHeight, 0]);
   },
 
-  getLevelScale (availableHeight) {
-    return d3.scale.ordinal()
-        .domain(['ERROR', 'WARN', 'OK'])
-        .rangePoints([availableHeight, 0]);
+  getLevelScale(availableHeight) {
+    return d3.scale.ordinal().domain(['ERROR', 'WARN', 'OK']).rangePoints([availableHeight, 0]);
   },
 
-  getYScale (availableHeight) {
+  getYScale(availableHeight) {
     if (this.props.metricType === 'RATING') {
       return this.getRatingScale(availableHeight);
     } else if (this.props.metricType === 'LEVEL') {
       return this.getLevelScale(availableHeight);
     } else {
-      return d3.scale.linear()
-          .range([availableHeight, 0])
-          .domain([0, d3.max(this.props.data, d => d.y || 0)])
-          .nice();
+      return d3.scale
+        .linear()
+        .range([availableHeight, 0])
+        .domain([0, d3.max(this.props.data, d => d.y || 0)])
+        .nice();
     }
   },
 
-  handleEventMouseEnter (event) {
+  handleEventMouseEnter(event) {
     $(`.js-event-circle-${event.date.getTime()}`).tooltip('show');
   },
 
-  handleEventMouseLeave (event) {
+  handleEventMouseLeave(event) {
     $(`.js-event-circle-${event.date.getTime()}`).tooltip('hide');
   },
 
-  renderHorizontalGrid (xScale, yScale) {
+  renderHorizontalGrid(xScale, yScale) {
     const hasTicks = typeof yScale.ticks === 'function';
     const ticks = hasTicks ? yScale.ticks(4) : yScale.domain();
 
@@ -96,22 +93,31 @@ const Timeline = React.createClass({
       };
 
       return (
-          <g key={tick}>
-            <text className="line-chart-tick line-chart-tick-x" dx="-1em" dy="0.3em"
-                  textAnchor="end" {...opts}>{this.props.formatYTick(tick)}</text>
-            <line className="line-chart-grid"
-                  x1={xScale.range()[0]}
-                  x2={xScale.range()[1]}
-                  y1={yScale(tick)}
-                  y2={yScale(tick)}/>
-          </g>
+        <g key={tick}>
+          <text
+            className="line-chart-tick line-chart-tick-x"
+            dx="-1em"
+            dy="0.3em"
+            textAnchor="end"
+            {...opts}
+          >
+            {this.props.formatYTick(tick)}
+          </text>
+          <line
+            className="line-chart-grid"
+            x1={xScale.range()[0]}
+            x2={xScale.range()[1]}
+            y1={yScale(tick)}
+            y2={yScale(tick)}
+          />
+        </g>
       );
     });
 
     return <g>{grid}</g>;
   },
 
-  renderTicks (xScale, yScale) {
+  renderTicks(xScale, yScale) {
     const format = xScale.tickFormat(7);
     let ticks = xScale.ticks(7);
 
@@ -121,21 +127,16 @@ const Timeline = React.createClass({
       const y = yScale.range()[0];
 
       return (
-          <text
-              key={index}
-              className="line-chart-tick"
-              x={x}
-              y={y}
-              dy="1.5em">
-            {format(tick)}
-          </text>
+        <text key={index} className="line-chart-tick" x={x} y={y} dy="1.5em">
+          {format(tick)}
+        </text>
       );
     });
 
     return <g>{ticks}</g>;
   },
 
-  renderLeak (xScale, yScale) {
+  renderLeak(xScale, yScale) {
     if (!this.props.leakPeriodDate) {
       return null;
     }
@@ -149,76 +150,73 @@ const Timeline = React.createClass({
       fill: '#fbf3d5'
     };
 
-    return <rect {...opts}/>;
+    return <rect {...opts} />;
   },
 
-  renderLine (xScale, yScale) {
-    const p = d3.svg.line()
-        .x(d => xScale(d.x))
-        .y(d => yScale(d.y))
-        .interpolate(this.props.interpolate);
+  renderLine(xScale, yScale) {
+    const p = d3.svg
+      .line()
+      .x(d => xScale(d.x))
+      .y(d => yScale(d.y))
+      .interpolate(this.props.interpolate);
 
-    return <path className="line-chart-path" d={p(this.props.data)}/>;
+    return <path className="line-chart-path" d={p(this.props.data)} />;
   },
 
-  renderEvents (xScale, yScale) {
+  renderEvents(xScale, yScale) {
     const points = this.props.events
-        .map(event => {
-          const snapshot = this.props.data.find(d => d.x.getTime() === event.date.getTime());
-          return { ...event, snapshot };
-        })
-        .filter(event => event.snapshot)
-        .map(event => {
-          const key = `${event.date.getTime()}-${event.snapshot.y}`;
-          const className = `line-chart-point js-event-circle-${event.date.getTime()}`;
-          const tooltip = [
-            `<span class="nowrap">${event.version}</span>`,
-            `<span class="nowrap">${moment(event.date).format('LL')}</span>`,
-            `<span class="nowrap">${event.snapshot.y ? this.props.formatValue(event.snapshot.y) : '—'}</span>`
-          ].join('<br>');
-
-          return (
-              <circle key={key}
-                      className={className}
-                      r="4"
-                      cx={xScale(event.snapshot.x)}
-                      cy={yScale(event.snapshot.y)}
-                      onMouseEnter={this.handleEventMouseEnter.bind(this, event)}
-                      onMouseLeave={this.handleEventMouseLeave.bind(this, event)}
-                      data-toggle="tooltip"
-                      data-title={tooltip}/>
-          );
-        });
-
+      .map(event => {
+        const snapshot = this.props.data.find(d => d.x.getTime() === event.date.getTime());
+        return { ...event, snapshot };
+      })
+      .filter(event => event.snapshot)
+      .map(event => {
+        const key = `${event.date.getTime()}-${event.snapshot.y}`;
+        const className = `line-chart-point js-event-circle-${event.date.getTime()}`;
+        const tooltip = [
+          `<span class="nowrap">${event.version}</span>`,
+          `<span class="nowrap">${moment(event.date).format('LL')}</span>`,
+          `<span class="nowrap">${event.snapshot.y ? this.props.formatValue(event.snapshot.y) : '—'}</span>`
+        ].join('<br>');
+        return (
+          <circle
+            key={key}
+            className={className}
+            r="4"
+            cx={xScale(event.snapshot.x)}
+            cy={yScale(event.snapshot.y)}
+            onMouseEnter={this.handleEventMouseEnter.bind(this, event)}
+            onMouseLeave={this.handleEventMouseLeave.bind(this, event)}
+            data-toggle="tooltip"
+            data-title={tooltip}
+          />
+        );
+      });
     return <g>{points}</g>;
   },
-
-  render () {
+  render() {
     if (!this.state.width || !this.state.height) {
-      return <div/>;
+      return <div />;
     }
-
     const availableWidth = this.state.width - this.props.padding[1] - this.props.padding[3];
     const availableHeight = this.state.height - this.props.padding[0] - this.props.padding[2];
-
-    const xScale = d3.time.scale()
-        .domain(d3.extent(this.props.data, d => d.x || 0))
-        .range([0, availableWidth])
-        .clamp(true);
+    const xScale = d3.time
+      .scale()
+      .domain(d3.extent(this.props.data, d => d.x || 0))
+      .range([0, availableWidth])
+      .clamp(true);
     const yScale = this.getYScale(availableHeight);
-
     return (
-        <svg className="line-chart" width={this.state.width} height={this.state.height}>
-          <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
-            {this.renderLeak(xScale, yScale)}
-            {this.renderHorizontalGrid(xScale, yScale)}
-            {this.renderTicks(xScale, yScale)}
-            {this.renderLine(xScale, yScale)}
-            {this.renderEvents(xScale, yScale)}
-          </g>
-        </svg>
+      <svg className="line-chart" width={this.state.width} height={this.state.height}>
+        <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
+          {this.renderLeak(xScale, yScale)}
+          {this.renderHorizontalGrid(xScale, yScale)}
+          {this.renderTicks(xScale, yScale)}
+          {this.renderLine(xScale, yScale)}
+          {this.renderEvents(xScale, yScale)}
+        </g>
+      </svg>
     );
   }
 });
-
 export default Timeline;
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/bar-chart-test.js b/server/sonar-web/src/main/js/components/charts/__tests__/bar-chart-test.js
index 377e3b34e4a..c0361a5b3a7 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/bar-chart-test.js
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/bar-chart-test.js
@@ -22,70 +22,36 @@ import { shallow } from 'enzyme';
 import { BarChart } from '../bar-chart';
 
 it('should display bars', () => {
-  const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
-  ];
-  const chart = shallow(
-    <BarChart
-          data={data}
-          width={100}
-          height={100}
-          barsWidth={20}/>);
+  const data = [{ x: 1, y: 10 }, { x: 2, y: 30 }, { x: 3, y: 20 }];
+  const chart = shallow(<BarChart data={data} width={100} height={100} barsWidth={20} />);
   expect(chart.find('.bar-chart-bar').length).toBe(3);
 });
 
 it('should display ticks', () => {
-  const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
-  ];
+  const data = [{ x: 1, y: 10 }, { x: 2, y: 30 }, { x: 3, y: 20 }];
   const ticks = ['A', 'B', 'C'];
   const chart = shallow(
-    <BarChart
-          data={data}
-          xTicks={ticks}
-          width={100}
-          height={100}
-          barsWidth={20}/>);
+    <BarChart data={data} xTicks={ticks} width={100} height={100} barsWidth={20} />
+  );
   expect(chart.find('.bar-chart-tick').length).toBe(3);
 });
 
 it('should display values', () => {
-  const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
-  ];
+  const data = [{ x: 1, y: 10 }, { x: 2, y: 30 }, { x: 3, y: 20 }];
   const values = ['A', 'B', 'C'];
   const chart = shallow(
-    <BarChart
-          data={data}
-          xValues={values}
-          width={100}
-          height={100}
-          barsWidth={20}/>);
+    <BarChart data={data} xValues={values} width={100} height={100} barsWidth={20} />
+  );
   expect(chart.find('.bar-chart-tick').length).toBe(3);
 });
 
 it('should display bars, ticks and values', () => {
-  const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
-  ];
+  const data = [{ x: 1, y: 10 }, { x: 2, y: 30 }, { x: 3, y: 20 }];
   const ticks = ['A', 'B', 'C'];
   const values = ['A', 'B', 'C'];
   const chart = shallow(
-    <BarChart
-          data={data}
-          xTicks={ticks}
-          xValues={values}
-          width={100}
-          height={100}
-          barsWidth={20}/>);
+    <BarChart data={data} xTicks={ticks} xValues={values} width={100} height={100} barsWidth={20} />
+  );
   expect(chart.find('.bar-chart-bar').length).toBe(3);
   expect(chart.find('.bar-chart-tick').length).toBe(6);
 });
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/bubble-chart-test.js b/server/sonar-web/src/main/js/components/charts/__tests__/bubble-chart-test.js
index 39b6f90a692..c9d2dd18d44 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/bubble-chart-test.js
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/bubble-chart-test.js
@@ -22,31 +22,19 @@ import { shallow } from 'enzyme';
 import { BubbleChart, Bubble } from '../bubble-chart';
 
 it('should display bubbles', () => {
-  const items = [
-    { x: 1, y: 10, size: 7 },
-    { x: 2, y: 30, size: 5 },
-    { x: 3, y: 20, size: 2 }
-  ];
-  const chart = shallow(<BubbleChart items={items} width={100} height={100}/>);
+  const items = [{ x: 1, y: 10, size: 7 }, { x: 2, y: 30, size: 5 }, { x: 3, y: 20, size: 2 }];
+  const chart = shallow(<BubbleChart items={items} width={100} height={100} />);
   expect(chart.find(Bubble).length).toBe(3);
 });
 
 it('should display grid', () => {
-  const items = [
-    { x: 1, y: 10, size: 7 },
-    { x: 2, y: 30, size: 5 },
-    { x: 3, y: 20, size: 2 }
-  ];
-  const chart = shallow(<BubbleChart items={items} width={100} height={100}/>);
+  const items = [{ x: 1, y: 10, size: 7 }, { x: 2, y: 30, size: 5 }, { x: 3, y: 20, size: 2 }];
+  const chart = shallow(<BubbleChart items={items} width={100} height={100} />);
   expect(chart.find('line').length).toBeGreaterThan(0);
 });
 
 it('should display ticks', () => {
-  const items = [
-    { x: 1, y: 10, size: 7 },
-    { x: 2, y: 30, size: 5 },
-    { x: 3, y: 20, size: 2 }
-  ];
-  const chart = shallow(<BubbleChart items={items} width={100} height={100}/>);
+  const items = [{ x: 1, y: 10, size: 7 }, { x: 2, y: 30, size: 5 }, { x: 3, y: 20, size: 2 }];
+  const chart = shallow(<BubbleChart items={items} width={100} height={100} />);
   expect(chart.find('.bubble-chart-tick').length).toBeGreaterThan(0);
 });
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/line-chart-test.js b/server/sonar-web/src/main/js/components/charts/__tests__/line-chart-test.js
index 566b1eb833d..dbe026b232a 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/line-chart-test.js
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/line-chart-test.js
@@ -22,43 +22,21 @@ import { shallow } from 'enzyme';
 import { LineChart } from '../line-chart';
 
 it('should display line', () => {
-  const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
-  ];
-  const chart = shallow(<LineChart data={data} width={100} height={100}/>);
+  const data = [{ x: 1, y: 10 }, { x: 2, y: 30 }, { x: 3, y: 20 }];
+  const chart = shallow(<LineChart data={data} width={100} height={100} />);
   expect(chart.find('.line-chart-path').length).toBe(1);
 });
 
 it('should display ticks', () => {
-  const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
-  ];
+  const data = [{ x: 1, y: 10 }, { x: 2, y: 30 }, { x: 3, y: 20 }];
   const ticks = ['A', 'B', 'C'];
-  const chart = shallow(
-    <LineChart
-          data={data}
-          xTicks={ticks}
-          width={100}
-          height={100}/>);
+  const chart = shallow(<LineChart data={data} xTicks={ticks} width={100} height={100} />);
   expect(chart.find('.line-chart-tick').length).toBe(3);
 });
 
 it('should display values', () => {
-  const data = [
-    { x: 1, y: 10 },
-    { x: 2, y: 30 },
-    { x: 3, y: 20 }
-  ];
+  const data = [{ x: 1, y: 10 }, { x: 2, y: 30 }, { x: 3, y: 20 }];
   const values = ['A', 'B', 'C'];
-  const chart = shallow(
-    <LineChart
-          data={data}
-          xValues={values}
-          width={100}
-          height={100}/>);
+  const chart = shallow(<LineChart data={data} xValues={values} width={100} height={100} />);
   expect(chart.find('.line-chart-tick').length).toBe(3);
 });
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/treemap-test.js b/server/sonar-web/src/main/js/components/charts/__tests__/treemap-test.js
index 453bba4daee..dea905a78f8 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/treemap-test.js
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/treemap-test.js
@@ -28,11 +28,7 @@ it('should display', () => {
     { size: 20, color: '#777', label: 'SonarQube :: Search' }
   ];
   const chart = shallow(
-    <Treemap
-          items={items}
-          width={100}
-          height={100}
-          breadcrumbs={[]}
-          canBeClicked={() => true}/>);
+    <Treemap items={items} width={100} height={100} breadcrumbs={[]} canBeClicked={() => true} />
+  );
   expect(chart.find(TreemapRect).length).toBe(3);
 });
diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/work-cloud-test.js b/server/sonar-web/src/main/js/components/charts/__tests__/work-cloud-test.js
index 36bc18c932e..71bbfbc9dff 100644
--- a/server/sonar-web/src/main/js/components/charts/__tests__/work-cloud-test.js
+++ b/server/sonar-web/src/main/js/components/charts/__tests__/work-cloud-test.js
@@ -27,6 +27,6 @@ it('should display', () => {
     { size: 30, link: '#', text: 'SonarQube :: Web' },
     { size: 20, link: '#', text: 'SonarQube :: Search' }
   ];
-  const chart = shallow(<WordCloud items={items} width={100} height={100}/>);
+  const chart = shallow(<WordCloud items={items} width={100} height={100} />);
   expect(chart.find(Word).length).toBe(3);
 });
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 fb7082d96df..af5b42cf108 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
@@ -35,7 +35,7 @@ export const BarChart = React.createClass({
 
   mixins: [ResizeMixin, TooltipsMixin],
 
-  getDefaultProps () {
+  getDefaultProps() {
     return {
       xTicks: [],
       xValues: [],
@@ -43,15 +43,15 @@ export const BarChart = React.createClass({
     };
   },
 
-  getInitialState () {
+  getInitialState() {
     return { width: this.props.width, height: this.props.height };
   },
 
-  handleClick (point) {
+  handleClick(point) {
     this.props.onBarClick(point);
   },
 
-  renderXTicks (xScale, yScale) {
+  renderXTicks(xScale, yScale) {
     if (!this.props.xTicks.length) {
       return null;
     }
@@ -66,23 +66,24 @@ export const BarChart = React.createClass({
         tooltipAtts['data-toggle'] = 'tooltip';
       }
       return (
-          <text
-              key={index}
-              className="bar-chart-tick"
-              x={x}
-              y={y}
-              dy="1.5em"
-              onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
-              style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
-              {...tooltipAtts}>
-            {tick}
-          </text>
+        <text
+          key={index}
+          className="bar-chart-tick"
+          x={x}
+          y={y}
+          dy="1.5em"
+          onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
+          style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+          {...tooltipAtts}
+        >
+          {tick}
+        </text>
       );
     });
     return <g>{ticks}</g>;
   },
 
-  renderXValues (xScale, yScale) {
+  renderXValues(xScale, yScale) {
     if (!this.props.xValues.length) {
       return null;
     }
@@ -97,23 +98,24 @@ export const BarChart = React.createClass({
         tooltipAtts['data-toggle'] = 'tooltip';
       }
       return (
-          <text
-              key={index}
-              className="bar-chart-tick"
-              x={x}
-              y={y}
-              dy="-1em"
-              onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
-              style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
-              {...tooltipAtts}>
-            {value}
-          </text>
+        <text
+          key={index}
+          className="bar-chart-tick"
+          x={x}
+          y={y}
+          dy="-1em"
+          onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
+          style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+          {...tooltipAtts}
+        >
+          {value}
+        </text>
       );
     });
     return <g>{ticks}</g>;
   },
 
-  renderBars (xScale, yScale) {
+  renderBars(xScale, yScale) {
     const bars = this.props.data.map((d, index) => {
       const x = Math.round(xScale(d.x));
       const maxY = yScale.range()[0];
@@ -125,49 +127,49 @@ export const BarChart = React.createClass({
         tooltipAtts['data-toggle'] = 'tooltip';
       }
       return (
-          <rect
-              key={index}
-              className="bar-chart-bar"
-              {...tooltipAtts}
-              x={x}
-              y={y}
-              width={this.props.barsWidth}
-              height={height}
-              onClick={this.props.onBarClick && this.handleClick.bind(this, d)}
-              style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}/>
+        <rect
+          key={index}
+          className="bar-chart-bar"
+          {...tooltipAtts}
+          x={x}
+          y={y}
+          width={this.props.barsWidth}
+          height={height}
+          onClick={this.props.onBarClick && this.handleClick.bind(this, d)}
+          style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+        />
       );
     });
     return <g>{bars}</g>;
   },
 
-  render () {
+  render() {
     if (!this.state.width || !this.state.height) {
-      return <div/>;
+      return <div />;
     }
 
     const availableWidth = this.state.width - this.props.padding[1] - this.props.padding[3];
     const 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);
+      (this.props.data.length - 1);
     const relativeInnerPadding = innerPadding / (innerPadding + this.props.barsWidth);
 
     const maxY = d3.max(this.props.data, d => d.y);
-    const xScale = d3.scale.ordinal()
-        .domain(this.props.data.map(d => d.x))
-        .rangeBands([0, availableWidth], relativeInnerPadding, 0);
-    const yScale = d3.scale.linear()
-        .domain([0, maxY])
-        .range([availableHeight, 0]);
+    const xScale = d3.scale
+      .ordinal()
+      .domain(this.props.data.map(d => d.x))
+      .rangeBands([0, availableWidth], relativeInnerPadding, 0);
+    const yScale = d3.scale.linear().domain([0, maxY]).range([availableHeight, 0]);
 
     return (
-        <svg className="bar-chart" width={this.state.width} height={this.state.height}>
-          <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
-            {this.renderXTicks(xScale, yScale)}
-            {this.renderXValues(xScale, yScale)}
-            {this.renderBars(xScale, yScale)}
-          </g>
-        </svg>
+      <svg className="bar-chart" width={this.state.width} height={this.state.height}>
+        <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
+          {this.renderXTicks(xScale, yScale)}
+          {this.renderXValues(xScale, yScale)}
+          {this.renderBars(xScale, yScale)}
+        </g>
+      </svg>
     );
   }
 });
diff --git a/server/sonar-web/src/main/js/components/charts/bubble-chart.js b/server/sonar-web/src/main/js/components/charts/bubble-chart.js
index 74c029872b7..1ecd181f54a 100644
--- a/server/sonar-web/src/main/js/components/charts/bubble-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/bubble-chart.js
@@ -35,13 +35,13 @@ export const Bubble = React.createClass({
     link: React.PropTypes.any
   },
 
-  handleClick () {
+  handleClick() {
     if (this.props.onClick) {
       this.props.onClick(this.props.link);
     }
   },
 
-  render () {
+  render() {
     let tooltipAttrs = {};
     if (this.props.tooltip) {
       tooltipAttrs = {
@@ -50,9 +50,13 @@ export const Bubble = React.createClass({
       };
     }
     return (
-        <circle onClick={this.handleClick} className="bubble-chart-bubble"
-                r={this.props.r} {...tooltipAttrs}
-                transform={`translate(${this.props.x}, ${this.props.y})`}/>
+      <circle
+        onClick={this.handleClick}
+        className="bubble-chart-bubble"
+        r={this.props.r}
+        {...tooltipAttrs}
+        transform={`translate(${this.props.x}, ${this.props.y})`}
+      />
     );
   }
 });
@@ -74,7 +78,7 @@ export const BubbleChart = React.createClass({
 
   mixins: [ResizeMixin, TooltipsMixin],
 
-  getDefaultProps () {
+  getDefaultProps() {
     return {
       sizeRange: [5, 45],
       displayXGrid: true,
@@ -87,11 +91,11 @@ export const BubbleChart = React.createClass({
     };
   },
 
-  getInitialState () {
+  getInitialState() {
     return { width: this.props.width, height: this.props.height };
   },
 
-  getXRange (xScale, sizeScale, availableWidth) {
+  getXRange(xScale, sizeScale, availableWidth) {
     const minX = d3.min(this.props.items, d => xScale(d.x) - sizeScale(d.size));
     const maxX = d3.max(this.props.items, d => xScale(d.x) + sizeScale(d.size));
     const dMinX = minX < 0 ? xScale.range()[0] - minX : xScale.range()[0];
@@ -99,7 +103,7 @@ export const BubbleChart = React.createClass({
     return [dMinX, availableWidth - dMaxX];
   },
 
-  getYRange (yScale, sizeScale, availableHeight) {
+  getYRange(yScale, sizeScale, availableHeight) {
     const minY = d3.min(this.props.items, d => yScale(d.y) - sizeScale(d.size));
     const maxY = d3.max(this.props.items, d => yScale(d.y) + sizeScale(d.size));
     const dMinY = minY < 0 ? yScale.range()[1] - minY : yScale.range()[1];
@@ -107,14 +111,14 @@ export const BubbleChart = React.createClass({
     return [availableHeight - dMaxY, dMinY];
   },
 
-  getTicks (scale, format) {
+  getTicks(scale, format) {
     const ticks = scale.ticks(TICKS_COUNT).map(tick => format(tick));
     const uniqueTicksCount = uniq(ticks).length;
     const ticksCount = uniqueTicksCount < TICKS_COUNT ? uniqueTicksCount - 1 : TICKS_COUNT;
     return scale.ticks(ticksCount);
   },
 
-  renderXGrid (ticks, xScale, yScale) {
+  renderXGrid(ticks, xScale, yScale) {
     if (!this.props.displayXGrid) {
       return null;
     }
@@ -123,21 +127,13 @@ export const BubbleChart = React.createClass({
       const x = xScale(tick);
       const y1 = yScale.range()[0];
       const y2 = yScale.range()[1];
-      return (
-          <line
-              key={index}
-              x1={x}
-              x2={x}
-              y1={y1}
-              y2={y2}
-              className="bubble-chart-grid"/>
-      );
+      return <line key={index} x1={x} x2={x} y1={y1} y2={y2} className="bubble-chart-grid" />;
     });
 
     return <g ref="xGrid">{lines}</g>;
   },
 
-  renderYGrid (ticks, xScale, yScale) {
+  renderYGrid(ticks, xScale, yScale) {
     if (!this.props.displayYGrid) {
       return null;
     }
@@ -146,21 +142,13 @@ export const BubbleChart = React.createClass({
       const y = yScale(tick);
       const x1 = xScale.range()[0];
       const x2 = xScale.range()[1];
-      return (
-          <line
-              key={index}
-              x1={x1}
-              x2={x2}
-              y1={y}
-              y2={y}
-              className="bubble-chart-grid"/>
-      );
+      return <line key={index} x1={x1} x2={x2} y1={y} y2={y} className="bubble-chart-grid" />;
     });
 
     return <g ref="yGrid">{lines}</g>;
   },
 
-  renderXTicks (xTicks, xScale, yScale) {
+  renderXTicks(xTicks, xScale, yScale) {
     if (!this.props.displayXTicks) {
       return null;
     }
@@ -170,21 +158,16 @@ export const BubbleChart = React.createClass({
       const y = yScale.range()[0];
       const innerText = this.props.formatXTick(tick);
       return (
-          <text
-              key={index}
-              className="bubble-chart-tick"
-              x={x}
-              y={y}
-              dy="1.5em">
-            {innerText}
-          </text>
+        <text key={index} className="bubble-chart-tick" x={x} y={y} dy="1.5em">
+          {innerText}
+        </text>
       );
     });
 
     return <g>{ticks}</g>;
   },
 
-  renderYTicks (yTicks, xScale, yScale) {
+  renderYTicks(yTicks, xScale, yScale) {
     if (!this.props.displayYTicks) {
       return null;
     }
@@ -194,40 +177,44 @@ export const BubbleChart = React.createClass({
       const y = yScale(tick);
       const innerText = this.props.formatYTick(tick);
       return (
-          <text
-              key={index}
-              className="bubble-chart-tick bubble-chart-tick-y"
-              x={x}
-              y={y}
-              dx="-0.5em"
-              dy="0.3em">
-            {innerText}
-          </text>
+        <text
+          key={index}
+          className="bubble-chart-tick bubble-chart-tick-y"
+          x={x}
+          y={y}
+          dx="-0.5em"
+          dy="0.3em"
+        >
+          {innerText}
+        </text>
       );
     });
 
     return <g>{ticks}</g>;
   },
 
-  render () {
+  render() {
     if (!this.state.width || !this.state.height) {
-      return <div/>;
+      return <div />;
     }
 
     const availableWidth = this.state.width - this.props.padding[1] - this.props.padding[3];
     const availableHeight = this.state.height - this.props.padding[0] - this.props.padding[2];
 
-    const xScale = d3.scale.linear()
-        .domain([0, d3.max(this.props.items, d => d.x)])
-        .range([0, availableWidth])
-        .nice();
-    const yScale = d3.scale.linear()
-        .domain([0, d3.max(this.props.items, d => d.y)])
-        .range([availableHeight, 0])
-        .nice();
-    const sizeScale = d3.scale.linear()
-        .domain([0, d3.max(this.props.items, d => d.size)])
-        .range(this.props.sizeRange);
+    const xScale = d3.scale
+      .linear()
+      .domain([0, d3.max(this.props.items, d => d.x)])
+      .range([0, availableWidth])
+      .nice();
+    const yScale = d3.scale
+      .linear()
+      .domain([0, d3.max(this.props.items, d => d.y)])
+      .range([availableHeight, 0])
+      .nice();
+    const sizeScale = d3.scale
+      .linear()
+      .domain([0, d3.max(this.props.items, d => d.size)])
+      .range(this.props.sizeRange);
 
     const xScaleOriginal = xScale.copy();
     const yScaleOriginal = yScale.copy();
@@ -235,31 +222,33 @@ export const BubbleChart = React.createClass({
     xScale.range(this.getXRange(xScale, sizeScale, availableWidth));
     yScale.range(this.getYRange(yScale, sizeScale, availableHeight));
 
-    const bubbles = sortBy(this.props.items, b => -b.size)
-        .map((item, index) => {
-          return (
-              <Bubble
-                  key={index}
-                  link={item.link}
-                  tooltip={item.tooltip}
-                  x={xScale(item.x)} y={yScale(item.y)} r={sizeScale(item.size)}
-                  onClick={this.props.onBubbleClick}/>
-          );
-        });
+    const bubbles = sortBy(this.props.items, b => -b.size).map((item, index) => {
+      return (
+        <Bubble
+          key={index}
+          link={item.link}
+          tooltip={item.tooltip}
+          x={xScale(item.x)}
+          y={yScale(item.y)}
+          r={sizeScale(item.size)}
+          onClick={this.props.onBubbleClick}
+        />
+      );
+    });
 
     const xTicks = this.getTicks(xScale, this.props.formatXTick);
     const yTicks = this.getTicks(yScale, this.props.formatYTick);
 
     return (
-        <svg className="bubble-chart" width={this.state.width} height={this.state.height}>
-          <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
-            {this.renderXGrid(xTicks, xScale, yScale)}
-            {this.renderXTicks(xTicks, xScale, yScaleOriginal)}
-            {this.renderYGrid(yTicks, xScale, yScale)}
-            {this.renderYTicks(yTicks, xScaleOriginal, yScale)}
-            {bubbles}
-          </g>
-        </svg>
+      <svg className="bubble-chart" width={this.state.width} height={this.state.height}>
+        <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
+          {this.renderXGrid(xTicks, xScale, yScale)}
+          {this.renderXTicks(xTicks, xScale, yScaleOriginal)}
+          {this.renderYGrid(yTicks, xScale, yScale)}
+          {this.renderYTicks(yTicks, xScaleOriginal, yScale)}
+          {bubbles}
+        </g>
+      </svg>
     );
   }
 });
diff --git a/server/sonar-web/src/main/js/components/charts/donut-chart.js b/server/sonar-web/src/main/js/components/charts/donut-chart.js
index 87ca7acb775..f4217c72d40 100644
--- a/server/sonar-web/src/main/js/components/charts/donut-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/donut-chart.js
@@ -23,11 +23,12 @@ import { ResizeMixin } from './../mixins/resize-mixin';
 import { TooltipsMixin } from './../mixins/tooltips-mixin';
 
 const Sector = React.createClass({
-  render () {
-    const arc = d3.svg.arc()
-        .outerRadius(this.props.radius)
-        .innerRadius(this.props.radius - this.props.thickness);
-    return <path d={arc(this.props.data)} style={{ fill: this.props.fill }}/>;
+  render() {
+    const arc = d3.svg
+      .arc()
+      .outerRadius(this.props.radius)
+      .innerRadius(this.props.radius - this.props.thickness);
+    return <path d={arc(this.props.data)} style={{ fill: this.props.fill }} />;
   }
 });
 
@@ -38,17 +39,17 @@ export const DonutChart = React.createClass({
 
   mixins: [ResizeMixin, TooltipsMixin],
 
-  getDefaultProps () {
+  getDefaultProps() {
     return { thickness: 6, padding: [0, 0, 0, 0] };
   },
 
-  getInitialState () {
+  getInitialState() {
     return { width: this.props.width, height: this.props.height };
   },
 
-  render () {
+  render() {
     if (!this.state.width || !this.state.height) {
-      return <div/>;
+      return <div />;
     }
 
     const availableWidth = this.state.width - this.props.padding[1] - this.props.padding[3];
@@ -57,28 +58,27 @@ export const DonutChart = React.createClass({
     const size = Math.min(availableWidth, availableHeight);
     const radius = Math.floor(size / 2);
 
-    const pie = d3.layout.pie()
-        .sort(null)
-        .value(d => d.value);
+    const pie = d3.layout.pie().sort(null).value(d => d.value);
     const sectors = pie(this.props.data).map((d, i) => {
       return (
-          <Sector
-              key={i}
-              data={d}
-              radius={radius}
-              fill={this.props.data[i].fill}
-              thickness={this.props.thickness}/>
+        <Sector
+          key={i}
+          data={d}
+          radius={radius}
+          fill={this.props.data[i].fill}
+          thickness={this.props.thickness}
+        />
       );
     });
 
     return (
-        <svg className="donut-chart" width={this.state.width} height={this.state.height}>
-          <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
-            <g transform={`translate(${radius}, ${radius})`}>
-              {sectors}
-            </g>
+      <svg className="donut-chart" width={this.state.width} height={this.state.height}>
+        <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
+          <g transform={`translate(${radius}, ${radius})`}>
+            {sectors}
           </g>
-        </svg>
+        </g>
+      </svg>
     );
   }
 });
diff --git a/server/sonar-web/src/main/js/components/charts/histogram.js b/server/sonar-web/src/main/js/components/charts/histogram.js
index 7694412d957..a06dee0abb4 100644
--- a/server/sonar-web/src/main/js/components/charts/histogram.js
+++ b/server/sonar-web/src/main/js/components/charts/histogram.js
@@ -36,7 +36,7 @@ export const Histogram = React.createClass({
 
   mixins: [ResizeMixin, TooltipsMixin],
 
-  getDefaultProps () {
+  getDefaultProps() {
     return {
       xTicks: [],
       xValues: [],
@@ -45,15 +45,15 @@ export const Histogram = React.createClass({
     };
   },
 
-  getInitialState () {
+  getInitialState() {
     return { width: this.props.width, height: this.props.height };
   },
 
-  handleClick (point) {
+  handleClick(point) {
     this.props.onBarClick(point);
   },
 
-  renderTicks (xScale, yScale) {
+  renderTicks(xScale, yScale) {
     if (!this.props.yTicks.length) {
       return null;
     }
@@ -64,25 +64,26 @@ export const Histogram = React.createClass({
       const label = tick.label ? tick.label : tick;
       const tooltip = tick.tooltip ? tick.tooltip : null;
       return (
-          <text
-              key={index}
-              className="bar-chart-tick histogram-tick"
-              onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
-              style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
-              data-title={tooltip}
-              data-toggle={tooltip ? 'tooltip' : null}
-              x={x}
-              y={y}
-              dx="-1em"
-              dy="0.3em">
-            {label}
-          </text>
+        <text
+          key={index}
+          className="bar-chart-tick histogram-tick"
+          onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
+          style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+          data-title={tooltip}
+          data-toggle={tooltip ? 'tooltip' : null}
+          x={x}
+          y={y}
+          dx="-1em"
+          dy="0.3em"
+        >
+          {label}
+        </text>
       );
     });
     return <g>{ticks}</g>;
   },
 
-  renderValues (xScale, yScale) {
+  renderValues(xScale, yScale) {
     if (!this.props.yValues.length) {
       return null;
     }
@@ -91,65 +92,66 @@ export const Histogram = React.createClass({
       const x = xScale(point.x);
       const y = Math.round(yScale(point.y) + yScale.rangeBand() / 2 + this.props.barsHeight / 2);
       return (
-          <text
-              key={index}
-              onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
-              className="bar-chart-tick histogram-value"
-              style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
-              x={x}
-              y={y}
-              dx="1em"
-              dy="0.3em">
-            {value}
-          </text>
+        <text
+          key={index}
+          onClick={this.props.onBarClick && this.handleClick.bind(this, point)}
+          className="bar-chart-tick histogram-value"
+          style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+          x={x}
+          y={y}
+          dx="1em"
+          dy="0.3em"
+        >
+          {value}
+        </text>
       );
     });
     return <g>{ticks}</g>;
   },
 
-  renderBars (xScale, yScale) {
+  renderBars(xScale, yScale) {
     const bars = this.props.data.map((d, index) => {
       const x = Math.round(xScale(d.x)) + /* minimum bar width */ 1;
       const y = Math.round(yScale(d.y) + yScale.rangeBand() / 2);
       return (
-          <rect
-              key={index}
-              className="bar-chart-bar"
-              onClick={this.props.onBarClick && this.handleClick.bind(this, d)}
-              style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
-              x={0}
-              y={y}
-              width={x}
-              height={this.props.barsHeight}/>
+        <rect
+          key={index}
+          className="bar-chart-bar"
+          onClick={this.props.onBarClick && this.handleClick.bind(this, d)}
+          style={{ cursor: this.props.onBarClick ? 'pointer' : 'default' }}
+          x={0}
+          y={y}
+          width={x}
+          height={this.props.barsHeight}
+        />
       );
     });
     return <g>{bars}</g>;
   },
 
-  render () {
+  render() {
     if (!this.state.width || !this.state.height) {
-      return <div/>;
+      return <div />;
     }
 
     const availableWidth = this.state.width - this.props.padding[1] - this.props.padding[3];
     const availableHeight = this.state.height - this.props.padding[0] - this.props.padding[2];
 
     const maxX = d3.max(this.props.data, d => d.x);
-    const xScale = d3.scale.linear()
-        .domain([0, maxX])
-        .range([0, availableWidth]);
-    const yScale = d3.scale.ordinal()
-        .domain(this.props.data.map(d => d.y))
-        .rangeRoundBands([0, availableHeight]);
+    const xScale = d3.scale.linear().domain([0, maxX]).range([0, availableWidth]);
+    const yScale = d3.scale
+      .ordinal()
+      .domain(this.props.data.map(d => d.y))
+      .rangeRoundBands([0, availableHeight]);
 
     return (
-        <svg className="bar-chart" width={this.state.width} height={this.state.height}>
-          <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
-            {this.renderTicks(xScale, yScale)}
-            {this.renderValues(xScale, yScale)}
-            {this.renderBars(xScale, yScale)}
-          </g>
-        </svg>
+      <svg className="bar-chart" width={this.state.width} height={this.state.height}>
+        <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
+          {this.renderTicks(xScale, yScale)}
+          {this.renderValues(xScale, yScale)}
+          {this.renderBars(xScale, yScale)}
+        </g>
+      </svg>
     );
   }
 });
diff --git a/server/sonar-web/src/main/js/components/charts/line-chart.js b/server/sonar-web/src/main/js/components/charts/line-chart.js
index 70f33f7b864..804debc86ef 100644
--- a/server/sonar-web/src/main/js/components/charts/line-chart.js
+++ b/server/sonar-web/src/main/js/components/charts/line-chart.js
@@ -38,7 +38,7 @@ export const LineChart = React.createClass({
 
   mixins: [ResizeMixin, TooltipsMixin],
 
-  getDefaultProps () {
+  getDefaultProps() {
     return {
       displayBackdrop: true,
       displayPoints: true,
@@ -50,49 +50,43 @@ export const LineChart = React.createClass({
     };
   },
 
-  getInitialState () {
+  getInitialState() {
     return { width: this.props.width, height: this.props.height };
   },
 
-  renderBackdrop (xScale, yScale) {
+  renderBackdrop(xScale, yScale) {
     if (!this.props.displayBackdrop) {
       return null;
     }
 
-    const area = d3.svg.area()
-        .x(d => xScale(d.x))
-        .y0(yScale.range()[0])
-        .y1(d => yScale(d.y))
-        .interpolate(this.props.interpolate);
+    const area = d3.svg
+      .area()
+      .x(d => xScale(d.x))
+      .y0(yScale.range()[0])
+      .y1(d => yScale(d.y))
+      .interpolate(this.props.interpolate);
 
     let data = this.props.data;
     if (this.props.backdropConstraints) {
       const c = this.props.backdropConstraints;
       data = data.filter(d => c[0] <= d.x && d.x <= c[1]);
     }
-    return <path className="line-chart-backdrop" d={area(data)}/>;
+    return <path className="line-chart-backdrop" d={area(data)} />;
   },
 
-  renderPoints (xScale, yScale) {
+  renderPoints(xScale, yScale) {
     if (!this.props.displayPoints) {
       return null;
     }
     const points = this.props.data.map((point, index) => {
       const x = xScale(point.x);
       const y = yScale(point.y);
-      return (
-          <circle
-              key={index}
-              className="line-chart-point"
-              r="3"
-              cx={x}
-              cy={y}/>
-      );
+      return <circle key={index} className="line-chart-point" r="3" cx={x} cy={y} />;
     });
     return <g>{points}</g>;
   },
 
-  renderVerticalGrid (xScale, yScale) {
+  renderVerticalGrid(xScale, yScale) {
     if (!this.props.displayVerticalGrid) {
       return null;
     }
@@ -100,20 +94,12 @@ export const LineChart = React.createClass({
       const x = xScale(point.x);
       const y1 = yScale.range()[0];
       const y2 = yScale(point.y);
-      return (
-          <line
-              key={index}
-              className="line-chart-grid"
-              x1={x}
-              x2={x}
-              y1={y1}
-              y2={y2}/>
-      );
+      return <line key={index} className="line-chart-grid" x1={x} x2={x} y1={y1} y2={y2} />;
     });
     return <g>{lines}</g>;
   },
 
-  renderXTicks (xScale, yScale) {
+  renderXTicks(xScale, yScale) {
     if (!this.props.xTicks.length) {
       return null;
     }
@@ -121,19 +107,12 @@ export const LineChart = React.createClass({
       const point = this.props.data[index];
       const x = xScale(point.x);
       const y = yScale.range()[0];
-      return (
-          <text
-              key={index}
-              className="line-chart-tick"
-              x={x}
-              y={y}
-              dy="1.5em">{tick}</text>
-      );
+      return <text key={index} className="line-chart-tick" x={x} y={y} dy="1.5em">{tick}</text>;
     });
     return <g>{ticks}</g>;
   },
 
-  renderXValues (xScale, yScale) {
+  renderXValues(xScale, yScale) {
     if (!this.props.xValues.length) {
       return null;
     }
@@ -141,41 +120,35 @@ export const LineChart = React.createClass({
       const point = this.props.data[index];
       const x = xScale(point.x);
       const y = yScale(point.y);
-      return (
-          <text
-              key={index}
-              className="line-chart-tick"
-              x={x}
-              y={y}
-              dy="-1em">{value}</text>
-      );
+      return <text key={index} className="line-chart-tick" x={x} y={y} dy="-1em">{value}</text>;
     });
     return <g>{ticks}</g>;
   },
 
-  renderLine (xScale, yScale) {
-    const p = d3.svg.line()
-        .x(d => xScale(d.x))
-        .y(d => yScale(d.y))
-        .interpolate(this.props.interpolate);
+  renderLine(xScale, yScale) {
+    const p = d3.svg
+      .line()
+      .x(d => xScale(d.x))
+      .y(d => yScale(d.y))
+      .interpolate(this.props.interpolate);
 
-    return <path className="line-chart-path" d={p(this.props.data)}/>;
+    return <path className="line-chart-path" d={p(this.props.data)} />;
   },
 
-  render () {
+  render() {
     if (!this.state.width || !this.state.height) {
-      return <div/>;
+      return <div />;
     }
 
     const availableWidth = this.state.width - this.props.padding[1] - this.props.padding[3];
     const availableHeight = this.state.height - this.props.padding[0] - this.props.padding[2];
 
     let maxY;
-    const xScale = d3.scale.linear()
-        .domain(d3.extent(this.props.data, d => d.x))
-        .range([0, availableWidth]);
-    const yScale = d3.scale.linear()
-        .range([availableHeight, 0]);
+    const xScale = d3.scale
+      .linear()
+      .domain(d3.extent(this.props.data, d => d.x))
+      .range([0, availableWidth]);
+    const yScale = d3.scale.linear().range([availableHeight, 0]);
 
     if (this.props.domain) {
       maxY = this.props.domain[1];
@@ -186,16 +159,16 @@ export const LineChart = React.createClass({
     }
 
     return (
-        <svg className="line-chart" width={this.state.width} height={this.state.height}>
-          <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
-            {this.renderVerticalGrid(xScale, yScale, maxY)}
-            {this.renderBackdrop(xScale, yScale)}
-            {this.renderLine(xScale, yScale)}
-            {this.renderPoints(xScale, yScale)}
-            {this.renderXTicks(xScale, yScale)}
-            {this.renderXValues(xScale, yScale)}
-          </g>
-        </svg>
+      <svg className="line-chart" width={this.state.width} height={this.state.height}>
+        <g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
+          {this.renderVerticalGrid(xScale, yScale, maxY)}
+          {this.renderBackdrop(xScale, yScale)}
+          {this.renderLine(xScale, yScale)}
+          {this.renderPoints(xScale, yScale)}
+          {this.renderXTicks(xScale, yScale)}
+          {this.renderXValues(xScale, yScale)}
+        </g>
+      </svg>
     );
   }
 });
diff --git a/server/sonar-web/src/main/js/components/charts/treemap-breadcrumbs.js b/server/sonar-web/src/main/js/components/charts/treemap-breadcrumbs.js
index 83f5ff5c3f3..d91207af777 100644
--- a/server/sonar-web/src/main/js/components/charts/treemap-breadcrumbs.js
+++ b/server/sonar-web/src/main/js/components/charts/treemap-breadcrumbs.js
@@ -22,48 +22,50 @@ import QualifierIcon from '../shared/qualifier-icon';
 
 export const TreemapBreadcrumbs = React.createClass({
   propTypes: {
-    breadcrumbs: React.PropTypes.arrayOf(React.PropTypes.shape({
-      key: React.PropTypes.string.isRequired,
-      name: React.PropTypes.string.isRequired,
-      qualifier: React.PropTypes.string.isRequired
-    }).isRequired).isRequired
+    breadcrumbs: React.PropTypes.arrayOf(
+      React.PropTypes.shape({
+        key: React.PropTypes.string.isRequired,
+        name: React.PropTypes.string.isRequired,
+        qualifier: React.PropTypes.string.isRequired
+      }).isRequired
+    ).isRequired
   },
 
-  handleItemClick (item, e) {
+  handleItemClick(item, e) {
     e.preventDefault();
     this.props.onRectangleClick(item);
   },
 
-  handleReset (e) {
+  handleReset(e) {
     e.preventDefault();
     this.props.onReset();
   },
 
-  renderHome () {
+  renderHome() {
     return (
-        <span className="treemap-breadcrumbs-item">
-          <a onClick={this.handleReset} className="icon-home" href="#"/>
-        </span>
+      <span className="treemap-breadcrumbs-item">
+        <a onClick={this.handleReset} className="icon-home" href="#" />
+      </span>
     );
   },
 
-  renderBreadcrumbsItems (b) {
+  renderBreadcrumbsItems(b) {
     return (
-        <span key={b.key} className="treemap-breadcrumbs-item" title={b.name}>
-          <i className="icon-chevron-right"/>
-          <QualifierIcon qualifier={b.qualifier}/>
-          <a onClick={this.handleItemClick.bind(this, b)} href="#">{b.name}</a>
-        </span>
+      <span key={b.key} className="treemap-breadcrumbs-item" title={b.name}>
+        <i className="icon-chevron-right" />
+        <QualifierIcon qualifier={b.qualifier} />
+        <a onClick={this.handleItemClick.bind(this, b)} href="#">{b.name}</a>
+      </span>
     );
   },
 
-  render () {
+  render() {
     const breadcrumbs = this.props.breadcrumbs.map(this.renderBreadcrumbsItems);
     return (
-        <div className="treemap-breadcrumbs">
-          {this.props.breadcrumbs.length ? this.renderHome() : null}
-          {breadcrumbs}
-        </div>
+      <div className="treemap-breadcrumbs">
+        {this.props.breadcrumbs.length ? this.renderHome() : null}
+        {breadcrumbs}
+      </div>
     );
   }
 });
diff --git a/server/sonar-web/src/main/js/components/charts/treemap.js b/server/sonar-web/src/main/js/components/charts/treemap.js
index 23a1590597c..2efbc0c29bb 100644
--- a/server/sonar-web/src/main/js/components/charts/treemap.js
+++ b/server/sonar-web/src/main/js/components/charts/treemap.js
@@ -24,12 +24,9 @@ import { ResizeMixin } from './../mixins/resize-mixin';
 import { TooltipsMixin } from './../mixins/tooltips-mixin';
 import { translate } from '../../helpers/l10n';
 
-const SIZE_SCALE = d3.scale.linear()
-    .domain([3, 15])
-    .range([11, 18])
-    .clamp(true);
+const SIZE_SCALE = d3.scale.linear().domain([3, 15]).range([11, 18]).clamp(true);
 
-function mostCommitPrefix (strings) {
+function mostCommitPrefix(strings) {
   const sortedStrings = strings.slice(0).sort();
   const firstString = sortedStrings[0];
   const firstStringLength = firstString.length;
@@ -55,7 +52,7 @@ export const TreemapRect = React.createClass({
     onClick: React.PropTypes.func
   },
 
-  renderLink () {
+  renderLink() {
     if (!this.props.link) {
       return null;
     }
@@ -65,16 +62,18 @@ export const TreemapRect = React.createClass({
     }
 
     return (
-        <a onClick={e => e.stopPropagation()}
-           className="treemap-link"
-           href={this.props.link}
-           style={{ fontSize: 12 }}>
-          <span className="icon-link"/>
-        </a>
+      <a
+        onClick={e => e.stopPropagation()}
+        className="treemap-link"
+        href={this.props.link}
+        style={{ fontSize: 12 }}
+      >
+        <span className="icon-link" />
+      </a>
     );
   },
 
-  render () {
+  render() {
     let tooltipAttrs = {};
     if (this.props.tooltip) {
       tooltipAttrs = {
@@ -95,17 +94,19 @@ export const TreemapRect = React.createClass({
     const isTextVisible = this.props.width >= 40 && this.props.height >= 40;
     /* eslint-disable jsx-a11y/onclick-has-focus, jsx-a11y/onclick-has-role */
     return (
+      <div
+        className="treemap-cell"
+        {...tooltipAttrs}
+        style={cellStyles}
+        onClick={this.props.onClick}
+      >
         <div
-            className="treemap-cell"
-            {...tooltipAttrs}
-            style={cellStyles}
-            onClick={this.props.onClick}>
-          <div
-              className="treemap-inner"
-              dangerouslySetInnerHTML={{ __html: this.props.label }}
-              style={{ maxWidth: this.props.width, visibility: isTextVisible ? 'visible' : 'hidden' }}/>
-          {this.renderLink()}
-        </div>
+          className="treemap-inner"
+          dangerouslySetInnerHTML={{ __html: this.props.label }}
+          style={{ maxWidth: this.props.width, visibility: isTextVisible ? 'visible' : 'hidden' }}
+        />
+        {this.renderLink()}
+      </div>
     );
   }
 });
@@ -119,22 +120,25 @@ export const Treemap = React.createClass({
 
   mixins: [ResizeMixin, TooltipsMixin],
 
-  getInitialState () {
+  getInitialState() {
     return { width: this.props.width, height: this.props.height };
   },
 
-  renderWhenNoData () {
+  renderWhenNoData() {
     return (
-        <div className="sonar-d3">
-          <div className="treemap-container" style={{ width: this.state.width, height: this.state.height }}>
-            {translate('no_data')}
-          </div>
-          <TreemapBreadcrumbs {...this.props}/>
+      <div className="sonar-d3">
+        <div
+          className="treemap-container"
+          style={{ width: this.state.width, height: this.state.height }}
+        >
+          {translate('no_data')}
         </div>
+        <TreemapBreadcrumbs {...this.props} />
+      </div>
     );
   },
 
-  render () {
+  render() {
     if (!this.state.width || !this.state.height) {
       return <div>&nbsp;</div>;
     }
@@ -143,15 +147,16 @@ export const Treemap = React.createClass({
       return this.renderWhenNoData();
     }
 
-    const treemap = d3.layout.treemap()
-        .round(true)
-        .value(d => d.size)
-        .sort((a, b) => a.value - b.value)
-        .size([this.state.width, this.state.height]);
+    const treemap = d3.layout
+      .treemap()
+      .round(true)
+      .value(d => d.size)
+      .sort((a, b) => a.value - b.value)
+      .size([this.state.width, this.state.height]);
     const nodes = treemap
-        .nodes({ children: this.props.items })
-        .filter(d => !d.children)
-        .filter(d => !!d.dx && !!d.dy);
+      .nodes({ children: this.props.items })
+      .filter(d => !d.children)
+      .filter(d => !!d.dx && !!d.dy);
 
     const prefix = mostCommitPrefix(this.props.items.map(item => item.label));
     const prefixLength = prefix.length;
@@ -159,30 +164,36 @@ export const Treemap = React.createClass({
     const rectangles = nodes.map(node => {
       const key = node.label;
       const label = prefixLength ? `${prefix}<br>${node.label.substr(prefixLength)}` : node.label;
-      const onClick = this.props.canBeClicked(node) ? () => this.props.onRectangleClick(node) : null;
+      const onClick = this.props.canBeClicked(node)
+        ? () => this.props.onRectangleClick(node)
+        : null;
       return (
-          <TreemapRect
-              key={key}
-              x={node.x}
-              y={node.y}
-              width={node.dx}
-              height={node.dy}
-              fill={node.color}
-              label={label}
-              prefix={prefix}
-              tooltip={node.tooltip}
-              link={node.link}
-              onClick={onClick}/>
+        <TreemapRect
+          key={key}
+          x={node.x}
+          y={node.y}
+          width={node.dx}
+          height={node.dy}
+          fill={node.color}
+          label={label}
+          prefix={prefix}
+          tooltip={node.tooltip}
+          link={node.link}
+          onClick={onClick}
+        />
       );
     });
 
     return (
-        <div className="sonar-d3">
-          <div className="treemap-container" style={{ width: this.state.width, height: this.state.height }}>
-            {rectangles}
-          </div>
-          <TreemapBreadcrumbs {...this.props}/>
+      <div className="sonar-d3">
+        <div
+          className="treemap-container"
+          style={{ width: this.state.width, height: this.state.height }}
+        >
+          {rectangles}
         </div>
+        <TreemapBreadcrumbs {...this.props} />
+      </div>
     );
   }
 });
diff --git a/server/sonar-web/src/main/js/components/charts/word-cloud.js b/server/sonar-web/src/main/js/components/charts/word-cloud.js
index bb7beaad8a6..b9fbaeb2959 100644
--- a/server/sonar-web/src/main/js/components/charts/word-cloud.js
+++ b/server/sonar-web/src/main/js/components/charts/word-cloud.js
@@ -30,7 +30,7 @@ export const Word = React.createClass({
     link: React.PropTypes.string.isRequired
   },
 
-  render () {
+  render() {
     let tooltipAttrs = {};
     if (this.props.tooltip) {
       tooltipAttrs = {
@@ -38,7 +38,11 @@ export const Word = React.createClass({
         'title': this.props.tooltip
       };
     }
-    return <a {...tooltipAttrs} style={{ fontSize: this.props.size }} href={this.props.link}>{this.props.text}</a>;
+    return (
+      <a {...tooltipAttrs} style={{ fontSize: this.props.size }} href={this.props.link}>
+        {this.props.text}
+      </a>
+    );
   }
 });
 
@@ -50,28 +54,32 @@ export const WordCloud = React.createClass({
 
   mixins: [TooltipsMixin],
 
-  getDefaultProps () {
+  getDefaultProps() {
     return {
       sizeRange: [10, 24]
     };
   },
 
-  render () {
+  render() {
     const len = this.props.items.length;
     const sortedItems = sortBy(this.props.items, (item, idx) => {
       const index = len - idx;
-      return (index % 2) * (len - index) + index / 2;
+      return index % 2 * (len - index) + index / 2;
     });
 
-    const sizeScale = d3.scale.linear()
-                      .domain([0, d3.max(this.props.items, d => d.size)])
-                      .range(this.props.sizeRange);
-    const words = sortedItems
-        .map((item, index) => <Word key={index}
-                                    text={item.text}
-                                    size={sizeScale(item.size)}
-                                    link={item.link}
-                                    tooltip={item.tooltip}/>);
+    const sizeScale = d3.scale
+      .linear()
+      .domain([0, d3.max(this.props.items, d => d.size)])
+      .range(this.props.sizeRange);
+    const words = sortedItems.map((item, index) => (
+      <Word
+        key={index}
+        text={item.text}
+        size={sizeScale(item.size)}
+        link={item.link}
+        tooltip={item.tooltip}
+      />
+    ));
     return <div className="word-cloud">{words}</div>;
   }
 });