SONAR-6331 ensure timeline Y tick

diff --git a/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js b/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
index fc61b1912ff1a768105f8a2c3d202e8ca1517630..2b3947c04a5d7dda385a54b5c4b8f152fe71b968 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import d3 from 'd3';
 import moment from 'moment';
 import React from 'react';
 
@@ -29,6 +30,9 @@ export const Timeline = React.createClass({
 
   renderHorizontalGrid (xScale, yScale) {
     let ticks = yScale.ticks(4);
+    if (!ticks.length) {
+      ticks.push(yScale.domain()[1]);
+    }
     let grid = ticks.map(tick => {
       let opts = {
         x: xScale.range()[0],
@@ -111,12 +115,12 @@ export const Timeline = React.createClass({
     let availableHeight = this.state.height - this.props.padding[0] - this.props.padding[2];
 
     let xScale = d3.time.scale()
-        .domain(d3.extent(this.props.data, d => d.x))
+        .domain(d3.extent(this.props.data, d => d.x || 0))
         .range([0, availableWidth])
         .clamp(true);
     let yScale = d3.scale.linear()
         .range([availableHeight, 0])
-        .domain([0, d3.max(this.props.data, d => d.y)])
+        .domain([0, d3.max(this.props.data, d => d.y || 0)])
         .nice();
 
     return <svg className="line-chart" width={this.state.width} height={this.state.height}>

diff --git a/server/sonar-web/tests/apps/overview/components/timeline-chart-test.js b/server/sonar-web/tests/apps/overview/components/timeline-chart-test.js
new file mode 100644 (file)
index 0000000..82d7d66
--- /dev/null
+++ b/server/sonar-web/tests/apps/overview/components/timeline-chart-test.js
@@ -0,0 +1,39 @@
+import { expect } from 'chai';
+import React from 'react';
+import TestUtils from 'react-addons-test-utils';
+
+import { Timeline } from '../../../../src/main/js/apps/overview/components/timeline-chart';
+
+
+const ZERO_DATA = [
+  { x: new Date(2015, 0, 1), y: 0 },
+  { x: new Date(2015, 0, 2), y: 0 },
+  { x: new Date(2015, 0, 3), y: 0 },
+  { x: new Date(2015, 0, 4), y: 0 }
+];
+
+const NULL_DATA = [
+  { x: new Date(2015, 0, 1), y: null },
+  { x: new Date(2015, 0, 2) },
+  { x: new Date(2015, 0, 3), y: null },
+  { x: new Date(2015, 0, 4) }
+];
+
+const FORMAT = (tick) => tick;
+
+
+describe('TimelineChart', function () {
+  it('should display the zero Y tick if all values are zero', function () {
+    let timeline = <Timeline width={100} height={100} data={ZERO_DATA} events={[]} formatYTick={FORMAT}/>;
+    let output = TestUtils.renderIntoDocument(timeline);
+    let tick = TestUtils.findRenderedDOMComponentWithClass(output, 'line-chart-tick-x');
+    expect(tick.textContent).to.equal('0');
+  });
+
+  it('should display the zero Y tick if all values are undefined', function () {
+    let timeline = <Timeline width={100} height={100} data={NULL_DATA} events={[]} formatYTick={FORMAT}/>;
+    let output = TestUtils.renderIntoDocument(timeline);
+    let tick = TestUtils.findRenderedDOMComponentWithClass(output, 'line-chart-tick-x');
+    expect(tick.textContent).to.equal('0');
+  });
+});